/* Urzędówka. Paleta (z koperty, papieru i pieczątki):
   koperta  #D8D9D4  tło strony, szarość koperty
   papier   #FBFAF7  kartka, pismo, arkusze
   grafit   #2E3236  tekst, przyciski, ciemny pas
   ołówek   #565B60  tekst pomocniczy
   pieczątka #AE2A20 jedyny akcent: pieczątka „wpłynęło”, termin pod presją */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/FamiljenGrotesk-var-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  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: "Familjen Grotesk";
  src: url("/assets/fonts/FamiljenGrotesk-var-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  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: "PT Serif";
  src: url("/assets/fonts/PTSerif-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "PT Serif";
  src: url("/assets/fonts/PTSerif-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "PT Serif";
  src: url("/assets/fonts/PTSerif-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  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: "PT Serif";
  src: url("/assets/fonts/PTSerif-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  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;
}

:root {
  --koperta: #D8D9D4;
  --koperta-ciemna: #C7C9C3;
  --papier: #FBFAF7;
  --grafit: #2E3236;
  --olowek: #565B60;
  --pieczatka: #AE2A20;
  --linia: #A9ACA6;
  --jasny-na-grafit: #C9CCC7;
  --interfejs: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pismo: "PT Serif", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  font-family: var(--interfejs);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--grafit);
  background: var(--koperta);
  font-weight: 400;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.012em; line-height: 1.15; margin: 0; }
p { margin: 0 0 1em; max-width: 60ch; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { margin: 0; padding: 0; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
.tylko-czytnik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: absolute; left: 8px; top: -60px; background: var(--grafit); color: var(--papier); padding: 10px 14px; border-radius: 4px; z-index: 50; }
.pomin:focus { top: 8px; }

:focus-visible { outline: 3px solid var(--grafit); outline-offset: 2px; border-radius: 2px; }
.ciemny :focus-visible { outline-color: var(--papier); }

/* ---------- nagłówek ---------- */
.gora { border-bottom: 1px solid var(--linia); background: var(--koperta); position: relative; z-index: 20; }
.gora .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 16px; }
.marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; text-decoration: none; }
.marka svg { width: 28px; height: 28px; flex: none; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 500; background: transparent; color: var(--grafit); border: 1px solid var(--grafit); border-radius: 4px; padding: 8px 12px; cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; }
.menu { display: none; list-style: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--koperta); border-bottom: 1px solid var(--linia); padding: 8px 16px 20px; }
.menu.otwarte { display: block; }
.menu li { border-bottom: 1px solid var(--linia); }
.menu a { display: block; padding: 14px 2px; text-decoration: none; font-weight: 500; }
.menu li.menu-konto { border: 0; padding-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.menu li.menu-konto a { display: inline-block; }
.menu li.menu-konto a.btn { padding: 12px 18px; display: inline-flex; }

/* ---------- przyciski i pola ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; padding: 12px 18px; border-radius: 4px; border: 1px solid var(--grafit); background: var(--grafit); color: var(--papier); cursor: pointer; min-height: 44px; }
.btn:hover { background: #3D4247; text-decoration: none; }
.btn.drugi { background: transparent; color: var(--grafit); }
.btn.drugi:hover { background: var(--koperta-ciemna); }
.btn.maly { padding: 7px 12px; min-height: 36px; font-size: .9375rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .7; cursor: progress; }
.btn.na-ciemnym { background: var(--papier); color: var(--grafit); border-color: var(--papier); }

label, .etykieta { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--grafit); background: var(--papier);
  border: 1px solid var(--olowek); border-radius: 3px; padding: 10px 12px; min-height: 44px;
}
textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.pole { margin-bottom: 18px; }
.pole .blad { color: var(--pieczatka); font-size: .9375rem; margin: 6px 0 0; font-weight: 500; }
.pole.zle input, .pole.zle select, .pole.zle textarea { border-color: var(--pieczatka); border-width: 2px; }
.pole .podpowiedz { color: var(--olowek); font-size: .9375rem; margin: 6px 0 0; }
.zgoda { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.zgoda input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--grafit); }
.zgoda label { margin: 0; font-weight: 400; }
.zgoda.zle label { color: var(--pieczatka); }
.status-formularza { min-height: 1.5em; margin: 14px 0 0; font-weight: 500; }
.status-formularza.blad { color: var(--pieczatka); }
.link-przycisk { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- pierwszy ekran: pismo i „Po ludzku” ---------- */
.start { padding: 28px 0 56px; }
.start-naglowek { display: grid; gap: 18px; margin-bottom: 26px; }
.start h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); max-width: 28ch; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 12px; }
.start-lead { margin: 0; color: var(--olowek); max-width: 52ch; font-size: 1.0625rem; }
.przyklady { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.przyklady-opis { font-weight: 600; font-size: .9375rem; margin-right: 6px; }
.przyklady [role="tablist"] { display: flex; gap: 0; flex-wrap: wrap; }
.przyklady [role="tab"] { font: inherit; font-weight: 500; font-size: .9375rem; padding: 9px 14px; border: 1px solid var(--grafit); background: transparent; color: var(--grafit); cursor: pointer; min-height: 44px; margin-left: -1px; }
.przyklady [role="tab"]:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
.przyklady [role="tab"]:last-child { border-radius: 0 4px 4px 0; }
.przyklady [role="tab"][aria-selected="true"] { background: var(--grafit); color: var(--papier); }

.stol { display: grid; gap: 22px; align-items: start; }
.stol > * { min-width: 0; }
.pismo-ramka { position: relative; }
.pismo {
  position: relative; background: var(--papier); color: var(--grafit);
  font-family: var(--pismo); font-size: .9375rem; line-height: 1.6;
  padding: 28px 24px 26px; border-radius: 1px;
  box-shadow: 0 1px 0 var(--linia), 0 14px 22px -14px rgba(46, 50, 54, .45);
  transform: rotate(-0.3deg);
  overflow: hidden;
}
.pismo p { max-width: none; margin: 0 0 .85em; }
.pismo-glowa { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.pismo .nadawca { font-weight: 700; margin: 0; max-width: 40ch; }
.pismo .miejsce { margin: 0; text-align: right; max-width: 11em; }
.pismo .znak { color: var(--olowek); font-size: .875rem; }
.pismo .adresat { margin: 1.1em 0 1.3em auto; width: fit-content; min-width: min(16em, 100%); }
.pismo .tytul { font-weight: 700; font-size: 1.0625rem; margin: 1.1em 0 .8em; }
.pismo .pouczenie { font-size: .875rem; border-top: 1px solid var(--linia); padding-top: .8em; margin-top: 1.1em; }
.pismo .podpis { text-align: right; margin: 1.3em 0 0; }
.pismo .podpis em { font-size: .8125rem; color: var(--olowek); font-style: normal; }
.pismo .braki { margin: 0 0 .85em 1.4em; }
.pismo strong { font-weight: 700; }
.pismo.zwiniete { max-height: 22rem; }
.pismo-rozwin { margin-top: 10px; }

.stempel {
  position: absolute; z-index: 3; top: -28px; right: 8px; transform: rotate(-9deg);
  border: 3px solid var(--pieczatka); color: var(--pieczatka); border-radius: 4px;
  padding: 4px 11px 5px; text-align: center; font-family: var(--interfejs); font-weight: 700; line-height: 1.15;
  background: rgba(251, 250, 247, .55);
  pointer-events: none;
}
.stempel b { display: block; font-size: 1.25rem; letter-spacing: .14em; }
.stempel span { display: block; font-size: .8125rem; letter-spacing: .12em; }
.stempel.uderzenie { animation: stempel-uderzenie .24s ease-out; }
@keyframes stempel-uderzenie { from { transform: rotate(-9deg) scale(1.35); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }

.wynik { background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; padding: 22px 20px 22px; }
.wynik h2 { font-size: 1.375rem; margin-bottom: 14px; }
.termin { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: end; padding: 14px 0 16px; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); margin-bottom: 18px; }
.termin-dni { margin: 0; line-height: 1; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.termin-dni strong { font-size: 3.5rem; font-weight: 700; }
.termin-dni span { font-size: 1.125rem; font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.termin-data { margin: 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; align-self: center; }
.termin-podstawa { grid-column: 1 / -1; margin: 10px 0 0; font-size: .9375rem; color: var(--olowek); max-width: 60ch; }
.termin.pilny .termin-dni { color: var(--pieczatka); }
.zdania { list-style: none; margin: 0 0 18px; }
.zdania li { margin: 0 0 .5em; max-width: 60ch; line-height: 1.45; }
.fakty { margin: 0 0 18px; display: grid; gap: 10px; }
.fakty dt { font-weight: 700; font-size: .9375rem; }
.fakty dd { margin: 2px 0 0; max-width: 60ch; }
.wynik h3 { font-size: 1.0625rem; margin-bottom: 10px; }
.szkic { font-family: var(--pismo); font-size: .9375rem; line-height: 1.6; background: var(--koperta); border-radius: 2px; padding: 14px 16px; position: relative; }
.szkic p { margin: 0 0 .7em; max-width: none; }
.szkic.zwiniety { max-height: 9.5rem; overflow: hidden; }
.szkic .tytul { font-weight: 700; }
.szkic ol { margin: 0 0 .7em 1.3em; }
.luka { background: var(--papier); border-bottom: 2px dashed var(--grafit); padding: 0 3px; font-family: var(--interfejs); font-size: .875rem; white-space: normal; }
.szkic-akcje { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.szkic-uwaga { font-size: .9375rem; color: var(--olowek); margin: 12px 0 0; }
.wczytuje { padding: 40px 0; color: var(--olowek); font-weight: 500; }
.kroki-mini { margin: 0 0 18px 1.2em; max-width: 60ch; }
.kroki-mini li { margin-bottom: .35em; }

/* ---------- sekcje ---------- */
.sekcja { padding: 56px 0; border-top: 1px solid var(--linia); }
.sekcja h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.125rem); margin-bottom: 16px; max-width: 24ch; letter-spacing: -0.02em; }
.sekcja-lead { color: var(--olowek); max-width: 60ch; }
.dwie { display: grid; gap: 28px; }

.droga { list-style: none; counter-reset: krok; }
.droga li { counter-increment: krok; padding: 18px 0 18px 44px; border-top: 1px solid var(--linia); position: relative; }
.droga li:last-child { border-bottom: 1px solid var(--linia); }
.droga li::before { content: counter(krok); position: absolute; left: 0; top: 18px; width: 30px; height: 30px; border: 1px solid var(--grafit); border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .9375rem; }
.droga h3 { font-size: 1.125rem; margin-bottom: 4px; }
.droga p { margin: 0; color: var(--olowek); }

.skrzynka-zdj { margin: 0; background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; overflow: hidden; }
.skrzynka-zdj figcaption { padding: 10px 14px; border-top: 1px solid var(--linia); font-size: .9375rem; color: var(--olowek); }
.skrzynka-pasek { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--linia); align-items: center; }
.skrzynka-pasek .chip { font-size: .875rem; }
.chip { display: inline-block; padding: 4px 10px; border: 1px solid var(--olowek); border-radius: 999px; font-weight: 500; line-height: 1.3; }
.chip.wybrany { background: var(--grafit); color: var(--papier); border-color: var(--grafit); }
.mini-lista { list-style: none; }
.mini-lista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 14px; border-bottom: 1px solid var(--linia); align-items: baseline; }
.mini-lista li:last-child { border-bottom: 0; }
.mini-lista strong { font-weight: 600; }
.mini-lista .drobne { color: var(--olowek); font-size: .9375rem; }
.mini-lista .za { font-weight: 700; text-align: right; white-space: nowrap; }
.mini-lista .za.pilne { color: var(--pieczatka); }

.tabela-opakowanie { margin-top: 24px; background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; overflow: hidden; }
.tabela { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tabela caption { text-align: left; padding: 14px 16px 6px; font-weight: 600; }
.tabela th { text-align: left; font-weight: 600; font-size: .9375rem; padding: 10px 16px; border-bottom: 1px solid var(--grafit); }
.tabela td { padding: 14px 16px; vertical-align: top; border-bottom: 1px solid var(--linia); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td:first-child { font-weight: 600; width: 30%; }
.tabela .art { color: var(--olowek); font-size: .9375rem; display: block; margin-top: 2px; font-weight: 400; }
.przypis { color: var(--olowek); font-size: .9375rem; margin-top: 14px; max-width: 64ch; }

.ciemny { background: var(--grafit); color: var(--papier); border-top: 0; }
.ciemny .sekcja-lead, .ciemny .drobne { color: var(--jasny-na-grafit); }
.zaufanie-siatka { display: grid; gap: 34px; margin-top: 8px; }
.zasady { list-style: none; display: grid; gap: 22px; }
.zasady h3 { font-size: 1.125rem; margin-bottom: 4px; }
.zasady p { margin: 0; color: var(--jasny-na-grafit); }
.dzialamy { display: inline-block; border: 1px solid var(--jasny-na-grafit); border-radius: 4px; padding: 6px 12px; margin: 0 0 22px; font-weight: 600; }
.podzial { display: grid; gap: 0; border: 1px solid var(--jasny-na-grafit); border-radius: 6px; overflow: hidden; }
.podzial > div { padding: 18px 18px 6px; }
.podzial > div + div { border-top: 1px solid var(--jasny-na-grafit); }
.podzial h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.podzial ul { list-style: none; color: var(--jasny-na-grafit); }
.podzial li { padding: 0 0 12px 16px; position: relative; }
.podzial li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--jasny-na-grafit); }
.liczby, .opinie, .partnerzy { margin-top: 26px; }
.opinie blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 3px solid var(--jasny-na-grafit); max-width: 60ch; }
.opinie cite { display: block; font-style: normal; color: var(--jasny-na-grafit); font-size: .9375rem; margin-top: 4px; }

