:root{
  --turkus:#119A93;
  --turkus-ciemny:#0d7972;
  --turkus-jasny:#e3f3f2;
  --musztarda:#DAC961;
  --musztarda-ciemna:#b89f3f;
  --pomarancz:#E8873A;
  --pomarancz-tlo:#fdf0e4;
  --tlo:#F8F5EE;
  --bialy:#FFFFFF;
  --grafit:#263238;
  --szary:#5f6b6e;
  --obramowanie:#dfe6e2;
  --blad:#b3261e;
  --blad-tlo:#fbeceb;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--tlo);
  color:var(--grafit);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--turkus-ciemny);}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:3px solid var(--pomarancz);
  outline-offset:2px;
}

.naglowek{
  background:linear-gradient(135deg,var(--bialy) 0%,var(--turkus-jasny) 100%);
  padding:24px 0;
}
.naglowek-gorna{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:28px;
  flex-wrap:wrap;
}
.naglowek-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}
.naglowek-logo img{
  display:block;
  width:280px;
  height:auto;
}
.naglowek-marka{
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:var(--grafit);
  text-align:left;
}
.naglowek-strefa-nazwa{
  font-size:1.75rem;
  font-weight:700;
  color:var(--turkus-ciemny);
  line-height:1.2;
}
.naglowek-podtytul{
  font-size:1.05rem;
  color:var(--grafit);
  opacity:.85;
  margin-top:4px;
}
.naglowek-linia{
  height:2px;
  background:var(--turkus);
}

.kontener{max-width:900px;margin:0 auto;padding:0 16px;}

main.kontener{padding-top:22px;padding-bottom:40px;}

.ekran{margin-bottom:20px;}
.ukryty{display:none !important;}

.karta{
  background:var(--bialy);
  border-radius:14px;
  box-shadow:0 2px 10px rgba(38,54,56,.08);
  padding:22px;
}
.karta h2{margin-top:0;color:var(--turkus-ciemny);font-size:1.25rem;}
.karta h3{color:var(--turkus-ciemny);font-size:1.1rem;}

.karta-powitalna{text-align:center;}
.karta-powitalna p{color:var(--szary);max-width:560px;margin:12px auto 20px;}
.karta-powitalna .lista-info{
  text-align:left;
  max-width:480px;
  margin:0 auto 22px;
  color:var(--grafit);
  font-size:.94rem;
  padding-left:20px;
}
.karta-powitalna .lista-info li{margin-bottom:6px;}

.btn{
  border-radius:9px;
  padding:12px 22px;
  font-size:.97rem;
  font-weight:700;
  cursor:pointer;
  border:2px solid transparent;
  font-family:inherit;
  display:inline-block;
  text-decoration:none;
  text-align:center;
}
.btn-glowny{background:var(--turkus);color:var(--bialy);border-color:var(--turkus);}
.btn-glowny:hover{background:var(--turkus-ciemny);border-color:var(--turkus-ciemny);}
.btn-glowny:disabled{
  background:var(--obramowanie);
  border-color:var(--obramowanie);
  color:var(--szary);
  cursor:not-allowed;
}
.btn-wtorny{background:var(--bialy);color:var(--turkus-ciemny);border-color:var(--turkus);}
.btn-wtorny:hover{background:var(--turkus-jasny);}

.przyciski-akcji{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;justify-content:center;}

/* ---- Ekran quizu ---- */
.quiz-pasek-postepu-wrapper{margin-bottom:16px;}
.quiz-info-gorna{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;font-size:.9rem;color:var(--szary);font-weight:600;
}
.etykieta-kategorii{
  background:var(--musztarda);color:#4a3f10;font-weight:700;
  border-radius:20px;padding:3px 12px;font-size:.75rem;
}
.pasek-postepu{
  width:100%;height:10px;border-radius:6px;background:var(--obramowanie);overflow:hidden;
}
.pasek-postepu-wypelnienie{
  height:100%;background:linear-gradient(135deg,var(--turkus) 0%,var(--turkus-ciemny) 100%);
  border-radius:6px;transition:width .25s ease;width:0%;
}

.karta-pytanie h2{font-size:1.15rem;margin-bottom:18px;line-height:1.4;}

