:root {
  --granat: #173559;
  --zielony: #2EA46A;
  --czerwony: #C0392B;
  --pomarancz: #D97706;
  --fiolet: #6B5AA0;
  --brzoskwinia: #B0752A;
  --tekst: #333;
  --tlo: #F6F8FC;
  --ramka: #D8DEE7;
  --biel: #fff;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--tlo); color: var(--tekst);
  font: 15.5px/1.6 "Segoe UI", Roboto, system-ui, sans-serif;
}
a { color: var(--granat); }

/* ---------- górny pasek ---------- */
.pasek {
  background: var(--granat); color: #fff; padding: 0 22px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
.pasek .marka { font-weight: 700; font-size: 17px; margin-right: 18px; padding: 13px 0; }
.pasek a { color: #cfd8e5; text-decoration: none; padding: 14px 13px; font-size: 14.5px; }
.pasek a:hover { color: #fff; background: rgba(255,255,255,.08); }
.pasek a.aktywna { color: #fff; box-shadow: inset 0 -3px 0 var(--zielony); }
.pasek .prawa { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pasek .kto { font-size: 13.5px; color: #9fb0c7; padding: 0 8px; }

.strona { max-width: 1180px; margin: 0 auto; padding: 22px 18px 60px; }
h1 { font-size: 24px; color: var(--granat); margin: 4px 0 18px; }
h2 { font-size: 19px; color: var(--granat); margin: 0 0 4px; display: flex; align-items: center; gap: 9px; }
h3 { font-size: 16px; color: var(--granat); margin: 22px 0 10px; }

/* ---------- komunikaty ---------- */
.komunikat { padding: 11px 16px; border-radius: 8px; margin-bottom: 14px; font-size: 14.5px; }
.komunikat.ok { background: #eaf7f0; border-left: 4px solid var(--zielony); }
.komunikat.blad { background: #fdf0ee; border-left: 4px solid var(--czerwony); }

/* ---------- kafelki ---------- */
.kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; margin-bottom: 26px; }
.kafelek { background: var(--biel); border: 1px solid var(--ramka); border-radius: 10px; padding: 13px 16px; border-left: 5px solid var(--granat); text-decoration: none; color: inherit; display: block; }
a.kafelek:hover { box-shadow: 0 3px 12px rgba(23,53,89,.12); }
.kafelek .liczba { display: block; font-size: 29px; font-weight: 700; line-height: 1.15; }
.kafelek .opis { display: block; font-size: 12.5px; color: #667; margin-top: 2px; }
.kafelek.pilne { border-left-color: var(--czerwony); } .kafelek.pilne .liczba { color: var(--czerwony); }
.kafelek.dzis { border-left-color: var(--pomarancz); } .kafelek.dzis .liczba { color: var(--pomarancz); }
.kafelek.dobre { border-left-color: var(--zielony); } .kafelek.dobre .liczba { color: #1d7a4c; }
.kafelek.czeka { border-left-color: var(--fiolet); } .kafelek.czeka .liczba { color: var(--fiolet); }
.kafelek.zimne { border-left-color: var(--brzoskwinia); } .kafelek.zimne .liczba { color: var(--brzoskwinia); }
.kafelek.zero { opacity: .5; border-left-color: var(--ramka); } .kafelek.zero .liczba { color: #99a; }

/* ---------- sekcje i karty ---------- */
.sekcja { margin-bottom: 30px; }
.sekcja .licznik { background: var(--granat); color: #fff; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 1px 10px; }
.sekcja.pilna h2 { color: var(--czerwony); } .sekcja.pilna .licznik { background: var(--czerwony); }
.sekcja.dzis h2 { color: var(--pomarancz); } .sekcja.dzis .licznik { background: var(--pomarancz); }
.sekcja.czeka h2 { color: var(--fiolet); } .sekcja.czeka .licznik { background: var(--fiolet); }
.podtytul { color: #667; font-size: 13.5px; margin: 0 0 13px; }

.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 13px; }
.karta { background: var(--biel); border: 1px solid var(--ramka); border-radius: 10px; padding: 14px 17px; border-left: 5px solid var(--granat); }
.karta.po-terminie { border-left-color: var(--czerwony); background: #FFF7F6; }
.karta.dzis { border-left-color: var(--pomarancz); background: #FFFBF3; }
.karta.blisko { border-left-color: var(--zielony); }
.karta.czeka { border-left-color: var(--fiolet); background: #FAF9FE; }
.karta.czeka-dlugo { border-left-color: var(--pomarancz); background: #FFFBF3; }
.karta.czeka-bardzo-dlugo { border-left-color: var(--czerwony); background: #FFF7F6; }
.karta.zimna { border-left-color: var(--brzoskwinia); background: #FFFCF7; }
.karta h4 { margin: 0 0 7px; font-size: 16px; }
.karta h4 a { text-decoration: none; }
.karta h4 a:hover { text-decoration: underline; }
.karta p { margin: 0 0 6px; font-size: 14px; }
.karta .termin strong { font-variant-numeric: tabular-nums; }
.ile { color: #667; } .karta.po-terminie .ile, .karta.dzis .ile { font-weight: 700; }
.karta.po-terminie .ile { color: var(--czerwony); } .karta.dzis .ile { color: var(--pomarancz); }
.alarm { color: var(--pomarancz); font-weight: 600; font-size: 13.5px; }
.karta.czeka-bardzo-dlugo .alarm { color: var(--czerwony); }
.numer { font-size: 20px; font-weight: 700; letter-spacing: .4px; font-variant-numeric: tabular-nums; margin: 0 0 7px; }
.numer a { color: #8a5e1f; text-decoration: none; }
.drobne { font-size: 12.5px; color: #8a93a3; }
.autor { font-size: 12.5px; color: #8a93a3; }

.znaczki { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; }
.firma { color: #fff; font-size: 10.5px; font-weight: 600; border-radius: 4px; padding: 3px 7px; white-space: nowrap; }
.f-bezpieczne { background: #173559; } .f-tablice { background: #1F6FB2; }
.f-webdisk { background: #5B4B8A; } .f-inna { background: #6B7280; }
.plakietka { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: #eef1f6; color: #556; white-space: nowrap; }
.p-wygrany { background: #e6f5ec; color: #1d7a4c; }
.p-odpadl { background: #fdecea; color: var(--czerwony); }
.p-zrealizowana { background: #e3f2ec; color: #0F7B5A; }
.p-oferta { background: #f0edf9; color: var(--fiolet); }

/* ---------- formularze ---------- */
.formularz { background: var(--biel); border: 1px solid var(--ramka); border-radius: 10px; padding: 20px 22px; margin-bottom: 20px; }
.pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
label { display: block; font-size: 13px; color: #667; margin-bottom: 4px; }
input[type=text], input[type=date], input[type=time], input[type=password], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 14.5px; padding: 8px 11px;
  border: 1px solid var(--ramka); border-radius: 7px; background: #fff;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--zielony); outline-offset: -1px; }
.przyciski { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; align-items: center; }
button, .przycisk {
  font: inherit; font-size: 14px; padding: 8px 15px; border-radius: 7px;
  border: 1px solid var(--ramka); background: var(--biel); color: var(--granat);
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .przycisk:hover { background: #eef2f8; }
button.glowny, .przycisk.glowny { background: var(--zielony); border-color: var(--zielony); color: #fff; font-weight: 600; }
button.glowny:hover { background: #26905c; }
button.wygrany { border-color: var(--zielony); color: #1d7a4c; }
button.przegrany { border-color: #e0b4ae; color: var(--czerwony); }
button.male, .przycisk.male { font-size: 12.5px; padding: 6px 10px; }
.wiersz-formularza { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.wiersz-formularza > div { flex: 1 1 160px; }

/* ---------- tabela ---------- */
.tabela { width: 100%; border-collapse: collapse; background: var(--biel); border: 1px solid var(--ramka); border-radius: 10px; overflow: hidden; }
.tabela th { text-align: left; font-size: 12.5px; color: #667; font-weight: 600; padding: 10px 14px; background: #f4f7fc; border-bottom: 1px solid var(--ramka); }
.tabela td { padding: 10px 14px; border-top: 1px solid #eef1f6; font-size: 14px; vertical-align: top; }
.tabela tr:hover td { background: #f8fafd; }
.tabela a { text-decoration: none; font-weight: 600; }
.tabela a:hover { text-decoration: underline; }

/* ---------- historia ---------- */
.historia { list-style: none; margin: 0; padding: 0; }
.historia li { padding: 11px 0 11px 15px; border-left: 3px solid var(--ramka); margin-bottom: 9px; background: #fafbfd; border-radius: 0 7px 7px 0; }
.historia .data-h { color: #889; font-weight: 600; margin-right: 7px; font-variant-numeric: tabular-nums; }

/* ---------- kalendarz ---------- */
.kal-glowa { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.kal-glowa h1 { margin: 0; text-transform: capitalize; }
.kalendarz { width: 100%; border-collapse: collapse; background: var(--biel); border: 1px solid var(--ramka); border-radius: 10px; overflow: hidden; table-layout: fixed; }
.kalendarz th { font-size: 12px; color: #667; text-transform: uppercase; letter-spacing: .5px; padding: 9px 6px; background: #f4f7fc; border-bottom: 1px solid var(--ramka); }
.kalendarz td { border: 1px solid #eef1f6; vertical-align: top; height: 106px; padding: 5px 6px; }
.kalendarz td.obcy { background: #fafbfd; } .kalendarz td.obcy .nr { color: #bbc; }
.kalendarz td.dzis { background: #FFFBF3; box-shadow: inset 0 0 0 2px var(--pomarancz); }
.kalendarz td.weekend { background: #fbfcfe; }
.kalendarz td.klikalny { cursor: pointer; transition: background .1s; }
.kalendarz td.klikalny:hover { background: #eef4fc; }
.kalendarz td.wybrany { background: #e6f5ec !important; box-shadow: inset 0 0 0 2px var(--zielony); }
.kalendarz td.wybrany .nr { color: #1d7a4c; }
.nr { font-size: 12.5px; color: #667; font-weight: 600; display: block; margin-bottom: 3px; }
.poz { display: block; font-size: 11.5px; padding: 2px 5px; border-radius: 4px; margin-bottom: 3px;
       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.poz.oferta { background: #FFF3E0; color: #8a5e1f; }
.poz.kontakt { background: #E8F0FB; color: var(--granat); }
.poz.montaz { background: #E3F2EC; color: #0F7B5A; }
.poz.spotkanie { background: #F0EDF9; color: var(--fiolet); }
.poz.przeglad { background: #E8F0FB; color: var(--granat); }
.poz.inne { background: #eef1f6; color: #556; }

.pusto { color: #889; font-style: italic; }
.filtry { display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.filtry > div { flex: 0 1 190px; }

@media (max-width: 640px) {
  .pasek { padding: 0 10px; } .pasek .marka { font-size: 15px; margin-right: 8px; }
  .pasek a { padding: 12px 8px; font-size: 13.5px; }
  .kalendarz td { height: 78px; }
}

/* ---------- przyciski decyzji z opisem, co zrobią ---------- */
.decyzje { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-bottom: 22px; }
.decyzje form { background: var(--biel); border: 1px solid var(--ramka); border-radius: 9px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.decyzje button { width: 100%; }
.co-zrobi { font-size: 12.5px; line-height: 1.45; color: #667; }
.co-zrobi.ostrzega { color: #8a5e1f; }
.co-zrobi strong { color: var(--czerwony); font-weight: 600; }

/* ---------- wybór kategorii do audytu ---------- */
.wybor-kategorii { display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px;
  border: 1px solid var(--ramka); border-radius: 9px; cursor: pointer; background: #fff;
  color: var(--tekst); font-size: 14.5px; margin: 0; }
.wybor-kategorii:hover { background: #f4f7fc; }
.wybor-kategorii input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.wybor-kategorii:has(input:checked) { border-color: var(--zielony); background: #f2faf5; }

/* ---------- pomysły ---------- */
.szybki-pomysl { border-left: 5px solid var(--zielony); }
.karta.pomysl { border-left-color: #7C6BB0; }
.karta.pomysl.zamkniety { opacity: .58; border-left-color: var(--ramka); }
.tresc-pomyslu { font-size: 15.5px; font-weight: 600; color: var(--granat); }
.karta.pomysl select { width: 100%; }

/* ---------- notatki ---------- */
.nowa-notatka { border-left: 5px solid var(--granat); }
.karta.notatka { border-left-color: #8a93a3; }
.karta.notatka.przypieta { border-left-color: var(--pomarancz); background: #FFFBF3; }
.karta.notatka.przypieta .tytul-notatki { color: #8a5e1f; }
.tytul-notatki { font-size: 15.5px; font-weight: 600; color: var(--granat); }
.karta.notatka textarea { resize: vertical; min-height: 70px; }

/* ---------- dyktowanie ----------
   Przycisk mikrofonu dokleja sie sam do kazdego pola tekstowego (skrypt na
   koncu baza.html). Siedzi wewnatrz ramki pola, blado, zeby nie zaglusza
   formularza - rozjasnia sie dopiero pod kursorem. */
.pole-mowa { position: relative; display: block; }
.pole-mowa > .mikrofon {
  position: absolute; right: 5px; padding: 1px 5px;
  font-size: 13px; line-height: 1.5; border-radius: 6px;
  border: 1px solid var(--ramka); background: rgba(255, 255, 255, .9);
  cursor: pointer; opacity: .4;
}
.pole-mowa > .mikrofon:hover { opacity: 1; background: #eef2f8; }
/* w polu wieloliniowym u gory, zeby nie zaslaniac uchwytu zmiany rozmiaru */
.pole-mowa > textarea + .mikrofon { top: 6px; }
.pole-mowa > input + .mikrofon { top: 50%; transform: translateY(-50%); }
.pole-mowa > textarea, .pole-mowa > input { padding-right: 34px; }

/* ---------- kalendarz: godzina w kafelku i panel dnia ---------- */
.poz .godz { font-weight: 700; font-variant-numeric: tabular-nums; }
.poz.wiecej { background: none; color: #667; font-weight: 600; padding-left: 5px; }
.poz.wiecej:hover { text-decoration: underline; }
.legenda { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.legenda .poz { display: inline-block; }

.panel-dnia {
  background: var(--biel); border: 1px solid var(--ramka); border-radius: 10px;
  padding: 16px 20px; margin: 18px 0 20px;
}
.panel-dnia h3 { margin: 0 0 12px; font-size: 17px; }
.lista-dnia { list-style: none; margin: 0; padding: 0; }
.wpis-dnia {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 11px; margin-bottom: 7px; border-radius: 8px;
  background: #f7f9fc; border-left: 4px solid var(--ramka);
}
/* kolor paska po lewej mowi, co to za wpis - te same kolory co w kafelkach */
.wpis-dnia.oferta { border-left-color: #E8A33D; background: #FFF9F0; }
.wpis-dnia.kontakt { border-left-color: #6B8FD4; background: #F5F8FD; }
.wpis-dnia.montaz { border-left-color: #2EA46A; background: #F3FAF6; }
.wpis-dnia.spotkanie { border-left-color: #8A7CC4; background: #F8F6FD; }
.wpis-dnia.przeglad { border-left-color: #6B8FD4; background: #F5F8FD; }
.wpis-dnia.inne { border-left-color: #AFB8C4; }
.godz-dnia {
  flex: 0 0 82px; font-weight: 700; font-size: 14px; color: var(--granat);
  font-variant-numeric: tabular-nums; padding-top: 1px;
}
.wpis-dnia .godz-dnia:not(:empty) { white-space: nowrap; }
.tresc-dnia { flex: 1 1 auto; min-width: 0; }
.nazwa-dnia { display: block; font-size: 15px; line-height: 1.45; }
.nazwa-dnia a { color: var(--granat); font-weight: 600; }
.rodzaj-dnia { font-size: 12px; color: #778; margin-left: 8px; white-space: nowrap; }
/* szczegoly lamia sie na tyle linijek, ile trzeba - to jest sens tego panelu */
.opis-dnia { display: block; font-size: 13.5px; color: #556; margin-top: 3px; line-height: 1.5; }

@media (max-width: 640px) {
  .wpis-dnia { flex-direction: column; gap: 2px; }
  .godz-dnia { flex: 0 0 auto; }
}

/* ---------- kalendarz: widok listy ---------- */
/* Przelacznik siedzi TUZ OBOK przyciskow miesiaca, nie przy krawedzi ekranu.
   Pierwsza wersja miala margin-left:auto i na monitorze 3440 px ladowala tak
   daleko od naglowka, ze Mariusz jej nie zauwazyl (10.09.2026). */
.przelacznik { display: inline-flex; margin-left: 18px; }
.przelacznik .przycisk { border-radius: 0; margin: 0; }
.przelacznik .przycisk:first-child { border-radius: 7px 0 0 7px; }
.przelacznik .przycisk:last-child { border-radius: 0 7px 7px 0; margin-left: -1px; }
.dzien-listy {
  background: var(--biel); border: 1px solid var(--ramka); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 12px;
}
.dzien-listy.dzis { box-shadow: inset 0 0 0 2px var(--pomarancz); }
.dzien-listy h3 {
  margin: 0 0 10px; font-size: 15.5px; display: flex; gap: 9px; align-items: center;
}

/* ---------- dzwonek z przypomnieniami ----------
   Decyzja Mariusza z 10.09.2026: kolor mowi tylko JEDNO - czy cos czeka.
   Cokolwiek w dzwonku = czerwony. Pusty = zielony, czyli "masz spokoj".
   Nie rozrozniamy juz "po terminie" kolorem samego dzwonka; od tego jest
   czerwony pasek przy pozycji w rozwinietej liscie. */
.dzwonek {
  position: relative; border: none; cursor: pointer; line-height: 1;
  margin-right: 8px; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .1s;
}
.dzwonek.pusty { background: var(--zielony); }
.dzwonek.sa, .dzwonek.pilny { background: var(--czerwony); }
.dzwonek:hover { transform: scale(1.08); }
.dzwonek-ikona { font-size: 15px; filter: grayscale(1) brightness(3); }
.dzwonek-liczba {
  position: absolute; top: -4px; right: -5px; min-width: 17px; padding: 0 4px;
  font-size: 11px; font-weight: 700; line-height: 17px; border-radius: 9px;
  background: #fff; color: var(--czerwony); border: 1px solid var(--czerwony);
}

.przyciemnienie { position: fixed; inset: 0; background: rgba(15, 25, 45, .45); z-index: 40; }
.przypomnienia {
  position: absolute; right: 14px; top: 46px; z-index: 50; width: min(520px, calc(100vw - 28px));
  background: var(--biel); border: 1px solid var(--ramka); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 25, 45, .18); padding: 14px 16px;
}
/* na starcie programu ta sama lista pokazuje sie na srodku jako okienko */
.przypomnienia.okienko {
  position: fixed; top: 50%; left: 50%; right: auto;
  transform: translate(-50%, -50%); width: min(600px, calc(100vw - 32px));
  max-height: 80vh; overflow-y: auto;
}
.przypomnienia-glowa {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 10px;
}
.przypomnienia-lista { list-style: none; margin: 0; padding: 0; }
.przypomnienie {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 11px; margin-bottom: 7px; border-radius: 8px;
  background: #f7f9fc; border-left: 4px solid var(--ramka);
}
.przypomnienie.oferta { border-left-color: #E8A33D; background: #FFF9F0; }
.przypomnienie.kontakt { border-left-color: #6B8FD4; background: #F5F8FD; }
.przypomnienie.montaz { border-left-color: #2EA46A; background: #F3FAF6; }
.przypomnienie.spotkanie { border-left-color: #8A7CC4; background: #F8F6FD; }
.przypomnienie.przeglad { border-left-color: #6B8FD4; background: #F5F8FD; }
.przypomnienie.zadanie, .przypomnienie.audyt { border-left-color: #8A7CC4; }
.przypomnienie.po-terminie { border-left-color: var(--czerwony); background: #FDF3F3; }
.przypomnienie .kiedy {
  flex: 0 0 108px; font-size: 12.5px; font-weight: 700; color: #667; padding-top: 2px;
}
.przypomnienie.po-terminie .kiedy { color: var(--czerwony); }
.przypomnienie .co { flex: 1 1 auto; min-width: 0; font-size: 14.5px; line-height: 1.45; }
.przypomnienie .co a { color: var(--granat); font-weight: 600; }
.przypomnienie .zalatwione { flex: 0 0 auto; }

@media (max-width: 640px) {
  .przypomnienie { flex-wrap: wrap; }
  .przypomnienie .kiedy { flex: 0 0 auto; }
}

/* ---------- karty do czytania + okno edycji (Pomysły, Notatki — 14.09.2026) ----------
   Karta pokazuje CALY tekst, zawijany. Wczesniej karty byly formularzami: pola
   jednoliniowe pokazywaly ok. 35 znakow, a przypadkowe klikniecie moglo zmienic tresc.
   Edycja jest w okienku .okno-edycji; obsluga wspolna w baza.html. */
.karta[data-okno] { cursor: pointer; transition: box-shadow .12s; }
.karta[data-okno]:hover { box-shadow: 0 4px 14px rgba(15, 25, 45, .10); }
.karta[data-okno]:focus-visible { outline: 2px solid var(--zielony); outline-offset: 2px; }
/* specyficznosc celowo wyzsza niz .karta h4 i .karta p, ktore inaczej nadpisalyby odstepy */
.karta[data-okno] .tresc-pomyslu, .karta[data-okno] .tytul-notatki {
  margin: 0; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere;
}
.karta[data-okno] .szczegoly-pomyslu, .karta[data-okno] .tresc-notatki {
  margin: 7px 0 0; font-size: 13.5px; color: #445; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.karta[data-okno] .szczegoly-pomyslu.brak,
.karta[data-okno] .tresc-notatki.brak { color: #99a; font-style: italic; }
.stopka-karty {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.stopka-karty .znaczniki { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.p-przypieta { background: #FFF3E0; color: #8a5e1f; }

.okno-edycji {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50;
  width: min(680px, calc(100vw - 32px)); max-height: 88vh; overflow-y: auto;
  background: var(--biel); border: 1px solid var(--ramka); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 25, 45, .22); padding: 16px 20px 14px;
}
/* reczne display gdziekolwiek wyzej nie moze przebic atrybutu hidden */
.okno-edycji[hidden], .przyciemnienie[hidden] { display: none; }
.okno-glowa {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 10px;
}
.akcje-okna {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f6;
}
.akcje-okna form { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.okno-otwarte { overflow: hidden; }