.cennik-tab { margin-top: 20px; background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; }
.plan { display: grid; gap: 6px 20px; padding: 18px 18px; border-bottom: 1px solid var(--linia); }
.plan:last-child { border-bottom: 0; }
.plan h3 { font-size: 1.1875rem; }
.plan .cena { font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.plan .cena small { font-size: .9375rem; font-weight: 500; color: var(--olowek); letter-spacing: 0; }
.plan p { margin: 0; color: var(--olowek); }

/* ---------- stopka ---------- */
.stopka { background: var(--koperta-ciemna); padding: 34px 0 40px; border-top: 1px solid var(--linia); font-size: .9375rem; }
.stopka .wrap { display: grid; gap: 22px; }
.stopka ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.stopka p { margin: 0 0 4px; color: var(--grafit); }
.stopka .drobne { color: var(--grafit); }

/* ---------- strony kont ---------- */
.konto-strona { padding: 36px 0 72px; }
.konto-kolumna { max-width: 460px; }
.konto-kolumna h1 { font-size: 2rem; margin-bottom: 8px; letter-spacing: -0.02em; }
.konto-kolumna .lead { color: var(--olowek); margin-bottom: 26px; }
.formularz { background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; padding: 24px 20px; }
.formularz .btn { width: 100%; }
.pod-formularzem { margin-top: 18px; }
.reset-blok { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--linia); }
.potwierdzenie { background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; padding: 24px 20px; }
.potwierdzenie h2 { font-size: 1.375rem; margin-bottom: 8px; }
.tekst-prawny { padding: 36px 0 72px; }
.tekst-prawny .wrap > * { max-width: 56ch; }
.tekst-prawny h1 { font-size: 2rem; margin-bottom: 8px; }
.tekst-prawny h2 { font-size: 1.25rem; margin: 30px 0 8px; }
.tekst-prawny li { margin-bottom: .4em; margin-left: 1.2em; }
.tekst-prawny .szkic-info { color: var(--olowek); }
.strona-404 { padding: 64px 0 96px; }
.strona-404 h1 { font-size: 2.25rem; margin-bottom: 12px; }

