/* Zmieniaj kolory tutaj. Nie trzeba szukać ich w całym pliku. */
:root {
  --accent: #2648bd;
  --ink: #18243a;
  --paper: #f5f3ed;
  --line: #b9c3d2;
}

/* Padding i border mieszczą się w podanej szerokości. */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.6 system-ui, sans-serif;
}
/* min() zostawia margines także na wąskim ekranie. */
main { width: min(100% - 2rem, 48rem); margin: 3rem auto; }
.intro { margin-bottom: 2rem; }
.eyebrow { color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .12em; }
h1 { font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1.05; margin: .7rem 0; letter-spacing: -.04em; }
h1 span { color: var(--accent); }
.tip, footer { color: #526079; font-size: .9rem; }
form { display: grid; gap: 1.5rem; }
.question { min-width: 0; margin: 0; padding: 1.2rem; background: white; border: 1px solid var(--line); border-radius: 1rem; }
legend { max-width: 100%; padding: 0 .45rem; font-weight: 750; font-size: 1.1rem; }
.answers { display: grid; gap: .6rem; }
/* Cały label jest klikalny; radio pozostaje natywnym kontrolkiem. */
.answer { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--line); border-radius: .55rem; cursor: pointer; }
.answer:hover { background: #f0f3fc; }
input[type="radio"] { margin: .35rem 0 0; flex-shrink: 0; accent-color: var(--accent); }
/* Wyraźna obwódka pokazuje pozycję podczas obsługi klawiaturą. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.answer:focus-within { background: #f0f3fc; }
.feedback { min-height: 1.6em; margin: .8rem 0 0; font-weight: 650; }
/* Kolor uzupełnia komunikat tekstowy. */
.question[data-state="correct"] { border-color: #167249; }
.question[data-state="correct"] .feedback { color: #12623e; }
.question[data-state="wrong"] { border-color: #ab2c39; }
.question[data-state="wrong"] .feedback { color: #9b2431; }
.question[data-state="empty"] { border-color: #8b5c0e; }
.question[data-state="empty"] .feedback { color: #755009; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
button { font: inherit; font-weight: 650; padding: .8rem 1.1rem; color: white; background: var(--accent); border: 1px solid var(--accent); border-radius: .6rem; cursor: pointer; }
button:hover { filter: brightness(.92); }
button.secondary { color: var(--accent); background: white; }
.result { padding: 1rem; background: #e8edff; border-radius: .65rem; font-weight: 650; }
footer { margin-top: 2rem; }