/* Styl og贸lny strony */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

/* A4 wrapper */
#pageContainer {
  width:210mm; height:297mm;
  padding:10mm 20mm 20mm 20mm;
  box-sizing:border-box;
  border:1px solid #000;
  margin:20px auto;
  display:flex; flex-direction:column;
  overflow: hidden; /* 馃敀 Przycinanie nadmiaru zawarto艣ci */
}
#headerContainer {
  text-align:center;
  font-size:24px; font-weight:bold;
  margin-bottom:5mm;
  border-bottom:1px solid #000;
}
#testContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 5mm 5mm;
}

/* Kontrolki */
.control-group {
  margin:10px auto;
  display:flex; align-items:center;
  gap:10px; width:fit-content;
}
fieldset.control-group {
  border:1px solid #ccc; padding:10px 15px;
  margin-bottom:15px;
}
.option-group { margin-bottom:8px; }

/* Suwaki */
input[type=range] {
  width:200px; height:8px;
  -webkit-appearance:none;
  background:#ddd; border-radius:4px; outline:none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:16px; height:16px;
  background:#0078D4; border-radius:50%;
  cursor:pointer;
}

/* Zadania */
.problem {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 45mm;
  padding: 2mm;
  padding-bottom: var(--write-zone, 8mm);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.problem::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px dashed #333;
}

.task-prefix {
  display: inline-block;
  width: 2ch;             /* tyle miejsca, by '1.' i '10.' mia艂y wyr贸wnanie */
  margin-right: 1.0ch;
  font-size: 0.85em;      /* troch臋 mniejsza czcionka */
  font-weight: 300;
  color: #555;
  text-align: right;      /* kropka zawsze wyr贸wnana do prawej */
  line-height: 1;         /* dopasowanie do reszty wiersza */
}

/* grupa przycisk贸w w control鈥恎roup */
.range-group {
  margin-bottom: 1rem;
}
.range-group h4 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  color: #333;
  font-weight: 500;
}

/* uniwersalny styl przycisk贸w zakresu */
.range-btn {
  display: inline-block;
  margin: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: 1px solid #007bff;
  border-radius: 4px;
  background: #fff;
  color: #007bff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.range-btn:hover {
  background: #e9f5ff;
}
.range-btn.selected {
  background: #007bff;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.3);
}

/* opcjonalnie 鈥?wyr贸wnanie w flexie */
.control-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.range-group {
  flex: 1 1 200px;
}
.mixed-group {
  flex: 0 1 auto;
}

/* Przyciski */
#printBtn, #generateBtn {
  border:none; padding:8px 16px; cursor:pointer; font-size:16px;
}
#printBtn { background:#28a745; color:#fff; }
#generateBtn { background:#007bff; color:#fff; }
#printBtn:hover { background:#218838; }
#generateBtn:hover { background:#0056b3; }

#backButton {
    left: 20px;
    margin: 0 0 10px 20px;
    background-color: #ddd;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.1s;
    text-align: left;
    display: inline-block;
}

#backButton:hover {
    background-color: #0056b3;
    color: white;
}
#backButton:focus,
#backButton:active {
    outline: none;
    transform: scale(1.05);
    background-color: #007bff;
    color: white;
    font-weight: bold;
}

#backButtonContainer {
	position: sticky;
    top: 15px; /* odleg艂o艣膰 od g贸rnej kraw臋dzi podczas scrollowania */
    text-align: left;
	z-index: 1000; /* nad innymi elementami */
}

/* Druk */
@media print {
  #controls, #backButtonContainer { display:none!important; }
  body { margin:0; }
}

/* 1) domy?lnie odpowiedzi s? niewidoczne, ale zajmuj? miejsce */
.answer {
  display: inline-block;         /* rezerwuje szeroko?? równ? rzeczywistej d?ugo?ci odpowiedzi */
  visibility: hidden;            /* ukrywa tekst, ale zachowuje jego “szeroko??” */
  color: #d9534f;                /* trzyma czerwonawy, wyró?niaj?cy kolor */
  font-weight: bold;             /* pogrubiona czcionka */
  background: rgba(217,83,79,0.1); /* delikatne t?o dla podkre?lenia */
  padding: 0 2px;                /* drobny odst?p od tekstu */
  border-radius: 2px;
  transition: background 0.2s;
}

.answer.visible {
  visibility: visible;           /* pokazuj odpowied? */
  background: rgba(217,83,79,0.2); /* silniejsze t?o po ujawnieniu */
}

/* przycisk Poka?/Ukryj odpowiedzi */
#toggleAnswers {
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 16px;
  background: #007bff;
  color: #fff;
  margin-left: 10px;
  transition: background 0.2s, box-shadow 0.1s, transform 0.1s;
}

#toggleAnswers:hover {
  background: #0056b3;
}

#toggleAnswers.active {
  background: #0056b3;
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.2);
  transform: translateY(2px);
}