[hidden] { display: none !important; }

.exam-app {
  max-width: 1100px;
  overflow-x: clip;
  padding-bottom: 36px;
}

.exam-app .site-switch { flex-wrap: wrap; max-width: 100%; }

.exam-header { margin: 18px 0; color: #f7eed4; }
.exam-header h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.exam-lead, .fine, .key-help { line-height: 1.5; }
.exam-lead { margin: 0; max-width: 42rem; }

.exam-sheet {
  min-width: 0;
  max-width: 100%;
  color: #2a1a12;
  background: #fff6df;
  border: 4px solid #d8b56a;
  border-radius: 22px;
  padding: clamp(14px, 2vw, 22px);
  box-shadow: 0 10px 0 rgba(31, 61, 43, 0.16);
}

.exam-sheet button,
.exam-sheet input,
.exam-sheet select,
.exam-sheet textarea { color: #2a1a12; }

.mock-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff9e9;
  background: #c44b2b;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.exam-setup { display: grid; gap: 14px; margin-top: 12px; }
.exam-setup fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.exam-setup legend { font-weight: 800; margin-bottom: 6px; }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.setup-grid label, .choice-btn { font-weight: 700; }
.setup-grid select,
.choice-btn input[type="number"] {
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 10px;
  border: 2px solid #d8b56a;
  border-radius: 12px;
  background: #fff;
}

.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  padding: 6px 12px;
  border: 2px solid #d8b56a;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-weight: 800;
}
.choice-btn input[type="radio"] { width: 18px; height: 18px; accent-color: #1f3d2b; }
.choice-btn input[type="number"] { width: 5.2rem; margin: 0; }
.choice-btn.active { background: #1f3d2b; color: #f4e7c8; border-color: #1f3d2b; }
.choice-btn.active input { color: #2a1a12; }

.type-list {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 2px solid rgba(122, 74, 40, 0.2);
  border-radius: 14px;
  background: #fffaf0;
}
.type-list label { display: flex; gap: 8px; align-items: flex-start; min-height: 44px; overflow-wrap: anywhere; }
.type-list input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: #1f3d2b; }

.rule-list { margin: 0; padding-left: 1.2rem; line-height: 1.5; }
.rule-list li { margin: 4px 0; }

.start-btn, .submit-btn, .next-btn, .ghost-btn {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 14px;
  font: inherit;
  font-weight: 800;
}
.start-btn, .submit-btn, .next-btn {
  border: 0;
  color: #fff9e9;
  background: #c44b2b;
}
.start-btn { justify-self: start; }
.ghost-btn {
  border: 2px solid #d8b56a;
  background: #fff;
  color: #1f3d2b;
}
button:disabled { opacity: 0.45; cursor: not-allowed; }

.bridge-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 2px solid #b9432b;
  border-radius: 12px;
  color: #872e1e;
  background: #fff0e9;
}
.bridge-bar p { flex: 1 1 180px; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.bridge-bar button { color: #1f3d2b; background: #fff; }

.pool-note, .storage-notice {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.pool-note, .storage-notice[data-kind="error"] {
  color: #872e1e;
  background: #fff0e9;
  border: 2px solid #b9432b;
}
.storage-notice[data-kind="info"] {
  color: #1f3d2b;
  background: #fff6d7;
  border: 2px solid #d8b56a;
}

.exam-shell { display: grid; gap: 14px; min-width: 0; }
.exam-statusbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 3px solid #d8b56a;
  border-radius: 18px;
  color: #fff9e9;
  background: #294733;
}
.timer-box { display: flex; align-items: baseline; gap: 8px; }
.timer-box strong { font-size: 1.35rem; letter-spacing: 0.04em; }
.timer-box strong.urgent { color: #ffd274; }
.exam-statusbar > p { flex: 1 1 140px; margin: 0; }
.status-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.status-actions .ghost-btn { color: #1f3d2b; }

.exam-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.answer-panel h2, .exam-results h2, .exam-results h3 { margin: 0 0 10px; }
.answer-card { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.card-number {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 0 2px;
  border: 2px solid #ccb77e;
  border-radius: 10px;
  background: #fff;
  color: #1f3d2b;
  font-weight: 800;
}
.card-number.current { outline: 3px solid #e3a12b; }
.card-number.answered { background: #e7f3df; }
.card-number .mark-flag { display: block; color: #c58a13; font-size: 0.75rem; line-height: 1; }
.card-key { margin: 8px 0 0; font-size: 0.85rem; }
.key-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 4px;
  border-radius: 50%;
  background: #7cae85;
  vertical-align: middle;
}

.exam-main { min-width: 0; }
.question-meta { margin: 0 0 8px; font-weight: 800; overflow-wrap: anywhere; }
.exam-links, .review-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.exam-links small, .review-links small { color: #655848; }
.train-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff9e9 !important;
  background: #c44b2b;
  font-weight: 800;
  text-decoration: none;
}
.source-link { color: #7a4a28; font-weight: 800; overflow-wrap: anywhere; }
.question-prompt, .passage, .option-label, .explanation, .review-item {
  overflow-wrap: anywhere;
  max-width: 100%;
}
.question-prompt { margin-top: 8px; }
.exam-figure, .figure-wrap { max-width: 100%; overflow: auto; }
.exam-figure svg, .exam-figure img, .figure-wrap svg, .figure-wrap img { max-width: 100%; height: auto; }
.option-list { grid-template-columns: 1fr; }
.option-label { width: 100%; text-align: left; font: inherit; }
.option-label.selected { border-color: #e3a12b; background: #fff3bf; }
.option-label.correct { border-color: #2e7d45; background: #dcefdc; }
.option-label.wrong { border-color: #b8432c; background: #f8d9d1; }
.option-label:disabled { cursor: default; }

.exam-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.exam-controls button { width: 100%; padding-inline: 8px; }
.explanation { margin-top: 12px; }
.explanation ol { margin: 8px 0 0; padding-left: 1.2rem; }

.result-summary {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 16px;
  color: #fff9e9;
  background: #1f3d2b;
}
.result-summary strong { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.result-disclaimer { color: #655848; }
.review-list { display: grid; gap: 12px; }
.review-item { min-width: 0; padding: 12px; border: 2px solid #d6c49b; border-radius: 14px; background: #fffaf0; }
.review-item.correct { border-color: #7cae85; }
.review-item.wrong { border-color: #d18b79; }
.review-item.blank { border-color: #cbbb96; }
.review-item h3 { margin: 0 0 8px; font-size: 1.05rem; }

.confirm-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 32, 24, 0.45);
}
.confirm-card {
  width: min(100%, 420px);
  padding: 18px;
  border-radius: 18px;
  color: #2a1a12;
  background: #fff6df;
  border: 4px solid #d8b56a;
}
.confirm-card p { margin: 0 0 14px; line-height: 1.5; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

@media (max-width: 900px) {
  .exam-layout { grid-template-columns: 1fr; }
  .answer-card { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .exam-statusbar { position: static; }
}

@media (max-width: 640px) {
  .setup-grid, .exam-controls { grid-template-columns: 1fr 1fr; }
  .answer-card { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .status-actions, .status-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}