@font-face {
  font-family: 'Brygada 1918';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonty/brygada1918-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Brygada 1918';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonty/brygada1918-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Brygada 1918';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonty/brygada1918-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Brygada 1918';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonty/brygada1918-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonty/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonty/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonty/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonty/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonty/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonty/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonty/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonty/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonty/literata-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonty/literata-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonty/literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonty/literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonty/literata-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonty/literata-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonty/oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonty/oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonty/oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonty/oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonty/oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonty/oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Domyslnie ciemna malina (decyzja 17.10.2026), jasny wyglad z wyboru czytelnika. Wyglad z makiety czytnika. */
:root {
  color-scheme: dark;
  --papier: #1b1216;
  --karta: #251a1f;
  --atrament: #f6eef0;
  --tekst2: #d9c9cf;
  --szary: #ad9aa2;
  --linia: #33252b;
  --linia-mocna: #4a3640;
  --akcent: #d6334f;
  --akcent-ciemny: #b52640;
  --akcent-tekst: #ff7a90;
  --odcien: #3a1a24;
  --odcien-tekst: #ffb3c0;
  --zielen: #5fd08a;
  --noc: #3a1520;
  --noc-tekst: #fff0f3;
  --noc-szary: #e0b8c2;
  --cien: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px rgba(0, 0, 0, .5);
  --f-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --f-tekst: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-czytanie: 'Literata', Georgia, 'Times New Roman', serif;
  --f-cytat: 'Brygada 1918', Georgia, serif;
  --szerokosc: 640px;
  --gora: env(safe-area-inset-top, 0px);
  --dol: env(safe-area-inset-bottom, 0px);
}
/* Jasny wyglad tylko z wyboru czytelnika (Aa albo przycisk w stopce). */
html[data-motyw="jasny"], html[data-motyw="sepia"] {
  color-scheme: light;
  --papier: #fbf7f7;
  --karta: #ffffff;
  --atrament: #241a1f;
  --tekst2: #4a3f45;
  --szary: #6d6168;
  --linia: #ece2e5;
  --linia-mocna: #d9cbd0;
  --akcent: #b4232f;
  --akcent-ciemny: #8f1823;
  --akcent-tekst: #b4232f;
  --odcien: #fbeaec;
  --odcien-tekst: #8f1823;
  --zielen: #1d7a3e;
  --noc: #241a1f;
  --noc-tekst: #f5eef0;
  --noc-szary: #c9bcc2;
  --cien: 0 1px 2px rgba(36, 26, 31, .06), 0 10px 26px rgba(36, 26, 31, .14);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--papier); color: var(--atrament); font: 400 15px/1.5 var(--f-tekst); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--akcent-tekst); outline-offset: 2px; }

/* ---------- uklad ---------- */
.app { max-width: var(--szerokosc); margin-inline: auto; padding: 4px 18px 28px; display: flex; flex-direction: column; gap: 18px; }
.belka { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: calc(var(--gora) + 8px) max(14px, calc((100% - var(--szerokosc)) / 2 + 14px)) 10px;
  background: var(--papier); border-bottom: 1px solid transparent; }