/* ---------- panel ---------- */
.panel-gora .wrap { max-width: 1400px; }
.panel-uzytkownik { display: flex; align-items: center; gap: 12px; font-size: .9375rem; }
.panel-uzytkownik span { display: none; }
.panel-tlo { padding: 20px 0 56px; }
.panel-tlo .wrap { max-width: 1400px; }
.panel-tytul { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 16px; }
.panel-tytul h1 { font-size: 1.625rem; }
.panel-tytul p { margin: 0; color: var(--olowek); font-size: .9375rem; }
.narzedzia { display: grid; gap: 12px; margin-bottom: 16px; }
.zakladki { display: flex; }
.zakladki button { font: inherit; font-weight: 600; padding: 10px 8px; border: 1px solid var(--grafit); background: transparent; color: var(--grafit); cursor: pointer; margin-left: -1px; min-height: 44px; flex: 1; }
.zakladki button:first-child { margin-left: 0; border-radius: 4px 0 0 4px; }
.zakladki button:last-child { border-radius: 0 4px 4px 0; }
.zakladki button[aria-selected="true"] { background: var(--grafit); color: var(--papier); }
.filtry { display: grid; gap: 10px; }
.filtry .pole { margin: 0; }
.filtry label { font-size: .875rem; margin-bottom: 4px; }
.statusy { display: flex; flex-wrap: wrap; gap: 6px; }
.statusy button { font: inherit; font-size: .9375rem; font-weight: 500; padding: 7px 12px; border: 1px solid var(--olowek); border-radius: 999px; background: transparent; color: var(--grafit); cursor: pointer; min-height: 40px; }
.statusy button[aria-pressed="true"] { background: var(--grafit); color: var(--papier); border-color: var(--grafit); }
.statusy .licznik { margin-left: 4px; opacity: .85; }

