/* Kopia web/projekt/styl.css (Claude Design) bez paska podglądu. Zmiany projektu: tam, potem tu. */
/* Regulamin przeciwdziałania mobbingowi - wspólne tokeny i komponenty.
   Czysty CSS, bez skryptów. Telefon najpierw (390 px), komputer od 960 px. */

:root{
  /* kolor */
  --papier:#F6F4EE;
  --papier-2:#ECE8DC;
  --karta:#FFFEFA;
  --linia:#D8D2C2;
  --linia-mocna:#A79F89;
  --atrament:#17231E;
  --atrament-2:#4A564F;
  --zielen:#183F31;
  --zielen-2:#245A45;
  --zielen-ciemna:#0D2A20;
  --zielen-tekst:#C5D6CC;
  --zielen-jasna:#DDEBE2;
  --zakreslacz:#F5D046;
  --zakreslacz-2:#F8DE7A;
  --zakreslacz-tlo:#FFFCEB;
  --cynober:#B3360F;
  --cynober-ciemny:#9A2E0C;
  --cynober-jasny:#F9E1D6;
  --bursztyn:#7A5200;
  --bursztyn-jasny:#F7E9C2;

  /* pismo */
  --f-szeryf:"Newsreader", Georgia, "Times New Roman", serif;
  --f-bez:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-drobny:13px;
  --t-maly:15px;
  --t-tresc:17px;
  --t-wiekszy:19px;
  --t-h3:22px;
  --t-h2:clamp(30px, 1.6vw + 24px, 48px);
  --t-h1:clamp(35px, 3.4vw + 22px, 72px);

  /* odstępy */
  --o-1:4px; --o-2:8px; --o-3:12px; --o-4:16px; --o-5:24px;
  --o-6:32px; --o-7:48px; --o-8:64px; --o-9:96px;
  --bok:16px;
  --szer:1200px;

  /* kształt */
  --r-1:4px; --r-2:10px; --r-3:16px;
  --cel:48px;
  --cien-1:0 1px 0 rgba(23,35,30,.05), 0 1px 3px rgba(23,35,30,.08);
  --cien-2:0 1px 0 rgba(23,35,30,.05), 0 4px 10px rgba(23,35,30,.08), 0 14px 30px -14px rgba(23,35,30,.25);
  --cien-kartki:0 1px 0 rgba(23,35,30,.06), 0 3px 6px rgba(23,35,30,.12), 0 22px 40px -12px rgba(5,22,15,.55);
  --fokus:var(--atrament);
}
@media (min-width:768px){ :root{ --bok:32px; } }
@media (min-width:1200px){ :root{ --bok:48px; } }

/* baza */
*,*::before,*::after{box-sizing:border-box}
/* cyfry na linii pisma wszędzie: Newsreader domyślnie ma cyfry nautyczne, a skrót font: zeruje font-variant */
*,*::before,*::after{font-variant-numeric:lining-nums !important}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--papier); color:var(--atrament); font:400 var(--t-tresc)/1.55 var(--f-bez); -webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0; list-style:none}
a{color:var(--zielen-2); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--atrament)}
:focus-visible{outline:3px solid var(--fokus); outline-offset:3px}
.na-zieleni{--fokus:var(--zakreslacz)}
.na-zieleni a:not(.btn){color:var(--papier)}
sup{font-size:.62em; line-height:0; vertical-align:super}
em{font-style:italic}
.wrap{width:100%; max-width:calc(var(--szer) + 2*var(--bok)); margin-inline:auto; padding-inline:var(--bok)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.tylko-duzy{display:none !important}
@media (min-width:960px){ .tylko-duzy{display:inline-flex !important} .tylko-maly{display:none !important} }
.nbsp{white-space:nowrap}
.tlo-2{background:var(--papier-2)}


/* typografia */
.h1{font:600 var(--t-h1)/1.02 var(--f-szeryf); font-variation-settings:"opsz" 72; letter-spacing:-.015em; text-wrap:balance}
.h1 em{font-weight:500; color:var(--zakreslacz)}
.h2{font:600 var(--t-h2)/1.06 var(--f-szeryf); font-variation-settings:"opsz" 60; letter-spacing:-.01em; text-wrap:balance}
.h3{font:600 var(--t-h3)/1.2 var(--f-szeryf); text-wrap:balance}
.kicker{font:500 var(--t-drobny)/1.35 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--atrament-2)}
.na-zieleni .kicker{color:var(--zielen-tekst)}
.lead{font-size:var(--t-wiekszy); line-height:1.5; color:var(--atrament-2); text-wrap:pretty; max-width:46ch}
.na-zieleni .lead{color:var(--zielen-tekst)}
.maly{font-size:var(--t-maly); line-height:1.5; color:var(--atrament-2); text-wrap:pretty}
p{text-wrap:pretty}