.belka.z-linia { border-bottom-color: var(--linia); }
.belka .tytul-belki { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.ikona { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linia); background: var(--karta); cursor: pointer; text-decoration: none; padding: 0; }
.ikona:hover { border-color: var(--linia-mocna); }
.ikona[disabled] { opacity: .35; cursor: default; }
.ikona-miejsce { flex: none; width: 38px; }
.stopka { max-width: var(--szerokosc); margin: 8px auto 0; padding: 18px 18px calc(28px + var(--dol)); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; border-top: 1px solid var(--linia); font-size: 13px; color: var(--szary); }
.stopka a { color: var(--szary); text-underline-offset: 3px; }
.link-stopki { padding: 0; border: 0; background: none; color: var(--szary); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; text-align: center; }
.btn-pelny { background: var(--akcent); color: #fff; }
.btn-pelny:hover { background: var(--akcent-ciemny); }
.btn-obrys { background: var(--karta); border-color: var(--linia-mocna); color: var(--atrament); }
.btn-obrys:hover { border-color: var(--atrament); }
.btn-jasny { background: transparent; border-color: rgba(255, 240, 243, .45); color: var(--noc-tekst); }
.btn-jasny:hover { border-color: var(--noc-tekst); }
.btn-szeroki { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }

.sekcja-tytul { margin: 0; font: 600 19px/1.2 var(--f-display); }
.odstep-dol { margin-bottom: 10px; }
.drobne { margin: 0; font-size: 12.5px; color: var(--szary); }
.srodek { text-align: center; }
.karta { display: block; background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; padding: 14px; text-decoration: none; color: inherit; }
.chipy { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--linia); color: var(--tekst2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.chip-stan-wydana { background: transparent; border: 1px solid var(--zielen); color: var(--zielen); }
.chip-stan-przed { background: var(--odcien); color: var(--odcien-tekst); }
.chip-ostrz { background: transparent; border: 1px dashed var(--linia-mocna); color: var(--szary); }

/* ---------- okladki ---------- */
.okl { display: block; object-fit: cover; border-radius: 6px; box-shadow: 0 4px 12px rgba(36, 26, 31, .25); }
.okl-mama { container-type: inline-size; position: relative; overflow: hidden; background-color: #eef2f4;
  background-image: repeating-linear-gradient(0deg, transparent 0 calc(20% - 1px), #d3dce1 calc(20% - 1px) 20%), repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #d3dce1 calc(25% - 1px) 25%);
  color: #33414a; display: flex; flex-direction: column; justify-content: flex-end; padding: 9% 10%; }
.okl.okl-mama b { font: 500 21cqw/1 var(--f-cytat); letter-spacing: -.01em; }
.okl.okl-mama i { font: italic 400 8cqw/1.25 var(--f-cytat); margin-top: 6%; opacity: .8; }
.okl.okl-mama span { position: absolute; top: 7%; left: 10%; font: 700 6.5cqw/1 var(--f-tekst); letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.okl.okl-mama small { font: 700 6cqw/1 var(--f-tekst); letter-spacing: .14em; margin-top: 9%; opacity: .7; }

/* ---------- polka ---------- */
.autor { display: flex; gap: 10px; align-items: center; text-decoration: none; }
.autor img { width: 34px; height: 34px; border-radius: 50%; }
.logo-autor { font: 700 20px/1 var(--f-display); letter-spacing: .01em; }
.logo-autor small { margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: var(--odcien); color: var(--odcien-tekst); font: 600 12px/1 var(--f-tekst); vertical-align: 3px; }
.baner { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border-radius: 18px; background: var(--odcien); }
.baner .apka-ikona { width: 44px; height: 44px; border-radius: 22%; display: block; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.baner b { display: block; font-size: 14.5px; }
.baner p { margin: 2px 0 8px; font-size: 13px; color: var(--tekst2); }
.baner .link { padding: 0; border: 0; background: none; color: var(--odcien-tekst); font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.baner .zamknij { width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--szary); padding: 0; display: grid; place-items: center; }
.wstep h1 { margin: 0; font: 600 26px/1.08 var(--f-display); text-wrap: balance; }
.test-link { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--tekst2); }
.test-link a { color: var(--akcent-tekst); font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
.kafel-ksiazki .chip { margin-top: 2px; }
.wstep p { margin: 0; color: var(--tekst2); font-size: 14px; }
.dalej { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.dalej:hover { border-color: var(--linia-mocna); }
.dalej .okl { width: 40px; height: 58px; }
.dalej-ksiazka { grid-template-columns: 40px minmax(0, 1fr); }
.av { width: 52px; height: 52px; border-radius: 50%; display: block; }
.nad { margin: 0 0 2px; font: 700 11px/1.3 var(--f-tekst); letter-spacing: .14em; text-transform: uppercase; color: var(--szary); }
.dalej b { display: block; font-size: 15px; line-height: 1.25; }
.postep { height: 5px; border-radius: 9px; background: var(--linia); overflow: hidden; margin-top: 8px; }
.postep i { display: block; height: 100%; background: var(--akcent); border-radius: 9px; }
.dalej .ile { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--szary); font-variant-numeric: tabular-nums; }
.historie { display: grid; gap: 10px; }
.kafel-ksiazki { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; }
.kafel-ksiazki:hover { border-color: var(--linia-mocna); }
.kafel-ksiazki .okl { width: 76px; height: 112px; }
.kafel-ksiazki b { display: block; font-size: 16px; line-height: 1.2; }
.kafel-ksiazki p { margin: 3px 0 7px; font-size: 13px; color: var(--tekst2); }
.od-czego { display: grid; border: 1px solid var(--linia); border-radius: 18px; background: var(--karta); overflow: hidden; }
.od-czego a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--linia); text-decoration: none; font-size: 13.5px; color: var(--tekst2); }
.od-czego a:first-child { border-top: 0; }
.od-czego a:hover { background: var(--papier); }
.od-czego a span:last-child { color: var(--akcent-tekst); font-weight: 700; white-space: nowrap; font-size: 12.5px; }

/* ---------- strona ksiazki ---------- */
.okladka-duza { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: end; }
.okladka-duza .okl { width: 112px; height: 165px; transform: rotate(-2deg); box-shadow: 0 10px 24px rgba(36, 26, 31, .3); }
.okladka-duza h1 { margin: 0 0 4px; font: 600 25px/1.05 var(--f-display); text-wrap: balance; }
.okladka-duza p { margin: 0 0 8px; color: var(--szary); font-size: 13px; }
.haslo { margin: 0; font: italic 400 17px/1.4 var(--f-cytat); color: var(--atrament); }
.blurb { margin: 0; color: var(--tekst2); }
.przeskok { display: grid; gap: 6px; margin: 0 0 18px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--akcent); background: color-mix(in srgb, var(--akcent) 6%, transparent); break-inside: avoid; }
.przeskok .nad { margin: 0; color: var(--akcent-tekst); }
.przeskok p { margin: 0; font-size: 14px; line-height: 1.45; }
.przeskok .drobne { font-size: 12.5px; color: var(--cz-szary, var(--szary)); }
.przeskok a { color: var(--akcent-tekst); font-weight: 600; text-underline-offset: 3px; }
.app > .przeskok { margin: 0; }
.wkrotce { margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--linia-mocna); color: var(--tekst2); font-size: 14px; font-weight: 600; text-align: center; }
.ostrzezenia { display: grid; gap: 6px; }
.licznik-darmowe { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.licznik-darmowe small { color: var(--szary); font-size: 12.5px; white-space: nowrap; }
.odcinki { display: grid; border: 1px solid var(--linia); border-radius: 18px; background: var(--karta); overflow: hidden; }
.odc { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--linia); text-decoration: none; color: inherit; }
.odc:first-child { border-top: 0; }
a.odc:hover { background: var(--papier); }
.odc .nr { font: 600 15px/1 var(--f-display); color: var(--szary); font-variant-numeric: tabular-nums; text-align: center; }
.odc b { display: block; font-size: 14px; line-height: 1.25; }
.odc small { color: var(--szary); font-size: 12px; }
.odc .stan { font-size: 11.5px; font-weight: 700; white-space: nowrap; color: var(--szary); display: inline-flex; align-items: center; gap: 4px; }
.odc .stan.zrobione { color: var(--zielen); }
.odc .stan.zamek { color: var(--odcien-tekst); }
.odc.zablokowany b { color: var(--szary); font-weight: 600; }
.odc.reszta { grid-template-columns: minmax(0, 1fr); text-align: center; color: var(--szary); font-size: 13px; font-weight: 600; }
.odc[aria-current="page"] { background: var(--odcien); }
.odc[aria-current="page"] .nr { color: var(--odcien-tekst); }
.formaty { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.formaty .btn { flex-direction: column; gap: 2px; padding: 10px 12px; }
.formaty .btn small { display: block; font-weight: 500; font-size: 12px; opacity: .9; }
.formaty .btn s { opacity: .7; }

/* ---------- koniec rozdzialu ---------- */
.gratulacje { display: grid; justify-items: center; text-align: center; gap: 6px; padding-top: 8px; }
.gratulacje .ptaszek { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--odcien); color: var(--odcien-tekst); }
.gratulacje h1 { margin: 6px 0 0; font: 600 26px/1.1 var(--f-display); }
.gratulacje p { margin: 0; color: var(--tekst2); font-size: 14px; }
.ksiazka-blok, .zapis { background: var(--noc); color: var(--noc-tekst); border-radius: 22px; padding: 18px; display: grid; gap: 14px; }
.ksiazka-blok .gora, .zapis .gora { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; align-items: center; }
.ksiazka-blok .okl, .zapis .okl { width: 74px; height: 108px; transform: rotate(-3deg); box-shadow: 0 10px 20px rgba(0, 0, 0, .4); }
.ksiazka-blok h2, .zapis h2 { margin: 0 0 4px; font: 600 21px/1.1 var(--f-display); text-wrap: balance; }
.ksiazka-blok p, .zapis p { margin: 0; color: var(--noc-szary); font-size: 13px; }
.warianty { display: grid; gap: 8px; }
.wariant { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(255, 240, 243, .2); background: rgba(255, 255, 255, .05); color: var(--noc-tekst); text-decoration: none; }
.wariant:hover { border-color: rgba(255, 240, 243, .55); }
.wariant.polecany { border-color: var(--akcent); background: rgba(214, 51, 79, .18); }
.wariant b { display: block; font-size: 14px; }
.wariant small { color: var(--noc-szary); font-size: 12px; }
.wariant .cena { font: 600 18px/1 var(--f-display); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.wariant .cena s { display: block; font: 500 11px/1.4 var(--f-tekst); color: var(--noc-szary); }
.wariant .metka { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--akcent); color: #fff; font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.zapis-pola, .zapis-gotowe { display: grid; gap: 10px; }
.zapis label { font-weight: 600; font-size: 13px; }
.zapis input[type="email"] { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(255, 240, 243, .3); background: rgba(255, 255, 255, .07); color: var(--noc-tekst); font: 500 16px/1.2 var(--f-tekst); }
.zapis input[type="email"]::placeholder { color: var(--noc-szary); opacity: .7; }
.zapis input[type="email"]:focus { outline: none; border-color: var(--noc-tekst); }
.zgoda { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12px !important; font-weight: 500 !important; color: var(--noc-szary); }
.zgoda input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--akcent); }
.zgoda a { color: var(--noc-tekst); }
.zapisane { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-size: 13.5px; }
.zapisane span:first-child { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--akcent); color: #fff; }
.inne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inne .karta { display: grid; gap: 6px; padding: 10px; align-content: start; }
.inne .karta:hover { border-color: var(--linia-mocna); }
.inne .okl { width: 100%; aspect-ratio: 2 / 3; height: auto; }
.inne b { font-size: 13.5px; line-height: 1.2; }
.inne small { font-size: 12px; color: var(--szary); }

/* ---------- czytnik ---------- */
.czytnik { --cz-tlo: var(--karta); --cz-tekst: var(--atrament); --cz-szary: var(--szary); --cz-linia: var(--linia); background: var(--cz-tlo); color: var(--cz-tekst); }
html[data-motyw="jasny"] .czytnik { --cz-tlo: #fffdfc; --cz-tekst: #241a1f; --cz-szary: #6d6168; --cz-linia: #ece2e5; }
html[data-motyw="sepia"] .czytnik { --cz-tlo: #f5ecdc; --cz-tekst: #3a2e22; --cz-szary: #7a6a58; --cz-linia: #e4d6bf; }
html[data-motyw="noc"] .czytnik { --cz-tlo: #121014; --cz-tekst: #e4dcdf; --cz-szary: #9a8f94; --cz-linia: #2a2428; }
html[data-motyw="noc"] { color-scheme: dark; }
.czytnik .belka { background: var(--cz-tlo); border-bottom-color: var(--cz-linia); color: var(--cz-tekst); padding-inline: max(10px, calc((100% - 720px) / 2 + 10px)); }
.czytnik .ikona { background: transparent; border-color: var(--cz-linia); color: var(--cz-tekst); }
.ikona-aa { font-weight: 700; font-size: 14px; }
.spis-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 6px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; }
.spis-btn:hover { background: var(--cz-linia); }
.spis-btn b { max-width: 100%; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spis-btn small { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 600; color: var(--cz-szary); }
.spis-btn small svg { vertical-align: -2px; margin-left: 2px; }
.pasek-czytania { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; }
.pasek-czytania i { display: block; height: 100%; width: 0; background: var(--akcent); }
.aa { position: fixed; z-index: 4; top: calc(var(--gora) + 64px); left: 50%; transform: translateX(-50%); width: min(100% - 28px, 520px); padding: 14px; border-radius: 16px; background: var(--cz-tlo); color: var(--cz-tekst); border: 1px solid var(--cz-linia); box-shadow: var(--cien); display: grid; gap: 12px; }
.aa .rzad { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--cz-szary); }
.aa .opcje { display: flex; gap: 6px; }
.aa .opcje button { flex: 1; min-width: 0; padding: 9px 4px; border-radius: 10px; border: 1px solid var(--cz-linia); background: transparent; color: var(--cz-tekst); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; }
.aa .opcje button[aria-pressed="true"] { border-color: var(--akcent); background: color-mix(in srgb, var(--akcent) 14%, transparent); }
.aa .opcje button[disabled] { cursor: default; opacity: .5; }
.aa .opcje .rozmiar-teraz { opacity: 1 !important; border-color: transparent; }
.probka { width: 16px; height: 16px; border-radius: 50%; display: inline-block; vertical-align: -3px; margin-right: 4px; border: 1px solid rgba(0, 0, 0, .15); }
.probka-auto { background: linear-gradient(135deg, #1b1216 50%, #d6334f 50%); }
.probka-jasny { background: #fffdfc; }
.probka-sepia { background: #f5ecdc; }
.probka-noc { background: #121014; }
.tekst { max-width: 680px; margin-inline: auto; padding: 22px 24px 36px; }
.kto { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.kto img { width: 40px; height: 40px; border-radius: 50%; }
.kto .okl { width: 28px; height: 41px; border-radius: 3px; box-shadow: none; }
.kto b { display: block; font-size: 14px; }
.kto small { color: var(--cz-szary); font-size: 12px; }
.tekst h1 { margin: 0 0 6px; font: 600 28px/1.08 var(--f-display); text-wrap: balance; }
.tekst .meta { margin: 0 0 14px; color: var(--cz-szary); font-size: 12.5px; }
.meta-ostrzezenia { margin: -8px 0 14px; color: var(--cz-szary); font-size: 12.5px; }
.tryb-czytania { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 999px; background: var(--cz-linia); break-inside: avoid; }
.tryb-czytania button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--cz-szary); font: 600 13.5px/1.2 var(--f-tekst); cursor: pointer; }
.tryb-czytania button[aria-pressed="true"] { background: var(--cz-tlo); color: var(--cz-tekst); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.wskazowka { display: flex; gap: 8px; align-items: center; margin: 0 0 20px; padding: 9px 12px; border-radius: 12px; border: 1px dashed var(--cz-linia); color: var(--cz-szary); font-size: 12.5px; }
.wskazowka svg { flex: none; }
html[data-tryb="strony"] .tylko-przewijanie, html:not([data-tryb="strony"]) .tylko-strony { display: none; }
.proza { font-family: var(--f-czytanie); font-size: var(--rozmiar, 18px); line-height: 1.65; overflow-wrap: break-word; hyphens: manual; }
.proza p { margin: 0 0 .1em; text-indent: 1.3em; padding: 2px 4px; margin-inline: -4px; border-radius: 6px; cursor: pointer; transition: background .15s; }
.proza p.dialog { text-indent: 0; }
/* Dzielenie wyrazow (lang="pl") zapobiega dziurom miedzy slowami w waskiej kolumnie telefonu. */
html:not([data-wyrownanie="lewo"]) .proza p:not(.przerwa) { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
@media (hover: hover) { .proza p:hover { background: rgba(180, 35, 47, .06); } }
.proza p.wybrany { background: rgba(214, 51, 79, .16); box-shadow: inset 3px 0 0 var(--akcent); }
.proza .przerwa { text-align: center; letter-spacing: .6em; color: var(--cz-szary); margin: 1em 0; text-indent: 0; cursor: default; }
.proza .przerwa:hover { background: none; }
.zakladka { display: flex; align-items: center; gap: 8px; margin: .7em 0 .5em; color: var(--akcent-tekst); font: 700 11.5px/1 var(--f-tekst); letter-spacing: .1em; text-transform: uppercase; break-inside: avoid; scroll-margin-top: 90px; }
.zakladka::before, .zakladka::after { content: ''; flex: 1; height: 1.5px; background: currentColor; opacity: .45; }
.zakladka svg { flex: none; }
.koniec-tekstu { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--cz-linia); display: grid; gap: 10px; justify-items: center; text-align: center; break-inside: avoid; }
.koniec-tekstu p { margin: 0; color: var(--cz-szary); font-size: 13px; }
.nawigacja-rozdzialow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.btn-czytnik { background: transparent; border-color: var(--cz-linia); color: var(--cz-tekst); }
.btn-czytnik:hover { border-color: var(--cz-szary); }
.akcja-cytat { position: fixed; z-index: 4; left: 50%; bottom: calc(14px + var(--dol)); transform: translateX(-50%); width: min(100% - 28px, 520px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 8px 8px 8px 16px; align-items: center; border-radius: 999px; background: var(--noc); color: var(--noc-tekst); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); font-size: 13.5px; font-weight: 600; }

/* tryb "strony" */
.strefa, .stopka-stron { display: none; }
html[data-tryb="strony"] body.czytnik { height: 100dvh; overflow: hidden; overscroll-behavior: none; display: flex; flex-direction: column; }
html[data-tryb="strony"] .czytnik .belka { position: relative; flex: none; }
html[data-tryb="strony"] .strony-okno { flex: 1; min-height: 0; width: 100%; max-width: 720px; margin-inline: auto; overflow: hidden; position: relative; touch-action: pan-y; }
html[data-tryb="strony"] .tekst { height: 100%; max-width: none; margin: 0; padding: 18px 24px 14px; column-gap: 48px; column-fill: auto; }
html[data-tryb="strony"] .tekst .kto, html[data-tryb="strony"] .tekst h1, html[data-tryb="strony"] .wskazowka { break-inside: avoid; }
html[data-tryb="strony"] .proza p { orphans: 2; widows: 2; }
html[data-tryb="strony"] .strefa { display: block; position: absolute; top: 0; bottom: 0; width: 18%; border: 0; padding: 0; background: transparent; cursor: pointer; z-index: 1; }
.strefa-lewa { left: 0; }
.strefa-prawa { right: 0; }
@media (hover: hover) {
  .strefa-lewa:hover { background: linear-gradient(to right, rgba(128, 110, 118, .12), transparent); }
  .strefa-prawa:hover { background: linear-gradient(to left, rgba(128, 110, 118, .12), transparent); }
}
html[data-tryb="strony"] .stopka-stron { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 720px; margin-inline: auto; padding: 8px 14px calc(12px + var(--dol)); border-top: 1px solid var(--cz-linia); font-size: 12.5px; font-weight: 600; color: var(--cz-szary); font-variant-numeric: tabular-nums; }
html[data-tryb="strony"] .akcja-cytat, html[data-tryb="strony"] .toast { bottom: calc(70px + var(--dol)); }

/* ---------- grafika z cytatem ---------- */
.karta-cytatu { position: relative; width: 270px; aspect-ratio: 9 / 16; max-width: 100%; margin-inline: auto; border-radius: 16px; overflow: hidden; padding: 28px 24px 22px; display: flex; flex-direction: column; box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
.karta-cytatu[data-tlo="noc"] { background: #1c1418; color: #f7eef1; }
.karta-cytatu[data-tlo="noc"]::before { content: ''; position: absolute; inset: 0; background: url(/grafiki/hzpl.jpg) center 92% / auto 165% no-repeat; opacity: .2; filter: blur(1px); }
.karta-cytatu[data-tlo="noc"][data-ks="reset"]::before { background-image: url(/grafiki/reset.jpg); background-position: center 80%; background-size: auto 160%; }
.karta-cytatu[data-tlo="noc"][data-ks="mama"]::before { background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 255, 255, .5) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, .5) 39px 40px); opacity: .12; filter: none; }
.karta-cytatu[data-tlo="malina"] { background: #b4232f; color: #fff6f7; }
.karta-cytatu[data-tlo="papier"] { background: #f5ecdc; color: #2d2219; }
.karta-cytatu > * { position: relative; }
.karta-cytatu .cudzyslow { font: 500 76px/0.6 var(--f-cytat); opacity: .55; margin-top: 18px; }
.karta-cytatu blockquote { margin: 10px 0 0; flex: 1; display: flex; align-items: center; font: italic 400 var(--cytat-rozmiar, 18px)/1.42 var(--f-cytat); }
.karta-cytatu .podpis { display: flex; gap: 8px; align-items: center; font-size: 12.5px; font-weight: 600; }
.karta-cytatu .podpis img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.karta-cytatu .podpis img.okl-mini { width: 26px; height: 38px; border-radius: 3px; }
.karta-cytatu .podpis small { display: block; font-weight: 500; opacity: .75; }
.karta-cytatu .adres { margin-top: 14px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); font: 600 12px/1 var(--f-display); letter-spacing: .18em; text-align: center; }
.tla { display: flex; gap: 10px; justify-content: center; }
.tla button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--linia-mocna); cursor: pointer; padding: 0; }
.tla button[aria-pressed="true"] { border-color: var(--akcent); box-shadow: 0 0 0 3px var(--odcien); }
.tlo-noc { background: #1c1418; }
.tlo-malina { background: #b4232f; }
.tlo-papier { background: #f5ecdc; }
.dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- arkusze i toast ---------- */
.zaslona { position: fixed; inset: 0; z-index: 10; background: rgba(15, 10, 12, .45); display: flex; align-items: flex-end; justify-content: center; }
.arkusz { width: 100%; max-width: 560px; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--karta); color: var(--atrament); border-radius: 24px 24px 0 0; padding: 10px 20px calc(26px + var(--dol)); display: grid; gap: 12px; box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
.arkusz::before { content: ''; justify-self: center; width: 40px; height: 5px; border-radius: 9px; background: var(--linia-mocna); }
.arkusz h2 { margin: 0; font: 600 21px/1.15 var(--f-display); }
.arkusz p { margin: 0; color: var(--tekst2); font-size: 14px; }
.arkusz ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--tekst2); font-size: 14px; }
.wybor-trybu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wybor-trybu button { display: grid; justify-items: center; gap: 8px; padding: 16px 10px 14px; border-radius: 16px; border: 1.5px solid var(--linia-mocna); background: var(--karta); cursor: pointer; text-align: center; }
.wybor-trybu button:hover { border-color: var(--akcent); background: var(--odcien); }
.wybor-trybu b { font-size: 15px; }
.wybor-trybu small { font-size: 12px; color: var(--szary); line-height: 1.3; }
.ekranik { width: 54px; height: 76px; border-radius: 9px; border: 2px solid var(--atrament); position: relative; overflow: hidden; background: var(--papier); }
.ekranik i { position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 2px; background: var(--linia-mocna); }
.ekranik-przewijanie i:nth-child(1) { top: 10px; } .ekranik-przewijanie i:nth-child(2) { top: 18px; } .ekranik-przewijanie i:nth-child(3) { top: 26px; } .ekranik-przewijanie i:nth-child(4) { top: 34px; } .ekranik-przewijanie i:nth-child(5) { top: 42px; } .ekranik-przewijanie i:nth-child(6) { top: 50px; } .ekranik-przewijanie i:nth-child(7) { top: 58px; }
.ekranik-przewijanie::after { content: ''; position: absolute; right: 3px; top: 14px; width: 3px; height: 22px; border-radius: 2px; background: var(--akcent); }
.ekranik-strony i:nth-child(1) { top: 12px; } .ekranik-strony i:nth-child(2) { top: 20px; } .ekranik-strony i:nth-child(3) { top: 28px; } .ekranik-strony i:nth-child(4) { top: 36px; } .ekranik-strony i:nth-child(5) { top: 44px; right: 20px; }
.ekranik-strony i:nth-child(6), .ekranik-strony i:nth-child(7) { display: none; }
.ekranik-strony::after { content: '\203A'; position: absolute; right: 4px; bottom: 2px; font: 700 18px/1 var(--f-tekst); color: var(--akcent); }
.podglad-ikonki { justify-self: center; display: grid; justify-items: center; gap: 6px; padding: 16px 28px; border-radius: 18px; background: linear-gradient(160deg, #6f8fa8 0%, #b98fa3 55%, #e9b38f 100%); }
.podglad-ikonki img { width: 64px; height: 64px; display: block; border-radius: 22%; box-shadow: 0 4px 8px rgba(0, 0, 0, .25); }
.podglad-ikonki span { color: #fff; font-size: 12px; font-weight: 500; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.toast { position: fixed; z-index: 11; left: 50%; transform: translateX(-50%); bottom: calc(26px + var(--dol)); width: min(100% - 32px, 480px); padding: 12px 16px; border-radius: 14px; background: var(--atrament); color: var(--papier); font-size: 13.5px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }

/* ---------- strony tekstowe ---------- */
.tekst-prosty { gap: 12px; }
.tekst-prosty h1 { margin: 8px 0 4px; font: 600 26px/1.1 var(--f-display); }
.tekst-prosty h2 { margin: 10px 0 0; font: 600 18px/1.2 var(--f-display); }
.tekst-prosty p { margin: 0; color: var(--tekst2); }

/* ---------- test "Ktora ksiazka dla Ciebie?" ---------- */
.test-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px; border-radius: 18px; background: var(--noc); color: var(--noc-tekst); }
.test-start b { display: block; font: 600 18px/1.15 var(--f-display); }
.test-start p { margin: 3px 0 0; font-size: 13px; color: var(--noc-szary); }
.app.test { gap: 22px; padding-top: 18px; }
.test-postep { display: grid; grid-template-columns: repeat(var(--pytan, 6), 1fr); gap: 5px; }
.test-postep i { height: 5px; border-radius: 9px; background: var(--linia); }
.test-postep i.zrobione { background: var(--akcent); }
.test-postep i.teraz { background: var(--odcien-tekst); opacity: .5; }
.test-pytanie { margin: 0; font: 600 30px/1.12 var(--f-display); text-wrap: balance; min-height: 4.5em; }
.test-odp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.test-odp .btn { padding: 18px; font-size: 17px; border-radius: 18px; }
.test-wstecz { justify-self: center; border: 0; background: none; color: var(--szary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; }
.test-wynik { display: grid; gap: 10px; padding: 18px; border-radius: 22px; background: var(--odcien); }
.test-wynik .nad { margin: 0; color: var(--odcien-tekst); }
.tw-gora { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; align-items: center; }
.tw-gora .okl { width: 74px; height: 108px; transform: rotate(-3deg); }
.tw-gora h1 { margin: 0; font: 600 25px/1.08 var(--f-display); text-wrap: balance; }
.tw-proc { margin: 4px 0 0; font: 600 18px/1 var(--f-display); color: var(--odcien-tekst); }
.tw-powod { margin: 0; font-size: 14px; color: var(--tekst2); }
.wyniki { display: grid; gap: 8px; }
.wynik { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linia); background: var(--karta); text-decoration: none; color: inherit; }
.wynik:hover { border-color: var(--linia-mocna); }
.wynik .okl { width: 34px; height: 50px; }
.wynik b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.w-tor { display: block; height: 6px; border-radius: 9px; background: var(--linia); overflow: hidden; }
.w-tor i { display: block; height: 100%; background: var(--akcent); border-radius: 9px; }
.w-liczba { font: 600 20px/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* ---------- prestiz ---------- */
.prestiz-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 4px; border-radius: 999px; background: var(--odcien); color: var(--odcien-tekst); font: 700 12.5px/1 var(--f-tekst); text-decoration: none; font-variant-numeric: tabular-nums; }
.ikona-rangi { flex: none; display: block; }
.uczciwie { padding: 12px 14px; border-radius: 14px; background: var(--odcien); color: var(--odcien-tekst); font-size: 13px; }
.odstep-gora { margin-top: 8px; }
.lp-tor { height: 10px; border-radius: 9px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.lp-tor i { display: block; height: 100%; border-radius: 9px; background: var(--akcent); transition: width .6s ease; }
.prestiz-gora { background: var(--noc); color: var(--noc-tekst); border-radius: 22px; padding: 18px; display: grid; gap: 8px; }
.prestiz-gora .nad { color: var(--noc-szary); margin: 0 0 4px; }
.prestiz-gora h1 { margin: 0; font: 600 30px/1.05 var(--f-display); }
.prestiz-gora h1 .dyw { font-size: 22px; color: var(--noc-szary); }
.pg-ranga { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.pg-liczba { display: flex; align-items: baseline; gap: 8px; }
.pg-liczba b { font: 600 34px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.pg-liczba span, .prestiz-gora small { color: var(--noc-szary); font-size: 13px; }
.dywizje { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 4px; }
.dywizje span { display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--noc-szary); font-variant-numeric: tabular-nums; }
.dywizje span b { font: 600 15px/1 var(--f-display); }
.dywizje span small { font-size: 10.5px; }
.dywizje span .ikona-rangi { margin-bottom: 2px; }
.dywizje span.zdobyta { background: rgba(255, 255, 255, .14); color: var(--noc-tekst); }
.dywizje span.biezaca { background: var(--akcent); color: #fff; }
.dywizje span:not(.zdobyta):not(.biezaca) .ikona-rangi { opacity: .45; }
.rangi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rangi div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linia); background: var(--karta); color: var(--szary); }
.rangi div .ikona-rangi { grid-row: span 2; }
.rangi b { font-size: 12.5px; line-height: 1.2; color: var(--tekst2); }
.rangi small { font-size: 11px; font-variant-numeric: tabular-nums; }
.rangi div.zdobyta b, .rangi div.biezaca b { color: var(--atrament); }
.rangi div.biezaca { border-color: var(--akcent); background: var(--odcien); }
.rangi div:not(.zdobyta):not(.biezaca) .ikona-rangi { filter: grayscale(1); opacity: .45; }
.wszystkie-odznaki { margin-top: 10px; border: 1px solid var(--linia); border-radius: 14px; background: var(--karta); }
.wszystkie-odznaki summary { padding: 11px 14px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.siatka-odznak { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 40px); gap: 6px 4px; align-items: center; padding: 4px 12px 14px; }
.siatka-odznak b { font-size: 11.5px; line-height: 1.2; color: var(--tekst2); }
.zasady { display: grid; border: 1px solid var(--linia); border-radius: 16px; background: var(--karta); overflow: hidden; }
.zasady div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--linia); font-size: 13.5px; }
.zasady div:first-child { border-top: 0; }
.zasady b { display: block; font-size: 13.5px; }
.zasady small { display: block; color: var(--szary); font-size: 11.5px; line-height: 1.3; }
.zasady div.wkrotce { color: var(--szary); }
.zasady div.wkrotce b, .zasady div.wkrotce .pkt { color: var(--szary); }
.pkt { font: 600 16px/1 var(--f-display); color: var(--zielen); font-variant-numeric: tabular-nums; text-align: right; }
.pkt small { font: 600 10.5px/1.4 var(--f-tekst); }
.odznaki { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.odznaki div { display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: 14px; border: 1px dashed var(--linia-mocna); color: var(--szary); }
.odznaki div.ma { border-style: solid; border-color: var(--zielen); color: var(--atrament); }
.odznaki .oz { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--linia); }
.odznaki div.ma .oz { background: var(--zielen); color: #fff; }
.odznaki b { font-size: 13.5px; }
.odznaki small { font-size: 11.5px; line-height: 1.3; }

@media (min-width: 700px) {
  .app { padding-top: 12px; }
  .historie { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}