.siatka-panelu { display: grid; gap: 16px; align-items: start; }
.lista-pism { list-style: none; background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; overflow: hidden; }
.wiersz { display: grid; grid-template-columns: 44px 1fr; border-bottom: 1px solid var(--linia); }
.wiersz:last-child { border-bottom: 0; }
.wiersz.otwarty { background: var(--koperta); }
.wiersz-odhacz { display: grid; place-items: center; }
.wiersz-odhacz input { width: 22px; height: 22px; accent-color: var(--grafit); margin: 0; }
.wiersz-otworz { font: inherit; text-align: left; background: transparent; border: 0; padding: 12px 14px 12px 0; color: inherit; cursor: pointer; display: grid; gap: 2px 14px; grid-template-columns: 1fr auto; align-items: start; width: 100%; }
.wiersz-tytul { font-weight: 600; line-height: 1.3; }
.wiersz-klient { color: var(--olowek); font-size: .9375rem; grid-column: 1; }
.wiersz-termin { grid-row: 1 / span 2; grid-column: 2; text-align: right; font-weight: 700; white-space: nowrap; font-size: .9375rem; }
.wiersz-termin.pilne { color: var(--pieczatka); }
.wiersz-termin small { display: block; font-weight: 400; color: var(--olowek); font-size: .8125rem; }
.znacznik { grid-column: 1 / -1; font-size: .8125rem; font-weight: 600; justify-self: start; border: 1px solid var(--olowek); border-radius: 999px; padding: 1px 9px; margin-top: 4px; }
.znacznik.st-nowe { background: var(--grafit); border-color: var(--grafit); color: var(--papier); }
.znacznik.st-wyslane { border-style: dashed; color: var(--olowek); }
.wiersz.zrobione .wiersz-tytul { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--olowek); }
.pusto { padding: 28px 18px; color: var(--olowek); }

