/* =====================================================================
   Weryfikacja-Kontrahenta.pl — system wizualny (od 10.10.2026: identyfikacja „01 Monogram WK”)
   Kierunek: profesjonalny fintech/compliance — biel i dużo powietrza, granat #16307A z logo,
   jasnoniebieski akcent #8FB1FF, IBM Plex Sans + IBM Plex Mono (numery, NIP, godziny).
   Ściąga: docs/SYSTEM_WIZUALNY.md
   ===================================================================== */

/* ---------- Fonty (self-hosted, OFL — patrz /static/fonts/LICENCJE.txt) ---------- */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-400-normal.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:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-500-normal.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:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-600-normal.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:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-700-normal.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:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-400-italic.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:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-sans-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-500-normal.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokeny ---------- */
:root{
  /* powierzchnie */
  --papier:#FFFFFF;          /* karty, arkusze, tło stron */
  --tlo:#F6F8FC;             /* pasy sekcji, tło aplikacji */
  --pole:#EFF2F8;            /* pola, pasy, nagłówki tabel */
  --pole-2:#F7F8FB;          /* jaśniejsze pole (hover, wiersze) */
  /* tekst */
  --grafit:#121A2E;          /* tekst główny (logo) */
  --grafit-2:#454F64;        /* tekst drugorzędny (≥ 8:1 na bieli) */
  --grafit-3:#5A6478;        /* podpisy, przypisy (logo „.pl”, ≥ 5,9:1 na bieli) */
  /* linie */
  --linia:#E2E6EE;
  --linia-mocna:#C3CAD8;
  /* marka (logo „01 Monogram WK”) */
  --atrament:#16307A;        /* granat główny: przyciski, linki, fokus */
  --atrament-ciemny:#0E2160;
  --atrament-jasny:#EDF2FF;  /* tło zaznaczenia, hover */
  --akcent:#8FB1FF;          /* jasnoniebieski z logo — tylko ozdobnik/na granacie, nigdy tekst na bieli */
  --akcent-2:#C9D9FF;
  --link:#1D3F9E;
  --tusz:#2A47A8;            /* pieczątka „SPRAWDZONO” (niebieski tusz) */

  /* statusy (zawsze z ikoną i tekstem, nigdy sam kolor) */
  --ok:#11734A;      --ok-tlo:#E7F6EE;
  --uwaga:#934505;   --uwaga-ikona:#C2620A; --uwaga-tlo:#FEF3E6;
  --stop:#B0241B;    --stop-tlo:#FDECEA;
  --info:#454F64;    --info-tlo:#EFF2F8;

  /* typografia */
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --szeryf:var(--sans);      /* dawny token nagłówków — zostaje jako alias (inline style w JS) */
  --t-xs:.8125rem;   /* 13 */
  --t-s:.9375rem;    /* 15 */
  --t-m:1.0625rem;   /* 17 — tekst podstawowy */
  --t-l:1.25rem;     /* 20 */
  --t-xl:1.5rem;     /* 24 */
  --t-2xl:clamp(1.75rem,1.25rem + 1.5vw,2.375rem);  /* 28→38 nagłówki sekcji */
  --t-3xl:clamp(2.25rem,1.4rem + 3vw,3.5rem);       /* 36→56 tytuł strony */

  /* rytm */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --szer:1200px;
  --margines:clamp(16px,4vw,32px);
  --r-pole:8px;      /* pola formularza */
  --r-przycisk:8px;
  --r-kartka:12px;   /* karty, arkusze */
  --r-duzy:16px;     /* duże panele */
  --cien-1:0 1px 2px rgba(18,26,46,.06);
  --cien-kartki:0 1px 2px rgba(18,26,46,.05),0 12px 32px -12px rgba(18,26,46,.16);
  --cien-duzy:0 2px 4px rgba(18,26,46,.04),0 24px 56px -20px rgba(22,48,122,.28);
  --fokus:0 0 0 2px #fff,0 0 0 4px var(--atrament);
}

