:root {
  --bg: #eef7fb;
  --card: #ffffff;
  --text: #17202a;
  --muted: #5f6f7a;
  --border: #d6e4eb;
  --correct: #d8f3dc;
  --correct-border: #52b788;
  --incorrect: #ffe0e0;
  --incorrect-border: #b23a48;
  --button: #ffffff;
  --button-hover: #f4fbff;
  --accent: #2b7c9f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.app {
  width: min(920px, 100%);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 42px);
  box-shadow: 0 16px 40px rgba(31, 68, 86, 0.10);
}

.hidden {
  display: none;
}

.menu-title {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.05;
}

.menu-subtitle {
  margin: 12px 0 30px;
  color: var(--muted);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
}

.quiz-menu {
  display: grid;
  gap: 16px;
}

.quiz-card-btn {
  border: 2px solid var(--border);
  background: var(--button);
  border-radius: 24px;
  padding: 24px;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.quiz-card-btn:hover {
  background: var(--button-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.quiz-card-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 850;
}

.top-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.quiz-title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.1;
}

.quiz-meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: 1rem;
}

.question-count {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
  padding-top: 7px;
}

.progress-shell {
  width: 100%;
  height: 12px;
  background: #e7f0f5;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 32px;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 220ms ease;
}

.question {
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  line-height: 1.2;
  font-weight: 750;
  margin: 0 0 28px;
}

.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.option {
  border: 2px solid var(--border);
  background: var(--button);
  border-radius: 22px;
  padding: 24px;
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(1.25rem, 3vw, 2rem);
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.option:hover:not(:disabled) {
  background: var(--button-hover);
  transform: translateY(-2px);
}

.option:disabled {
  cursor: default;
}

.option-label {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #e8f4f8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex: 0 0 auto;
  color: var(--accent);
}

.option.correct {
  background: var(--correct);
  border-color: var(--correct-border);
}

.option.selected-incorrect {
  background: var(--incorrect);
  border-color: var(--incorrect-border);
}

.feedback {
  margin-top: 24px;
  border-radius: 22px;
  padding: 20px 22px;
  border: 2px solid var(--border);
  background: #f8fcfe;
  display: none;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.35;
}

.feedback.show {
  display: block;
}

.feedback-title {
  font-weight: 850;
  margin-bottom: 6px;
  font-size: 1.15em;
}

.actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
}

.next-btn,
.restart-btn,
.secondary-btn {
  border: 0;
  border-radius: 18px;
  padding: 18px 26px;
  font-size: 1.2rem;
  font-weight: 750;
  cursor: pointer;
}

.next-btn,
.restart-btn {
  background: var(--accent);
  color: white;
  display: none;
}

.next-btn.show,
.restart-btn.show {
  display: inline-block;
}

.secondary-btn {
  background: #e8f4f8;
  color: var(--accent);
}

.summary-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 0 0 12px;
}

.summary-score {
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--muted);
  margin-bottom: 28px;
}

.review-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.review-item {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px;
  background: #fbfdff;
  font-size: 1.05rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.review-item.review-correct {
  background: rgba(216, 243, 220, 0.72);
  border-color: var(--correct-border);
}

.review-item.review-not-quite {
  background: rgba(255, 224, 224, 0.72);
  border-color: #b23a48;
}

.review-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  line-height: 1;
  margin-top: 1px;
}

.review-icon.correct-icon {
  background: rgba(82, 183, 136, 0.16);
  color: #1b7f4d;
}

.review-icon.not-quite-icon {
  background: rgba(178, 58, 72, 0.12);
  color: #7f1d1d;
  font-size: 1.45rem;
}

.katex {
  font-size: 1.08em;
}

.question .katex {
  font-size: 1.05em;
}

.option .katex {
  font-size: 1.08em;
}

@media (max-width: 700px) {
  body {
    align-items: flex-start;
    padding: 12px;
  }

  .card {
    border-radius: 22px;
  }

  .top-row {
    flex-direction: column;
  }

  .options {
    grid-template-columns: 1fr;
  }

  .option {
    min-height: 84px;
  }

  .actions {
    flex-direction: column-reverse;
  }

  .next-btn,
  .restart-btn,
  .secondary-btn {
    width: 100%;
  }
}

.results-link { float: right; }
.controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; margin: 28px 0; }
.control-group { text-align: left; }
.control-group label { display: block; font-weight: 800; margin-bottom: 8px; }
select, .refresh-btn { width: 100%; border: 2px solid var(--border); border-radius: 16px; padding: 14px 16px; font-size: 1.05rem; background: white; }
.refresh-btn { background: var(--accent); color: white; cursor: pointer; font-weight: 800; border-color: var(--accent); align-self: end; }
.results-summary { color: var(--muted); font-size: 1.05rem; margin-bottom: 18px; }
.question-result { border: 2px solid var(--border); border-radius: 24px; padding: 22px; margin: 18px 0; background: #fbfdff; }
.question-result h2 { margin: 0 0 16px; font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
.option-row { display: grid; grid-template-columns: 56px 1fr 70px 80px; gap: 12px; align-items: center; margin: 10px 0; }
.option-row.correct-option { font-weight: 850; }
.option-badge { width: 44px; height: 44px; border-radius: 14px; background: #e8f4f8; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.option-bar-shell { height: 18px; background: #e7f0f5; border-radius: 999px; overflow: hidden; }
.option-bar { height: 100%; width: 0%; background: var(--incorrect-border); border-radius: 999px; }
.correct-option .option-bar { background: var(--correct-border); }
.percentage, .count { text-align: right; font-variant-numeric: tabular-nums; }
.empty-state { padding: 24px; border: 2px dashed var(--border); border-radius: 20px; color: var(--muted); font-size: 1.15rem; }
@media (max-width: 700px) {
  .controls { grid-template-columns: 1fr; }
  .option-row { grid-template-columns: 48px 1fr 60px; }
  .count { display: none; }
  .results-link { float: none; }
}