.szczegoly { background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; padding: 20px 18px; }
.szczegoly[hidden] { display: none; }
.szczegoly h2 { font-size: 1.375rem; margin-bottom: 4px; max-width: 28ch; }
.szczegoly .meta { color: var(--olowek); margin: 0 0 14px; font-size: .9375rem; }
.szczegoly .wstecz { margin-bottom: 14px; }
.szczegoly-termin { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); margin-bottom: 14px; }
.szczegoly-termin strong { font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; }
.szczegoly-termin.pilne strong { color: var(--pieczatka); }
.szczegoly-termin span { font-weight: 600; }
.szczegoly .stempel { position: static; display: inline-block; transform: rotate(-4deg); margin: 0 0 14px; }
.status-wybor { border: 0; padding: 0; margin: 0 0 16px; }
.status-wybor legend { font-weight: 600; font-size: .9375rem; padding: 0; margin-bottom: 6px; }
.status-wybor div { display: flex; flex-wrap: wrap; gap: 6px; }
.status-wybor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.status-wybor label { margin: 0; padding: 8px 12px; border: 1px solid var(--olowek); border-radius: 4px; cursor: pointer; font-weight: 500; font-size: .9375rem; min-height: 40px; display: inline-flex; align-items: center; }
.status-wybor input:checked + label { background: var(--grafit); color: var(--papier); border-color: var(--grafit); }
.status-wybor input:focus-visible + label { outline: 3px solid var(--grafit); outline-offset: 2px; }
.szczegoly textarea { font-family: var(--pismo); font-size: .9375rem; line-height: 1.6; min-height: 260px; background: var(--papier); }
.szczegoly .akcje { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.szczegoly .zapis-info { min-height: 1.4em; margin: 10px 0 0; font-size: .9375rem; color: var(--olowek); }
.szczegoly-pusto { padding: 28px 18px; background: transparent; border: 1px dashed var(--olowek); border-radius: 6px; color: var(--olowek); }

.kalendarz-pasek { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kalendarz-pasek h2 { font-size: 1.25rem; }
.kalendarz { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; overflow: hidden; }
.kal-dzien-nazwa { padding: 8px 4px; text-align: center; font-weight: 600; font-size: .8125rem; border-bottom: 1px solid var(--grafit); }
.kal-komorka { min-height: 56px; border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); padding: 4px; text-align: left; font: inherit; background: transparent; color: inherit; cursor: pointer; display: block; border-top: 0; border-left: 0; width: 100%; }
.kal-komorka:nth-child(7n) { border-right: 0; }
.kal-komorka .num { font-weight: 600; font-size: .875rem; display: block; }
.kal-komorka.poza { background: var(--koperta); color: var(--olowek); }
.kal-komorka.dzis .num { background: var(--grafit); color: var(--papier); display: inline-block; min-width: 22px; text-align: center; border-radius: 3px; }
.kal-komorka.wybrana { outline: 3px solid var(--grafit); outline-offset: -3px; }
.kal-wpisy { display: none; }
.kal-licznik { display: inline-block; margin-top: 2px; font-size: .75rem; font-weight: 700; border: 1px solid var(--grafit); border-radius: 999px; padding: 0 6px; }
.kal-licznik.pilne { border-color: var(--pieczatka); color: var(--pieczatka); }
.kal-lista { list-style: none; margin-top: 14px; background: var(--papier); border: 1px solid var(--grafit); border-radius: 6px; }
.kal-lista h3 { padding: 12px 16px 0; font-size: 1.0625rem; }
.kal-lista .pusto { padding: 12px 16px 16px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--grafit); color: var(--papier); padding: 10px 16px; border-radius: 4px; font-weight: 500; z-index: 60; max-width: calc(100% - 32px); }
.toast[hidden] { display: none; }