/* pasek nawigacji */
.pasek{display:flex; align-items:center; justify-content:space-between; gap:var(--o-4); min-height:64px}
.znak{display:inline-flex; align-items:center; gap:10px; min-height:var(--cel); font:600 16px/1.2 var(--f-bez); color:inherit; text-decoration:none; letter-spacing:-.005em}
.znak:hover{color:inherit}
.na-zieleni .znak{color:var(--papier)}
.znak-kostka{flex:none; width:20px; height:24px; border-radius:3px; background:var(--karta); box-shadow:inset 0 6px 0 var(--cynober), 0 0 0 1.5px var(--atrament)}
.na-zieleni .znak-kostka{box-shadow:inset 0 6px 0 var(--cynober)}
.pasek-linki{display:flex; align-items:center; gap:var(--o-1)}
.pasek-linki a{display:inline-flex; align-items:center; min-height:var(--cel); padding-inline:12px; border-radius:8px; color:inherit; font-weight:500; text-decoration:none}
.pasek-linki a:hover{background:rgba(255,255,255,.08)}

/* przyciski: spoczynek, najechanie, wciśnięcie, fokus */
.btn{--b-tlo:transparent; --b-tekst:var(--atrament); --b-ramka:var(--atrament); --b-cien:transparent;
  display:inline-flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px;
  min-height:56px; padding:10px 20px; border:2px solid var(--b-ramka); border-radius:var(--r-2);
  background:var(--b-tlo); color:var(--b-tekst); font:600 18px/1.2 var(--f-bez); text-align:left; text-decoration:none;
  box-shadow:0 3px 0 var(--b-cien); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease}
.btn small{font:400 14px/1.3 var(--f-bez)}
.btn:hover{color:var(--b-tekst); transform:translateY(-1px); box-shadow:0 4px 0 var(--b-cien)}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--b-cien)}
.btn-glowny{--b-tlo:var(--zakreslacz); --b-tekst:var(--atrament); --b-ramka:var(--atrament); --b-cien:var(--atrament)}
.btn-glowny:hover{--b-tlo:var(--zakreslacz-2)}
.na-zieleni .btn-glowny{--b-ramka:var(--zakreslacz); --b-cien:var(--zielen-ciemna)}
.btn-drugi:hover{--b-tlo:rgba(23,35,30,.06)}
.na-zieleni .btn-drugi{--b-tekst:var(--papier); --b-ramka:var(--zielen-tekst)}
.na-zieleni .btn-drugi:hover{--b-tlo:rgba(255,255,255,.08)}
.btn-ciemny{--b-tlo:var(--zielen); --b-tekst:var(--papier); --b-ramka:var(--zielen); --b-cien:var(--zielen-ciemna)}
.btn-ciemny:hover{--b-tlo:var(--zielen-2); --b-ramka:var(--zielen-2)}
.btn-srodek{flex-direction:row; align-items:center; justify-content:center; gap:10px; text-align:center}
.btn-pelny{width:100%}
.btn-cichy{min-height:var(--cel); padding:8px 4px; border:0; box-shadow:none; background:none; color:var(--atrament); font-weight:600; text-decoration:underline; text-underline-offset:4px}
.btn-cichy:hover{transform:none; box-shadow:none}
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}