/* ---------- Baza ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--papier);color:var(--grafit);font-family:var(--sans);font-size:var(--t-m);line-height:1.6;
  font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
svg.ik{width:18px;height:18px;flex:none}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote{margin:0}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
a:hover{color:var(--atrament-ciemny);text-decoration-color:currentColor}
:focus-visible{outline:none;box-shadow:var(--fokus);border-radius:4px}
::selection{background:var(--akcent-2)}
[hidden],.hidden{display:none!important}
.ukryty-wizualnie{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skok{position:absolute;left:var(--s4);top:-60px;z-index:100;background:var(--atrament);color:#fff;padding:var(--s2) var(--s4);border-radius:var(--r-przycisk)}
.skok:focus{top:var(--s3);color:#fff}

/* ---------- Typografia ---------- */
.tytul,h1{font-family:var(--sans);font-weight:600;font-size:var(--t-3xl);line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
h2{font-family:var(--sans);font-weight:600;font-size:var(--t-2xl);line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
h3{font-family:var(--sans);font-weight:600;font-size:var(--t-l);line-height:1.3;letter-spacing:-.01em}
h4{font-family:var(--sans);font-weight:600;font-size:var(--t-m);line-height:1.4}
p{max-width:68ch}
.lead{font-size:var(--t-l);line-height:1.55;color:var(--grafit-2);max-width:58ch}
.drobne{font-size:var(--t-s);color:var(--grafit-2)}
.przypis{font-size:var(--t-xs);line-height:1.5;color:var(--grafit-3)}
.liczba{font-variant-numeric:tabular-nums lining-nums}
.szeryf{font-family:var(--sans)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.nadtytul-sekcji,.etykieta-sekcji{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--atrament)}
strong,b{font-weight:600}

/* ---------- Układ ---------- */
.kontener{width:100%;max-width:calc(var(--szer) + 2*var(--margines));margin-inline:auto;padding-inline:var(--margines)}
.kontener.waski{max-width:calc(760px + 2*var(--margines))}
.blok{padding-block:clamp(56px,7vw,112px)}
.blok.pole-tlo{background:var(--tlo);border-block:1px solid var(--linia)}
.stos>*+*{margin-top:var(--s4)}
.stos-l>*+*{margin-top:var(--s5)}
main{display:block;min-height:60vh}

/* Nagłówek sekcji: znacznik sekcji (litera) + tytuł + lead */
.sekcja-naglowek{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s3);align-items:start;margin-bottom:clamp(32px,4vw,56px)}
.sekcja-naglowek .litera{justify-self:start;display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:999px;
  background:var(--atrament-jasny);color:var(--atrament);font-family:var(--mono);font-weight:500;font-size:13px;line-height:1}
.sekcja-naglowek h2{max-width:22ch}
.sekcja-naglowek .lead{margin-top:var(--s1);font-size:var(--t-m)}
@media (min-width:960px){
  .sekcja-naglowek{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s7)}
  .sekcja-naglowek .litera{grid-column:1/-1}
  .sekcja-naglowek h2{grid-column:1}
  .sekcja-naglowek .lead{grid-column:2;grid-row:2;align-self:end;margin-top:0}
}