/* ---------- szerzej ---------- */
@media (min-width: 640px) {
  .wrap { padding-inline: 24px; }
  .pismo { padding: 34px 38px 30px; }
  .panel-uzytkownik span { display: inline; }
  .filtry { grid-template-columns: minmax(0, 280px) 1fr; align-items: end; }
}
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .menu, .menu.otwarte { display: flex; position: static; background: transparent; border: 0; padding: 0; align-items: center; gap: 24px; }
  .menu li { border: 0; }
  .menu a { padding: 8px 0; }
  .menu li.menu-konto { padding: 0; gap: 8px; flex-wrap: nowrap; }
  .menu li.menu-konto a { padding: 8px 14px; }
  .menu li.menu-konto a.btn { padding: 9px 16px; min-height: 40px; }
  .start { padding: 26px 0 72px; }
  .start-naglowek { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 28px; }
  .przyklady { justify-content: flex-end; }
  .stol { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; }
  .pismo { font-size: .9375rem; padding: 34px 52px 30px; }
  .pismo-rozwin { display: none; }
  .pismo.zwiniete { max-height: none; }
  .stempel { top: 172px; right: auto; left: 52px; }
  .wynik { padding: 26px 26px; }
  .dwie { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .zaufanie-siatka { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
  .plan { grid-template-columns: 1fr auto; align-items: center; }
  .plan p { grid-column: 1; }
  .stopka .wrap { grid-template-columns: 1fr auto; align-items: start; }
  .narzedzia { grid-template-columns: 400px 1fr; align-items: end; gap: 24px; }
  .siatka-panelu { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; }
  .szczegoly { position: sticky; top: 12px; }
  .szczegoly .wstecz { display: none; }
  .kal-komorka { min-height: 104px; padding: 6px; }
  .kal-wpisy { display: block; list-style: none; margin-top: 4px; }
  .kal-wpisy button { display: block; width: 100%; text-align: left; font: inherit; font-size: .75rem; line-height: 1.25; padding: 3px 5px; margin-bottom: 3px; background: var(--koperta); border: 0; border-left: 3px solid var(--grafit); border-radius: 2px; cursor: pointer; color: var(--grafit); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kal-wpisy button.pilne { border-left-color: var(--pieczatka); }
  .kal-wpisy button.zrobione { text-decoration: line-through; color: var(--olowek); }
  .kal-licznik { display: none; }
  .kal-dzien-nazwa { font-size: .875rem; }
}
@media (max-width: 899px) {
  .siatka-panelu.otwarta .lista-pism { display: none; }
  .siatka-panelu:not(.otwarta) .szczegoly { display: none; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela td:first-child { width: 100%; padding-bottom: 2px; border-bottom: 0; }
  .tabela td { padding: 6px 16px; border-bottom: 0; }
  .tabela tr { padding: 10px 0; border-bottom: 1px solid var(--linia); }
  .tabela tr:last-child { border-bottom: 0; }
  .tabela td[data-etykieta]::before { content: attr(data-etykieta); display: block; font-size: .8125rem; color: var(--olowek); font-weight: 600; }
}
@media (min-width: 1100px) {
  .siatka-panelu { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.kal-dzien { display: block; width: 100%; min-height: 40px; text-align: left; font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }
.kal-komorka { cursor: default; }