:root {
  --canguro-orange: #e96b27;
  --canguro-dark: #25333d;
  --canguro-cream: #fff8ed;
  --canguro-yellow: #f5b733;
  --canguro-green: #137a50;
  --canguro-red: #b93832;
  --canguro-border: #e7dccb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canguro-cream);
  color: var(--canguro-dark);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

a { color: #9b4213; }

button, select, input { font: inherit; }

button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #174f78;
  outline-offset: 3px;
}

.page-header {
  background: linear-gradient(130deg, var(--canguro-orange), #f49a3f);
  color: #fff;
  padding: 28px 20px 34px;
}

.header-inner, .page-content { max-width: 1080px; margin: 0 auto; }

.brand-link { color: #fff; font-weight: 700; text-decoration: none; }
.brand-link:hover { color: #fff; text-decoration: underline; }
.page-header h1 { margin: 24px 0 4px; font-size: clamp(2rem, 5vw, 3.3rem); }
.page-header p { margin: 0; font-size: 1.1rem; max-width: 650px; }

.page-content { padding: 26px 18px 100px; }

.chooser, .feedback, .problem-card, .status-message {
  border: 1px solid var(--canguro-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(77, 55, 25, .08);
}

.chooser { padding: 24px; }
.chooser h2, .feedback h2 { margin-top: 0; }
.chooser-copy { margin-top: -8px; }

.chooser-fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-top: 20px; }
.field { display: grid; gap: 6px; min-width: 190px; font-weight: 700; }
.field select { min-height: 42px; border: 1px solid #aa9d8b; border-radius: 8px; padding: 8px; background: #fff; color: var(--canguro-dark); }

.button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 700;
  cursor: pointer;
}
.button-primary { background: var(--canguro-dark); color: #fff; }
.button-primary:hover { background: #142029; }
.button-secondary { background: #f1e5d4; color: var(--canguro-dark); }
.button[disabled] { cursor: not-allowed; opacity: .55; }

.availability { margin: 18px 0 0; padding: 11px 13px; border-radius: 8px; background: #f2f6ef; color: #285337; }
.availability.pending { background: #fff1d9; color: #7c4a0b; }

.status-message { margin-top: 20px; padding: 16px; }
.status-message.error { border-color: #e4aaa5; background: #fff3f2; color: #7b2420; }

.exam-shell { margin-top: 24px; }
.exam-topline { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.exam-topline h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); }
.exam-meta { color: #5d635f; }
.download-links { display: flex; flex-wrap: wrap; gap: 12px; }

.progress-panel { position: sticky; top: 0; z-index: 3; background: rgba(255, 248, 237, .96); padding: 12px 0; border-bottom: 1px solid var(--canguro-border); }
.progress-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.progress-text { font-weight: 700; }
.button-compact { padding: 9px 14px; white-space: nowrap; }
.progress-bar { height: 10px; overflow: hidden; border-radius: 99px; background: #e6ddd0; }
.progress-value { height: 100%; background: var(--canguro-green); transition: width .2s ease; }
.problem-jumps { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px 0; }
.jump-link { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid #bcae9c; border-radius: 50%; color: var(--canguro-dark); text-decoration: none; font-weight: 700; background: #fff; }
.jump-link.answered { border-color: var(--canguro-green); background: #e5f4ec; }
.jump-link.is-correct { border-color: var(--canguro-green); background: var(--canguro-green); color: #fff; }
.jump-link.is-wrong { border-color: var(--canguro-red); background: var(--canguro-red); color: #fff; }
.jump-link.is-omitted { border-color: #97711c; background: #f8dc93; }

.problems-list { display: grid; gap: 22px; }
.problem-card { padding: 22px; scroll-margin-top: 95px; }
.problem-card h3 { margin: 0; }
.problem-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.problem-points { margin: 0; color: #6d573d; font-weight: 700; white-space: nowrap; }
.problem-image { display: block; width: 100%; max-width: 760px; height: auto; margin: 18px auto; border-radius: 5px; }

.answers { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; }
.answer-option { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid #c8bbaa; border-radius: 8px; cursor: pointer; }
.answer-option:hover { border-color: var(--canguro-orange); background: #fff7ef; }
.answer-option input { width: 18px; height: 18px; accent-color: var(--canguro-orange); }
.answer-option.is-correct { border-color: var(--canguro-green); background: #e1f3e8; color: #135436; }
.answer-option.is-wrong { border-color: var(--canguro-red); background: #fbe3e1; color: #842622; }
.answer-option.is-selected-correct { box-shadow: inset 0 0 0 2px var(--canguro-green); }

.explanation { margin-top: 18px; border-top: 1px solid var(--canguro-border); padding-top: 14px; }
.explanation summary { cursor: pointer; font-weight: 700; color: #774117; }
.solution-image { display: block; max-width: 100%; height: auto; margin: 14px auto 0; }

.exam-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 28px 0; }
.feedback { margin: 24px 0; padding: 24px; }
.score { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; color: var(--canguro-orange); margin: 8px 0; }
.feedback-grid { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 10px; margin-top: 18px; }
.feedback-stat { border-radius: 8px; background: #f7eee2; padding: 12px; text-align: center; }
.feedback-stat strong { display: block; font-size: 1.5rem; }

.hidden { display: none !important; }

@media (max-width: 620px) {
  .page-header { padding: 20px 18px 26px; }
  .page-content { padding: 18px 12px 72px; }
  .chooser, .problem-card, .feedback { padding: 16px; border-radius: 10px; }
  .chooser-fields { display: grid; }
  .field { min-width: 0; }
  .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .answer-option:last-child { grid-column: 1 / -1; }
  .feedback-grid { grid-template-columns: 1fr; }
  .progress-header { align-items: flex-start; }
  .button-compact { padding: 8px 10px; font-size: .9rem; }
}