/* ══════════════════════════════════════════════════════════════
   Patent strzelecki — testy egzaminacyjne PZSS
   Motyw jasny domyślny, ciemny przez [data-motyw] i prefers-color-scheme.
   ══════════════════════════════════════════════════════════════ */

:root {
  --tlo:            #f4f6fa;
  --tlo-karty:      #ffffff;
  --tlo-wglebienie: #eef1f7;
  --tekst:          #131a2a;
  --tekst-slaby:    #5b6478;
  --tekst-drobny:   #7b8497;
  --ramka:          #dde2ec;
  --ramka-mocna:    #c3cad9;

  --akcent:         #b8410f;
  --akcent-jasny:   #d75418;
  --akcent-tlo:     #fdf0ea;

  --dobry:          #14713d;
  --dobry-tlo:      #e8f6ed;
  --dobry-ramka:    #9dd4b3;

  --zly:            #b3261e;
  --zly-tlo:        #fdecea;
  --zly-ramka:      #f0b0aa;

  --uwaga:          #92500a;
  --uwaga-tlo:      #fdf3e2;
  --uwaga-ramka:    #ecc894;

  --cien-s: 0 1px 2px rgba(19,26,42,.06), 0 2px 6px rgba(19,26,42,.05);
  --cien-m: 0 2px 4px rgba(19,26,42,.06), 0 8px 24px rgba(19,26,42,.08);
  --cien-l: 0 8px 16px rgba(19,26,42,.08), 0 24px 48px rgba(19,26,42,.12);

  --promien:   14px;
  --promien-s: 10px;
  --szerokosc:  760px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    --tlo:            #0f1729;
    --tlo-karty:      #172033;
    --tlo-wglebienie: #1e2941;
    --tekst:          #eaeef7;
    --tekst-slaby:    #a4aec4;
    --tekst-drobny:   #808ba3;
    --ramka:          #2a3550;
    --ramka-mocna:    #3c4a69;

    --akcent:         #ff8b52;
    --akcent-jasny:   #ffa06f;
    --akcent-tlo:     #2e1d14;

    --dobry:          #5ed69a;
    --dobry-tlo:      #102a1d;
    --dobry-ramka:    #2c6b47;

    --zly:            #ff8880;
    --zly-tlo:        #2d1512;
    --zly-ramka:      #7a3229;

    --uwaga:          #f0b866;
    --uwaga-tlo:      #2b2013;
    --uwaga-ramka:    #7a5c2c;

    --cien-s: 0 1px 2px rgba(0,0,0,.3);
    --cien-m: 0 4px 12px rgba(0,0,0,.35);
    --cien-l: 0 12px 36px rgba(0,0,0,.45);
  }
}

