/* PLIK GENEROWANY - nie edytuj ręcznie. */
/* Źródło: inline <style> w web/index.html. Generator: tools/build-setup-demo-css.mjs. */
/* Zmieniasz wygląd setupu w aplikacji? Ten plik przeliczy się sam przy `npm run build`. */
.setup-demo button {
      min-height: 48px;
      padding: 12px 24px;
      font-size: 1rem;
      border-radius: 8px;
      cursor: pointer;
      border: none;
      background: #2563eb;
      color: white;
      width: 100%;
      margin-top: 12px;
      font-weight: 500; }
.setup-demo button:active { opacity: 0.85; }
.setup-demo button:disabled {
      opacity: 0.5;
      cursor: default; }
@media (max-width: 767px) {
  .setup-demo #wiedza-level-toggle .toggle-btn {
        flex: 1;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 0.8rem;
        white-space: nowrap; }
}
.setup-demo .toggle-group {
      display: flex;
      gap: 8px;
      margin-bottom: 16px; }
.setup-demo .toggle-btn {
      flex: 1;
      background: #e5e7eb;
      color: #374151;
      border: 2px solid #e5e7eb;
      min-height: 44px;
      margin-top: 0; }
.setup-demo .toggle-btn.active {
      background: #2563eb;
      color: white;
      border-color: #2563eb; }
.setup-demo #mode-toggle .toggle-btn, .setup-demo #wiedza-mode-toggle .toggle-btn, .setup-demo #apl-mode-toggle .toggle-btn, .setup-demo .drill-scope-toggle .toggle-btn {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 3px; line-height: 1.15; padding: 9px 6px; min-height: 56px; }
.setup-demo #mode-toggle .toggle-btn small, .setup-demo #wiedza-mode-toggle .toggle-btn small, .setup-demo #apl-mode-toggle .toggle-btn small, .setup-demo .drill-scope-toggle .toggle-btn small {
      font-weight: 400; font-size: 0.64rem; opacity: 0.85; text-transform: none; letter-spacing: 0; }
@media (max-width: 767px) {
  .setup-demo #apl-pool-toggle { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; align-items: stretch; }
  .setup-demo #apl-pool-toggle .toggle-btn { flex: none; height: 100%; font-size: 0.85rem; padding: 8px 6px; min-height: 42px; line-height: 1.2; }
}
.setup-demo .setup-label {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #6b7280;
      margin-bottom: 8px;
      margin-top: 8px; }
.setup-demo .checkbox-label {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 0;
      cursor: pointer;
      font-size: 0.95rem; }
