:root { --tlo: #f3f4f6; --karta: #fff; --tekst: #1f2937; --szary: #6b7280; --linia: #e5e7eb; --akcent: #9a3412; --ciemny: #1f2937; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--tlo); color: var(--tekst); }
.gora { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--ciemny); color: #fff; position: sticky; top: 0; z-index: 10; }
.gora .szary { color: #cbd5e1; font-weight: 400; }
.logo { font-size: 16px; margin: 0; }
.gora-akcje { display: flex; gap: 8px; flex-wrap: wrap; max-width: 100%; }
.gora-akcje select { max-width: 100%; }
main { max-width: 1180px; margin: 0 auto; padding: 16px 16px 96px; display: grid; gap: 14px; min-width: 0; }
main.waska { max-width: 820px; }
.karta { min-width: 0; }
a { color: var(--akcent); }
a.przycisk { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 6px; text-decoration: none; background: var(--akcent); color: #fff; }
a.przycisk.drugi { background: #e5e7eb; color: var(--tekst); }
.ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pomin { position: absolute; left: -9999px; }
.pomin:focus { left: 16px; top: 8px; z-index: 20; background: #fff; padding: 8px 12px; border-radius: 6px; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
input[type="file"] { max-width: 100%; }
.l, .pasek b { font-variant-numeric: tabular-nums; }
.pasek { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linia); box-shadow: 0 -2px 8px rgb(0 0 0 / .06); }
.pasek b { font-size: 16px; margin-right: 10px; }
.znacznik { background: #fef3c7; border: 1px solid #b45309; color: #78350f; border-radius: 4px; padding: 2px 6px; font-size: 13px; }
.blad-pola { color: #b91c1c; min-height: 22px; margin: 6px 0; }
.pomoc { color: var(--szary); font-size: 13px; }
label.kod { max-width: 320px; margin-top: 14px; }
table.rabaty input { width: 90px; text-align: right; }
.karta { background: var(--karta); border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
h2 { font-size: 16px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--akcent); color: #fff; font-size: 13px; }
.szary { color: var(--szary); }
.siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px 14px; margin: 8px 0; }
label { display: grid; gap: 3px; font-size: 13px; color: #374151; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
label.pelna { margin-top: 6px; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: var(--tekst); min-width: 0; }
input[type="checkbox"] { width: 18px; height: 18px; }
button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 0; background: var(--akcent); color: #fff; cursor: pointer; }
button.drugi { background: #e5e7eb; color: var(--tekst); }
button:disabled { opacity: .5; cursor: wait; }
.wiersz { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.szeroki { flex: 1 1 320px; }
.waski { width: 90px; }
details { margin: 8px 0; }
summary { cursor: pointer; color: var(--akcent); font-weight: 600; }
.podsumowanie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.podsumowanie div { background: #f9fafb; border: 1px solid var(--linia); border-radius: 6px; padding: 6px 10px; }
.podsumowanie b { display: block; font-size: 15px; }
.ostrzezenie { background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
.odczyt { background: #f9fafb; border: 1px solid var(--linia); border-radius: 6px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }
.odczyt ul { margin: 4px 0; padding-left: 18px; }
.przewijanie { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 5px 6px; border-bottom: 1px solid var(--linia); text-align: left; vertical-align: top; }
th { background: #f9fafb; font-weight: 600; white-space: nowrap; }
.l { text-align: right; }
td input { width: 84px; padding: 4px 6px; text-align: right; }
td .nazwa { color: var(--szary); font-size: 12px; }
tr.brak td { background: #fef3c7; }
tr.edytowana td:first-child { box-shadow: inset 3px 0 0 var(--akcent); }
tfoot td { font-weight: 600; border-bottom: 0; }
.usun { background: none; color: #b91c1c; padding: 0 4px; }

.rysunek { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; }
.rysunek img { width: 160px; max-width: 100%; border: 1px solid var(--linia); border-radius: 6px; background: #fff; }
.rysunek-pola { display: grid; gap: 6px; min-width: 0; }
/* oferta: widoczna tylko w druku */
.oferta { display: none; }
.foto-opiekuna { display: flex; gap: 14px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
#foto-podglad, .foto-inicjaly { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.foto-inicjaly { display: grid; place-items: center; background: #efe7dd; color: var(--akcent); font-weight: 700; font-size: 22px; }
.foto-pola { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; flex: 1 1 220px; }
.foto-pola > *, .foto-pola .wiersz > * { min-width: 0; max-width: 100%; }
fieldset.argumenty { border: 1px solid var(--linia); border-radius: 8px; margin: 12px 0 0; padding: 8px 12px 10px; }
fieldset.argumenty legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
label.arg { align-items: flex-start; margin: 6px 0; }
label.arg input { margin-top: 2px; }

@media print {
  @page { size: A4; margin: 11mm 12mm 12mm; }
  html, body { background: #fff !important; }
  body { font-size: 10pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .app, dialog, .toast { display: none !important; }
  .oferta { display: block; color: #1f2937; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.4; }
  .oferta .strona { break-after: page; }
  .oferta .strona:last-child { break-after: auto; }
  .oferta h1, .oferta h2, .oferta p { margin: 0; }
  .oferta h2 { font-size: 10.5pt; color: #111827; margin-bottom: 2.5mm; letter-spacing: .01em; }
  .oferta .l { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

  .o-nag { display: flex; justify-content: space-between; align-items: center; gap: 6mm; padding-bottom: 2.5mm; border-bottom: 1mm solid #b3131c; margin-bottom: 5mm; }
  .o-marka { display: flex; align-items: center; gap: 3mm; }
  .o-logo { height: 15mm; width: auto; }
  .o-logo + div { display: none; }
  .o-nag-maly .o-logo { height: 12mm; }
  .o-marka b { display: block; font-size: 12.5pt; color: #111827; }
  .o-marka span { display: block; font-size: 7.5pt; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
  .o-kontakt { text-align: right; font-size: 8.5pt; color: #4b5563; line-height: 1.45; }
  .o-nag-maly { margin-bottom: 5mm; }

  .o-meta { display: flex; gap: 5mm; font-size: 8pt; color: #b3131c; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 2mm; }
  .o-hero h1 { font-size: 21pt; line-height: 1.12; color: #111827; letter-spacing: -.01em; }
  .o-pod { font-size: 10.5pt; color: #374151; margin-top: 1.5mm !important; }
  .o-klient { margin-top: 2.5mm !important; font-size: 9.5pt; }
  .o-klient span { color: #6b7280; }

  .o-liczby { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin: 4.5mm 0; }
  .o-liczby div { background: #f6f1ea; border-radius: 2.5mm; padding: 2.5mm 3.5mm; }
  .o-liczby span { display: block; font-size: 7.5pt; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
  .o-liczby b { display: block; font-size: 14pt; color: #111827; margin-top: .5mm; font-variant-numeric: tabular-nums; }

  .o-srodek { display: grid; grid-template-columns: 1.3fr 1fr; gap: 7mm; align-items: stretch; }
  .o-zakres table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .o-zakres td { padding: 1.15mm 0; border-bottom: .25mm solid #e5e7eb; }
  .o-przypis { font-size: 7.5pt; color: #6b7280; margin-top: 1.5mm !important; }
  .o-cena { background: #1f2937; color: #fff; border-radius: 3mm; padding: 5mm 5.5mm; display: flex; flex-direction: column; justify-content: center; gap: 1mm; }
  .o-etyk { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .06em; color: #d1d5db; }
  .o-kwota { font-size: 22pt; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .o-cena span { font-size: 9pt; color: #e5e7eb; }
  .o-cena hr { border: 0; border-top: .25mm solid #4b5563; width: 100%; margin: 1.5mm 0; }

  .o-argumenty { margin-top: 5mm; }
  .o-argumenty ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 3mm 6mm; grid-template-columns: repeat(2, 1fr); }
  .o-argumenty ol.o-arg-3 { grid-template-columns: repeat(3, 1fr); }
  .o-argumenty ol.o-arg-1 { grid-template-columns: 1fr; }
  .o-argumenty li { display: flex; gap: 2.8mm; align-items: flex-start; break-inside: avoid; }
  .o-nr { flex: none; width: 7mm; height: 7mm; border-radius: 50%; background: #b3131c; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 9pt; }
  .o-argumenty b { display: block; font-size: 9.8pt; color: #111827; line-height: 1.25; }
  .o-argumenty p { margin-top: 1mm !important; font-size: 8.8pt; color: #374151; }

  .o-trwalosc { margin-top: 4.5mm; background: #f6f1ea; border-radius: 3mm; padding: 3mm 4.5mm; }
  .o-trwalosc ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; }
  .o-trwalosc li { border-left: .8mm solid #b3131c; padding-left: 2.5mm; font-size: 8.3pt; color: #374151; break-inside: avoid; }
  .o-trwalosc li b { display: block; color: #111827; font-size: 9.3pt; margin-bottom: .5mm; }

  .o-uwagi { margin-top: 5mm; font-size: 9pt; }

  .o-opiekun { margin-top: 5mm; display: grid; grid-template-columns: auto 1fr 1.25fr; gap: 5mm; align-items: center; border-top: .25mm solid #e5e7eb; padding-top: 4mm; break-inside: avoid; }
  .o-foto { width: 23mm; height: 23mm; border-radius: 50%; object-fit: cover; border: .8mm solid #f6f1ea; }
  .o-inicjaly { background: #efe7dd; color: #b3131c; display: grid; place-items: center; font-size: 17pt; font-weight: 700; }
  .o-dane b { display: block; font-size: 13.5pt; color: #111827; margin: .5mm 0 1mm; }
  .o-dane span { display: block; font-size: 9.5pt; }
  .o-dane .o-etyk { color: #b3131c; font-weight: 600; }
  .o-uwaga { font-size: 8.5pt; color: #6b7280; }

  .o-rys-tytul { font-size: 11pt !important; margin-bottom: 3mm !important; }
  .o-rys-ramka { border: .3mm solid #e5e7eb; border-radius: 2mm; padding: 2mm; height: 200mm; display: flex; align-items: center; justify-content: center; background: #fff; }
  .o-rys-ramka img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .o-rys-dane { width: 100%; border-collapse: collapse; font-size: 8.8pt; margin-top: 4mm; }
  .o-rys-dane td { padding: 1.2mm 2mm; border-bottom: .2mm solid #eceae6; }
  .o-rys-dane td:nth-child(odd) { color: #6b7280; width: 22%; }
  .o-rys-dane td:nth-child(even) { color: #111827; font-weight: 600; }
  .o-tabela { width: 100%; border-collapse: collapse; font-size: 8.3pt; line-height: 1.2; }
  .o-tabela thead { display: table-header-group; }
  .o-tabela thead th { background: #1f2937; color: #fff; text-align: left; padding: 1.6mm 2mm; font-weight: 600; font-size: 8.3pt; }
  .o-tabela thead th.l { text-align: right; }
  .o-tabela td { padding: .75mm 2mm; border-bottom: .2mm solid #eceae6; vertical-align: top; }
  .o-tabela tr { break-inside: avoid; }
  .o-tabela tr.o-grupa td { background: #f6f1ea; font-weight: 700; color: #111827; padding-top: 1.4mm; border-bottom: .3mm solid #d6cfc5; }
  .o-lp { width: 8mm; color: #6b7280; }
  .o-tabela tr.o-suma td { background: transparent; border-bottom: .2mm solid #e5e7eb; font-variant-numeric: tabular-nums; padding-top: 1.2mm; padding-bottom: 1.2mm; }
  .o-tabela tr.o-suma td:first-child { border-bottom: 0; }
  .o-tabela tr.o-suma-pierwsza td { padding-top: 3mm; }
  .o-tabela tr.o-suma-brutto td { font-size: 11pt; font-weight: 700; color: #111827; border-bottom: .8mm solid #b3131c; }
  .o-tabela tr.o-suma-brutto td.o-przypis-tab { font-size: 7.8pt; font-weight: 400; color: #6b7280; border-bottom: 0; vertical-align: bottom; }
}
/* walidacja i komunikaty */
.blad-pola:empty { display: none; }
span.blad-pola { display: inline; }
label .blad-pola { min-height: 0; margin: 2px 0 0; font-size: 13px; }
input[aria-invalid="true"] { border-color: #b91c1c; box-shadow: 0 0 0 1px #b91c1c; }
button.link { background: none; color: var(--akcent); padding: 0; text-decoration: underline; min-height: 0; font: inherit; }
.karta { scroll-margin-top: 130px; }

/* kroki */
.gora .kroki { flex-basis: 100%; margin: 0 -16px -12px; background: #111827; }
.kroki ol { list-style: none; margin: 0 auto; padding: 6px 16px; max-width: 1180px; display: flex; gap: 6px; overflow-x: auto; }
.kroki a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; color: #e5e7eb; text-decoration: none; font-size: 13px; white-space: nowrap; min-height: 36px; }
.kroki a[aria-current="step"] { background: #374151; color: #fff; }
.kolko { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #9ca3af; font-size: 12px; }
.kroki a.gotowy .kolko { background: #15803d; border-color: #15803d; color: #fff; font-size: 0; }
.kroki a.gotowy .kolko::before { content: "✓"; font-size: 13px; }

/* powiadomienie i okno potwierdzenia */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 84px; z-index: 30; display: flex; gap: 12px; align-items: center; background: #111827; color: #fff; padding: 8px 8px 8px 14px; border-radius: 8px; box-shadow: 0 4px 16px rgb(0 0 0 / .2); max-width: calc(100% - 32px); }
.dialog { border: 0; border-radius: 10px; padding: 20px; max-width: min(460px, calc(100% - 32px)); color: var(--tekst); }
.dialog::backdrop { background: rgb(0 0 0 / .5); }
.dialog h2 { margin: 0 0 8px; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: wjazd .2s ease-out; }
  @keyframes wjazd { from { opacity: 0; transform: translate(-50%, 8px); } }
}
.pasek-kwoty { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }

@media (max-width: 600px) {
  .kroki .etykieta { display: none; }
  .kroki ol { justify-content: space-between; }
  .pasek { flex-wrap: nowrap; padding-top: 6px; }
  .pasek-brutto { display: none; }
  .pasek b { margin-right: 4px; }
  .pasek button { white-space: nowrap; padding: 8px 12px; }
  .przewijanie { overflow-x: visible; }
  #zestawienie thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  #zestawienie, #zestawienie tbody, #zestawienie tbody tr, #zestawienie tbody td { display: block; width: 100%; }
  #zestawienie tbody tr { border: 1px solid var(--linia); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; background: #fff; }
  #zestawienie tbody tr.brak { background: #fef3c7; border-color: #b45309; }
  #zestawienie tbody tr.brak td { background: transparent; }
  #zestawienie tbody td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; }
  #zestawienie tbody td::before { content: attr(data-label); color: var(--szary); font-size: 13px; text-align: left; }
  #zestawienie tbody td:first-child { display: block; text-align: left; font-weight: 600; padding-bottom: 6px; }
  #zestawienie tbody td:first-child::before, #zestawienie tbody td[colspan]::before { content: none; }
  #zestawienie tbody td[colspan] { display: block; text-align: left; }
  #zestawienie tbody td[data-pusty] { display: none; }
  #zestawienie td input { width: 110px; }
  #zestawienie tfoot { display: block; }
  #zestawienie tfoot tr { display: flex; justify-content: space-between; gap: 12px; }
  #zestawienie tfoot td { border: 0; }
}

@media (max-width: 768px) {
  input, select, textarea, button, a.przycisk { min-height: 44px; font-size: 16px; }
  td input { width: 72px; }
  .gora { position: static; }
  .pasek b { font-size: 15px; }
}
@media (max-width: 480px) {
  .siatka { grid-template-columns: 1fr; }
  .gora-akcje > * { flex: 1 1 auto; }
}

/* ===== Motyw panelu (16.09.2026): układ i przyciski wzorowane na orbix.studio, kolory FN Banasiak ===== */
[hidden] { display: none !important; }
@media screen {
  :root {
    --tlo: #f3f4f6; --karta: #ffffff; --tekst: #0f1115; --szary: #5f6470; --linia: #e9eaef;
    --akcent: #b3131c; --akcent-ciemny: #8f0f16; --akcent-tlo: #fdeeee; --ciemny: #16181d; --cieply: #faf6f1;
    --r-karta: 20px; --r-pole: 12px;
    --cien-przycisk: 0 1px 1px rgb(15 17 21 / .05), -2px 3px 4px rgb(15 17 21 / .04), -6px 8px 14px rgb(15 17 21 / .05), -14px 18px 32px rgb(15 17 21 / .05);
    --font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  }
  body { font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--tekst); background: var(--tlo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; color: var(--tekst); }
  .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
  .szary { color: var(--szary); }
  a { color: var(--akcent); text-underline-offset: 3px; }

  /* nagłówek */
  .gora { background: rgb(255 255 255 / .85); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); color: var(--tekst); border-bottom: 1px solid var(--linia); padding: 12px 24px; }
  .logo { display: flex; align-items: center; gap: 14px; font-size: 21px; line-height: 1.1; }
  .logo img { height: 40px; width: auto; display: block; }
  .logo .podtytul { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--szary); }
  .logo .serif { font-size: 1.15em; }
  .gora .kroki { background: transparent; margin: 6px -24px -12px; border-top: 1px solid var(--linia); }
  .kroki ol { padding: 8px 24px; gap: 4px; }
  .kroki a { color: var(--szary); font-size: 13.5px; font-weight: 500; padding: 5px 14px 5px 5px; min-height: 38px; transition: background .2s, color .2s; }
  .kroki a:hover { background: #f1f2f5; color: var(--tekst); }
  .kroki a[aria-current="step"] { background: var(--ciemny); color: #fff; }
  .kolko { width: 28px; height: 28px; border: 1px solid var(--linia); background: #fff; color: var(--tekst); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .kroki a[aria-current="step"] .kolko { border-color: transparent; background: rgb(255 255 255 / .16); color: #fff; }
  .kroki a.gotowy .kolko { background: var(--akcent); border-color: var(--akcent); color: #fff; }

  /* karty i sekcje */
  main { gap: 16px; padding: 28px 24px 128px; }
  .karta { border-radius: var(--r-karta); border: 1px solid var(--linia); box-shadow: none; padding: 26px 28px; }
  h2 { font-size: 23px; line-height: 1.2; gap: 12px; margin-bottom: 14px; }
  .nr { width: auto; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--akcent-tlo); color: var(--akcent); font-size: 12.5px; font-weight: 600; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
  .nr::before { content: "0"; }
  .nr { display: inline-flex; align-items: center; justify-content: center; }
  .gora .kroki ol { max-width: 1180px; margin: 0 auto; padding: 8px 24px; }
  .karta > p.szary { max-width: 70ch; margin-top: 0; }
  details { margin: 12px 0; }
  summary { color: var(--tekst); font-weight: 500; }
  summary::marker { color: var(--akcent); }

  /* pola */
  label { font-size: 13px; font-weight: 500; color: #30343c; gap: 6px; }
  label.check { font-size: 14.5px; font-weight: 400; color: var(--tekst); gap: 10px; }
  input, select, textarea { border-radius: var(--r-pole); border: 1px solid var(--linia); background: #f8f8fa; padding: 10px 12px; font-size: 15px; font-family: var(--font); transition: border-color .15s, box-shadow .15s, background-color .15s; }
  input:hover, select:hover, textarea:hover { border-color: #d6d8df; }
  input:focus, select:focus, textarea:focus { outline: none; background-color: #fff; border-color: var(--akcent); box-shadow: 0 0 0 4px rgb(179 19 28 / .12); }
  :focus-visible { outline: 3px solid rgb(179 19 28 / .35); outline-offset: 2px; }
  input[type="checkbox"] { accent-color: var(--akcent); width: 18px; height: 18px; }
  select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
  input[type="file"] { background: #fff; padding: 6px; }
  input[type="file"]::file-selector-button { font: inherit; font-weight: 500; border: 1px solid var(--linia); background: #f5f5f7; color: var(--tekst); border-radius: 99px; padding: 7px 16px; margin-right: 12px; cursor: pointer; }
  input[aria-invalid="true"] { border-color: #b91c1c; box-shadow: 0 0 0 4px rgb(185 28 28 / .10); }

  /* przyciski */
  button, a.przycisk { font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1; border-radius: 99px; padding: 12px 22px; min-height: 44px; background: var(--akcent); color: #fff; border: 1px solid transparent; box-shadow: var(--cien-przycisk); display: inline-flex; align-items: center; justify-content: center; gap: 14px; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, transform .15s; }
  button:hover, a.przycisk:hover { background: var(--akcent-ciemny); }
  button:active, a.przycisk:active { transform: translateY(1px); }
  button.drugi, a.przycisk.drugi { background: #fff; color: var(--tekst); border-color: var(--linia); }
  button.drugi:hover, a.przycisk.drugi:hover { background: #f3f4f6; border-color: #d6d8df; }
  button.cta { padding: 6px 6px 6px 24px; min-height: 50px; }
  button.cta::after { content: ""; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3131c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 17px no-repeat; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  button.cta:hover::after { transform: rotate(45deg); }
  button:disabled, button:disabled:hover { opacity: .55; cursor: wait; background: var(--akcent); transform: none; }
  button.link { background: none; color: var(--akcent); padding: 0; min-height: 0; box-shadow: none; border: 0; border-radius: 4px; text-decoration: underline; font-weight: 500; }
  button.usun { background: none; color: #b91c1c; padding: 2px 6px; min-height: 0; box-shadow: none; border: 0; font-size: 13px; }
  button.link:hover, button.usun:hover { background: none; text-decoration: underline; }
  @media (prefers-reduced-motion: reduce) { button.cta::after { transition: none; } button.cta:hover::after { transform: none; } }

  /* bloki informacyjne */
  .podsumowanie { gap: 10px; }
  .podsumowanie div { background: var(--cieply); border: 0; border-radius: 14px; padding: 10px 16px; }
  .podsumowanie .szary { font-size: 12px; }
  .podsumowanie b { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .ostrzezenie { background: #fff7e8; border: 1px solid #f1d8a6; color: #5c3b00; border-radius: 14px; padding: 12px 16px; }
  .odczyt { background: var(--cieply); border: 0; border-radius: 14px; padding: 14px 16px; font-size: 14px; }
  .blad-pola { color: #b91c1c; }
  .pomoc { color: var(--szary); }
  .foto-inicjaly { background: var(--akcent-tlo); color: var(--akcent); font-weight: 600; }
  #foto-podglad { box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--linia); }
  fieldset.argumenty { border-radius: 16px; border-color: var(--linia); padding: 12px 18px 14px; }
  fieldset.argumenty legend { font-weight: 500; }
  .rysunek img { border-radius: 12px; }

  /* tabela zestawienia */
  table { font-size: 14px; }
  th { background: transparent; color: var(--szary); font-weight: 500; font-size: 12.5px; border-bottom: 1px solid var(--linia); padding: 10px 8px; }
  td { border-bottom: 1px solid #f0f1f4; padding: 10px 8px; }
  td .nazwa { font-size: 12.5px; }
  td input { border-radius: 10px; padding: 6px 8px; background: #fff; }
  tr.brak td { background: #fff7e8; }
  tr.edytowana td:first-child { box-shadow: inset 3px 0 0 var(--akcent); }
  tfoot td { font-weight: 500; font-variant-numeric: tabular-nums; }
  tfoot tr:last-child td { font-size: 16px; font-weight: 600; color: var(--tekst); }

  /* pasek, powiadomienie, okno */
  .pasek { left: 50%; right: auto; transform: translateX(-50%); bottom: 16px; width: min(780px, calc(100% - 32px)); border-radius: 99px; border: 1px solid var(--linia); background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 7px 7px 7px 26px; box-shadow: 0 12px 34px rgb(15 17 21 / .12); }
  .pasek b { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-right: 8px; }
  .znacznik { border-radius: 99px; border: 0; background: #fff1d6; color: #6b4200; padding: 4px 11px; font-size: 12.5px; font-weight: 500; }
  .toast { border-radius: 99px; background: var(--ciemny); padding: 6px 6px 6px 20px; bottom: 100px; font-size: 14px; }
  .toast button.drugi { min-height: 36px; padding: 6px 16px; box-shadow: none; }
  .dialog { border-radius: 24px; padding: 30px; box-shadow: 0 30px 80px rgb(15 17 21 / .25); }
  .dialog h2 { font-size: 24px; }
  .dialog::backdrop { background: rgb(15 17 21 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}
@media screen and (max-width: 768px) {
  input, select, textarea, button, a.przycisk { font-size: 16px; }
  .gora { padding: 10px 16px; }
  .gora .kroki { margin: 6px -16px -10px; }
  .kroki ol { padding: 8px 16px; }
  main { padding: 16px 16px 120px; }
  .karta { padding: 20px 18px; border-radius: 18px; }
  h2 { font-size: 20px; }
}
@media screen and (max-width: 600px) {
  .logo img { height: 32px; }
  .logo { font-size: 19px; }
  .logo .podtytul { display: none; }
  .kroki a { padding: 5px; }
  .pasek { border-radius: 22px; bottom: 8px; width: calc(100% - 16px); padding: 7px 7px 7px 16px; }
  .pasek b { font-size: 17px; }
  button.cta { padding-left: 18px; }
  #zestawienie tbody tr { border-radius: 16px; padding: 12px 14px; }
  .pasek { gap: 8px; }
  .pasek-kwoty { flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
  .pasek-kwoty > span:first-child .szary { display: none; }
  .pasek button.cta { padding: 5px 5px 5px 16px; min-height: 44px; gap: 10px; font-size: 15px; flex: none; }
  .pasek button.cta::after { width: 34px; height: 34px; background-size: 15px; }
  .gora-akcje select { width: 100%; }
}