:root{
  --granat:#1b2a4a; --granat-2:#263a63;
  --tlo:#eef1f6; --karta:#fff;
  --tekst:#1c2333; --szary:#6b7488; --kreska:#ccd3e0;
  --zielony:#1f8f4e; --czerwony:#c0392b; --zolty:#b7791f;
  --pole:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--tlo); color:var(--tekst); font-size:17px; line-height:1.45;
}
.ukryty{display:none !important}

/* ---------- naglowek ---------- */
header{
  background:var(--granat); color:#fff; padding:12px 16px;
  display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20;
}
header h1{font-size:18px;margin:0;font-weight:600;flex:1;line-height:1.2}
header .pod{display:block;font-size:12px;opacity:.7;font-weight:400}
.ikona-btn{
  background:rgba(255,255,255,.12); border:0; color:#fff; width:44px; height:44px;
  border-radius:10px; font-size:20px; cursor:pointer; flex:none;
}
.ikona-btn:active{background:rgba(255,255,255,.25)}

/* ---------- ekrany ---------- */
main{max-width:640px;margin:0 auto;padding:16px 16px 120px}
.karta{background:var(--karta);border-radius:14px;padding:20px;box-shadow:0 1px 3px rgba(20,30,60,.10)}
h2{font-size:20px;margin:0 0 6px}
.opis{color:var(--szary);font-size:15px;margin:0 0 20px}

