:root {
  --quiz-ink: #24362f;
  --quiz-muted: #69756d;
  --quiz-paper: #f8f1e3;
  --quiz-line: rgba(55, 72, 63, .18);
  --quiz-green: #355f4d;
  --quiz-red: #9f3e32;
  --quiz-gold: #9c7934;
}

body[data-page^="test"],
body[data-page="certificate-verify"] {
  color: var(--quiz-ink);
  background:
    radial-gradient(circle at 85% 10%, rgba(155, 122, 59, .1), transparent 25rem),
    #f5efe2;
}

.quiz-catalog-main,
.quiz-detail-main,
.quiz-result-main,
.certificate-verify-main {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 22px 0 72px;
}

.quiz-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--quiz-line);
}

.quiz-tabs button {
  position: relative;
  min-height: 48px;
  border: 0;
  color: var(--quiz-muted);
  background: transparent;
  font: 600 16px/1.2 inherit;
}

.quiz-tabs button.active { color: var(--quiz-green); }
.quiz-tabs button.active::after {
  position: absolute;
  bottom: -1px;
  left: 24%;
  width: 52%;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--quiz-red);
  content: "";
}

.quiz-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 22px 0 10px;
}

.quiz-filters label { display: grid; gap: 5px; }
.quiz-filters span { color: var(--quiz-muted); font-size: 12px; }
.quiz-filters select {
  min-width: 0;
  height: 42px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--quiz-line);
  border-radius: 6px;
  color: var(--quiz-ink);
  background: rgba(255, 253, 247, .72);
}

.quiz-list-summary {
  margin: 13px 0;
  color: var(--quiz-muted);
  font-size: 13px;
}

.quiz-paper-list,
.quiz-record-list {
  border-top: 1px solid var(--quiz-line);
}

.quiz-paper,
.quiz-record {
  border-bottom: 1px solid var(--quiz-line);
}

.quiz-record { padding: 24px 2px; }

.quiz-paper-link {
  display: block;
  padding: 24px 2px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

.quiz-paper-link:hover { background: rgba(53, 95, 77, .035); }
.quiz-paper-link:focus-visible {
  outline: 2px solid var(--quiz-green);
  outline-offset: 3px;
}

.quiz-paper h2,
.quiz-record h2 {
  margin: 10px 0 8px;
  font: 700 21px/1.4 "Noto Serif SC", "Songti SC", serif;
}

.quiz-paper-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

.quiz-paper-meta span {
  padding: 3px 8px;
  border: 1px solid rgba(53, 95, 77, .22);
  border-radius: 99px;
  color: var(--quiz-green);
  font-size: 12px;
}

.quiz-paper-meta span.vip { border-color: rgba(156, 121, 52, .35); color: #795b20; }
.quiz-paper-meta span.member { border-color: rgba(66, 96, 132, .3); color: #425f80; }
.quiz-paper-description,
.quiz-paper-facts,
.quiz-record p { margin: 7px 0; color: var(--quiz-muted); line-height: 1.75; }
.quiz-paper footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  font-size: 13px;
}

.quiz-primary-link,
.quiz-secondary-link,
.quiz-start-button,
.quiz-certificate-claim button,
.quiz-certificate-preview button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--quiz-green);
  border-radius: 6px;
  color: #fff;
  background: var(--quiz-green);
  text-decoration: none;
}

.quiz-secondary-link {
  color: var(--quiz-green);
  background: transparent;
}

.quiz-record {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
}
.quiz-record h2, .quiz-record p { grid-column: 1; }
.quiz-record strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--quiz-red);
  font: 700 25px/1 serif;
}
.quiz-record a { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }

.quiz-state {
  padding: 72px 20px;
  text-align: center;
}
.quiz-state > span {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border: 1px solid rgba(159, 62, 50, .36);
  border-radius: 50%;
  place-items: center;
  color: var(--quiz-red);
  font: 700 27px/1 serif;
}
.quiz-state h2 { margin: 0 0 8px; font: 700 22px/1.4 serif; }
.quiz-state p { color: var(--quiz-muted); }
.quiz-state button { min-height: 40px; padding: 0 16px; }

.quiz-detail-main { max-width: 680px; }
.quiz-detail-kicker {
  margin: 22px 0 9px;
  color: var(--quiz-red);
  font-size: 13px;
  letter-spacing: .1em;
}
.quiz-detail-main article > h2 {
  margin: 0;
  font: 700 30px/1.35 "Noto Serif SC", "Songti SC", serif;
}
.quiz-detail-description { color: var(--quiz-muted); line-height: 1.9; }
.quiz-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 28px 0;
  border-top: 1px solid var(--quiz-line);
  border-left: 1px solid var(--quiz-line);
}
.quiz-rule-grid div {
  padding: 16px 8px;
  border-right: 1px solid var(--quiz-line);
  border-bottom: 1px solid var(--quiz-line);
  text-align: center;
}
.quiz-rule-grid dt { color: var(--quiz-muted); font-size: 12px; }
.quiz-rule-grid dd { margin: 6px 0 0; font-weight: 700; }
.quiz-detail-note {
  padding: 16px 18px;
  border-left: 3px solid var(--quiz-gold);
  background: rgba(156, 121, 52, .08);
}
.quiz-detail-note p, .quiz-access-message { margin: 6px 0; color: var(--quiz-muted); }
.quiz-start-button { width: 100%; min-height: 50px; margin-top: 16px; font-weight: 700; }
.quiz-detail-main > article > .quiz-secondary-link { margin-top: 12px; width: 100%; }

.quiz-attempt-header {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: env(safe-area-inset-top) 16px 0;
  border-bottom: 1px solid var(--quiz-line);
  background: rgba(248, 241, 227, .94);
}
.quiz-attempt-header > a { color: var(--quiz-ink); font-size: 29px; text-align: center; text-decoration: none; }
.quiz-attempt-header h1 { overflow: hidden; margin: 0; font: 700 16px/1.3 serif; text-overflow: ellipsis; white-space: nowrap; }
.quiz-attempt-header p { display: flex; gap: 12px; margin: 4px 0 0; color: var(--quiz-muted); font-size: 12px; }
.quiz-attempt-header time { font-variant-numeric: tabular-nums; font-weight: 700; }
.quiz-attempt-header time.urgent { color: var(--quiz-red); }
.quiz-attempt-main { display: flex; flex-direction: column; width: min(100%, 720px); min-height: calc(100dvh - 68px); margin: auto; }
.quiz-progress { height: 3px; background: rgba(53, 95, 77, .12); }
.quiz-progress span { display: block; height: 100%; background: var(--quiz-red); transition: width .2s ease; }
.quiz-question-stage { flex: 1; padding: 26px 20px 120px; }
.quiz-question-header > p { margin: 0 0 12px; color: var(--quiz-red); font-size: 13px; }
.quiz-question-header h2 { margin: 0 0 28px; font: 700 23px/1.75 "Noto Serif SC", "Songti SC", serif; }
.quiz-question-header blockquote {
  margin: 0 0 24px;
  padding: 17px;
  border: 1px solid var(--quiz-line);
  border-left: 3px solid var(--quiz-green);
  background: rgba(255,255,255,.26);
  line-height: 1.85;
}
.quiz-question-header blockquote strong { display: block; margin-bottom: 6px; }
.quiz-question-header blockquote p { margin: 0; white-space: pre-wrap; }
.quiz-options { display: grid; gap: 12px; }
.quiz-option {
  display: grid;
  grid-template-columns: auto 36px 1fr;
  align-items: center;
  min-height: 58px;
  padding: 8px 14px;
  border: 1px solid var(--quiz-line);
  border-radius: 7px;
  background: rgba(255,255,255,.35);
}
.quiz-option:has(input:checked) { border-color: var(--quiz-green); box-shadow: inset 3px 0 var(--quiz-green); }
.quiz-option input { width: 18px; height: 18px; margin: 0 12px 0 0; accent-color: var(--quiz-green); }
.quiz-option b { color: var(--quiz-green); font-family: serif; }
.quiz-option span { line-height: 1.6; }
.quiz-fill-blanks { display: grid; gap: 16px; }
.quiz-fill-blanks label { display: grid; gap: 6px; color: var(--quiz-muted); font-size: 13px; }
.quiz-fill-blanks input {
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--quiz-line);
  border-radius: 6px;
  color: var(--quiz-ink);
  background: rgba(255,255,255,.5);
  font-size: 17px;
}
.quiz-feedback { margin-top: 24px; padding: 16px; border-left: 3px solid var(--quiz-gold); line-height: 1.7; background: rgba(156,121,52,.08); }
.quiz-feedback.correct { border-color: var(--quiz-green); }
.quiz-feedback.incorrect { border-color: var(--quiz-red); }
.quiz-question-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  max-width: 720px;
  margin: auto;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--quiz-line);
  background: rgba(248, 241, 227, .96);
}
.quiz-question-nav button { min-height: 46px; border: 1px solid var(--quiz-line); border-radius: 6px; color: var(--quiz-ink); background: transparent; }
.quiz-question-nav button.primary { color: white; background: var(--quiz-green); }
.quiz-question-nav button:disabled { opacity: .4; }
.quiz-dialog {
  width: min(92vw, 520px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--quiz-ink);
  background: var(--quiz-paper);
}
.quiz-dialog::backdrop { background: rgba(22, 28, 25, .48); }
.quiz-dialog form { padding: 20px; }
.quiz-dialog header, .quiz-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quiz-dialog header h2 { margin: 0; font: 700 20px/1.3 serif; }
.quiz-dialog header button { border: 0; background: transparent; font-size: 24px; }
.quiz-dialog footer { margin-top: 20px; }
.quiz-dialog footer button { min-height: 42px; padding: 0 15px; border: 1px solid var(--quiz-line); border-radius: 5px; }
.quiz-dialog footer .primary { color: #fff; background: var(--quiz-green); }
.quiz-dialog footer .danger { color: #fff; background: var(--quiz-red); }
.quiz-answer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.quiz-answer-grid button { aspect-ratio: 1; border: 1px solid var(--quiz-line); border-radius: 50%; background: transparent; }
.quiz-answer-grid button.answered { color: #fff; background: var(--quiz-green); }
.quiz-answer-grid button.current { outline: 2px solid var(--quiz-red); outline-offset: 2px; }

.quiz-score-seal {
  width: 230px;
  height: 230px;
  margin: 16px auto 28px;
  border: 2px solid var(--quiz-red);
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
}
.quiz-score-seal p, .quiz-score-seal span { margin: 3px; color: var(--quiz-red); }
.quiz-score-seal strong { color: var(--quiz-ink); font: 700 72px/1 serif; }
.quiz-score-seal small { font-size: 18px; }
.quiz-result-facts { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--quiz-line); }
.quiz-result-facts div { padding: 15px; text-align: center; }
.quiz-result-facts dt { color: var(--quiz-muted); font-size: 12px; }
.quiz-result-facts dd { margin: 5px 0 0; font-weight: 700; }
.quiz-certificate-claim { margin: 30px 0; padding: 24px; border: 1px solid rgba(156,121,52,.4); background: rgba(156,121,52,.07); }
.quiz-certificate-claim p { margin: 0; color: var(--quiz-gold); }
.quiz-certificate-claim h2 { margin: 5px 0 18px; font-family: serif; }
.quiz-certificate-claim form { display: flex; gap: 8px; }
.quiz-certificate-claim input { min-width: 0; flex: 1; height: 44px; padding: 0 12px; border: 1px solid var(--quiz-line); background: rgba(255,255,255,.55); }
.quiz-certificate-preview { margin: 30px 0; }
.quiz-certificate-preview canvas { display: block; width: min(100%, 420px); height: auto; margin: auto; box-shadow: 0 10px 30px rgba(48,43,33,.16); }
.quiz-certificate-preview > div { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }
.quiz-certificate-preview a { display: inline-flex; align-items: center; color: var(--quiz-green); }
.quiz-section-heading { margin: 42px 0 10px; }
.quiz-section-heading p { margin: 0; color: var(--quiz-red); font-size: 12px; }
.quiz-section-heading h2 { margin: 5px 0; font: 700 24px/1.4 serif; }
.quiz-review-item { padding: 22px 0; border-top: 1px solid var(--quiz-line); }
.quiz-review-item header { display: flex; justify-content: space-between; gap: 14px; }
.quiz-review-item h3 { margin: 0; font: 700 17px/1.7 serif; }
.quiz-review-item header strong { flex: none; color: var(--quiz-red); }
.quiz-review-item.correct header strong { color: var(--quiz-green); }
.quiz-review-item p { margin: 10px 0 0; line-height: 1.7; }
.quiz-review-item blockquote { margin: 12px 0 0; padding: 14px; border-left: 3px solid var(--quiz-gold); background: rgba(237,228,208,.45); }
.quiz-review-item blockquote strong { display: block; margin-bottom: 6px; }
.quiz-review-item blockquote p { margin: 0; white-space: pre-wrap; }
.quiz-review-explanation { color: var(--quiz-muted); }

.certificate-verification {
  position: relative;
  overflow: hidden;
  margin: 18px auto;
  padding: 58px 28px;
  border: 2px solid var(--quiz-red);
  outline: 1px solid rgba(159,62,50,.4);
  outline-offset: -10px;
  text-align: center;
  background: rgba(255,253,247,.4);
}
.certificate-status { color: var(--quiz-green); font-weight: 700; }
.certificate-verification.revoked .certificate-status { color: var(--quiz-red); }
.certificate-mark { display: grid; width: 82px; height: 82px; margin: 25px auto; border-radius: 50%; place-items: center; color: #fff; background: var(--quiz-red); font: 700 38px/1 serif; }
.certificate-verification h2 { margin: 15px 0; font: 700 36px/1.3 serif; }
.certificate-verification dl { display: grid; gap: 12px; margin-top: 30px; }
.certificate-verification dl div { display: grid; grid-template-columns: 85px 1fr; padding-top: 12px; border-top: 1px solid var(--quiz-line); text-align: left; }
.certificate-verification dt { color: var(--quiz-muted); }
.certificate-verification dd { margin: 0; overflow-wrap: anywhere; }

.lesson-quiz-attempt .quiz-question-header p:first-child { display: none; }
.lesson-quiz-attempt [data-attempt-timer] { display: none !important; }
.lesson-quiz-result .quiz-score-seal { background: linear-gradient(145deg,#f5ead3,#ead6ad); }
.lesson-quiz-result-actions { display: flex; gap: 10px; margin: 18px 0 4px; }
.lesson-quiz-result-actions a, .lesson-quiz-result-actions button {
  display: grid; min-height: 44px; flex: 1; place-items: center;
  border: 1px solid var(--quiz-line); border-radius: 8px;
  color: var(--quiz-ink); background: transparent; font-size: 13px; text-decoration: none;
}
.lesson-quiz-result-actions button { border-color: var(--quiz-red); color: #fff; background: var(--quiz-red); }

@media (max-width: 430px) {
  .quiz-catalog-main, .quiz-detail-main, .quiz-result-main, .certificate-verify-main { width: min(100% - 24px, 760px); }
  .quiz-filters { gap: 7px; }
  .quiz-filters select { padding-left: 7px; font-size: 13px; }
  .quiz-rule-grid { grid-template-columns: repeat(2,1fr); }
  .quiz-question-stage { padding-inline: 16px; }
  .quiz-question-header h2 { font-size: 21px; }
  .quiz-certificate-claim form { display: grid; }
  .quiz-result-facts div { padding-inline: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-progress span { transition: none; }
}