/* odnośnik do przepisu */
.ref{display:inline-flex; align-items:center; gap:6px; min-height:44px; font:500 14px/1.25 var(--f-mono); color:var(--atrament-2); text-decoration:none}
.ref span{text-decoration:underline dotted; text-underline-offset:4px}
.ref::after{content:"\2193"; font-family:var(--f-bez)}
.ref:hover{color:var(--atrament)}
.na-zieleni .ref{color:var(--zielen-tekst)}
.na-zieleni .ref:hover{color:var(--papier)}
.refy{display:flex; flex-wrap:wrap; column-gap:18px}

/* kartka z kalendarza zdzieraka */
.kartka-stos{--k-szer:160px; position:relative; width:var(--k-szer); isolation:isolate}
.kartka-spod{position:absolute; inset:7px -5px -9px 7px; border-radius:6px; background:#E6DFCD; box-shadow:var(--cien-1); transform:rotate(2deg)}
.kartka{position:relative; display:grid; grid-template-rows:auto 1fr; width:var(--k-szer); aspect-ratio:5/6; border-radius:6px 6px 4px 4px; background:var(--karta); color:var(--atrament); box-shadow:var(--cien-kartki); transform:rotate(-3deg)}
.kartka-grzbiet{position:relative; display:flex; align-items:center; justify-content:center; gap:30%; height:calc(var(--k-szer) * .17); border-radius:6px 6px 0 0; background:var(--cynober)}
.kartka-grzbiet::after{content:""; position:absolute; left:6px; right:6px; bottom:-2px; border-bottom:2px dashed rgba(23,35,30,.16)}
.dziurka{width:calc(var(--k-szer) * .065); aspect-ratio:1; border-radius:50%; background:var(--k-dziurka, var(--zielen)); box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.kartka-tresc{display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4% 8% 8%; text-align:center}
.kartka-miesiac{font:600 max(13px, calc(var(--k-szer) * .085))/1 var(--f-bez); letter-spacing:.16em; text-transform:uppercase; color:var(--cynober)}
.kartka-dzien{position:relative; isolation:isolate; margin:2% 0 0; font:600 calc(var(--k-szer) * .52)/.92 var(--f-szeryf); font-variation-settings:"opsz" 72; letter-spacing:-.03em}
.kartka-dzien::before{content:""; position:absolute; z-index:-1; inset:50% -26% 4% -26%; border-radius:3px 9px 4px 12px; background:var(--zakreslacz); transform:rotate(-4deg) skewX(-10deg); transform-origin:left center}
.kartka-tydzien{font:500 max(14px, calc(var(--k-szer) * .08))/1.2 var(--f-bez); color:var(--atrament-2)}
.kartka-podpis{margin-top:5%; font:500 max(13px, calc(var(--k-szer) * .06))/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--atrament-2)}
.kartka-zrywana{position:absolute; inset:0; display:none; transform-origin:94% 2%}
.kartka-zrywana .kartka-dzien::before{display:none}
@media (prefers-reduced-motion:no-preference){
  .kartka-zrywana{display:grid; animation:zryw 1.25s cubic-bezier(.5,0,.75,.25) .8s both}
  .kartka-stos > .kartka:not(.kartka-zrywana) .kartka-dzien::before{animation:zakresl .45s cubic-bezier(.3,.7,.2,1) 1.9s both}
}
@keyframes zryw{
  0%{transform:rotate(-3deg)}
  16%{transform:rotate(-7deg) translate(-3px,-6px)}
  100%{transform:rotate(-38deg) translate(-70px,360px); opacity:0; visibility:hidden}
}
@keyframes zakresl{
  from{transform:rotate(-4deg) skewX(-10deg) scaleX(0)}
  to{transform:rotate(-4deg) skewX(-10deg) scaleX(1)}
}

/* pieczątka */
.pieczatka{display:inline-grid; justify-items:center; gap:2px; padding:12px 18px 13px; border:3px solid var(--cynober); border-radius:12px; color:var(--cynober); font:700 15px/1.1 var(--f-bez); letter-spacing:.12em; text-transform:uppercase; text-align:center; box-shadow:inset 0 0 0 2px var(--karta), inset 0 0 0 3.5px var(--cynober); transform:rotate(-5deg); background:var(--karta)}
.pieczatka small{font:600 12.5px/1.2 var(--f-mono); letter-spacing:.14em}

/* znaczki stanu */
.znaczek{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font:600 13px/1.2 var(--f-mono); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
.znaczek-ok{background:var(--zielen-jasna); color:var(--zielen)}
.znaczek-brak{background:var(--cynober-jasny); color:var(--cynober-ciemny)}
.znaczek-uwaga{background:var(--bursztyn-jasny); color:var(--bursztyn)}
.znaczek-proba{background:var(--zakreslacz); color:var(--atrament)}
.znaczek-przyklad{border:1.5px dashed var(--linia-mocna); color:var(--atrament-2); background:var(--karta)}

/* cytat przepisu */
.cytat{display:grid; gap:8px; padding:16px 18px; border:1px solid var(--linia); border-radius:var(--r-2); background:var(--karta)}
.cytat blockquote{font:italic 400 19px/1.45 var(--f-szeryf); text-wrap:pretty}
.cytat cite{font:normal 500 14px/1.3 var(--f-mono); color:var(--atrament-2)}

/* pola formularza */
.pole{display:grid; gap:8px}
.pole-etykieta{font-weight:600}
.pole-wejscie{width:100%; min-height:52px; padding:12px 14px; border:1.5px solid var(--linia-mocna); border-radius:8px; background:var(--karta); color:var(--atrament); font:500 18px/1.2 var(--f-mono)}
.pole-wejscie:hover{border-color:var(--atrament-2)}
.pole-wejscie:focus{outline:3px solid var(--atrament); outline-offset:1px; border-color:var(--atrament)}
.pole-pomoc{font-size:var(--t-maly); line-height:1.45; color:var(--atrament-2)}
.pole-rzad{display:flex; gap:8px}
.pole-rzad .pole-wejscie{flex:1; min-width:0}
.pole-rzad .btn{flex:none; min-height:52px}

/* wybór: karty radio i pola zaznaczenia */
.opcje{display:grid; gap:12px; margin:0; padding:0; border:0; min-width:0}
.opcja{position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); gap:14px; align-items:start; min-height:64px; padding:18px; border:1.5px solid var(--linia-mocna); border-radius:var(--r-2); background:var(--karta); cursor:pointer; transition:border-color .15s, box-shadow .15s, background-color .15s}
.opcja:hover{border-color:var(--atrament)}
.opcja:has(input:checked){border-color:var(--atrament); background:var(--zakreslacz-tlo); box-shadow:0 0 0 1px var(--atrament), 0 3px 0 var(--atrament)}
.opcja:has(input:focus-visible){outline:3px solid var(--atrament); outline-offset:3px}
.opcja input{appearance:none; -webkit-appearance:none; display:grid; place-items:center; width:24px; height:24px; margin:1px 0 0; border:2px solid var(--atrament); border-radius:50%; background:var(--karta)}
.opcja input:focus-visible{outline:none}
.opcja input:checked::before{content:""; width:12px; height:12px; border-radius:50%; background:var(--atrament)}
.opcja input[type="checkbox"]{border-radius:6px}
.opcja input[type="checkbox"]:checked{background:var(--atrament)}
.opcja input[type="checkbox"]:checked::before{content:"\2713"; width:auto; height:auto; border-radius:0; background:none; color:var(--karta); font:700 15px/1 var(--f-bez)}
.opcja-tytul{display:block; font-weight:600; font-size:18px; line-height:1.3}
.opcja-opis{display:block; margin-top:3px; font-size:var(--t-maly); line-height:1.45; color:var(--atrament-2)}
.zgoda{position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; min-height:44px; padding:10px 0; cursor:pointer}
.zgoda input{appearance:none; -webkit-appearance:none; display:grid; place-items:center; width:24px; height:24px; margin:0; border:2px solid var(--atrament); border-radius:6px; background:var(--karta)}
.zgoda input:checked{background:var(--atrament)}
.zgoda input:checked::before{content:"\2713"; color:var(--karta); font:700 15px/1 var(--f-bez)}
.zgoda input:focus-visible{outline:3px solid var(--atrament); outline-offset:2px}

/* sekcje strony produktu */
.sekcja{padding-block:var(--o-8)}
@media (min-width:960px){ .sekcja{padding-block:var(--o-9)} }
.sekcja-glowka{display:grid; gap:14px; align-content:start}

/* tor zamówienia */
.tor-glowa{border-bottom:1px solid var(--linia); background:var(--papier)}
.tor-glowa .pasek{min-height:60px}
.wstecz{display:inline-flex; align-items:center; gap:8px; min-height:var(--cel); margin-left:-8px; padding-inline:8px 12px; border-radius:8px; color:var(--atrament); font-weight:500; text-decoration:none}
.wstecz:hover{background:rgba(23,35,30,.06); color:var(--atrament)}
.kroki{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; padding-bottom:12px}
.kroki li{display:grid; gap:7px; font:500 12.5px/1.2 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--atrament-2); min-width:0}
.kroki li::before{content:""; height:4px; border-radius:2px; background:var(--linia)}
.kroki li.zrobione::before, .kroki li.teraz::before{background:var(--zielen)}
.kroki li.teraz{color:var(--atrament); font-weight:600}
.tor-uklad{display:grid; gap:var(--o-6); padding-block:28px 0}
@media (min-width:1024px){
  .tor-uklad{grid-template-columns:minmax(0,600px) 300px; justify-content:center; gap:96px; padding-block:64px 96px}
}
.tor-glowny{display:grid; gap:var(--o-5); align-content:start; min-width:0}
.tor-tytul{display:grid; gap:10px}
.tor-tytul .h2{font-size:clamp(30px, 1.2vw + 24px, 44px)}
.tor-bok{display:none}
@media (min-width:1024px){ .tor-bok{display:grid; gap:24px; align-content:start; justify-items:start; position:sticky; top:40px} .tor-bok .kartka-stos{--k-szer:150px; --k-dziurka:var(--papier); margin:8px 0 12px 12px} }
.akcje{position:sticky; bottom:0; z-index:5; display:flex; gap:12px; margin-inline:calc(-1 * var(--bok)); padding:12px var(--bok) calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--linia); background:rgba(246,244,238,.95); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.akcje .btn{flex:1}
.akcje .btn-drugi, .akcje .btn-cichy{flex:0 0 auto}
@media (min-width:1024px){ .akcje{position:static; margin:8px 0 0; padding:0; border:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none} .akcje .btn{flex:0 0 auto; min-width:200px} .akcje .btn-cichy{min-width:0} }
.pasek-postepu{height:6px; border-radius:3px; background:var(--papier-2); overflow:hidden}
.pasek-postepu span{display:block; height:100%; border-radius:3px; background:var(--zielen)}

