/* STYLIZATOR — wyglad odtworzony z makiety operatora (Stylizator Zara.dc.html).
   Wartosci kolorow, rozmiarow i odstepow przepisane z makiety 1:1.

   URZADZENIE DOCELOWE: iPhone 16 Pro Max 430x932 pt. Kontener 430 px, na szerokim
   ekranie wysrodkowany. Sprawdzane rowniez na 390x844.

   DWIE RZECZY, KTORYCH MAKIETA NIE MIALA, A IOS WYMAGA:
   1. 100dvh zamiast 100vh — pasek adresu Safari zmienia vh w trakcie przewijania,
      przez co stopka ucieka pod krawedz ekranu.
   2. env(safe-area-inset-*) — dolny pasek gestow iPhone'a zjada 34 px; bez wciecia
      dolna zakladka lezy pod nim i nie da sie w nia trafic.
*/
:root{
  --tlo-strony:#dedbd5;
  --tlo:#fbfaf8;
  --tekst:#111;
  --szary:#6b675f;
  --szary-jasny:#8a867f;
  --szary-blady:#b5b1a9;
  --linia:#e7e4de;
  --linia-jasna:#eceae4;
  --linia-blada:#f0eee8;
  --plyta:#f5f3ef;
  --kafel:#f1efe9;
  --karta:#f4f2ec;
  --zielony:#3c7a44;
  --czerwony:#a3372c;
  --gora:env(safe-area-inset-top,0px);
  --dol:env(safe-area-inset-bottom,0px);
}
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--tlo-strony);
  font-family:'Archivo',Helvetica,Arial,sans-serif;
  color:var(--tekst);
  /* Korpus nie ma prawa przewijac sie w bok — cala szerokosc mieszkow w 430 px. */
  overflow-x:hidden;
}
a{color:#111;text-decoration:underline}
a:hover{color:var(--szary)}
button{font-family:inherit;cursor:pointer;color:inherit}
input,textarea{font-family:inherit}
.noscroll{scrollbar-width:none;-ms-overflow-style:none}
.noscroll::-webkit-scrollbar{display:none}

#app{
  max-width:430px;
  margin:0 auto;
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--tlo);
  position:relative;
  overflow:hidden;
}

/* ── naglowek ─────────────────────────────────────────────────────────────── */
.hd{
  display:flex;align-items:center;gap:10px;
  padding:calc(12px + var(--gora)) 14px 11px;
  border-bottom:1px solid var(--linia);flex:0 0 auto;
}
.hd .tyt{font-size:14px;letter-spacing:.3em;font-weight:600;flex:1;min-width:0}
.ikona{border:0;background:none;padding:4px 2px;display:flex;align-items:center;gap:5px;position:relative}
.burger{border:0;background:none;padding:4px 2px;display:flex;flex-direction:column;gap:4px}
.burger span{display:block;width:18px;height:1.5px;background:#111}
.kropka{position:absolute;top:2px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--zielony);display:block}
.licznik{font-size:11px;font-variant-numeric:tabular-nums}