:root[data-motyw="ciemny"] {
  --tlo:            #0f1729;
  --tlo-karty:      #172033;
  --tlo-wglebienie: #1e2941;
  --tekst:          #eaeef7;
  --tekst-slaby:    #a4aec4;
  --tekst-drobny:   #808ba3;
  --ramka:          #2a3550;
  --ramka-mocna:    #3c4a69;

  --akcent:         #ff8b52;
  --akcent-jasny:   #ffa06f;
  --akcent-tlo:     #2e1d14;

  --dobry:          #5ed69a;
  --dobry-tlo:      #102a1d;
  --dobry-ramka:    #2c6b47;

  --zly:            #ff8880;
  --zly-tlo:        #2d1512;
  --zly-ramka:      #7a3229;

  --uwaga:          #f0b866;
  --uwaga-tlo:      #2b2013;
  --uwaga-ramka:    #7a5c2c;

  --cien-s: 0 1px 2px rgba(0,0,0,.3);
  --cien-m: 0 4px 12px rgba(0,0,0,.35);
  --cien-l: 0 12px 36px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

/* Atrybut `hidden` musi wygrywać z regułami układu (display:flex/grid),
   które inaczej nadpisują styl przeglądarki i element zostaje widoczny. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.pomin {
  position: absolute; left: -9999px;
  background: var(--akcent); color: #fff;
  padding: .7em 1.2em; border-radius: 0 0 var(--promien-s) 0; z-index: 100;
}
.pomin:focus { left: 0; top: 0; }

/* ── Pasek górny ───────────────────────────────────────────── */
.pasek {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--tlo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ramka);
}
.pasek-wnetrze {
  max-width: var(--szerokosc); margin: 0 auto;
  padding: .7rem 1.15rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Marka jest łączem powrotnym na stronę główną - bez tego aplikacja pod
   własnym adresem jest ślepą uliczką, z której nie da się wyjść. */
.marka {
  display: flex; align-items: center; gap: .7rem; min-width: 0;
  text-decoration: none; color: inherit; border-radius: var(--promien-s);
  transition: opacity .15s;
}
.marka:hover { opacity: .78; }
.marka:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.marka-znak { width: 30px; height: 30px; color: var(--akcent); flex-shrink: 0; }
.marka-tekst { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.marka-tekst strong { font-size: .97rem; letter-spacing: -.01em; }
.marka-tekst span {
  font-size: .73rem; color: var(--tekst-drobny);
  text-transform: uppercase; letter-spacing: .07em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pasek-akcje { display: flex; align-items: center; gap: .5rem; }

.zegar {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .75rem;
  background: var(--tlo-wglebienie);
  border: 1px solid var(--ramka);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 650; font-size: .95rem;
}
.zegar svg { width: 17px; height: 17px; color: var(--tekst-slaby); }
.zegar.zegar--alarm {
  background: var(--zly-tlo); border-color: var(--zly-ramka); color: var(--zly);
  animation: puls 1s ease-in-out infinite;
}
.zegar.zegar--alarm svg { color: var(--zly); }
@keyframes puls { 50% { opacity: .55; } }

.ikonka {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  background: var(--tlo-wglebienie);
  border: 1px solid var(--ramka);
  border-radius: 50%; cursor: pointer; color: var(--tekst-slaby);
  transition: color .15s, border-color .15s;
}
.ikonka:hover { color: var(--akcent); border-color: var(--ramka-mocna); }
.ikonka svg { width: 19px; height: 19px; }

/* ── Układ ─────────────────────────────────────────────────── */
main { max-width: var(--szerokosc); margin: 0 auto; padding: 1.6rem 1.15rem 4rem; }
.ekran[hidden] { display: none; }

/* ── Ekran startowy ────────────────────────────────────────── */
.powitanie { text-align: center; padding: 1.4rem 0 2.2rem; }
.plakietka {
  display: inline-block; margin: 0 0 1.1rem;
  padding: .38rem .95rem;
  background: var(--akcent-tlo); color: var(--akcent);
  border: 1px solid color-mix(in srgb, var(--akcent) 28%, transparent);
  border-radius: 999px;
  font-size: .78rem; font-weight: 650; letter-spacing: .03em;
}
.powitanie h1 {
  margin: 0 0 .85rem;
  font-size: clamp(1.85rem, 6.2vw, 2.7rem);
  line-height: 1.14; letter-spacing: -.026em; font-weight: 780;
}
.wiodacy {
  margin: 0 auto; max-width: 42rem;
  color: var(--tekst-slaby); font-size: 1.03rem;
}
.wiodacy strong { color: var(--tekst); font-weight: 650; }

.start-akcje {
  display: flex; gap: .7rem; justify-content: center;
  margin: 1.8rem 0 .8rem; flex-wrap: wrap;
}

.przycisk {
  font: inherit; font-weight: 650;
  padding: .82rem 1.7rem;
  border-radius: var(--promien-s);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
}
.przycisk:active:not(:disabled) { transform: translateY(1px); }
.przycisk:disabled { opacity: .45; cursor: not-allowed; }
.przycisk-glowny {
  background: var(--akcent); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 4px 14px color-mix(in srgb, var(--akcent) 30%, transparent);
}
.przycisk-glowny:hover:not(:disabled) { background: var(--akcent-jasny); }
.przycisk-drugi {
  background: var(--tlo-karty); color: var(--tekst);
  border-color: var(--ramka-mocna); box-shadow: var(--cien-s);
}
.przycisk-drugi:hover:not(:disabled) { border-color: var(--akcent); color: var(--akcent); }

.drobne { font-size: .84rem; color: var(--tekst-drobny); margin: .6rem 0 0; }

.karty-info {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  margin-bottom: 2.4rem;
}
.karta-info {
  background: var(--tlo-karty);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--cien-s);
}
.karta-info h2 {
  margin: 0 0 .4rem; font-size: .94rem; font-weight: 650;
  color: var(--tekst-slaby); letter-spacing: -.005em;
}
.karta-info .licznik {
  font-size: 1.65rem; font-weight: 780; color: var(--tekst);
  letter-spacing: -.03em; vertical-align: -.06em; margin-right: .12em;
}
.karta-info p { margin: 0; font-size: .875rem; color: var(--tekst-drobny); line-height: 1.5; }
.karta-info--ostrzezenie {
  background: var(--uwaga-tlo); border-color: var(--uwaga-ramka);
}
.karta-info--ostrzezenie h2, .karta-info--ostrzezenie .licznik { color: var(--uwaga); }
.karta-info--ostrzezenie p { color: color-mix(in srgb, var(--uwaga) 82%, var(--tekst)); }

.zagadnienia h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .085em;
  color: var(--tekst-drobny); margin: 0 0 .85rem; font-weight: 650;
}
.lista-zagadnien { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.zagadnienie {
  display: flex; align-items: center; gap: .85rem;
  background: var(--tlo-karty); border: 1px solid var(--ramka);
  border-radius: var(--promien-s); padding: .8rem 1rem;
}
.zagadnienie-nazwa { flex: 1; font-size: .93rem; font-weight: 560; min-width: 0; }
.zagadnienie-liczba {
  font-size: .78rem; color: var(--tekst-drobny);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.zagadnienie-tor {
  width: 74px; height: 6px; flex-shrink: 0;
  background: var(--tlo-wglebienie); border-radius: 999px; overflow: hidden;
}
.zagadnienie-wypelnienie { height: 100%; background: var(--dobry); border-radius: 999px; transition: width .5s ease; }
.zagadnienie--krytyczne .zagadnienie-nazwa::after {
  content: "bez prawa do błędu";
  display: inline-block; margin-left: .55rem;
  padding: .1rem .45rem; border-radius: 5px;
  background: var(--uwaga-tlo); color: var(--uwaga);
  border: 1px solid var(--uwaga-ramka);
  font-size: .67rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  vertical-align: .1em;
}

/* ── Ekran testu ───────────────────────────────────────────── */
.postep { margin-bottom: 1.3rem; }
.postep-opis {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: .55rem; flex-wrap: wrap;
}
.postep-numer { font-size: .87rem; color: var(--tekst-slaby); }
.postep-numer strong { color: var(--tekst); font-weight: 700; }
.znacznik {
  padding: .22rem .6rem; border-radius: 6px;
  background: var(--uwaga-tlo); color: var(--uwaga);
  border: 1px solid var(--uwaga-ramka);
  font-size: .72rem; font-weight: 650;
}
.znacznik[hidden] { display: none; }
.postep-tor { height: 6px; background: var(--tlo-wglebienie); border-radius: 999px; overflow: hidden; }
.postep-wypelnienie {
  height: 100%; width: 10%;
  background: linear-gradient(90deg, var(--akcent), var(--akcent-jasny));
  border-radius: 999px; transition: width .35s cubic-bezier(.4,0,.2,1);
}
.kropki { display: flex; gap: .3rem; list-style: none; margin: .6rem 0 0; padding: 0; }
.kropka {
  flex: 1; height: 3px; border-radius: 999px; background: var(--ramka);
  transition: background .25s;
}
.kropka--udzielona { background: var(--akcent); }
.kropka--biezaca   { background: var(--tekst); }

.karta-pytanie {
  background: var(--tlo-karty);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: var(--cien-m);
  animation: wejscie .28s cubic-bezier(.4,0,.2,1);
}
@keyframes wejscie { from { opacity: 0; transform: translateY(9px); } }

.etykieta-zagadnienia {
  margin: 0 0 .7rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .085em; color: var(--akcent);
}
.tresc-pytania {
  margin: 0 0 1.35rem;
  font-size: clamp(1.09rem, 3.1vw, 1.26rem);
  line-height: 1.42; font-weight: 650; letter-spacing: -.012em;
}

.odpowiedzi { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.odpowiedz {
  display: flex; align-items: flex-start; gap: .85rem;
  width: 100%; text-align: left;
  padding: .95rem 1.05rem;
  background: var(--tlo); color: var(--tekst);
  border: 1.5px solid var(--ramka);
  border-radius: var(--promien-s);
  font: inherit; font-size: .96rem; line-height: 1.45;
  cursor: pointer;
  transition: border-color .14s, background .14s, transform .1s;
}
.odpowiedz:hover { border-color: var(--ramka-mocna); }
.odpowiedz:active { transform: scale(.994); }
.odpowiedz--wybrana {
  border-color: var(--akcent);
  background: var(--akcent-tlo);
}
.odpowiedz-klucz {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1.5px solid var(--ramka-mocna); border-radius: 50%;
  font-size: .8rem; font-weight: 700; color: var(--tekst-slaby);
  transition: background .14s, color .14s, border-color .14s;
}
.odpowiedz--wybrana .odpowiedz-klucz {
  background: var(--akcent); border-color: var(--akcent); color: #fff;
}

.nawigacja { display: flex; gap: .7rem; justify-content: space-between; margin-top: 1.3rem; }
.nawigacja .przycisk { flex: 1; max-width: 220px; }
.nawigacja .przycisk-glowny { margin-left: auto; }

/* Wyjście z rozpoczętego testu - inaczej jedyną drogą jest przejście
   wszystkich dziesięciu pytań do końca. */
.wyjscie { text-align: center; margin: 1.1rem 0 0; }
.lacze {
  background: none; border: 0; padding: .4rem .6rem;
  font: inherit; font-size: .87rem; color: var(--tekst-drobny);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; border-radius: 6px;
}
.lacze:hover { color: var(--akcent); }
.lacze:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

.stopka-powrot { margin-top: 1rem; }
.stopka-powrot a {
  color: var(--akcent); text-decoration: none; font-weight: 600; font-size: .87rem;
}
.stopka-powrot a:hover { text-decoration: underline; }

/* ── Ekran wyniku ──────────────────────────────────────────── */
.werdykt {
  border-radius: var(--promien);
  padding: 2rem 1.6rem;
  text-align: center;
  border: 1.5px solid;
  box-shadow: var(--cien-m);
  animation: wejscie .35s cubic-bezier(.4,0,.2,1);
}
.werdykt--zdany     { background: var(--dobry-tlo); border-color: var(--dobry-ramka); }
.werdykt--niezdany  { background: var(--zly-tlo);   border-color: var(--zly-ramka); }

.werdykt-znak { width: 54px; height: 54px; margin: 0 auto .8rem; display: block; }
.werdykt--zdany    .werdykt-znak { color: var(--dobry); }
.werdykt--niezdany .werdykt-znak { color: var(--zly); }
.werdykt h2 {
  margin: 0 0 .35rem; font-size: clamp(1.5rem, 5vw, 2rem);
  letter-spacing: -.025em; font-weight: 780;
}
.werdykt--zdany h2    { color: var(--dobry); }
.werdykt--niezdany h2 { color: var(--zly); }
.werdykt-punkty {
  font-size: 1.02rem; font-weight: 600; margin: 0 0 .5rem; color: var(--tekst);
}
.werdykt-powod {
  margin: .9rem auto 0; max-width: 34rem;
  font-size: .92rem; line-height: 1.55; color: var(--tekst-slaby);
}
.werdykt-powod strong { color: var(--tekst); }
.werdykt-metryki {
  display: flex; justify-content: center; gap: 2.1rem;
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.metryka-wartosc {
  display: block; font-size: 1.5rem; font-weight: 780;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.metryka-opis {
  font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tekst-drobny);
}

.podsumowanie-akcje {
  display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap;
  margin: 1.5rem 0 2.4rem;
}
.naglowek-przegladu {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .085em;
  color: var(--tekst-drobny); margin: 0 0 .9rem; font-weight: 650;
}
.przeglad { display: grid; gap: .8rem; }

.wpis {
  background: var(--tlo-karty);
  border: 1px solid var(--ramka);
  border-left: 4px solid;
  border-radius: var(--promien-s);
  padding: 1.05rem 1.2rem;
  box-shadow: var(--cien-s);
}
.wpis--dobry { border-left-color: var(--dobry); }
.wpis--zly   { border-left-color: var(--zly); }

.wpis-gora {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .55rem; flex-wrap: wrap;
}
.wpis-numer {
  font-size: .74rem; font-weight: 700; color: var(--tekst-drobny);
  font-variant-numeric: tabular-nums;
}
.wpis-status {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .55rem; border-radius: 6px;
  font-size: .72rem; font-weight: 700;
}
.wpis--dobry .wpis-status { background: var(--dobry-tlo); color: var(--dobry); }
.wpis--zly   .wpis-status { background: var(--zly-tlo);   color: var(--zly); }
.wpis-status svg { width: 13px; height: 13px; }
.wpis-krytyczne {
  padding: .18rem .55rem; border-radius: 6px;
  background: var(--uwaga-tlo); color: var(--uwaga);
  border: 1px solid var(--uwaga-ramka);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.wpis-tresc { margin: 0 0 .8rem; font-weight: 620; font-size: .99rem; line-height: 1.42; }

.wpis-odpowiedzi { display: grid; gap: .38rem; margin-bottom: .2rem; }
.wpis-odpowiedz {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem .8rem; border-radius: 8px;
  font-size: .89rem; line-height: 1.42;
  background: var(--tlo); border: 1px solid transparent;
  color: var(--tekst-slaby);
}
.wpis-odpowiedz--poprawna {
  background: var(--dobry-tlo); border-color: var(--dobry-ramka);
  color: var(--dobry); font-weight: 600;
}
.wpis-odpowiedz--bledna {
  background: var(--zly-tlo); border-color: var(--zly-ramka);
  color: var(--zly); font-weight: 600;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--zly) 45%, transparent);
}
.wpis-odpowiedz-klucz { font-weight: 700; flex-shrink: 0; }
.wpis-znacznik {
  margin-left: auto; flex-shrink: 0;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  opacity: .85; padding-left: .5rem;
}

.wpis-podstawa {
  margin: .75rem 0 0; padding: .6rem .8rem;
  background: var(--tlo-wglebienie); border-radius: 8px;
  font-size: .82rem; color: var(--tekst-slaby); line-height: 1.5;
}
.wpis-podstawa strong {
  display: block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tekst-drobny); margin-bottom: .18rem;
}

/* ── Stopka ────────────────────────────────────────────────── */
.stopka {
  max-width: var(--szerokosc); margin: 0 auto;
  padding: 1.8rem 1.15rem 2.6rem;
  border-top: 1px solid var(--ramka);
  color: var(--tekst-drobny); font-size: .82rem; line-height: 1.55;
}
.stopka p { margin: 0 0 .5rem; }

/* ── Powiadomienie o aktualizacji ──────────────────────────── */
.pasek-aktualizacji {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  z-index: 60; width: calc(100% - 2rem); max-width: 25rem;
  display: flex; align-items: center; gap: .85rem;
  background: var(--tlo-karty); color: var(--tekst);
  border: 1px solid var(--ramka-mocna); border-radius: var(--promien);
  padding: .85rem 1rem; box-shadow: var(--cien-l);
  animation: wejscie .3s cubic-bezier(.4,0,.2,1);
}
.pasek-aktualizacji p { margin: 0; font-size: .87rem; flex: 1; line-height: 1.4; }
.pasek-aktualizacji .przycisk { padding: .5rem 1rem; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  main { padding: 1.2rem .9rem 3rem; }
  .karta-pytanie { padding: 1.25rem 1.1rem 1.1rem; }
  .nawigacja .przycisk { max-width: none; }
  .werdykt-metryki { gap: 1.4rem; }
}

/* ── Często zadawane pytania ──────────────────────────────────────────────
   Sekcja jest jednocześnie treścią dla czytelnika i pokryciem dla danych
   strukturalnych FAQPage z <head>. Rozwijanie robi natywny <details>,
   więc działa bez JavaScriptu i bez obsługi klawiatury z naszej strony. */
.czesto-pytane { margin-top: 2.2rem; }
.czesto-pytane h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .085em;
  color: var(--tekst-drobny); margin: 0 0 .85rem; font-weight: 650;
}
.czesto-pytane details {
  background: var(--tlo-karty); border: 1px solid var(--ramka);
  border-radius: var(--promien-s); margin-bottom: .5rem;
}
.czesto-pytane summary {
  cursor: pointer; padding: .85rem 1rem; font-weight: 560; font-size: .95rem;
  list-style: none; display: flex; align-items: center; gap: .6rem;
}
.czesto-pytane summary::-webkit-details-marker { display: none; }
.czesto-pytane summary::before {
  content: "+"; color: var(--akcent); font-weight: 700; font-size: 1.05rem;
  line-height: 1; flex: none; width: 1ch;
}
.czesto-pytane details[open] summary::before { content: "\2212"; }
.czesto-pytane summary:hover { color: var(--akcent); }
.czesto-pytane details p {
  margin: 0; padding: 0 1rem 1rem 2.6rem;
  font-size: .92rem; line-height: 1.65; color: var(--tekst-drobny);
}