/* karta ogólna i uspokojenie */
.karta{display:grid; gap:14px; padding:20px; border:1px solid var(--linia); border-radius:var(--r-3); background:var(--karta)}
@media (min-width:1024px){ .karta{padding:26px 28px} }
.karta-glowa{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px}
.uspokojenie{display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; padding:14px 16px; border-radius:var(--r-2); background:var(--zielen-jasna); color:var(--zielen); font-weight:500; line-height:1.45}
.uspokojenie::before{content:"\2713"; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--zielen); color:var(--papier); font:700 14px/1 var(--f-bez)}
.uspokojenie strong{font-weight:700}

/* wybór wejścia: duże karty-odnośniki */
.wejscia{display:grid; gap:14px}
.wejscie{display:grid; grid-template-columns:minmax(0,1fr) 28px; gap:6px 14px; align-items:center; min-height:120px; padding:22px 20px; border:2px solid var(--atrament); border-radius:var(--r-3); background:var(--karta); color:var(--atrament); text-decoration:none; box-shadow:0 4px 0 var(--atrament); transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease}
.wejscie:hover{color:var(--atrament); background:var(--zakreslacz-tlo); transform:translateY(-1px); box-shadow:0 5px 0 var(--atrament)}
.wejscie:active{transform:translateY(3px); box-shadow:0 1px 0 var(--atrament)}
.wejscie-glowne{background:var(--zakreslacz)}
.wejscie-glowne:hover{background:var(--zakreslacz-2)}
.wejscie-tytul{font:600 26px/1.15 var(--f-szeryf); font-variation-settings:"opsz" 36}
.wejscie-opis{grid-column:1; font-size:var(--t-maly); line-height:1.45; color:var(--atrament)}
.wejscie-strzalka{grid-column:2; grid-row:1 / span 2; font:600 26px/1 var(--f-bez)}

/* odpowiedzi w boku toru */
.odpowiedzi{display:grid; width:100%; border-top:2px solid var(--atrament)}
.odpowiedzi div{display:grid; gap:2px; padding:10px 0; border-bottom:1px solid var(--linia)}
.odpowiedzi dt{font:500 12.5px/1.3 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--atrament-2)}
.odpowiedzi dd{font-weight:600; font-size:var(--t-maly)}

/* odpis z rejestru */
.odpis{display:grid; gap:18px; padding:20px; border-top:6px solid var(--zielen); border-radius:var(--r-2) var(--r-2) var(--r-3) var(--r-3); background:var(--karta); box-shadow:var(--cien-2)}
@media (min-width:1024px){ .odpis{padding:26px 28px} }
.odpis-nazwa{font:600 24px/1.2 var(--f-szeryf); font-variation-settings:"opsz" 30; text-wrap:balance}
.odpis-dane{display:grid; gap:14px}
.odpis-dane div{display:grid; gap:2px; min-width:0}
.odpis-dane dt{font:500 12.5px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--atrament-2)}
.odpis-dane dd{font-weight:500}
.odpis-dane dd.mono{font:500 17px/1.4 var(--f-mono)}
.odpis-zrodlo{display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; padding-top:14px; border-top:1px dashed var(--linia); font:500 13px/1.4 var(--f-mono); color:var(--atrament-2)}
@media (min-width:640px){ .odpis-dane{grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:24px} .odpis-dane .szeroko{grid-column:1 / -1} }

/* paragon i płatność próbna */
.proba{display:flex; align-items:center; gap:12px; padding:12px 16px; border:2px solid var(--atrament); border-radius:var(--r-2); background:repeating-linear-gradient(-45deg, var(--zakreslacz) 0 14px, var(--zakreslacz-2) 14px 28px); font:600 14px/1.35 var(--f-mono); letter-spacing:.03em}
.proba strong{text-transform:uppercase; letter-spacing:.06em}
.paragon{display:grid; padding:4px 20px; border-radius:var(--r-3); background:var(--karta); box-shadow:var(--cien-2)}
@media (min-width:1024px){ .paragon{padding:6px 28px} }
.paragon-wiersz{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-bottom:1px dashed var(--linia)}
.paragon-wiersz > span:first-child{min-width:0}
.paragon-wiersz small{display:block; font-size:14px; color:var(--atrament-2)}
.paragon-kwota{font:500 17px/1.3 var(--f-mono); white-space:nowrap}
.paragon-razem{border-bottom:0; padding-block:16px 18px; font-weight:700}
.paragon-razem .paragon-kwota{font:600 30px/1 var(--f-szeryf); font-variation-settings:"opsz" 40}

/* pliki do pobrania */
.pliki{display:grid; border-top:2px solid var(--atrament)}
.plik{display:grid; gap:10px; padding:14px 0; border-bottom:1px solid var(--linia)}
.plik-nazwa{font:500 19px/1.3 var(--f-szeryf); font-variation-settings:"opsz" 24}
.plik-nazwa small{display:block; margin-top:2px; font:400 14px/1.4 var(--f-bez); color:var(--atrament-2)}
.plik-pobierz{display:flex; flex-wrap:wrap; gap:8px}
.pobierz{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; min-width:72px; padding:0 14px; border:1.5px solid var(--atrament); border-radius:8px; background:var(--karta); color:var(--atrament); font:600 14px/1 var(--f-mono); letter-spacing:.04em; text-decoration:none}
.pobierz::before{content:"\2193"; font-family:var(--f-bez)}
.pobierz:hover{background:var(--zakreslacz-tlo); color:var(--atrament)}
@media (min-width:640px){ .plik{grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:20px} .plik-pobierz{justify-content:flex-end} }

/* raport luk */
.wynik{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.wynik-pole{display:grid; gap:4px; padding:16px 18px; border-radius:var(--r-2)}
.wynik-pole strong{font:600 44px/1 var(--f-szeryf); font-variation-settings:"opsz" 60}
.wynik-pole span{font-weight:600}
.wynik-brak{background:var(--cynober-jasny); color:var(--cynober-ciemny)}
.wynik-ok{background:var(--zielen-jasna); color:var(--zielen)}
.luki{display:grid; gap:14px}
.luka{display:grid; gap:12px; padding:18px; border:1px solid var(--linia); border-left:5px solid var(--cynober); border-radius:var(--r-2); background:var(--karta)}
@media (min-width:1024px){ .luka{padding:22px 24px} }
.luka-glowa{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.luka-por{display:grid; gap:12px}
.luka-por div{display:grid; gap:4px}
.luka-por dt{font:500 12.5px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--atrament-2)}
.luka-por blockquote{font:italic 400 18px/1.45 var(--f-szeryf); text-wrap:pretty}
.luka-por .brak-tresci{font-size:var(--t-maly); color:var(--atrament-2)}
.zgodne{display:grid; border-top:1px solid var(--linia)}
.zgodne li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--linia)}
.zgodne li::before{content:"\2713"; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--zielen-jasna); color:var(--zielen); font:700 15px/1 var(--f-bez)}
.plik-chip{display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:8px 12px; border:1px solid var(--linia); border-radius:8px; background:var(--karta); font:500 14px/1.3 var(--f-mono); overflow-wrap:anywhere}
.plik-chip::before{content:"PDF"; flex:none; padding:3px 5px; border-radius:3px; background:var(--cynober); color:var(--karta); font:700 11px/1 var(--f-mono); letter-spacing:.04em}

/* stopka */
.stopka{padding-block:40px; background:var(--atrament); color:#D9DED9; font-size:var(--t-maly)}
.stopka a{color:#F6F4EE}
.stopka-siatka{display:grid; gap:18px}
.stopka-linki{display:flex; flex-wrap:wrap; gap:4px 20px}
.stopka-linki a{display:inline-flex; align-items:center; min-height:44px}
.do-uzupelnienia{padding:1px 6px; border:1.5px dashed currentColor; border-radius:4px; font-family:var(--f-mono); font-size:.9em}