/* ---------- Nagłówek strony ---------- */
.naglowek{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--linia)}
.naglowek-in{display:flex;align-items:center;gap:var(--s5);min-height:68px}
.marka{display:inline-flex;align-items:center;gap:10px;color:var(--grafit);text-decoration:none;font-family:var(--sans);font-weight:600;font-size:1.1875rem;letter-spacing:-.015em;line-height:1}
.marka:hover{color:var(--grafit)}
.marka img,.marka svg{width:32px;height:32px;flex:none;border-radius:7px}
.marka .tld{color:var(--grafit-3);font-weight:400}
.marka span,.nawigacja a{white-space:nowrap}
@media (max-width:480px){.marka{font-size:1rem;gap:8px}.marka img,.marka svg{width:28px;height:28px}}
@media (max-width:360px){.marka{font-size:.9rem}}
.nawigacja{display:flex;align-items:center;gap:2px;margin-left:var(--s4)}
.nawigacja a{position:relative;color:var(--grafit-2);text-decoration:none;font-size:var(--t-s);font-weight:500;padding:8px 12px;border-radius:var(--r-przycisk)}
.nawigacja a:hover{color:var(--grafit);background:var(--pole-2)}
.nawigacja a[aria-current="page"]{color:var(--atrament);font-weight:600}
.nawigacja a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-15px;height:2px;border-radius:2px;background:var(--atrament)}
.konto-strefa{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.kredyty{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--grafit-2);padding:5px 12px;background:var(--pole-2);border:1px solid var(--linia);border-radius:999px;white-space:nowrap}
.kredyty b{color:var(--grafit);font-variant-numeric:tabular-nums}
.menu-przycisk{display:none;margin-left:auto;background:var(--papier);border:1px solid var(--linia);border-radius:var(--r-przycisk);width:44px;height:40px;place-items:center;cursor:pointer;color:var(--grafit)}
.menu-przycisk svg{width:20px;height:20px}
@media (max-width:1100px){  /* menu zwijane wcześniej: długa marka Weryfikacja-Kontrahenta.pl */
  .menu-przycisk{display:grid}
  .naglowek-in{flex-wrap:wrap;gap:0;min-height:64px}
  .nawigacja,.konto-strefa{display:none;width:100%;margin:0}
  .naglowek.otwarte .nawigacja,.naglowek.otwarte .konto-strefa{display:flex}
  .naglowek.otwarte .nawigacja{flex-direction:column;align-items:stretch;border-top:1px solid var(--linia);padding:var(--s2) 0}
  .naglowek.otwarte .nawigacja a{padding:12px 8px;font-size:var(--t-m)}
  .naglowek.otwarte .nawigacja a[aria-current="page"]{background:var(--atrament-jasny)}
  .naglowek.otwarte .nawigacja a[aria-current="page"]::after{display:none}
  .naglowek.otwarte .konto-strefa{flex-wrap:wrap;padding:var(--s3) 0 var(--s4);border-top:1px solid var(--linia)}
}

/* ---------- Stopka ---------- */
.stopka{border-top:1px solid var(--linia);background:var(--tlo);margin-top:0;padding-block:var(--s8) var(--s6);font-size:var(--t-s);color:var(--grafit-2)}
.stopka-siatka{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media (min-width:800px){.stopka-siatka{grid-template-columns:5fr 3fr 4fr}}
.stopka h2{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grafit-3);margin-bottom:var(--s3)}
.stopka ul{list-style:none;padding:0;display:grid;gap:8px}
.stopka a{color:var(--grafit-2);text-decoration:none}
.stopka a:hover{color:var(--atrament);text-decoration:underline}
.stopka .marka{margin-bottom:var(--s4);color:var(--grafit)}
.stopka .marka:hover{text-decoration:none;color:var(--grafit)}
.stopka-opis+.stopka-opis{margin-top:var(--s3)}
.stopka-dol{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--linia);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between;font-size:var(--t-xs);color:var(--grafit-3)}

/* ---------- Przyciski ---------- */
.przycisk{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border:1px solid transparent;
  border-radius:var(--r-przycisk);font-family:var(--sans);font-size:var(--t-m);font-weight:600;line-height:1.2;letter-spacing:-.005em;text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;white-space:nowrap}