/* ── korpus ───────────────────────────────────────────────────────────────── */
.korpus{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

/* ── stopka ───────────────────────────────────────────────────────────────── */
.st{flex:0 0 auto;border-top:1px solid var(--linia);background:var(--tlo);padding-bottom:var(--dol)}
.st-gora{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:8px}
.st-etyk{font-size:10px;letter-spacing:.15em;color:var(--szary-jasny)}
.st-suma{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.st-akcje{display:flex;gap:8px;align-items:stretch;flex:0 0 auto}
.zakladki{display:flex;border-top:1px solid var(--linia)}
.zakladki button{flex:1;padding:12px 0;border:0;background:none;font-size:10px;letter-spacing:.18em;font-weight:600;color:var(--szary-blady)}
.zakladki button.on{color:#111}

/* ── przyciski ────────────────────────────────────────────────────────────── */
.b-czarny{border:0;background:#111;color:#fff;font-size:10px;letter-spacing:.2em;padding:12px}
.b-ramka{border:1px solid #111;background:none;font-size:10px;letter-spacing:.15em;padding:11px 12px;line-height:1}
.b-kreska{padding:12px;border:1px dashed var(--szary-blady);background:none;font-size:10px;letter-spacing:.15em;color:var(--szary)}
.chip{flex:0 0 auto;padding:7px 12px;font-size:10px;letter-spacing:.12em;border:1px solid var(--linia-jasna);background:transparent;color:var(--szary)}
.chip.on{border-color:#111;background:#111;color:#fff}

/* ── STYLIZACJA ───────────────────────────────────────────────────────────── */
.seg{display:flex;justify-content:center;padding:12px 16px 4px}
.seg button{padding:7px 14px;font-size:10px;letter-spacing:.15em;border:1px solid #111;background:none;color:#111}
.seg button+button{border-left:0}
.seg button.on{background:#111;color:#fff}
.podpowiedz{text-align:center;font-size:9px;letter-spacing:.14em;color:var(--szary-blady);padding:4px 0 0}
.wiersz{border-bottom:1px solid var(--linia-jasna)}
.wiersz-tresc{padding:10px 12px 14px}
.wiersz-gl{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px;gap:8px}
.wiersz-et{font-size:10px;letter-spacing:.2em;color:var(--szary-jasny);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiersz-nar{display:flex;gap:14px;align-items:baseline;flex:0 0 auto}
.poz{font-size:10px;color:var(--szary-blady);font-variant-numeric:tabular-nums}
.serce{border:0;background:none;font-size:13px;padding:0;line-height:1;color:var(--szary-blady)}
.serce.on{color:#111}
.usun{border:0;background:none;font-size:10px;letter-spacing:.12em;color:var(--szary-blady);padding:0}
.karuzela{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;user-select:none;cursor:grab;touch-action:pan-y}
.karuzela img{object-fit:cover;flex:0 0 auto;background:var(--kafel);display:block}
.karuzela .duch{width:54px;opacity:.3}
.kolory{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}
.kolory button{width:15px;height:15px;border-radius:50%;border:1px solid #c9c5bd;padding:0}
.kolory button.on{border:2px solid #111}
.opis{text-align:center;margin-top:8px}
.opis .nz{font-size:11px;letter-spacing:.06em;font-weight:500;text-transform:uppercase}
.opis .mt{font-size:10px;color:var(--szary-jasny);margin-top:3px;font-variant-numeric:tabular-nums}
.opis .cn{font-size:12px;margin-top:3px;font-variant-numeric:tabular-nums}
.opis .cn s{color:var(--szary-blady);margin-right:6px}
.dodaj-wiersz{display:block;width:100%;padding:13px;font-size:10px;letter-spacing:.18em;color:var(--szary-jasny);background:var(--plyta);border:0;text-align:center}
.warstwy{display:flex;gap:8px;padding:14px 16px 20px}
.warstwy button{flex:1;min-width:0}

/* ── KATALOG ──────────────────────────────────────────────────────────────── */
.filtry{display:flex;gap:8px;overflow-x:auto;padding:12px 16px}
.kat-gl{display:flex;justify-content:space-between;align-items:center;padding:0 16px 8px;gap:8px}
.kat-licz{font-size:10px;letter-spacing:.12em;color:var(--szary-jasny)}
.siatka{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linia-jasna);border-top:1px solid var(--linia-jasna)}
.kafel{background:var(--tlo);padding-bottom:10px;cursor:pointer;position:relative;min-width:0}
.kafel img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--kafel)}
/* Zastepczy kafel: zdjecie, ktorego nie da sie pobrac, ma wygladac jak brak
   zdjecia, a nie jak zepsuta ikona przegladarki. */
.kafel img.brak,.karuzela img.brak,.mini.brak{
  background:var(--kafel) center/contain no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><rect width='60' height='60' fill='%23f1efe9'/><path d='M14 42l12-14 8 9 6-6 8 11z' fill='none' stroke='%23c9c5bd' stroke-width='1.6'/><circle cx='22' cy='21' r='4' fill='none' stroke='%23c9c5bd' stroke-width='1.6'/></svg>");
  color:transparent;font-size:0;
}
.kafel-fav{position:absolute;top:6px;right:6px;border:0;background:rgba(251,250,248,.85);width:30px;height:30px;font-size:14px;line-height:1;color:var(--szary-blady);padding:0}
.kafel-fav.on{color:#111}
.kafel-tresc{padding:8px 10px 0;min-width:0}
.kafel-nz{font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kafel-mt{font-size:10px;color:var(--szary-jasny);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kafel-dol{display:flex;justify-content:space-between;align-items:center;margin-top:4px;gap:6px}
.kafel-cn{font-size:11px;font-variant-numeric:tabular-nums;min-width:0}
.kafel-add{border:1px solid #111;background:none;padding:4px 8px;font-size:9px;letter-spacing:.1em;flex:0 0 auto}
.wiecej{display:block;width:100%;padding:14px;border:0;background:#111;color:#fff;font-size:10px;letter-spacing:.2em}
.plakietka{position:absolute;top:6px;left:6px;background:#111;color:#fff;font-size:8px;letter-spacing:.12em;padding:3px 6px}

/* ── KOLAZ ────────────────────────────────────────────────────────────────── */
.formaty{display:flex;gap:6px;padding:12px 16px 0}
.formaty button{flex:1;min-width:0;padding:8px 2px;font-size:9px;letter-spacing:.08em;border:1px solid var(--linia-jasna);background:transparent;color:var(--szary)}
.formaty button.on{border-color:#111;background:#111;color:#fff}
.slajdy{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:14px 16px}
.slajd{flex:0 0 262px;scroll-snap-align:center}
.slajd-karta{border:1px solid var(--linia);background:var(--karta);display:flex;flex-direction:column;overflow:hidden}
.slajd-raport{background:#111;color:var(--karta);display:flex;flex-direction:column;overflow:hidden;padding:16px 14px}
.mini{width:26px;height:36px;object-fit:cover;background:var(--kafel);display:block}

/* ── nakladki ─────────────────────────────────────────────────────────────── */
.zaslona{position:absolute;inset:0;background:rgba(17,17,17,.45)}
.szuflada{position:absolute;left:0;right:0;bottom:0;background:var(--tlo);border-top:1px solid #111;display:flex;flex-direction:column;max-height:86%;padding-bottom:var(--dol)}
.szuflada-gl{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--linia-jasna);flex:0 0 auto;gap:8px}
.szuflada-tyt{font-size:11px;letter-spacing:.25em;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zamknij{border:0;background:none;font-size:16px;padding:0;flex:0 0 auto}
.pelna{position:absolute;inset:0;background:var(--tlo);display:flex;flex-direction:column;padding-top:var(--gora);padding-bottom:var(--dol)}
.menu-poz{display:flex;justify-content:space-between;align-items:center;flex:1;min-height:52px;width:100%;padding:0 20px;border:0;border-bottom:1px solid var(--linia-blada);background:none;font-size:13px;letter-spacing:.2em;text-align:left;gap:10px}
.menu-poz:active{background:var(--plyta)}
.menu-poz .bdg{color:var(--szary-jasny);font-variant-numeric:tabular-nums;font-size:12px;flex:0 0 auto}
.toast{position:absolute;bottom:calc(120px + var(--dol));left:50%;transform:translateX(-50%);background:#111;color:#fff;font-size:11px;letter-spacing:.08em;padding:9px 16px;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;z-index:20}

/* ── formularze ───────────────────────────────────────────────────────────── */
.pole{font-size:10px;letter-spacing:.15em;color:var(--szary-jasny);display:block}
/* Pamiec floty: pola formularza ZAWSZE z odstepem — sklejone pola czytaja sie
   jak jedno. Odstep robi kontener .kolumna, nie margines na kazdym polu. */
.kolumna{display:flex;flex-direction:column;gap:10px}
.pole input,.pole textarea,.wejscie{
  display:block;width:100%;margin-top:6px;padding:11px 12px;
  border:1px solid #d8d5cf;background:#fff;font-size:13px;color:#111;border-radius:0;
}
.wejscie{margin-top:0}
.zgoda{display:flex;gap:10px;align-items:flex-start;font-size:11px;color:var(--szary);line-height:1.5;cursor:pointer}
.zgoda input{margin-top:2px;width:16px;height:16px;flex:0 0 auto}
.blad{font-size:11px;color:var(--czerwony)}
.logowanie{position:absolute;inset:0;background:var(--tlo);z-index:10;display:flex;flex-direction:column;overflow-y:auto;padding-top:var(--gora);padding-bottom:var(--dol)}

/* ── profil ───────────────────────────────────────────────────────────────── */
.prof-tabs{display:flex;gap:6px;overflow-x:auto;padding:0 2px 2px}
.prof-tabs button{flex:0 0 auto;padding:7px 11px;font-size:9px;letter-spacing:.12em;border:1px solid var(--linia-jasna);background:transparent;color:var(--szary)}
.prof-tabs button.on{border-color:#111;background:#111;color:#fff}
.lista-poz{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--linia-blada);align-items:center}
.lista-poz img{width:38px;height:50px;object-fit:cover;flex:0 0 auto;background:var(--kafel)}
.lista-srodek{flex:1;min-width:0}
.lista-nz{font-size:10px;text-transform:uppercase;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-mt{font-size:10px;color:var(--szary-jasny);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-prawo{text-align:right;flex:0 0 auto}
.pusto{font-size:11px;color:var(--szary-jasny);line-height:1.5}
.naglowek-sekcji{font-size:10px;letter-spacing:.2em;color:var(--szary-jasny);margin-bottom:8px}
.siatka2{display:grid;grid-template-columns:1fr 1fr;gap:9px}