.setup-demo .checkbox-label.checkbox-locked { color: #c53030; }
.setup-demo .checkbox-label.checkbox-locked input[type="checkbox"] { cursor: not-allowed; }
.setup-demo .checkbox-label input[type="checkbox"] {
      width: 20px;
      height: 20px;
      min-width: 20px;
      cursor: pointer;
      flex-shrink: 0; }
@media (min-width: 480px) {
  .setup-demo button { width: auto; }
}
@media (min-width: 1024px) {
  .setup-demo .toggle-group { gap: 16px; }
  .setup-demo .toggle-btn { padding: 14px 24px; font-size: 1rem; }
  .setup-demo .checkbox-label { font-size: 1rem; padding: 16px 0; }
}
.setup-demo ">
  <!-- `data-promo-hours` wypełnia render (patrz refreshPromoSlot). Domyślne „wkrótce" jest prawdziwe
       samo z siebie, .setup-demo więc gdyby JS nie zdążył, .setup-demo zdanie się nie kłamie - a liczby nie da się tu wpisać, .setup-demo bo jest per osoba i zmienia się co godzinę. -->
  <div id="promo-exp">⏳ <strong>Twoje Premium wygasa <span data-promo-hours>wkrótce</span></strong>. <span class="promo-strip-link">Przedłuż</span> lub zgarnij dni za <button type="button" class="promo-strip-link promo-strip-link2" onclick="promoStripSecondary(event)">Udostępnienie posta</button></div>
  <div id="promo-pass">☕ <strong>Egzaminy próbne</strong>: Najtrudniejsze pytania i gorąca lista - w cenie kawy, .setup-demo 7 zł. <span class="promo-strip-link">Wykup</span></div>
  <div id="promo-drill">🔁 <strong>Wróć do dawnych pomyłek</strong> - powtórka ma teraz wariant z całą historią błędów. <span class="promo-strip-link">Otwórz powtórkę</span></div>
  <div id="promo-fb">🧠 <strong>Pytania, .setup-demo na których myli się najwięcej osób</strong> - zebrane w jednym miejscu. <span class="promo-strip-link">Zobacz listę</span></div>
  <div id="promo-ksap-fb">🧠 <strong>Przygotowujesz się do egzaminu na urzędnika mianowanego w 2027?</strong> <span class="promo-strip-link">Dołącz do grupy na Facebooku</span></div>
</div>
<!-- Wysokości paska NIE mierzymy. Jest stała (--ref-strip-h w CSS: 1 wiersz desktop / 2 mobile), .setup-demo bo pasek zawsze coś pokazuje i zawsze zajmuje tyle samo. Wcześniej stał tu skrypt liczący
     offsetHeight synchronicznie, .setup-demo czyli wymuszony reflow na starcie - zbędny, .setup-demo odkąd wysokość jest
     twarda, .setup-demo a zawartość przycinana do zarezerwowanej liczby wierszy. -->
<header id="global-header">
  <div id="header-context"></div>
  <div id="header-account"></div>
</header>
<div id="header-progress" style="display:none;"></div>
<!-- Access-ready gate: skeleton pokazywany ZAMIAST treści tier-zależnej APL, .setup-demo dopóki dostęp NIEznany (zimny start).
     Header/logo zostają. Znika (i renderuje się realna treść RAZ), .setup-demo gdy accessReady. Cache zwykle → sync-true → niewidoczny. -->
<div id="apl-skeleton" aria-hidden="true">
  <div class="apl-sk-bar lg" style="max-width:58%;"></div>
  <div class="apl-sk-bar progress"></div>
  <div class="apl-sk-bar" style="max-width:85%;"></div>
  <div class="apl-sk-bar" style="max-width:92%;"></div>
  <div class="apl-sk-bar" style="max-width:72%;"></div>
</div>
<!-- Sticky sellbox tieru — globalny (fixed), .setup-demo by pokazywał się też na ekranie pytania/summary (touchpoint), .setup-demo nie tylko na setupie -->
<div id="apl-tier-banner" class="apl-tier-banner"></div>

<!-- Tekst błędu wstrzykiwany przez JS (showBankError), .setup-demo żeby nie trafiał do surowego HTML czytanego przez crawlery/LLM. -->
<div id="error-banner"></div>

<!-- ==================== HOME ==================== -->
<div id="screen-home" class="screen">
  <h1 id="ksap-home-h1">Egzamin na urzędnika mianowanego</h1>
  <p class="subtitle">Bezpłatne pytania i testy z wyjaśnieniem do każdej odpowiedzi - wybierz część egzaminu</p>
  <!-- Trustscore pod tytułem, .setup-demo nie w trustboksie pod kaflami (2026-08-26). BEZ zdania o darmowej puli:
       podtytuł nad nim już mówi „Bezpłatne pytania i testy…". Treść wstawia initSocialProof(). -->
  <p class="hero-stats" id="hero-stats-home"></p>
  <!-- Waitlista edycji 2027. Zajął slot po survey-CTA (egzamin 2026 za nami, .setup-demo ankieta zdjęta) — ta sama
       klasa .home-cta, .setup-demo więc niebieskie pudełko jest bez nowej palety. Kto zostawi maila, .setup-demo nie widzi
       boxu więcej (localStorage). Decyzja o pokazaniu: KSAP_2027_SLOT.resolveSlot (ksap-2027-slot.js). -->
  <div id="home-2027-cta" class="home-cta home-cta-coral" style="display:none">
    <p class="home-2027-lead">📖 <strong>Jak wyglądał egzamin 2026?</strong></p>
    <p class="home-2027-sub">Ewelina zdawała go w lipcu, .setup-demo zdała 🙂 Dostaje teraz od Was wiele pytań o to, .setup-demo jak wyglądał i czy nasze testy odpowiadają prawdziwemu egzaminowi. W artykule poniżej opisała jak było - co się sprawdziło, .setup-demo czego nie przewidzieliśmy i co z tym robimy.</p>
    <a href="/egzamin-na-urzednika-mianowanego-relacja-2026" class="home-cta-btn">Przeczytaj</a>
  </div>
  <div id="fe-resume-banner" class="fe-resume" style="display:none"></div>
  <div class="part-grid">
    <div class="part-card" onclick="goSetup()" role="button" tabindex="0">
      <span class="part-eyebrow">Część I</span>
      <h3>Sprawdzian umiejętności</h3>
      <p>Test predyspozycji: analogie, .setup-demo wnioskowanie logiczne, .setup-demo analiza danych i figur.</p>
      <div class="part-meta"><span>8 typów zadań</span><span id="count-part-1"></span></div>
    </div>
    <div class="part-card" onclick="goSetupWiedza()" role="button" tabindex="0">
      <span class="part-eyebrow">Część II</span>
      <h3>Sprawdzian wiedzy</h3>
      <p>Wiedza z 6 dziedzin: prawo, .setup-demo sprawy społ.-ekonom., .setup-demo administracja, .setup-demo finanse, .setup-demo polityka zagr., .setup-demo organizacja.</p>
      <div class="part-meta"><span>6 dziedzin</span><span id="count-part-2"></span></div>
    </div>
  </div>
  <!-- Boks waitlisty 2027 stoi POD kaflami (2026-09-17, .setup-demo decyzja właściciela): kafle to powód, .setup-demo dla
       którego ktoś tu wchodzi, .setup-demo więc są pierwszą rzeczą po tytule. Koralowy boks relacji z egzaminu
       zostaje NAD nimi - to treść, .setup-demo która odpowiada na pytanie zadawane jeszcze przed wyborem części.
       W tym samym ruchu zeszły stąd przyciski: Historia sesji i Statystyki zjechały na OBA ekrany
       setupu (tak jak w APL, .setup-demo gdzie monitoring postępu siedzi przy konfiguracji sesji), .setup-demo a „O nas"
       zostało zdjęte - ta sama pozycja jest w menu konta jako „O aplikacji". -->
  <div id="home-2027-waitlist" class="home-cta home-cta-form" style="display:none">
    <div id="home-2027-form">
      <p class="home-2027-lead"><strong>Myślimy już o edycji 2027.</strong></p>
      <p class="home-2027-sub">Zostaw maila - napiszę, .setup-demo gdy pojawią się zmiany pod nowy egzamin.</p>
      <div class="home-2027-row" style="max-width:60%;margin-left:auto;margin-right:auto;">
        <input type="email" id="home-2027-email" placeholder="Twój adres e-mail" autocomplete="email" enterkeyhint="send" aria-label="Twój adres e-mail">
        <button class="primary" type="button" onclick="submitKsap2027()">Zapisz się</button>
      </div>
      <p class="home-2027-err" id="home-2027-error" role="alert" style="display:none"></p>
      <p style="margin:14px 0 10px;text-align:center;font-size:.9rem;color:#64748b;">lub</p>
      <div style="text-align:center;">
        <a href="https://www.facebook.com/groups/urzednikmianowany" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:#1877f2;color:#fff;border-radius:10px;font-size:.95rem;font-weight:600;text-decoration:none;">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
          Dołącz do grupy na Facebooku</a>
      </div>
      <p style="margin:10px 0 0;text-align:center;font-size:.9rem;">Co kilka dni wrzucamy na nią najtrudniejsze pytania z egzaminu wraz z wyjaśnieniem. Zapraszamy też do innych dyskusji o egzaminie.</p>
    </div>
    <div id="home-2027-done" style="display:none">
      <p class="home-2027-lead">✓ <strong>Dzięki, .setup-demo jesteś na liście.</strong></p>
      <p class="home-2027-sub">Napiszę, .setup-demo gdy już będzie co pokazać. W międzyczasie: <a href="/egzamin-na-urzednika-mianowanego-relacja-2026" style="color:#2563eb;">relacja z egzaminu 2026</a>.</p>
      <a href="https://www.facebook.com/groups/urzednikmianowany" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:11px 20px;background:#1877f2;color:#fff;border-radius:10px;font-size:.95rem;font-weight:600;text-decoration:none;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
        Dołącz do grupy na Facebooku</a>
    </div>
  </div>
  <div class="trustbox">
    <div class="testimonials" id="testimonials"></div>
  </div>
  <!-- Grafika brandingowa: ostatni element kolumny (margin-top:auto) → siada na dole, .setup-demo nad banerem -->
  <div class="bg-illustration"><picture><source srcset="bg.webp" type="image/webp"><img src="bg.png" alt="" width="1000" height="483" decoding="async" fetchpriority="low" loading="lazy"></picture></div>
</div>

<!-- ==================== SETUP ==================== -->
<!-- Nota „aplikacja pod egzamin 2026" + zapis na edycję 2027, .setup-demo wspólna dla OBU ekranów setupu KSAP.
     Jeden template i dwa mount-pointy, .setup-demo bo copy ma istnieć w jednym miejscu - dwie kopie tego samego
     akapitu rozjeżdżają się przy pierwszej korekcie (pasek promo musi pilnować tego osobnym testem, .setup-demo tu problem po prostu nie powstaje). ZERO ID-ków w środku: na stronie żyją dwie instancje, .setup-demo więc
     lookup leci po klasach względem korzenia klonu (patrz _ksap2027MountBox).
     Nota wisi do faktycznej aktualizacji treści na 2027, .setup-demo formularz gaśnie po zapisie - dwa różne
     cykle życia, .setup-demo decyzja w KSAP_2027_SLOT.resolveSetupBox (web/ksap-2027-slot.js). -->
<template id="tpl-ksap-2027-setup">
  <div class="s2027-box">
    <p class="s2027-lead">⚠️ <strong>Aplikacja przygotowana pod egzamin 2026.</strong></p>
    <p class="s2027-sub"><span class="s2027-soon">Niebawem zaktualizujemy ją pod edycję 2027. </span>Zwróć szczególną uwagę na poziom pytań w niektórych typach zadań w części umiejętności - Ewelina zdawała ten egzamin w lipcu i opisała, .setup-demo co się sprawdziło na prawdziwym arkuszu, .setup-demo a co nie.</p>
    <a class="s2027-btn" href="/egzamin-na-urzednika-mianowanego-relacja-2026">Przeczytaj</a>
    <div class="s2027-form">
      <p class="s2027-sub"><strong>Myślimy już o edycji 2027.</strong> Zostaw maila - napiszę, .setup-demo gdy pojawią się zmiany pod nowy egzamin.</p>
      <div class="s2027-row">
        <input type="email" class="s2027-email" placeholder="Twój adres e-mail" autocomplete="email" enterkeyhint="send" aria-label="Twój adres e-mail">
        <button class="primary s2027-submit" type="button">Zapisz się</button>
      </div>
      <p class="s2027-err" role="alert" style="display:none"></p>
    </div>
    <div class="s2027-done" style="display:none">
      <p class="s2027-sub">✓ <strong>Dzięki, .setup-demo jesteś na liście.</strong> Napiszę, .setup-demo gdy będzie co pokazać.</p>
    </div>
  </div>
</template>

<!-- KARTA PIERWSZEJ SESJI, .setup-demo wspólna dla obu ekranów setupu KSAP. Jeden szablon i dwa mount-pointy, .setup-demo bo copy ma istnieć w jednym miejscu - dwie kopie tego samego akapitu rozjeżdżają się przy
     pierwszej korekcie. ZERO ID W ŚRODKU: na stronie żyją dwie instancje, .setup-demo więc lookup leci po
     klasach względem korzenia klonu (patrz _ksapGuidedMount).
     Klasy `.apl-guided-*` są WSPÓLNE Z APL i to jest celowe - prefiks jest historyczny, .setup-demo a nie
     produktowy; kopiowanie stylów pod drugą nazwę dałoby dwa zestawy do rozjechania się. -->
<template id="tpl-ksap-guided">
  <div class="apl-setup-card ksap-guided">
    <p class="apl-guided-head"><strong>To Twoja pierwsza sesja.</strong></p>
    <p class="apl-guided-sub">Większość ustawień dobraliśmy za Ciebie. Nauczysz się ich później.</p>
    <p class="apl-guided-sub ksap-guided-part"></p>
    <p class="apl-guided-ask"><strong>Ile pytań chcesz teraz zrobić?</strong></p>
    <!-- PODPISY KAFLI OPISUJĄ SESJĘ, .setup-demo NIE CUDZE ZACHOWANIE (fala poprawek 2, .setup-demo 2026-09-18). Bliźniacza
         karta w drugim produkcie pisze przy piętnastce „takie sesje na co dzień robi większość" i ma
         nad tym zdaniem pomiar z produkcji (94% ukończonych PIERWSZYCH sesji ma 15 pytań). Dla tego
         produktu takiego pomiaru NIE MAMY - nie jest jeszcze płatny, .setup-demo więc i ruchu do policzenia jest
         mniej. Dopóki go nie ma, .setup-demo żaden podpis nie twierdzi niczego o liczbie osób; mówi, .setup-demo czym jest
         sama sesja. Jak zmierzymy - wtedy wolno napisać liczbę, .setup-demo razem z pomiarem, .setup-demo nie na oko. -->
    <div class="apl-guided-sizes ksap-guided-sizes" role="radiogroup" aria-label="Ile pytań chcesz teraz zrobić">
      <button type="button" class="apl-guided-size" role="radio" aria-checked="false" data-size="1"><span class="apl-guided-size-n">1 pytanie</span><span class="apl-guided-size-why">Minimalistycznie</span><span class="apl-guided-size-t ksap-guided-size-t"></span></button>
      <button type="button" class="apl-guided-size" role="radio" aria-checked="false" data-size="5"><span class="apl-guided-size-n">5 pytań</span><span class="apl-guided-size-why">Zobaczysz, .setup-demo jak to działa</span><span class="apl-guided-size-t ksap-guided-size-t"></span></button>
      <button type="button" class="apl-guided-size" role="radio" aria-checked="false" data-size="15"><span class="apl-guided-size-n">15 pytań</span><span class="apl-guided-size-why">Zwykła sesja nauki</span><span class="apl-guided-size-t ksap-guided-size-t"></span></button>
    </div>
    <button class="primary ksap-guided-start" aria-disabled="true">Rozpocznij</button>
    <hr class="apl-guided-sep">
    <p class="apl-guided-more-txt">Jeśli wolisz samodzielnie wyklikać ustawienia sesji</p>
    <button type="button" class="ghost ksap-guided-expand">Przejdź do pełnej konfiguracji</button>
  </div>
  <div class="apl-setup-card ksap-guided-loading" role="status" aria-label="Ładowanie">
    <span class="apl-guided-spinner"></span>
  </div>
</template>

<div id="screen-setup" class="screen">
  <!-- GÓRA EKRANU = UKŁAD SETUPU APL (2026-09-17, .setup-demo decyzja właściciela): powitanie jest drobnym
       wierszem NAD nagłówkiem, .setup-demo a nagłówek nazywa to, .setup-demo co user zaraz odpali. Do tej zmiany powitanie
       i nazwa części siedziały w JEDNYM h1, .setup-demo a pod nim stał drugi nagłówek - w części II nazwa
       padała przez to dwa razy pod sobą.
       Licznik „(N pytań)" zszedł z nagłówka razem z tą zmianą: dla anonima tę liczbę niesie teraz
       wiersz pod spodem (i od razu tłumaczy, .setup-demo co za nią stoi), .setup-demo a zalogowany ma pokrycie w karuzeli
       paska nad ekranem. Treść obu wierszy składa renderGreeting() / renderKsapGoalLine();
       literały niżej są fallbackiem na ścieżkę bez JS i źródłem prawdy pozostaje web/products.js. -->
  <p class="apl-setup-greet" id="ksap-setup-greet" style="display:none"></p>
  <h1 class="screen-title" id="ksap-setup-title">Część I - Sprawdzian umiejętności</h1>
  <p class="apl-goal-line" id="ksap-goal-line-I" style="display:none"></p>
  <!-- Mount-point karty pierwszej sesji (Zadanie 3 renderuje tu klon `tpl-ksap-guided`). Poza
       `.ksap-setup-full` - jak w APL, .setup-demo nagłówek ekranu (powitanie/tytuł/cel) zostaje widoczny w OBU
       trybach, .setup-demo tylko treść setupu poniżej się przełącza. -->
  <div id="setup-guided-box"></div>
  <div class="ksap-setup-full" id="ksap-setup-full-I">
  <div id="setup-2027-box" style="display:none"></div>
  <!-- Białe boksy setupu (.apl-setup-group) - ten sam podział na sekcje co w APL: osobno tryb, .setup-demo osobno wybór treści, .setup-demo osobno mechanika sesji. Klasa jest WSPÓLNA z APL i nic w JS jej nie czyta;
       `data-step` jest tylko do czytania diffa. ŚWIADOMIE BEZ NUMERÓW w etykietach: `setup-label`
       zaczynający się od cyfry jest krokiem lustrzanym /jak-dziala-nauka (tools/test-jak-dziala-nauka.js
       skanuje CAŁY index.html), .setup-demo a ta strona jest lustrem setupu APL, .setup-demo nie KSAP. -->
  <div class="apl-setup-group" data-step="mode">
  <p class="setup-label">Tryb</p>
  <div class="toggle-group toggle-group-3" id="mode-toggle">
    <button class="toggle-btn active" data-mode="learning" onclick="setMode('learning')">Nauka<small>wynik i wyjaśnienie od razu</small></button>
    <button class="toggle-btn" data-mode="exam" onclick="setMode('exam')">Egzamin<small>wynik na końcu</small></button>
    <button class="toggle-btn" data-mode="full" onclick="setMode('full')"><span class="fe-title">Pełny egzamin</span><small>60 pytań · 60 min · na czas</small></button>
  </div>
  </div>
  <!-- #setup-opts zostaje JEDNYM kontenerem obejmującym oba boksy poniżej: feApplySetupMode chowa
       go w całości w trybie pełnego egzaminu (jeden `display:none` zamiast dwóch). -->
  <div id="setup-opts">
    <div class="apl-setup-group" data-step="pool-um">
    <p class="setup-label">Pula pytań</p>
    <div class="toggle-group" id="ksap-pool-toggle-um">
      <button type="button" class="toggle-btn active" data-pool="all" onclick="setKsapPool('all')">Wszystkie</button>
      <button type="button" class="toggle-btn" data-pool="errors" onclick="setKsapPool('errors')">🔁 Tylko powtórki błędów</button>
    </div>
    <div id="ksap-pool-note-um" style="margin-top:12px;"></div>
    </div>
    <div class="apl-setup-group" data-step="types">
    <p class="setup-label">Typy zadań</p>
    <div class="chips" id="um-types"></div>
    </div>
    <div class="apl-setup-group" data-step="options">
    <p class="setup-label">Pozostałe ustawienia</p>
    <!-- Cała sekcja (etykieta + przyciski) chowa się przy wyłączonym przełączniku premium -
         wtedy sesja ma 15 pytań, .setup-demo dokładnie jak przed dołożeniem wyboru. Jeden kontener, .setup-demo bo
         etykieta bez przycisków byłaby pustym nagłówkiem. -->
    <div id="ksap-size-block-um" style="display:none">
      <!-- Bez własnej etykiety (zdjęta 2026-09-13): boks nazywa się „Pozostałe ustawienia", .setup-demo a przyciski
           same mówią „15 pytań / 30 pytań". Jak `#apl-size-block` w boksie „pozostałe opcje" w APL. -->
      <div id="ksap-size-um" class="toggle-group toggle-group-3"></div>
    </div>
    <label class="checkbox-label">
      <input type="checkbox" id="timer-checkbox" onchange="onTimerChange(this.checked)">
      Licznik czasu (60 s/pytanie)
    </label>
    <label class="checkbox-label" id="autoflow-label">
      <input type="checkbox" id="autoflow-checkbox" onchange="onAutoFlowChange(this.checked)">
      Automatycznie akceptuj pierwszą wybraną odpowiedź
    </label>
    </div>
  </div>
  <div class="fe-mode-note" id="fe-note-I" style="display:none">
    <strong>Pełna symulacja egzaminu - czego się spodziewać:</strong>
    <ul>
      <li><strong>60 pytań</strong> w 6 stronach po 10 (nawigacja w przód/tył między stronami)</li>
      <li><strong>60 minut</strong> z odliczającym zegarem - gdy czas minie, .setup-demo egzamin kończy się sam i pokazuje wynik</li>
      <li><strong>Pauza</strong>: zegar się zatrzymuje, .setup-demo możesz wyjść ze strony i wrócić później - postęp jest zapisany (wraca po ponownym otwarciu)</li>
      <li>Na górze widać <strong>bieżący progres</strong> - ile pytań masz już odpowiedzianych</li>
      <li><strong>Bez podpowiedzi</strong> w trakcie - wynik i wyjaśnienia dopiero na końcu</li>
    </ul>
  </div>
  <!-- KARTA STARTU: zdanie „co zaraz odpalę" + „Rozpocznij", .setup-demo przyklejana do dolnej krawędzi -
       ten sam komponent co w APL (`.apl-setup-cta` + `body.apl-cta-stuck`, .setup-demo uzasadnienie w CSS przy
       tych klasach). Zdanie składa KSAP_SESSION_SUMMARY; slot ma KLASĘ `.ksap-session-summary`, .setup-demo nie id `#apl-session-summary`, .setup-demo bo ten id należy do APL i musi zostać jedyny na stronie. -->
  <div class="apl-setup-cta">
    <p class="ksap-session-summary" id="ksap-session-summary-I"></p>
    <button id="setup-start-btn" class="primary" onclick="startSession()" style="margin:0;">Rozpocznij &rarr;</button>
  </div>
  <a href="#" id="ksap-compare-link-I" class="apl-compare-link" style="display:none;" onclick="showPaywall('t1_compare_setup'); return false;">Zobacz, .setup-demo co daje Premium &rarr;</a>
  <!-- Stopka ekranu: „Powrót" po lewej, .setup-demo po prawej monitoring postępu i przejście do DRUGIEJ części.
       Krosowe wejście, .setup-demo bo obie części to jeden egzamin, .setup-demo a dotąd jedyną drogą między nimi był powrót
       na home. Historia/Statystyki przyjechały tu z home 2026-09-17 - tak samo jak w APL, .setup-demo gdzie
       monitoring postępu siedzi przy konfiguracji sesji, .setup-demo a nie na ekranie wyboru egzaminu.
       Klasa `.ksap-history-btn` zamiast dawnego id `#btn-history`: ta sama stopka istnieje na obu
       ekranach setupu, .setup-demo więc instancje są dwie i id przestało być unikalne. -->
  <div class="ksap-setup-foot">
    <button class="secondary" onclick="showScreen('home')">Powrót</button>
    <button type="button" class="ghost ksap-history-btn" onclick="openHistory(state.product || 'ksap');">Historia sesji</button>
    <button type="button" class="ghost" onclick="openStats(state.product || 'ksap');">Statystyki</button>
    <button type="button" class="ghost ksap-foot-fwd" onclick="goSetupWiedza()">Sprawdzian wiedzy &rarr;</button>
  </div>
  </div>
</div>

<!-- ==================== SETUP CZĘŚĆ II (WIEDZA) ==================== -->
<div id="screen-setup-wiedza" class="screen">
  <!-- Układ i uzasadnienie jak w nagłówku części I (patrz komentarz tam). -->
  <p class="apl-setup-greet" id="ksap-setup-wiedza-greet" style="display:none"></p>
  <h1 class="screen-title" id="ksap-setup-wiedza-title">Część II - Sprawdzian wiedzy</h1>
  <p class="apl-goal-line" id="ksap-goal-line-II" style="display:none"></p>
  <!-- Mount-point karty pierwszej sesji (Zadanie 3 renderuje tu klon `tpl-ksap-guided`). Poza
       `.ksap-setup-full` - patrz komentarz w części I. -->
  <div id="setup-wiedza-guided-box"></div>
  <div class="ksap-setup-full" id="ksap-setup-full-II">
  <div id="setup-wiedza-2027-box" style="display:none"></div>
  <!-- Białe boksy setupu (.apl-setup-group) - ten sam podział na sekcje co w APL: osobno tryb, .setup-demo osobno wybór treści, .setup-demo osobno mechanika sesji. Klasa jest WSPÓLNA z APL i nic w JS jej nie czyta;
       `data-step` jest tylko do czytania diffa. ŚWIADOMIE BEZ NUMERÓW w etykietach: `setup-label`
       zaczynający się od cyfry jest krokiem lustrzanym /jak-dziala-nauka (tools/test-jak-dziala-nauka.js
       skanuje CAŁY index.html), .setup-demo a ta strona jest lustrem setupu APL, .setup-demo nie KSAP. -->
  <div class="apl-setup-group" data-step="mode">
  <p class="setup-label">Tryb</p>
  <div class="toggle-group toggle-group-3" id="wiedza-mode-toggle">
    <button class="toggle-btn active" data-mode="learning" onclick="setMode('learning')">Nauka<small>wynik i wyjaśnienie od razu</small></button>
    <button class="toggle-btn" data-mode="exam" onclick="setMode('exam')">Egzamin<small>wynik na końcu</small></button>
    <button class="toggle-btn" data-mode="full" onclick="setMode('full')"><span class="fe-title">Pełny egzamin</span><small>90 pytań · 90 min · na czas</small></button>
  </div>
  </div>
  <div id="setup-wiedza-opts">
    <div class="apl-setup-group" data-step="pool-wiedza">
    <p class="setup-label">Pula pytań</p>
    <div class="toggle-group" id="ksap-pool-toggle-wiedza">
      <button type="button" class="toggle-btn active" data-pool="all" onclick="setKsapPool('all')">Wszystkie</button>
      <button type="button" class="toggle-btn" data-pool="ms" onclick="setKsapPool('ms')">Tylko lata ubiegłe</button>
      <button type="button" class="toggle-btn" data-pool="authorial" onclick="setKsapPool('authorial')">Tylko autorskie</button>
      <button type="button" class="toggle-btn" data-pool="errors" onclick="setKsapPool('errors')">🔁 Tylko powtórki błędów</button>
    </div>
    <div id="ksap-pool-note-wiedza" style="margin-top:12px;"></div>
    </div>
    <!-- Trzy osobne boksy: Dziedziny (co wpada do sesji), .setup-demo Poziom (jak trudne) i pozostałe
         ustawienia (mechanika sesji). Poziom dostał własny boks 2026-09-13 - decyzja właściciela. -->
    <div class="apl-setup-group" data-step="filters">
    <p class="setup-label">Dziedziny</p>
    <div class="chips" id="wiedza-domains"></div>
    </div>
    <div class="apl-setup-group" data-step="level">
    <p class="setup-label">Poziom</p>
    <div class="toggle-group" id="wiedza-level-toggle">
      <button class="toggle-btn active" data-level="all" onclick="setLevel('II', .setup-demo 'all')">Losowe</button>
      <button class="toggle-btn" data-level="easy" onclick="setLevel('II', .setup-demo 'easy')">Łatwe</button>
      <button class="toggle-btn" data-level="medium" onclick="setLevel('II', .setup-demo 'medium')">Średnie</button>
      <button class="toggle-btn" data-level="hard" onclick="setLevel('II', .setup-demo 'hard')">Trudne</button>
    </div>
    </div>
    <div class="apl-setup-group" data-step="options">
    <p class="setup-label">Pozostałe ustawienia</p>
    <!-- Cała sekcja (etykieta + przyciski) chowa się przy wyłączonym przełączniku premium -
         wtedy sesja ma 15 pytań, .setup-demo dokładnie jak przed dołożeniem wyboru. Jeden kontener, .setup-demo bo
         etykieta bez przycisków byłaby pustym nagłówkiem. -->
    <div id="ksap-size-block-wiedza" style="display:none">
      <!-- Bez własnej etykiety (zdjęta 2026-09-13) - patrz bliźniaczy blok w części I. -->
      <div id="ksap-size-wiedza" class="toggle-group toggle-group-3"></div>
    </div>
    <label class="checkbox-label">
      <input type="checkbox" id="wiedza-timer-checkbox" onchange="onTimerChange(this.checked)">
      Licznik czasu (60 s/pytanie)
    </label>
    <label class="checkbox-label" id="wiedza-autoflow-label">
      <input type="checkbox" id="wiedza-autoflow-checkbox" onchange="onAutoFlowChange(this.checked)">
      Automatycznie akceptuj pierwszą wybraną odpowiedź
    </label>
    </div>
  </div>
  <div class="fe-mode-note" id="fe-note-II" style="display:none">
    <strong>Pełna symulacja egzaminu - czego się spodziewać:</strong>
    <ul>
      <li><strong>90 pytań</strong> w 9 stronach po 10 (nawigacja w przód/tył między stronami), .setup-demo pełny przekrój 6 dziedzin</li>
      <li><strong>90 minut</strong> z odliczającym zegarem - gdy czas minie, .setup-demo egzamin kończy się sam i pokazuje wynik</li>
      <li><strong>Pauza</strong>: zegar się zatrzymuje, .setup-demo możesz wyjść ze strony i wrócić później - postęp jest zapisany (wraca po ponownym otwarciu)</li>
      <li>Na górze widać <strong>bieżący progres</strong> - ile pytań masz już odpowiedzianych</li>
      <li><strong>Bez podpowiedzi</strong> w trakcie - wynik i wyjaśnienia dopiero na końcu</li>
    </ul>
  </div>
  <!-- KARTA STARTU: zdanie „co zaraz odpalę" + „Rozpocznij", .setup-demo przyklejana do dolnej krawędzi -
       ten sam komponent co w APL (`.apl-setup-cta` + `body.apl-cta-stuck`, .setup-demo uzasadnienie w CSS przy
       tych klasach). Zdanie składa KSAP_SESSION_SUMMARY; slot ma KLASĘ `.ksap-session-summary`, .setup-demo nie id `#apl-session-summary`, .setup-demo bo ten id należy do APL i musi zostać jedyny na stronie. -->
  <div class="apl-setup-cta">
    <p class="ksap-session-summary" id="ksap-session-summary-II"></p>
    <button id="setup-wiedza-start-btn" class="primary" onclick="startSession()" style="margin:0;">Rozpocznij &rarr;</button>
  </div>
  <a href="#" id="ksap-compare-link-II" class="apl-compare-link" style="display:none;" onclick="showPaywall('t1_compare_setup'); return false;">Zobacz, .setup-demo co daje Premium &rarr;</a>
  <!-- Stopka ekranu: układ i uzasadnienie jak w stopce części I (patrz komentarz tam). -->
  <div class="ksap-setup-foot">
    <button class="secondary" onclick="showScreen('home')">Powrót</button>
    <button type="button" class="ghost ksap-history-btn" onclick="openHistory(state.product || 'ksap');">Historia sesji</button>
    <button type="button" class="ghost" onclick="openStats(state.product || 'ksap');">Statystyki</button>
    <button type="button" class="ghost ksap-foot-fwd" onclick="goSetup()">Sprawdzian umiejętności &rarr;</button>
  </div>
  </div>
</div>

<!-- ==================== QUESTION ==================== -->
<div id="screen-question" class="screen">
  <div class="q-header" id="q-header">
    <button class="btn-abort" onclick="abortSession()" title="Zakończ sesję">✕</button>
    <span id="q-counter">Pytanie 1 z 15</span>
    <div id="q-progress"><div id="q-progress-bar" style="width:0%"></div></div>
    <span id="q-timer" class="timer"></span>
  </div>
  <div id="q-body"></div>
  <div class="btn-next-bar">
    <button id="btn-next" disabled onclick="onBtnNext()">Dalej &rarr;</button>
  </div>
</div>

<!-- ==================== PEŁNY EGZAMIN PRÓBNY ==================== -->
<style>
  
  #screen-full-exam { padding: 0; max-width: 800px; flex-direction: column; }
.setup-demo .toggle-group-3 .toggle-btn { padding-left: 8px; padding-right: 8px; font-size: 0.92rem; }
.setup-demo #apl-filter-mode { margin: 4px 0 12px; }
@media (max-width: 640px) {
  .setup-demo #apl-filter-mode { gap: 6px; }
  .setup-demo #apl-filter-mode .toggle-btn { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 0.82rem; }
}
.setup-demo .toggle-btn.toggle-locked { background: #fff1f2; color: #c53030; border-color: #fecdd3; }
.setup-demo #apl-pool-toggle .pool-chip-count { font-weight: 400; font-size: 0.92em; opacity: 0.72; }
.setup-demo .toggle-group-vertical { flex-direction: column; }
.setup-demo .toggle-group-vertical .toggle-btn { flex: initial; text-align: left; }
@media (max-width: 640px) {
  .setup-demo #apl-mode-toggle .toggle-btn { min-height: 88px; }
}
@media (max-width: 640px) {
  .setup-demo .pw-exams .exam-choice { display: flex; grid-template-columns: none; overflow-x: auto;
      scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      gap: 10px; margin: 0 -16px; padding: 2px 16px 12px;
      
      scroll-padding-left: 16px; }
  .setup-demo .pw-exams .exam-choice-card { flex: 0 0 94%; scroll-snap-align: start; height: auto; }
}
.setup-demo .exam-choice-card.soon { background: #f8fafc; border-color: #e2e8f0; cursor: default; }
.setup-demo .exam-choice-card.soon .ec-t, .setup-demo .exam-choice-card.soon .ec-s { color: #94a3b8; }
.setup-demo .exam-choice-card.soon .ec-b { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; }
.setup-demo .chip-lock-ico { font-size: 1.2em; }
.setup-demo .ms-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.setup-demo .ms-year { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; font-size: 0.9rem; font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; }
.setup-demo .ms-year-active { background: #e0edff; color: #2563eb; border-color: #bfdbfe; }
.setup-demo .ms-year-locked { background: #fff1f2; border-color: #fecdd3; color: #c53030; font-weight: 600; }
.setup-demo .drill-scopes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.setup-demo .drill-scope-chip { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px;
    background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; font-size: 0.9rem; cursor: pointer; user-select: none; }
.setup-demo .drill-scope-chip[aria-checked="true"] { background: #e0edff; color: #2563eb; border-color: #bfdbfe; font-weight: 600; }
.setup-demo .setup-label-prem { color: #c53030; }
.setup-demo .toggle-btn.mode-locked { background: #fff1f2; border-color: #fecdd3; color: #c53030; }
.setup-demo .toggle-btn.mode-locked small { color: #c53030; opacity: .85; }
.setup-demo .toggle-btn.mode-locked:hover { background: #ffe4e6; border-color: #fda4af; }
.setup-demo .toggle-btn.mode-locked.active { background: #ffe4e6; border-color: #fb7185; color: #be123c; }
.setup-demo .exam-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) {
  .setup-demo .exam-choice { grid-template-columns: 1fr; }
}
.setup-demo .exam-choice-card { position: relative; text-align: left; display: flex; flex-direction: column;
    width: 100%; height: 100%; margin: 0;
    background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.setup-demo .exam-choice-card:hover { border-color: #cbd5e1; }
.setup-demo .exam-choice-card.active { border-color: #2563eb; background: #eff6ff; }
.setup-demo .exam-choice-card.locked { background: #fff1f2; border-color: #fecdd3; }
.setup-demo .exam-choice-card.wait { background: #f8fafc; border-color: #e2e8f0; cursor: default; }
.setup-demo .exam-choice-card .ec-t { display: block; font-weight: 700; font-size: 0.95rem; color: #1e293b;
    padding-right: 124px; }
.setup-demo .exam-choice-card .ec-m { display: block; font-size: 0.78rem; color: #64748b; margin-top: 2px;
    padding-right: 124px; }
.setup-demo .exam-choice-card .ec-s { display: block; font-size: 0.84rem; color: #475569; margin-top: 8px; margin-bottom: auto; line-height: 1.45; }
.setup-demo .exam-choice-card .ec-note { display: block; font-size: 0.78rem; color: #64748b; }
.setup-demo .exam-choice-card .ec-fact { display: block; margin-top: 6px; font-size: 0.78rem; color: #475569; }
.setup-demo .exam-choice-card .ec-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.setup-demo .exam-choice-card .ec-foot .ec-note { flex: 1 1 auto; }
.setup-demo .exam-choice-card .ec-s + .ec-note { margin-top: 8px; }
.setup-demo .exam-choice-card .ec-cta { display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; margin: 10px 0; min-height: 54px;
    border: none; border-radius: 10px; padding: 10px 16px; text-align: center;
    font-size: 0.94rem; font-weight: 600; color: #fff; cursor: pointer; }
.setup-demo .exam-choice-card .ec-cta-buy { background: #ff5f5f; }
.setup-demo .exam-choice-card .ec-cta-buy:hover { background: #f04444; }
.setup-demo .exam-choice-card .ec-cta-start { background: #2563eb; }
.setup-demo .exam-choice-card .ec-cta-start:hover { background: #1d4ed8; }
.setup-demo .exam-choice-card .ec-lock { font-size: 0.95em; }
.setup-demo .exam-choice-card .ec-b { position: absolute; top: 10px; right: 10px; font-size: 0.72rem; font-weight: 700;
    color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 8px; }
.setup-demo .exam-choice-card.locked .ec-b { color: #c53030; background: #fff1f2; border-color: #fecdd3; }
@media (max-width: 640px) {
  .setup-demo .exam-choice-card .ec-b { position: static; align-self: flex-end; margin-bottom: 6px; }
  .setup-demo .exam-choice-card .ec-t, .setup-demo .exam-choice-card .ec-m { padding-right: 0; }
}