/* ---------- pola ---------- */
label{display:block;font-weight:600;font-size:14px;margin:0 0 6px}
label .opc{font-weight:400;color:var(--szary)}
.pole{margin-bottom:16px}
input[type=text],input[type=tel],input[type=email],input[type=password],select,textarea{
  width:100%; padding:14px; font-size:17px; font-family:inherit;
  border:2px solid var(--kreska); border-radius:10px; background:#fff; color:var(--tekst);
  min-height:var(--pole);
}
textarea{min-height:130px;resize:vertical;line-height:1.4}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--granat)}
input.blad,select.blad,textarea.blad{border-color:var(--czerwony);background:#fdf2f1}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M3 6l5 5 5-5' fill='none' stroke='%236b7488' stroke-width='2'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}

/* ---------- zgoda ---------- */
.zgoda{border:2px solid var(--kreska);border-radius:10px;padding:14px;margin-bottom:16px;background:#fafbfd}
.zgoda.blad{border-color:var(--czerwony);background:#fdf2f1}
.zgoda-wiersz{display:flex;gap:12px;align-items:flex-start}
.zgoda input[type=checkbox]{width:26px;height:26px;flex:none;margin-top:2px;accent-color:var(--granat)}
.zgoda label{font-weight:400;font-size:14px;line-height:1.4;margin:0}
.klauzula{font-size:12px;color:var(--szary);line-height:1.45;margin-top:12px;padding-top:12px;border-top:1px solid var(--kreska)}
.klauzula a{color:var(--granat)}

/* ---------- przyciski ---------- */
.btn{
  width:100%; padding:17px; font-size:18px; font-weight:600; font-family:inherit;
  border:0; border-radius:12px; cursor:pointer; min-height:58px;
}
.btn-glowny{background:var(--granat);color:#fff}
.btn-glowny:active{background:var(--granat-2)}
.btn-drugi{background:#e7ebf2;color:var(--tekst);margin-top:10px}
.btn-czerwony{background:var(--czerwony);color:#fff;margin-top:10px}
.btn:disabled{opacity:.5}


/* ---------- komunikaty ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:76px;z-index:40;
  background:var(--zielony);color:#fff;padding:14px 26px;border-radius:30px;
  font-weight:600;font-size:17px;box-shadow:0 4px 16px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .16s;
}
.toast.pokaz{opacity:1}
.toast.blad-t{background:var(--czerwony)}
.pasek-info{
  background:var(--zolty);color:#fff;padding:12px 16px;display:flex;gap:12px;
  align-items:center;font-size:15px;
}
.pasek-info button{
  background:#fff;color:var(--zolty);border:0;border-radius:8px;
  padding:9px 14px;font-weight:600;font-size:15px;cursor:pointer;flex:none;
}
.blad-txt{color:var(--czerwony);font-size:13px;margin-top:5px;font-weight:600}

/* ---------- panel ustawien ---------- */
.nakladka{position:fixed;inset:0;background:rgba(15,22,40,.6);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.nakladka .karta{max-width:520px;width:100%;margin:auto}
.wiersz-info{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--kreska);font-size:15px}
.wiersz-info span:first-child{color:var(--szary)}
.wiersz-info span:last-child{font-weight:600;text-align:right}
.ostrzezenie{background:#fdf2f1;border:1px solid #f0c9c4;border-radius:10px;padding:14px;margin:18px 0 0;font-size:14px}

/* ---------- haslo i podglad wpisow ---------- */
.podpowiedz{color:var(--szary);font-size:13px;margin:6px 0 0}
h2 .opc{font-weight:400;color:var(--szary);font-size:16px}
.nakladka .karta.karta-szeroka{max-width:820px}
.wpis{border:1px solid var(--kreska);border-radius:10px;margin-bottom:8px;background:#fafbfd}
.wpis summary{
  list-style:none;cursor:pointer;padding:12px 14px;display:flex;gap:10px;align-items:baseline;
  flex-wrap:wrap;min-height:48px;font-size:15px;
}
.wpis summary::-webkit-details-marker{display:none}
.wpis summary .kiedy{color:var(--szary);font-size:13px;flex:none;min-width:92px}
.wpis summary .kto{font-weight:600;flex:1;min-width:140px}
.wpis summary .gdzie{color:var(--szary);font-size:14px}
.wpis[open] summary{border-bottom:1px solid var(--kreska)}
.wpis dl{margin:0;padding:8px 14px 12px;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:14px}
.wpis dt{color:var(--szary)}
.wpis dd{margin:0;white-space:pre-wrap;word-break:break-word}
.pusto{color:var(--szary);text-align:center;padding:24px 0}

/* ---------- formularz bez przewijania ----------
   Cel: przycisk „Zapisz kontakt” widoczny bez przewijania na tabletach
   (sprawdzane od 1024x552 poziomo do 800x1280 pionowo). Pola parami,
   ciaśniejsze odstępy; na szerokim ekranie w poziomie notatka i zgoda
   idą do prawej kolumny. Przycisk dodatkowo przyklejony do dołu ekranu. */
#ekran-formularz header{padding:8px 16px}
#ekran-formularz header h1{font-size:17px}
#ekran-formularz .ikona-btn{width:40px;height:40px;font-size:18px}
#ekran-formularz main{max-width:1180px;padding:12px 16px 12px}
.formularz{padding:14px 16px 0}
.formularz label{font-size:13px;margin:0 0 3px}
.formularz .pole{margin-bottom:10px}
.formularz input[type=text],.formularz input[type=tel],.formularz input[type=email],.formularz select{
  min-height:48px;padding:10px 12px;font-size:17px}
.formularz textarea{min-height:72px;height:72px;padding:10px 12px;resize:none}
.rzad{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.blok-pola > .blad-txt{margin:-4px 0 10px}
.formularz .zgoda{padding:10px 12px;margin-bottom:10px}
.formularz .zgoda input[type=checkbox]{width:28px;height:28px;margin-top:0}
.formularz .zgoda label{font-size:13px;line-height:1.35}
.formularz .klauzula{font-size:11px;line-height:1.35;margin-top:6px;padding-top:6px}
.akcje{
  position:sticky;bottom:0;z-index:5;margin:0 -16px;padding:10px 16px 14px;
  background:var(--karta);border-radius:0 0 14px 14px;
  box-shadow:0 -6px 10px -8px rgba(20,30,60,.25);
}
.akcje .btn{min-height:54px;padding:13px}

/* szeroki ekran w poziomie: pola i zgoda po lewej, notatka na całą wysokość po prawej */
@media (min-width:900px) and (orientation:landscape){
  .formularz{
    display:grid;grid-template-columns:1.45fr 1fr;column-gap:18px;
    grid-template-areas:"pola notatka" "zgoda notatka" "akcje akcje";
    grid-template-rows:auto 1fr auto;
  }
  .blok-pola{grid-area:pola}
  .blok-notatka{grid-area:notatka;display:flex;flex-direction:column;margin-bottom:10px}
  .blok-notatka textarea{flex:1;height:auto}
  .formularz .zgoda{grid-area:zgoda;margin-bottom:10px;align-self:start}
  .akcje{grid-area:akcje;margin-top:0}
}

/* niski ekran w poziomie (małe tablety): ciaśniej, żeby nic się nie przewijało */
@media (orientation:landscape) and (max-height:620px){
  #ekran-formularz main{padding-top:8px;padding-bottom:8px}
  .formularz{padding-top:10px}
  .formularz .pole{margin-bottom:8px}
  .formularz input[type=text],.formularz input[type=tel],.formularz input[type=email],.formularz select{min-height:44px;padding:8px 12px}
  .akcje{padding-top:8px;padding-bottom:10px}
}

/* więcej miejsca w pionie — większe pole notatki */
@media (min-height:900px){
  .formularz textarea{height:180px}
}

/* wąski ekran (telefon): jedno pole w rzędzie; przewijanie dozwolone,
   przycisk i tak zostaje przyklejony do dołu */
@media (max-width:560px){
  .rzad{grid-template-columns:1fr}
}