/* 陪诊-30 · 通用样式 · 移动优先 */
:root {
  --ink: #171a21;
  --muted: #5d6472;
  --line: #e4e8f0;
  --brand: #1b365d;
  --brand-soft: rgba(27,54,93,.08);
  --ok: #1a7f4e;
  --bad: #b42318;
  --bg: #f7f8fa;
  --card: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'PingFang SC','Microsoft YaHei',ui-sans-serif,system-ui,-apple-system,sans-serif;
  color: var(--ink); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }

/* 顶栏 */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.brand-mark {
  display: inline-flex; width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-size: 16px;
}
.quiet-link { color: var(--muted); font-size: 14px; }

/* 首页 */
.home-main { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
.eyebrow { font-size: 12px; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin: 0 0 10px; }
.home-intro h1 { font-size: clamp(30px,6vw,44px); line-height: 1.15; margin: 0 0 14px; }
.home-lede { color: var(--muted); font-size: 16px; margin: 0 0 28px; max-width: 560px; }
.identity-form { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 24px; }
.identity-form label { display: block; font-weight: 600; margin-bottom: 10px; }
.identity-row { display: flex; gap: 10px; }
.identity-row input {
  flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; outline: none;
}
.identity-row input:focus { border-color: var(--brand); }
.field-help { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.field-error { font-size: 13px; color: var(--bad); margin: 8px 0 0; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px;
  border: 1px solid transparent; border-radius: 8px; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.button-primary { background: var(--brand); color: #fff; }
.button-primary:hover { background: #24466f; }
.button-secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.button-quiet { background: transparent; color: var(--muted); border-color: transparent; }
.test-facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 4px 0 12px; }
.test-facts > div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; text-align: center; }
.test-facts strong { display: block; font-size: 22px; }
.test-facts span { font-size: 12px; color: var(--muted); }
.boundary-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.boundary-section h2 { font-size: 18px; margin: 0 0 8px; }
.boundary-section p { color: var(--muted); font-size: 14px; }
.notice { background: #fdf3e7; border: 1px solid #f0d9b8; border-radius: 10px; padding: 16px; color: #7a5a1e; }

/* 首页 · 为何参加（价值说明 · 期待感引导） */
.why-section { margin-top: 44px; padding: 30px 26px 28px; background: linear-gradient(180deg, #fbf8f2, #f4f0e6); border: 1px solid var(--line); border-radius: 20px; }
.why-section h2 { font-size: clamp(20px,4.4vw,26px); margin: 0 0 12px; }
.why-lead { font-size: 15.5px; line-height: 1.8; color: var(--ink); margin: 0 0 22px; max-width: 560px; }
.why-lead strong { color: var(--brand); }
.why-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 640px) { .why-cards { grid-template-columns: 1fr; } }
.why-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 14px; }
.why-card h3 { font-size: 15px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.why-card h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.why-card p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.7; }
.why-cta { font-family: var(--serif, Georgia, "Songti SC", serif); font-size: 18px; font-weight: 700; color: var(--brand); text-align: center; margin: 0 0 16px; }
.why-btn { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto; }
.rules-note { text-align: center; font-size: 12px; color: var(--muted); margin: 18px 0 0; }

/* 继续上次测评 */
.resume-box { background: #eef4ff; border: 1px solid #c9daf5; border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.resume-title { font-weight: 700; margin: 0 0 4px; }
.resume-desc { font-size: 13px; color: var(--muted); margin: 0 0 12px; }

/* 答题页 */
.quiz-main { max-width: 1000px; margin: 0 auto; padding: 18px 16px 60px; }
.quiz-topline { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.progress-copy { font-size: 14px; white-space: nowrap; }
.progress-answered { color: var(--muted); font-size: 12px; margin-left: 6px; }
.progress-track { flex: 1; height: 8px; accent-color: var(--brand); }
.quiz-runtime { display: flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; }
.save-state { color: var(--muted); }
.save-state.is-saving { color: #8a6d1a; }
.save-state.is-error { color: var(--bad); }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.timer.is-urgent { color: var(--bad); }
.timer.is-critical { color: var(--bad); font-weight: 800; animation: timerPulse 1s ease-in-out infinite; }
@keyframes timerPulse { 50% { opacity: .45; } }
.quiz-layout { display: grid; grid-template-columns: 1fr 250px; gap: 20px; align-items: start; }
@media (max-width: 820px) { .quiz-layout { grid-template-columns: 1fr; } .question-nav { display: none; } .question-nav.is-open { display: block; } }

.question-panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.question-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.question-meta span { background: var(--brand-soft); color: var(--brand); border-radius: 6px; padding: 3px 8px; font-weight: 600; }
.question-panel h1 { font-size: clamp(18px,2.6vw,24px); line-height: 1.4; margin: 0 0 8px; }
.question-instruction { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.choice-list { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.choice-option {
  display: flex; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.choice-option:hover { border-color: #b9c3d2; }
.choice-option input { position: absolute; opacity: 0; pointer-events: none; }
.choice-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice-key { font-weight: 700; color: var(--muted); min-width: 18px; }
.choice-code { font-weight: 700; color: var(--brand); min-width: 14px; }
.choice-text { flex: 1; }
.choice-check { width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 50%; margin-top: 3px; flex-shrink: 0; }
.choice-option:has(input:checked) .choice-check { background: var(--brand); border-color: var(--brand); }

.quiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.quiz-grid-trigger { display: none; }
@media (max-width: 820px) { .quiz-grid-trigger { display: inline-flex; } }

.question-nav { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.question-nav-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 12px; }
.question-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.question-number {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
  font-size: 13px; color: var(--muted);
}
.question-number.is-current { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.question-number.is-answered { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 700; }
.nav-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 12px; align-items: center; }
.quiz-hint { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.nav-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--line); }
.nav-legend .legend-current { background: var(--brand); }
.nav-legend .legend-answered { background: var(--brand-soft); }

.submit-dialog[hidden] { display: none; }
.submit-dialog {
  position: fixed; inset: 0; background: rgba(15,20,30,.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.submit-dialog-panel { background: #fff; border-radius: 16px; max-width: 420px; width: 100%; padding: 28px; }
.submit-dialog-eyebrow { font-size: 12px; color: var(--muted); letter-spacing: .1em; margin: 0 0 6px; text-transform: uppercase; }
.submit-dialog-panel h2 { margin: 0 0 10px; font-size: 22px; }
.submit-dialog-panel p { margin: 0 0 8px; }
.submit-dialog-note { font-size: 13px; color: var(--muted); }
.submit-dialog-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.submit-dialog-warn { background: #fdf3e7; border: 1px solid #f0d9b8; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #7a5a1e; }
.report-incomplete-note { background: #fdf3e7; border: 1px solid #f0d9b8; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #7a5a1e; margin: 12px auto 0; max-width: 560px; }

/* 保存报告（主动留存 · 仅本地） */
.report-save { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(180deg,#f4f8ff,#fff); border: 1px solid #c9daf5; border-radius: 14px; padding: 16px 18px; }
.report-save h2 { font-size: 16px; margin: 0 0 4px; }
.report-save p { font-size: 13px; color: var(--muted); margin: 0; }
.report-save-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* 打印：只留报告正文，展开全部证据链 */
@media print {
  body { background: #fff; }
  .site-header, .report-save, .matrix-filter, .no-print { display: none !important; }
  .report-main { max-width: 100%; padding: 0; }
  .report-hero, .report-section { box-shadow: none; border-color: #ccc; }
  .question-detail { break-inside: avoid; }
  .question-detail > :not(summary) { display: block !important; }
  .question-detail:not([open]) > :not(summary) { display: block !important; }
  .chart-box { height: auto; }
  canvas { max-width: 100%; }
}

/* 报告页 */
.report-main { max-width: 860px; margin: 0 auto; padding: 30px 20px 60px; }
.report-hero { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px; text-align: center; }
.report-hero h1 { font-size: 56px; margin: 4px 0; line-height: 1; }
.report-hero h1 small { font-size: 20px; color: var(--muted); font-weight: 400; }
.verdict-title { font-size: 20px; font-weight: 700; margin: 10px 0 6px; }
.verdict-desc { color: var(--muted); font-size: 14px; max-width: 560px; margin: 0 auto 18px; }
.report-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.report-stats > div { background: var(--bg); border-radius: 10px; padding: 12px; }
.report-stats strong { display: block; font-size: 17px; }
.report-stats span { font-size: 12px; color: var(--muted); }
.report-section { margin-top: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.report-section h2 { font-size: 18px; margin: 0 0 16px; }
.review-lede { font-size: 13px; color: var(--muted); margin: -8px 0 16px; }

/* 报告·对错统计条 + 筛选 + 错题徽标 */
.review-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.review-strip span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 14px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }
.review-strip b { font-variant-numeric: tabular-nums; }
.review-strip .rs-ok b { color: var(--ok); }
.review-strip .rs-no b { color: var(--bad); }
.review-strip .rs-na b { color: var(--muted); }
.matrix-filter { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.matrix-filter button { border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all .15s; }
.matrix-filter button:hover { border-color: var(--brand); color: var(--brand); }
.matrix-filter button.is-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.detail-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; align-self: flex-start; flex-shrink: 0; }
.detail-badge.is-correct { background: #e6f4ec; color: var(--ok); }
.detail-badge.is-wrong { background: var(--bad); color: #fff; font-weight: 700; }
.detail-badge.is-na { background: #eef1f5; color: var(--muted); }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-box { position: relative; background: var(--bg); border-radius: 12px; padding: 12px; height: 260px; }
.chart-box canvas { width: 100% !important; height: 100% !important; }
@media (max-width: 700px) { .chart-box { height: 230px; } }
.dim-bars { display: grid; gap: 10px; margin-top: 18px; }
.dim-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.dim-label { min-width: 90px; color: var(--ink); }
.dim-track { flex: 1; height: 10px; background: #eef1f5; border-radius: 6px; overflow: hidden; }
.dim-track i { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.dim-score { min-width: 52px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.question-detail-list { display: grid; gap: 8px; }
.question-detail { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.question-detail summary { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.question-detail summary::-webkit-details-marker { display: none; }
.detail-number { font-weight: 700; color: var(--muted); min-width: 34px; font-variant-numeric: tabular-nums; }
.detail-title { flex: 1; }
.detail-title small { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.detail-title strong { font-size: 14px; font-weight: 600; }
.detail-score { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; white-space: nowrap; }
.question-detail.is-wrong { border-color: #e8b4b0; background: #fffbfa; }
.question-detail.is-wrong summary { background: #fdf1ef; }
.question-detail.is-wrong .detail-score { color: var(--bad); font-weight: 700; }
.question-detail.is-correct { border-color: #b9dcc9; }
.question-detail-body { padding: 0 14px 14px; }
.detail-outcome { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; background: var(--bg); border-radius: 8px; padding: 10px; font-size: 13px; margin-bottom: 12px; }
.detail-outcome p { margin: 0; }
.detail-outcome span { display: block; font-size: 11px; color: var(--muted); }
.detail-outcome strong { font-size: 13px; }
.review-choice-list { display: grid; gap: 8px; }
.review-choice { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.review-choice.is-correct-choice { border-color: #b9dcc9; background: #f2faf5; }
.review-choice.is-wrong-choice { border-color: #f0d9d6; }
.review-choice-main { display: flex; gap: 8px; align-items: baseline; }
.review-choice-main strong { color: var(--brand); }
.review-choice-main em { font-style: normal; font-size: 11px; color: var(--ok); margin-left: auto; }
.review-choice.is-wrong-choice .review-choice-main em { color: var(--muted); }
.review-choice p { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.explanation-grid { display: grid; gap: 8px; margin: 12px 0; }
.explanation-grid article { background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.detail-label { font-size: 11px; color: var(--muted); letter-spacing: .05em; margin: 0 0 4px; }
.explanation-grid p:last-child { margin: 0; }
.misconception { background: #fdf3e7; border: 1px solid #f0d9b8; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.misconception span { font-weight: 700; color: #7a5a1e; margin-right: 6px; }
.sources { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.sources .detail-label { font-size: 11px; }
.steps { padding-left: 22px; }
.steps li { margin-bottom: 8px; font-size: 14px; }

/* 报告·短板分诊转化引导 */
.report-guide { border-color: #c9daf5; background: linear-gradient(180deg,#f4f8ff, #fff); }
.report-guide h2 { color: var(--brand); }
.guide-line { font-size: 14px; color: var(--muted); margin: -8px 0 16px; }
.guide-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; }
.guide-card { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fff; transition: border-color .15s; }
.guide-card:hover { border-color: var(--brand); }
.guide-card strong { display: block; font-size: 15px; margin-bottom: 6px; color: var(--brand); }
.guide-card span { font-size: 13px; color: var(--muted); }
.guide-plain { text-decoration: none; }
.guide-plain strong { color: var(--ink); }
.guide-dism { font-size: 12px; color: var(--muted); margin: 14px 0 0; }

.site-footer { max-width: 860px; margin: 0 auto; padding: 20px; font-size: 12px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }