/* 求学少年 · 共享刷题界面 */
.quiz-main {
  max-width: 920px;
  margin: 0 auto;
  padding: .9rem 1.2rem 3rem;
}

.quiz-status,
.quiz-result,
.quiz-card {
  border: 1px solid var(--theme-border, #334155);
  background: var(--theme-surface, #1e293b);
  box-shadow: var(--theme-shadow, 0 14px 30px rgba(2, 6, 23, .28));
}

body[data-subject] .page-hero {
  padding-top: .9rem !important;
  padding-bottom: .85rem !important;
}
body[data-subject] .page-hero h1 { margin-bottom: .2rem !important; }
.quiz-back-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .5rem;
  color: #bae6fd !important;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
.quiz-back-link:hover { color: #fff !important; text-decoration: underline; }

.quiz-status {
  position: sticky;
  top: 58px;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, 180px) auto;
  align-items: center;
  gap: .85rem;
  border-radius: 12px;
  padding: .72rem .9rem;
  margin-bottom: 1rem;
}

.quiz-progress-label { color: var(--theme-muted, #94a3b8); font-size: .74rem; letter-spacing: .04em; }
.quiz-progress-score { color: var(--theme-text, #f1f5f9); font-weight: 800; font-size: .98rem; margin-top: 2px; }
.quiz-progress-bar { width: 100%; height: 7px; overflow: hidden; background: #0f172a; border-radius: 999px; }
.quiz-progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2dd4bf, #38bdf8); border-radius: inherit; transition: width .25s ease; }

.quiz-button {
  appearance: none;
  border: 1px solid rgba(125, 211, 252, .28);
  border-radius: 8px;
  background: rgba(56, 189, 248, .12);
  color: #e0f2fe;
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  padding: .52rem .9rem;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.quiz-button:hover { background: rgba(56, 189, 248, .22); border-color: rgba(125, 211, 252, .52); transform: translateY(-1px); }
.quiz-button:focus-visible,
.quiz-option:focus-visible { outline: 3px solid rgba(125, 211, 252, .52); outline-offset: 2px; }

.quiz-list { display: grid; gap: 1rem; }
.quiz-card { border-radius: 14px; overflow: hidden; }
.quiz-card-head { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--theme-border, #334155); background: rgba(15, 23, 42, .42); }
.quiz-number { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--primary, #2563eb); color: #fff; font-size: .78rem; font-weight: 800; }
.quiz-topic { color: var(--theme-muted, #94a3b8); font-size: .78rem; font-weight: 600; }
.quiz-card-body { padding: 1.05rem 1rem 1rem; }
.quiz-question { color: var(--theme-text, #f1f5f9); font-size: 1rem; font-weight: 700; line-height: 1.7; margin: 0 0 .9rem; }
.quiz-options { display: grid; gap: .55rem; }
.quiz-option { width: 100%; display: flex; align-items: flex-start; gap: .7rem; text-align: left; cursor: pointer; border: 1px solid var(--theme-border, #334155); border-radius: 10px; background: rgba(15, 23, 42, .38); color: var(--theme-text-soft, #cbd5e1); font: inherit; font-size: .9rem; line-height: 1.55; padding: .72rem .8rem; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.quiz-option:hover:not(:disabled) { border-color: rgba(125, 211, 252, .62); background: rgba(56, 189, 248, .1); transform: translateX(2px); }
.quiz-option:disabled { cursor: default; }
.quiz-option-letter { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 1px solid var(--theme-border-strong, #475569); border-radius: 50%; color: var(--theme-muted, #94a3b8); font-size: .75rem; font-weight: 800; }
.quiz-option.is-correct { border-color: rgba(45, 212, 191, .72); background: rgba(45, 212, 191, .13); color: #d1fae5; }
.quiz-option.is-correct .quiz-option-letter { background: #0f766e; border-color: #2dd4bf; color: #fff; }
.quiz-option.is-wrong { border-color: rgba(251, 113, 133, .72); background: rgba(251, 113, 133, .12); color: #ffe4e6; }
.quiz-option.is-wrong .quiz-option-letter { background: #be123c; border-color: #fb7185; color: #fff; }

.quiz-explanation { display: none; margin-top: .85rem; padding: .75rem .85rem; border-left: 3px solid #2dd4bf; border-radius: 0 8px 8px 0; background: rgba(45, 212, 191, .08); color: var(--theme-text-soft, #cbd5e1); font-size: .86rem; line-height: 1.65; }
.quiz-explanation.is-visible { display: block; }
.quiz-explanation strong { color: #99f6e4; }
.quiz-review-link { display: inline-flex; align-items: center; margin-top: .6rem; padding: .32rem .54rem; color: #d8f3ff; background: rgba(14, 116, 144, .28); border: 1px solid rgba(125, 211, 252, .42); border-radius: 7px; font-size: .8rem; font-weight: 700; text-decoration: none; }
.quiz-review-link:hover { color: #fff; background: rgba(14, 116, 144, .45); }

.quiz-result { display: none; border-radius: 14px; padding: 1.4rem; text-align: center; margin: 1rem 0; }
.quiz-result.is-visible { display: block; }
.quiz-result h2 { color: var(--theme-text, #f1f5f9); font-size: 1.3rem; margin: 0; }
.quiz-result-score { color: #7dd3fc; font-size: 2.45rem; font-weight: 900; line-height: 1.2; margin: .45rem 0; }
.quiz-result p { color: var(--theme-muted, #94a3b8); margin: 0 0 1rem; }
.quiz-result-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.quiz-result a { text-decoration: none; }

@media (max-width: 620px) {
  .quiz-main { padding: 1rem .85rem 2rem; }
  .quiz-status { top: 52px; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem .75rem; }
  .quiz-progress-bar { grid-column: 1 / -1; grid-row: 2; }
  .quiz-status .quiz-button { padding: .48rem .66rem; }
  .quiz-question { font-size: .95rem; }
}

@media print {
  .quiz-status, .quiz-result-actions, .quiz-option-letter { display: none; }
  .quiz-card { box-shadow: none; }
}