.przycisk svg{width:18px;height:18px;flex:none}
.przycisk.glowny{background:var(--atrament);color:#fff;box-shadow:0 1px 2px rgba(14,33,96,.25),inset 0 1px 0 rgba(255,255,255,.1)}
.przycisk.glowny:hover{background:var(--atrament-ciemny);color:#fff}
.przycisk.drugi{background:var(--papier);color:var(--grafit);border-color:var(--linia-mocna);box-shadow:var(--cien-1)}
.przycisk.drugi:hover{background:var(--pole-2);border-color:var(--grafit-3);color:var(--grafit)}
.przycisk.tekstowy{background:none;color:var(--atrament);padding-inline:10px;min-height:40px}
.przycisk.tekstowy:hover{background:var(--atrament-jasny)}
.przycisk.maly{min-height:38px;padding:7px 14px;font-size:var(--t-s)}
.przycisk.pelny{width:100%}
.przycisk:disabled,.przycisk[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.przycisk .krecik{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:obrot .8s linear infinite}
@keyframes obrot{to{transform:rotate(360deg)}}

/* ---------- Formularze ---------- */
.pole-f{display:grid;gap:6px}
.pole-f>label,.etykieta{font-size:var(--t-s);font-weight:600;color:var(--grafit)}
.etykieta .nr{font-weight:500;color:var(--grafit-3);margin-right:6px;font-family:var(--mono);font-size:.9em}
.pole-f .podpowiedz{font-size:var(--t-xs);color:var(--grafit-3)}
.wejscie{width:100%;min-height:48px;padding:11px 14px;background:var(--papier);border:1px solid var(--linia-mocna);border-radius:var(--r-pole);font-size:var(--t-m);box-shadow:var(--cien-1);transition:border-color .15s,box-shadow .15s}
.wejscie:hover{border-color:var(--grafit-3)}
.wejscie:focus{outline:none;background:#fff;border-color:var(--atrament);box-shadow:0 0 0 4px var(--atrament-jasny)}
.wejscie[aria-invalid="true"]{border-color:var(--stop);background:#fff}
.blad-pola{font-size:var(--t-xs);color:var(--stop);font-weight:500;display:flex;gap:6px;align-items:flex-start}
.blad-pola:empty{display:none}
.blad-pola svg{width:15px;height:15px;flex:none;margin-top:2px}
.haslo{position:relative}
.haslo .wejscie{padding-right:96px}
.haslo button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--atrament);font-size:var(--t-s);font-weight:600;padding:6px 10px;cursor:pointer;border-radius:6px}
.haslo button:hover{background:var(--atrament-jasny)}
.zgoda{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:var(--t-s);line-height:1.5;color:var(--grafit-2);cursor:pointer}
.zgoda input{appearance:none;width:20px;height:20px;margin:2px 0 0;border:1.5px solid var(--linia-mocna);border-radius:5px;background:#fff;display:grid;place-items:center;cursor:pointer}
.zgoda input::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.zgoda input:checked{background:var(--atrament);border-color:var(--atrament)}
.zgoda input:checked::after{opacity:1}
.zgoda input[aria-invalid="true"]{border-color:var(--stop);box-shadow:0 0 0 3px var(--stop-tlo)}

/* Pole NIP — 10 kratek (grupy 3-3-2-2), prawdziwy <input> pod spodem */
.nip{--kratka:clamp(24px,calc((100vw - 104px)/10.4),44px);position:relative;display:inline-flex;gap:0;align-items:stretch;max-width:100%}
.nip-kratki{display:flex;align-items:stretch;gap:4px;pointer-events:none}
.nip-kratki span{width:var(--kratka);height:calc(var(--kratka)*1.28);display:grid;place-items:center;background:var(--papier);
  border:1px solid var(--linia-mocna);border-radius:7px;box-shadow:var(--cien-1);font-family:var(--mono);font-size:calc(var(--kratka)*.56);font-weight:500;font-variant-numeric:tabular-nums;color:var(--grafit);position:relative;transition:border-color .12s,box-shadow .12s}
.nip-kratki span.odstep{margin-left:calc(var(--kratka)*.22)}   /* grupy 3-3-2-2 */
.nip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:text;font-size:16px}
.nip.fokus .nip-kratki span{border-color:var(--grafit-3)}
.nip.fokus .nip-kratki span.kursor{border-color:var(--atrament);z-index:1;box-shadow:0 0 0 3px var(--atrament-jasny)}
.nip.fokus .nip-kratki span.kursor::after{content:"";position:absolute;width:2px;height:46%;background:var(--atrament);animation:mruga 1s steps(1) infinite}
.nip.fokus .nip-kratki span.kursor:not(:empty)::after{display:none}
.nip.zle .nip-kratki span{border-color:var(--stop)}
.nip.dobre .nip-kratki span{border-color:#7CC4A0;background:#FAFEFC}
.nip.fokus{box-shadow:none}
@keyframes mruga{50%{opacity:0}}
.formularz-nip{display:grid;gap:var(--s3)}
.formularz-nip .wiersz{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:stretch}
.formularz-nip .przycisk{min-height:52px}
/* kratki i przycisk w jednym rzędzie, gdy formularz jest dość szeroki (desktop): kratki zmniejszają się do szerokości
   formularza minus przycisk; węższy formularz (telefon) — przycisk pod kratkami jak dotąd */
.formularz-nip{container-type:inline-size}
@container (min-width:536px){
  .formularz-nip .wiersz{flex-wrap:nowrap}
  .formularz-nip .wiersz .nip{--kratka:clamp(26px,calc((100cqw - 264px)/10.44),44px)}
  .formularz-nip .wiersz .przycisk{flex:none;white-space:nowrap;padding-inline:18px}
}
.formularz-nip .stan{min-height:1.4em;font-size:var(--t-s);color:var(--grafit-3);display:flex;gap:6px;align-items:center}
.formularz-nip .stan svg{width:16px;height:16px;flex:none}
.formularz-nip .stan.zle{color:var(--stop);font-weight:500}
.formularz-nip .stan.dobre{color:var(--ok);font-weight:500}

/* ---------- Statusy, alerty, wynik ---------- */
.status{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-s);font-weight:500;line-height:1.3}
.status svg{width:16px;height:16px;flex:none}
.status.ok{color:var(--ok)}
.status.uwaga{color:var(--uwaga)}
.status.uwaga svg{color:var(--uwaga-ikona)}
.status.stop{color:var(--stop)}
.status.info{color:var(--info)}
.znacznik{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:var(--t-xs);font-weight:600;line-height:1.4;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(18,26,46,.06)}
.znacznik svg{width:14px;height:14px}
.znacznik.ok{background:var(--ok-tlo);color:var(--ok)}
.znacznik.uwaga{background:var(--uwaga-tlo);color:var(--uwaga)}
.znacznik.stop{background:var(--stop-tlo);color:var(--stop)}
.znacznik.info{background:var(--info-tlo);color:var(--info)}
.znacznik.tusz{background:var(--atrament-jasny);color:var(--atrament)}

.alert-kafel{display:grid;grid-template-columns:22px 1fr;gap:4px 12px;padding:14px 16px;border:1px solid #F3D9BC;border-left:3px solid var(--uwaga-ikona);background:var(--uwaga-tlo);border-radius:10px}
.alert-kafel svg{width:20px;height:20px;color:var(--uwaga-ikona);margin-top:2px}
.alert-kafel b{font-weight:600;color:var(--grafit);line-height:1.35}
.alert-kafel span{grid-column:2;font-size:var(--t-s);color:var(--uwaga);font-weight:500}
.alert-kafel.stop{border-color:#F4C7C2;border-left-color:var(--stop);background:var(--stop-tlo)}
.alert-kafel.stop svg,.alert-kafel.stop span{color:var(--stop)}
.alert-kafel.info{border-color:var(--linia);border-left-color:var(--linia-mocna);background:var(--pole-2)}
.alert-kafel.info svg,.alert-kafel.info span{color:var(--info)}

.wynik{display:flex;align-items:baseline;gap:6px;font-family:var(--sans);line-height:.9}
.wynik .ile{font-size:clamp(3.5rem,2.5rem + 3vw,4.75rem);font-weight:600;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums;color:var(--grafit)}
.wynik .na{font-size:var(--t-l);color:var(--grafit-3);font-weight:500}
/* skala 0–100 z progami */
.skala{position:relative;margin-top:var(--s3)}
.skala-pas{display:grid;grid-template-columns:40fr 20fr 15fr 15fr 11fr;height:6px;gap:3px}
.skala-pas i{display:block;background:var(--linia);border-radius:3px}
.skala-pas i.tu{background:var(--atrament)}
.skala-znak{position:absolute;top:-5px;width:4px;height:16px;border-radius:2px;background:var(--grafit);box-shadow:0 0 0 2px #fff;transform:translateX(-2px)}
.skala-opis{display:flex;justify-content:space-between;font-size:11px;color:var(--grafit-3);margin-top:6px;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- Arkusz dokumentu i pieczątka ---------- */
.arkusz{position:relative;background:var(--papier);border:1px solid var(--linia);border-radius:var(--r-kartka);box-shadow:var(--cien-kartki);padding:clamp(20px,3vw,32px)}
.arkusz-glowka{display:flex;justify-content:space-between;gap:var(--s4);align-items:flex-start;padding-bottom:var(--s4);border-bottom:1px solid var(--linia)}
.arkusz-glowka .rodzaj{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--atrament)}
.arkusz-glowka .nr{font-size:var(--t-xs);color:var(--grafit-3);text-align:right;font-variant-numeric:tabular-nums}
.arkusz-glowka .nr b{display:block;color:var(--grafit);font-weight:500;font-family:var(--mono);font-size:12.5px;margin:2px 0}
.pieczatka{position:absolute;color:var(--tusz);pointer-events:none;transform:rotate(-8deg);mix-blend-mode:multiply;opacity:.92}
.pieczatka svg{width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .pieczatka.przybij{animation:przybij .5s cubic-bezier(.2,.9,.3,1.25) .7s both}
  @keyframes przybij{0%{opacity:0;transform:rotate(-8deg) scale(1.5)}60%{opacity:.9}100%{opacity:.92;transform:rotate(-8deg) scale(1)}}
}

/* ---------- Tabela ---------- */
.tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela{width:100%;border-collapse:collapse;font-size:var(--t-s)}
.tabela caption{text-align:left;font-size:var(--t-xs);color:var(--grafit-3);padding-bottom:var(--s2)}
.tabela th,.tabela td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--linia)}
.tabela thead th{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grafit-3);border-bottom:1px solid var(--linia-mocna);padding-top:0}
.tabela tbody th{font-weight:600;color:var(--grafit)}
.tabela td.liczba,.tabela th.liczba{text-align:right;padding-right:0;white-space:nowrap}
.tabela tr:last-child>*{border-bottom:0}
.tabela .lp{width:2.5em;color:var(--grafit-3);font-weight:500;font-family:var(--mono);font-size:var(--t-xs);font-variant-numeric:tabular-nums}

/* ---------- Ramki i notki ---------- */
.ramka{border:1px solid var(--linia);border-radius:var(--r-kartka);padding:var(--s5);background:var(--papier);box-shadow:var(--cien-1)}
.notka{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:var(--s4) var(--s5);background:var(--pole-2);border:1px solid var(--linia);font-size:var(--t-s);color:var(--grafit-2);border-radius:10px}
.notka svg{width:20px;height:20px;margin-top:1px}
.notka.ok{background:var(--ok-tlo);border-color:#BFE3CF;color:var(--ok)}
.notka.uwaga{background:var(--uwaga-tlo);border-color:#F3D9BC;color:var(--uwaga)}
.notka.stop{background:var(--stop-tlo);border-color:#F4C7C2;color:var(--stop)}
.notka b{color:inherit}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linia)}
.faq details{border-bottom:1px solid var(--linia)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s4);align-items:flex-start;padding:20px 0;font-weight:600;font-size:var(--t-m);line-height:1.4}
.faq summary:hover{color:var(--atrament)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;margin-top:2px;transition:transform .2s;color:var(--grafit-3)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq .odp{padding:0 0 22px;color:var(--grafit-2);max-width:68ch}
.faq .odp>*+*{margin-top:var(--s3)}

/* ---------- Toasty ---------- */
.toasty{position:fixed;z-index:200;left:50%;bottom:24px;transform:translateX(-50%);display:grid;gap:8px;width:min(440px,calc(100% - 32px));pointer-events:none}
.toast{pointer-events:auto;display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:start;background:#121A2E;color:#fff;padding:14px 16px;border-radius:12px;font-size:var(--t-s);box-shadow:0 16px 40px -12px rgba(18,26,46,.55)}
.toast svg{width:20px;height:20px;color:var(--akcent)}
.toast.ok svg{color:#6FD3A0}
.toast.blad svg{color:#F59A90}
.toast button{background:none;border:0;color:#C9D0DE;cursor:pointer;padding:0 2px;font-size:20px;line-height:1}
@media (prefers-reduced-motion:no-preference){.toast{animation:wjazd .2s ease-out}@keyframes wjazd{from{opacity:0;transform:translateY(8px)}}}

/* ---------- Stan pusty ---------- */
.pusty{border:1px dashed var(--linia-mocna);border-radius:var(--r-kartka);padding:clamp(32px,6vw,64px) var(--s5);text-align:center;color:var(--grafit-2);background:var(--pole-2)}
.pusty h2,.pusty h3{color:var(--grafit);margin-bottom:var(--s2)}
.pusty p{margin-inline:auto}
.pusty .akcje{margin-top:var(--s5);display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}

/* ---------- Szkielet ładowania ---------- */
.szkielet{background:linear-gradient(90deg,var(--pole) 0,var(--pole-2) 50%,var(--pole) 100%);background-size:200% 100%;border-radius:6px;min-height:1em}
@media (prefers-reduced-motion:no-preference){.szkielet{animation:szkielet 1.4s linear infinite}@keyframes szkielet{to{background-position:-200% 0}}}

/* ---------- Proza (dokumenty prawne, długi tekst) ---------- */
.proza{font-family:var(--sans);font-size:1.0625rem;line-height:1.72;color:var(--grafit);max-width:70ch;hyphens:auto;-webkit-hyphens:auto}
.proza h1{font-size:clamp(2rem,1.5rem + 2vw,2.75rem);margin-bottom:var(--s5)}
.proza h2{font-size:var(--t-xl);margin-top:2.2em;margin-bottom:.6em;padding-top:var(--s4);border-top:1px solid var(--linia)}
.proza h3{font-family:var(--sans);font-size:var(--t-m);margin-top:1.6em;margin-bottom:.4em}
.proza p,.proza ul,.proza ol{margin-top:0;margin-bottom:1em;max-width:none}
.proza ul,.proza ol{padding-left:1.4em}
.proza li+li{margin-top:.35em}
.proza li::marker{color:var(--grafit-3)}
.proza ol>li::marker{font-family:var(--sans);font-size:.85em;font-weight:600}
.proza .tabela-przewijana{overflow-x:auto;-webkit-overflow-scrolling:touch}
.proza .tabela-przewijana table{min-width:640px;hyphens:none;-webkit-hyphens:none}
.proza table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:var(--t-s);margin:1.2em 0}
.proza th,.proza td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--linia)}
.proza th{border-bottom:1px solid var(--linia-mocna);font-weight:600}
.proza a{word-break:break-word}
.proza strong{font-weight:600}
.proza hr{border:0;border-top:1px solid var(--linia);margin:2em 0}
.proza dl{margin:0 0 1em;display:grid;gap:.2em}
.proza dt{font-family:var(--sans);font-weight:600;font-size:var(--t-s);margin-top:.8em}
.proza dd{margin:0;padding-left:1em;border-left:2px solid var(--linia)}
.proza code{font-family:var(--mono);font-size:.85em;background:var(--pole);padding:1px 6px;border-radius:4px;word-break:break-word}
.proza .dokument-wersja{font-family:var(--sans);font-size:var(--t-s);color:var(--grafit-3);padding-bottom:var(--s4)}
.proza section{scroll-margin-top:88px}
.proza blockquote{border-left:3px solid var(--akcent);padding-left:1em;color:var(--grafit-2)}

/* ---------- Druk ---------- */
@media print{
  .naglowek,.stopka,.toasty,.nie-drukuj{display:none!important}
  body{font-size:11pt;color:#000}
  .kontener{max-width:none;padding:0}
  a{color:#000}
  .proza{font-size:11.5pt;max-width:none}
  .proza a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444}
  .proza h2{break-after:avoid}
  .arkusz{box-shadow:none}
}

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

/* pasek zgody na pomiar reklamy — tylko po wejściu z reklamy w ChatGPT (?oppref=…, static/js/wspolne.js) */
.zgoda-reklama{position:fixed;z-index:190;left:50%;bottom:16px;transform:translateX(-50%);width:min(720px,calc(100% - 32px));display:flex;gap:var(--s4);align-items:center;background:var(--papier);color:var(--grafit);border:1px solid var(--linia-mocna);border-radius:var(--r-kartka);padding:var(--s4);box-shadow:var(--cien-duzy);font-size:var(--t-s);line-height:1.45}
.zgoda-reklama p{margin:0}
.zgoda-reklama-przyciski{display:flex;gap:8px;flex-shrink:0}
@media (max-width:640px){.zgoda-reklama{flex-direction:column;align-items:stretch}.zgoda-reklama-przyciski>*{flex:1}}
.zgoda-stan{margin:var(--s4) 0;grid-template-columns:1fr}