.lista-odpowiedzi{display:flex;flex-direction:column;gap:10px;margin-bottom:6px;}
.odpowiedz-opcja{
  display:flex;align-items:flex-start;gap:10px;
  border:1.5px solid var(--obramowanie);
  border-radius:10px;
  padding:12px 14px;
  cursor:pointer;
  background:var(--bialy);
  transition:background .15s,border-color .15s;
}
.odpowiedz-opcja:hover{background:var(--turkus-jasny);border-color:var(--turkus);}
.odpowiedz-opcja input[type="radio"]{
  margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--turkus);
}
.odpowiedz-opcja .tresc-odpowiedzi{font-size:.96rem;}

.odpowiedz-opcja.zatwierdzone{cursor:default;}
.odpowiedz-opcja.zatwierdzone:hover{background:var(--bialy);border-color:var(--obramowanie);}
.odpowiedz-opcja.poprawna{
  background:var(--turkus-jasny);border-color:var(--turkus-ciemny);
}
.odpowiedz-opcja.poprawna:hover{background:var(--turkus-jasny);}
.odpowiedz-opcja.bledna{
  background:var(--blad-tlo);border-color:var(--blad);
}
.odpowiedz-opcja.bledna:hover{background:var(--blad-tlo);}

.blok-wyniku-odpowiedzi{margin-top:18px;}
.komunikat-poprawnosci{
  border-radius:10px;padding:12px 14px;font-weight:700;margin-bottom:12px;font-size:.96rem;
}
.komunikat-poprawnosci.sukces{background:var(--turkus-jasny);color:var(--turkus-ciemny);border-left:4px solid var(--turkus-ciemny);}
.komunikat-poprawnosci.blad{background:var(--blad-tlo);color:var(--blad);border-left:4px solid var(--blad);}

.wyjasnienie-box{
  background:var(--tlo);border-radius:8px;padding:14px 16px;border:1px solid var(--obramowanie);
}
.wyjasnienie-box h3{margin:0 0 6px;font-size:.95rem;}
.wyjasnienie-box p{margin:0 0 8px;font-size:.92rem;color:var(--grafit);}
.podstawa-prawna{font-size:.85rem;color:var(--szary);margin:0 !important;}
.podstawa-prawna a{margin-left:4px;font-weight:600;}

/* ---- Ekran wyniku ---- */
.karta-wynik-podsumowanie{text-align:center;}
.wynik-liczby{
  display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin:18px 0;
}
.wynik-punkty,.wynik-procent{
  background:linear-gradient(135deg,var(--turkus) 0%,var(--turkus-ciemny) 100%);
  color:var(--bialy);border-radius:12px;padding:16px 26px;font-size:1.6rem;font-weight:700;min-width:140px;
}
.wynik-procent{background:var(--pomarancz);color:#4a3f10;}
.wynik-diagnoza{
  max-width:560px;margin:0 auto;color:var(--grafit);font-size:1rem;background:var(--tlo);
  border-radius:8px;padding:14px 16px;border:1px solid var(--obramowanie);
}

.karta-cta{margin-top:20px;text-align:center;background:var(--pomarancz-tlo);border:2px solid var(--pomarancz);}
.karta-cta h3{color:#a85a1c;margin-top:0;}
.karta-cta p{color:var(--grafit);max-width:560px;margin:8px auto 18px;}

.stopka{
  text-align:center;padding:24px 16px 36px;color:var(--szary);font-size:.85rem;
  border-top:1px solid var(--obramowanie);margin-top:10px;max-width:900px;margin-left:auto;margin-right:auto;
}

/* ---- Responsywność mobilna ---- */
@media (max-width:600px){
  .naglowek{padding:18px 0;}
  .naglowek-gorna{flex-direction:column;align-items:center;text-align:center;gap:12px;}
  .naglowek-marka{align-items:center;text-align:center;}
  .naglowek-strefa-nazwa{font-size:1.3rem;}
  .naglowek-podtytul{font-size:.9rem;}
  .naglowek-logo img{width:190px;}
  .karta{padding:16px;border-radius:12px;}
  .wynik-punkty,.wynik-procent{font-size:1.3rem;padding:14px 18px;min-width:120px;}
  .przyciski-akcji{flex-direction:column;}
  .przyciski-akcji .btn{width:100%;}
  .quiz-info-gorna{font-size:.82rem;}
}