/*
 * ARENA - WSPOLNE KOMPONENTY trzech paneli: ArenaPay, ArenaBooking i pulpitu operatora (etap S2 stylu, 2026-09-20/21).
 *
 * PO CO. arena.css dal trzem panelom jedno zrodlo BARW, ale kazdy panel dalej rysowal po swojemu te same rzeczy:
 * komunikat, znacznik, przycisk, pole, karte, tabele, lewe menu, tytul ekranu. Pomiar z 2026-09-20 (BLUEPRINT 1.103,
 * narzedzia/porownanie-paneli.html) pokazal 108 roznic w 19 komponentach i TRZY NAZWY KLAS na ten sam element
 * (.alert.ok / .komunikat.ok / .ok). Ten plik jest jednym zrodlem REGUL i jednym SLOWNIKIEM KLAS.
 *
 * KOLEJNOSC LADOWANIA (Http\Arkusze): arena.css (barwy) -> TEN PLIK -> arkusz produktu. Arkusz produktu rysuje to,
 * co ma tylko on (grafik Stay, generator i suwaki ArenaPay, kafelki pulpitu), i moze komponent DOPRECYZOWAC w swoim
 * kontekscie - ale nie definiuje go drugi raz. Produkty biora ten plik DOWIAZANIEM, tak jak arena.css.
 *
 * SLOWNIK (nazwy po polsku, bez przedrostkow produktu):
 *   .komunikat + .ok | .blad | .uwaga         pasek nad trescia po zapisie albo odmowie; .uwaga - ostrzezenie (abonament)
 *   .znacznik + .zielony | .czerwony | .szary | .niebieski | .zolty | .fiolet     stan przy wierszu
 *   button / .przycisk (+ .glowny | .grozny) (+ .maly) (+ .szeroki)             przycisk; bez odmiany = drugorzedny
 *   label, input, select, textarea            pole formularza: 44 px, tekst 16 px (iPhone przybliza strone ponizej 16)
 *   input[type="file"]                        pole pliku: ramka z przerywana linia, przycisk wyboru jak drugorzedny
 *   .pole-wyboru                              rzad z polem wyboru (opcja formularza, zgoda, potwierdzenie)
 *   .przelacznik > input + .suwak             wlacz / wylacz w USTAWIENIACH (gradient marki z oryginalnej aplikacji)
 *   .info                                     drobny szary dopisek pod polem albo naglowkiem
 *   .karta (+ h2)                             pojemnik formularzy i tabel; h2 = naglowek karty z linia pod spodem
 *   .tabela > table (+ .gesta)                tabela we wlasnej ramce; w karcie traci ramke; .gesta dla list o wielu kolumnach
 *   .kafelki > .kafelek > .etykieta + .wartosc   rzad liczb nad lista (rama wspolna, wielkosc i barwa liczby - panelu)
 *   .powloka > aside.pasek + main             uklad strony: lewe menu 264 px (ciemne w obu trybach) i tresc
 *   .pasek: .marka (.logo + .podpis), .obiekt, nav (.grupa, a, a.wybrany, a.zewnetrzny), .stopka (.motyw, .kto, .wyloguj, .firma)
 *   form.motyw                                przelacznik motywu: trzy przyciski, POST z tokenem (Http\Motyw) - bez JavaScriptu
 *   .naglowek-tresci > div > h1 (+ .podtytul) [+ .czynnosci-gorne]   tytul ekranu w gradiencie marki i czynnosci ROBOCZE po prawej
 *   details.dzwonek (.w-naglowku | .w-belce) > summary + .dzwonek-panel > .dzwonek-lista   powiadomienia panelu; strona: .powiadomienia
 *
 * ZASADA PRZY DOPISYWANIU: barwa wylacznie ze zmiennej z arena.css (zadnego #rrggbb tutaj) - wtedy tryb ciemny
 * nie wymaga ani jednej osobnej reguly. Wyjatkiem jest lewe menu, ciemne w obu trybach.
 * Krok S2 jest skonczony, gdy rzad komponentu na stronie porownania pokazuje ZERO roznic w obu trybach.
 */

/* --- Podstawa strony ------------------------------------------------------------------------------------------
   15 px / 1,55 w trzech panelach (ArenaBooking mial 14 px; sam GRAFIK Stay trzyma wlasna gestosc w swoim arkuszu). */
* { box-sizing: border-box; }
body {
    margin: 0; background: var(--tlo); color: var(--tekst); -webkit-text-size-adjust: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px; line-height: 1.55;
}
a { color: var(--marka); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Atrybut hidden ma wygrywac z kazdym display z arkusza (flex albo grid na tym samym elemencie by go uniewaznil). */
[hidden] { display: none !important; }
.info { font-size: 13.5px; color: var(--tekst-trzeci); line-height: 1.6; }

/* --- Komunikat nad trescia ------------------------------------------------------------------------------------
   Barwy znacznika zielonego i czerwonego: komunikat o bledzie i czerwony znacznik to ten sam sygnal.
   role="status" (powodzenie) i role="alert" (blad) dopisuje widok - czytnik ekranu odczyta blad od razu. */
.komunikat { margin: 0 0 16px; padding: 12px 15px; border-radius: 9px; font-size: 14.5px; line-height: 1.55; }
.komunikat.ok { background: var(--zn-zielony-tlo); color: var(--zn-zielony-tekst); }
.komunikat.blad { background: var(--zn-czerwony-tlo); color: var(--zn-czerwony-tekst); }
/* Ostrzezenie, ktore nie jest bledem (koniec abonamentu, okres laski): barwy zoltego znacznika, odnosnik w tym samym kolorze. */
.komunikat.uwaga { background: var(--zn-zolty-tlo); color: var(--zn-zolty-tekst); }
.komunikat.uwaga a { color: inherit; font-weight: 600; text-decoration: underline; }

/* --- Znacznik stanu -------------------------------------------------------------------------------------------
   Pastylka przy wierszu: status platnosci, stan abonamentu, plan. Barwa mowi o ZNACZENIU, wiec panel moze miec
   wlasne nazwy znaczen (pulpit: .aktywny, .plan-free) przypiete w swoim arkuszu do tych samych zmiennych. */
.znacznik {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}
.znacznik.zielony { background: var(--zn-zielony-tlo); color: var(--zn-zielony-tekst); }
.znacznik.czerwony { background: var(--zn-czerwony-tlo); color: var(--zn-czerwony-tekst); }
.znacznik.szary { background: var(--zn-szary-tlo); color: var(--zn-szary-tekst); }
.znacznik.niebieski { background: var(--zn-niebieski-tlo); color: var(--zn-niebieski-tekst); }
.znacznik.zolty { background: var(--zn-zolty-tlo); color: var(--zn-zolty-tekst); }
.znacznik.fiolet { background: var(--zn-fiolet-tlo); color: var(--zn-fiolet-tekst); }

/* --- Przycisk -------------------------------------------------------------------------------------------------
   JEDEN przycisk dla <button> i dla odnosnika z klasa .przycisk. BEZ ODMIANY jest drugorzedny (wypelniony szary):
   wyroznienie trzeba ZAMOWIC klasa .glowny - na ekranie ma byc jedna czynnosc glowna, a nie kazdy przycisk w barwie
   marki, bo ktos zapomnial klasy. 44 px = wysokosc pola formularza (przycisk obok pola stoi z nim w jednej linii)
   i rozsadne pole dotyku. Ramka przezroczysta zamiast zadnej: odmiana z obwodka (w arkuszu produktu) nie zmienia
   wysokosci. .grozny bierze barwy czerwonego znacznika - ten sam sygnal co komunikat o bledzie, poprawny w ciemnym
   bez osobnej reguly. Wylogowanie NIE jest czynnoscia grozna.
   KOREKTA OPTYCZNA (uwaga Rafala 2026-09-25: "tekst ciut wyzej niz na srodku"): wersaliki stoja na srodku co do piksela, ale polskie
   napisy maja duzo liter wystajacych w gore (k, l, t, W, akcenty) i malo w dol, wiec tekst "wisi" wyzej - stad 1 px wiecej u gory
   niz u dolu. Kazde nadpisanie paddingu przycisku z tekstem (arkusze produktow) trzyma te sama roznice; przyciski z sama ikona - nie. */
button, .przycisk {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font: inherit; font-size: 15px; font-weight: 600; line-height: 1.55; text-decoration: none; cursor: pointer;
    background: var(--przycisk-tlo); color: var(--tekst); border: 1px solid transparent;
    padding: 10px 18px 8px; border-radius: 9px; min-height: 44px;
}
button:hover, .przycisk:hover { background: var(--przycisk-najazd); text-decoration: none; }
button svg, .przycisk svg { width: 16px; height: 16px; flex: 0 0 16px; }
button.glowny, .przycisk.glowny { background: var(--marka); color: var(--na-marce); }
button.glowny:hover, .przycisk.glowny:hover { background: var(--marka-ciemna); }
button.grozny, .przycisk.grozny { background: var(--zn-czerwony-tlo); color: var(--zn-czerwony-tekst); }
button.grozny:hover, .przycisk.grozny:hover { background: var(--zn-czerwony-tlo); filter: brightness(.96); }
/* Maly: czynnosc przy wierszu tabeli i w pasku narzedzi. */
button.maly, .przycisk.maly { font-size: 12.5px; padding: 6px 11px 4px; min-height: 32px; gap: 5px; }
button.maly svg, .przycisk.maly svg { width: 14px; height: 14px; flex-basis: 14px; }
button.szeroki, .przycisk.szeroki { width: 100%; }
/* Rzad przyciskow pod formularzem. */
.przyciski { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.przyciski form { display: inline; margin: 0; }

/* --- Pole formularza ------------------------------------------------------------------------------------------
   JEDNO pole dla trzech paneli: 44 px (najmniejsze rozsadne pole dotyku - i tyle samo co przycisk obok) i tekst 16 px.
   16 px NIE JEST KOSMETYKA: iPhone przybliza strone przy kazdym dotknieciu pola z tekstem ponizej 16 px, co przy
   wystawianiu linku albo wpisywaniu rezerwacji przy gosciu wyglada jak awaria (ArenaBooking mial 14 px - usterka z 1.103).
   Lista typow zamiast :not(...): kazde :not podnosi wage selektora i arkusz produktu nie moglby pola doprecyzowac. */
label { display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 6px; color: var(--tekst-drugi); }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"],
input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input:not([type]), select, textarea {
    width: 100%; padding: 8px 12px; border: 1px solid var(--linia-pola); border-radius: 9px;
    background: var(--pole); color: var(--tekst); font: inherit; font-size: 16px; min-height: 44px; margin: 0 0 16px;
}
textarea { min-height: 80px; resize: vertical; }
/* TELEFON: POLE NIE MNIEJSZE NIZ 16 PX (1.372, przeglad wszystkich ekranow). Safari na iPhonie powieksza strone, gdy dotknie sie pola
   z drobniejsza czcionka - a ekrany paneli maja kilka zwartych pol (filtry list, daty Wplat, kody, adresy kalendarzy) z 13-14 px.
   !important celowo: zwarte pola maja wlasne, mocniejsze reguly w arkuszach produktow, a ta zasada ma wygrac z kazda z nich. */
@media (max-width: 760px) {
    input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"],
    input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input:not([type]), select, textarea {
        font-size: 16px !important;
    }
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--obrys-fokus); outline-offset: 0; border-color: var(--marka); }
input::placeholder, textarea::placeholder { color: var(--tekst-trzeci); }
input[aria-invalid="true"] { border-color: var(--zn-czerwony-tekst); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--marka); }
/* POLE PLIKU (logo, zdjecia): przegladarka rysuje wlasny przycisk systemowy ("Przegladaj..." / "Wybierz pliki") - inny w kazdym
   systemie i obcy w panelu. Tu cale pole to ramka z przerywana linia (klikalna na calej szerokosci; plik upuszczony na pole
   przegladarka tez przyjmuje), a przycisk wyboru wyglada jak nasz przycisk drugorzedny. Napis na przycisku i "Nie wybrano
   pliku" daje przegladarka w jezyku systemu - bez skryptu tego sie nie zmieni, a pole musi zostac widoczne: tylko ono mowi,
   co wybrano. */
input[type="file"] {
    display: block; width: 100%; box-sizing: border-box; margin: 0 0 16px; padding: 10px;
    border: 1px dashed var(--linia-pola); border-radius: 12px; background: var(--pole);
    font: inherit; font-size: 14px; color: var(--tekst-drugi); cursor: pointer;
}
input[type="file"]:hover { border-color: var(--marka); }
input[type="file"]::file-selector-button {
    margin: 0 12px 0 0; padding: 8px 16px; min-height: 40px; border: 1px solid transparent; border-radius: 9px;
    background: var(--przycisk-tlo); color: var(--tekst); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
input[type="file"]:hover::file-selector-button { background: var(--przycisk-najazd); }

/* Rzad z polem wyboru - dwa uklady znacznikow, jeden wyglad: <label class="pole-wyboru"><input> napis</label>
   albo <div class="pole-wyboru"><input id><label for>napis</label></div>. */
.pole-wyboru {
    display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 16px;
    font-size: 14.5px; font-weight: 500; color: var(--tekst);
}
.pole-wyboru input[type="checkbox"], .pole-wyboru input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; flex: 0 0 18px; }
.pole-wyboru label { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }

/* PRZELACZNIK (suwak) - wlacz / wylacz w ustawieniach. Wzor: .set-switch i .notif-sw z oryginalnej aplikacji ArenaPay:
   wylaczony WYRAZNIE szary, wlaczony w gradiencie marki - tym samym w obu trybach. Pole wyboru wyzej jest dla OPCJI
   formularza ("wyslij e-mailem", zgoda); przelacznik dla ustawienia, ktore dziala od razu po zapisaniu. */
.przelacznik { position: relative; display: inline-flex; flex: 0 0 auto; margin: 0; cursor: pointer; }
.przelacznik input { position: absolute; opacity: 0; width: 0; height: 0; }
.przelacznik .suwak { display: block; width: 46px; height: 26px; border-radius: 999px; background: var(--suwak-tlo); transition: background .2s; }
.przelacznik .suwak::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--suwak-galka); box-shadow: var(--suwak-cien); transition: transform .2s;
}
.przelacznik input:checked + .suwak { background: var(--gradient-marki); }
.przelacznik input:checked + .suwak::after { transform: translateX(20px); }
.przelacznik input:disabled + .suwak { background: var(--suwak-nieczynny); cursor: not-allowed; }
.przelacznik input:focus-visible + .suwak { outline: 3px solid var(--obrys-fokus); }

/* --- Karta ----------------------------------------------------------------------------------------------------
   Odstep i zaokraglenie jako zmienne KARTY: element, ktory siega do jej krawedzi (pasek zapisu ArenaPay), musi znac
   obie wartosci takze na telefonie. Naglowek karty (h2) ma linie pod spodem - jak w ArenaPay; okna i szuflady, ktore
   maja wlasny uklad naglowka, zdejmuja ja u siebie. */
.karta {
    --odstep-karty: 22px; --zaokr-karty: 14px;
    background: var(--papier); border: 1px solid var(--linia); border-radius: var(--zaokr-karty);
    padding: var(--odstep-karty); margin: 0 0 20px; box-shadow: var(--cien);
}
@media (max-width: 600px) { .karta { --odstep-karty: 18px; --zaokr-karty: 12px; } }
h2 {
    font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--linia); color: var(--tekst);
}

/* --- Tabela ---------------------------------------------------------------------------------------------------
   Wzor z oryginalnej aplikacji ArenaPay: male szare naglowki wersalikami na delikatnym pasie, wiersz podswietlany po
   najechaniu. PRZEWIJA SIE RAMKA (.tabela), NIE TABELA: display:block na <table> robi z thead i tbody dwie niezalezne
   tabele i kolumny przestaja sie zgadzac. W KARCIE ramka traci tlo, obwodke i cien - inaczej wychodzi karta w karcie. */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--linia); vertical-align: middle; }
th {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tekst-trzeci); white-space: nowrap;
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--tlo-najazd); }
td.data { white-space: nowrap; color: var(--tekst-drugi); font-variant-numeric: tabular-nums; }
td.liczba, td.kwota { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.kwota { font-weight: 600; }
.tabela {
    background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; box-shadow: var(--cien);
    overflow-x: auto; margin: 0 0 20px; scrollbar-width: thin; scrollbar-color: var(--linia-pola) transparent;
}
/* Systemowy pasek przewijania ma 15 px i strzalki - wiecej niz tabela potrzebuje. Cienki zostaje: schowany calkiem
   odbieralby jedyny znak, ze kolumny jada dalej w prawo. */
.tabela::-webkit-scrollbar { height: 7px; }
.tabela::-webkit-scrollbar-track { background: transparent; }
.tabela::-webkit-scrollbar-thumb { background: var(--linia-pola); border-radius: 4px; }
.tabela thead th { background: var(--tlo-delikatne); }
/* Gesta: lista o wielu kolumnach (platnosci ArenaPay - dziewiec) - kazde dwa piksele na komorke to osiemnascie na tabele. */
.tabela.gesta th, .tabela.gesta td { padding: 11px 8px; }
.karta .tabela { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.karta .tabela thead th:first-child { border-radius: 9px 0 0 9px; }
.karta .tabela thead th:last-child { border-radius: 0 9px 9px 0; }
.karta .tabela tbody tr:last-child td { border-bottom: 0; }

/* --- Kafelki liczb --------------------------------------------------------------------------------------------
   WSPOLNA jest rama kafelka i podpis. Wyrownanie, wielkosc i barwe LICZBY ustawia panel: w ArenaPay to pieniadze
   (srodek, duze, barwa znaczenia - jak w oryginale), w pulpicie liczniki (do lewej, bez barwy). */
.kafelki { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 20px; }
.kafelek {
    flex: 1 1 190px; min-width: 0; background: var(--papier); border: 1px solid var(--linia); border-radius: 14px;
    padding: 16px 18px; box-shadow: var(--cien);
}
.kafelek .etykieta {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tekst-trzeci); line-height: 1.3;
}
.kafelek .wartosc { font-size: 24px; font-weight: 700; color: var(--tekst); margin-top: 6px; letter-spacing: -.02em; }
/* TELEFON: DWA KAFELKI W RZEDZIE - jak w oryginale. Jeden pod drugim to caly ekran telefonu na cztery liczby.
   40%, nie "50% minus pol odstepu": dwa mieszcza sie przy KAZDYM odstepie i kazdej szerokosci, trzeci nigdy. Wersja z calc()
   w ArenaPay byla przypieta do odstepu 12 px - gdy odstep urosl do 14 px, kafelki po cichu stanely po jednym w rzedzie
   (zlapane na zrzucie z telefonu, etap S2). Selektor z DWOMA klasami, bo zapytanie o szerokosc nie podnosi wagi reguly. */
@media (max-width: 720px) {
    .kafelki .kafelek { flex: 1 1 40%; }
}
/* Kafelek w karcie: przyciemnione pole bez cienia - liczba w komorce, nie karta w karcie. */
.karta .kafelek { background: var(--tlo-delikatne); border-color: transparent; box-shadow: none; }
.karta .kafelki:last-child { margin-bottom: 0; }

/* --- Powloka strony: lewe menu + tresc ------------------------------------------------------------------------
   WZOR: oryginalna aplikacja ArenaPay - ciemny pasek z lewej, marka krojem Montserrat, grupy pozycji, stan konta
   w stopce. Pasek jest PRZYKLEJONY i ma wysokosc okna: na dlugiej liscie menu i wylogowanie zostaja pod reka,
   a gdy pozycji jest wiecej niz miejsca, przewija sie sam pasek. z-index: pasek "sticky" tworzy wlasny kontekst
   warstw - bez tego lista wysuwana z waskiej szyny ArenaBooking chowala sie pod przyklejona kolumne pokoi grafiku. */
.powloka { display: flex; min-height: 100vh; align-items: stretch; }
.pasek {
    flex: 0 0 264px; background: var(--pasek-tlo); color: var(--pasek-tekst); padding: 22px 16px 0;
    display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 30;
    scrollbar-width: thin; scrollbar-color: var(--pasek-linia-mocna) transparent;
}
.pasek a:hover { text-decoration: none; }
/* Blok marki: znak i nazwa w rzedzie, pod nimi dopisek produktu, pod calym blokiem cienka linia. */
.pasek .marka {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 14px;
    border-bottom: 1px solid var(--pasek-linia); text-decoration: none;
}
.pasek .logo {
    display: flex; align-items: center; gap: 12px; color: var(--pasek-tekst-mocny); letter-spacing: -0.3px;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 800; font-size: 1.3rem;
}
/* Znak marki z pliku - ten sam, ktorym posluguje sie oryginalna aplikacja. */
.pasek .logo::before {
    content: ""; display: block; width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px;
    background: var(--pasek-znak-tlo) url("/assets/znak.png") center / 27px 27px no-repeat;
}
.pasek .podpis { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--pasek-podpis); font-weight: 700; }
.pasek .obiekt { text-align: center; font-size: 14px; color: var(--pasek-tekst-jasny); line-height: 1.4; overflow-wrap: anywhere; }
.pasek .obiekt strong { display: block; font-weight: 600; }
.pasek .obiekt .info, .pasek .kto .info { color: var(--pasek-tekst-slaby); font-size: 12px; font-weight: 400; }
.pasek nav { display: flex; flex-direction: column; gap: 2px; }
/* Naglowek grupy wciety do napisow pozycji (12 px), nie do krawedzi paska. */
.pasek .grupa {
    font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--pasek-tekst-slaby);
    font-weight: 700; margin: 12px 0 6px; padding: 0 12px;
}
.pasek nav a {
    color: var(--pasek-tekst); font-size: 14.5px; padding: 9px 12px; border-radius: 9px; text-decoration: none;
    display: flex; align-items: center; gap: 10px;
}
/* Kreska ikon 1,7 px: przy ikonie 17 px wyglada lzej niz 2 px i jest blizej oryginalu. */
.pasek nav svg { width: 17px; height: 17px; flex: 0 0 17px; opacity: .8; stroke-width: 1.7; }
.pasek nav a:hover { background: var(--pasek-linia); color: var(--pasek-tekst-mocny); }
.pasek nav a.wybrany { background: var(--marka); color: var(--na-marce); font-weight: 600; }
.pasek nav a.wybrany svg { opacity: 1; }
.pasek nav a.zewnetrzny { font-size: 13.5px; color: var(--pasek-tekst-cichy); padding: 7px 12px; }
.pasek nav a.zewnetrzny svg { width: 15px; height: 15px; flex-basis: 15px; opacity: .65; }
.pasek nav a.zewnetrzny span::after { content: " ↗"; font-size: 11px; color: var(--pasek-tekst-najslabszy); }
/* ZMIEN OBIEKT (Http\ZmianaObiektu): rozwijana lista w menu - <details>, wiec bez JavaScriptu - z PRZYCISKIEM na obiekt
   w formularzu POST z tokenem (do 2026-09-21 odnosniki ?switch= w ArenaBooking i <select onchange> w ArenaPay: zadanie GET
   zmienialo stan, a ArenaPay potrzebowal do tego skryptu w linii). Przycisk wyglada jak pozycja podrzedna menu, dlatego
   zdejmuje z siebie wspolny wyglad przycisku (tlo, ramke, wysokosc 44 px). */
.zmiana-obiektu ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zmiana-obiektu li button { width: 100%; }
/* KARTA OBIEKTU NA GORZE MENU (1.597, Http\ZmianaObiektu::karta; makieta 2026-10-15-przelacznik-obiektu, wariant A): biezacy obiekt (znak - logo
   z wizytowki albo inicjaly w kolorze rodzaju, nazwa, "rodzaj · rola") w miejscu samej nazwy; <details> rozwija "Twoje obiekty" pod karta.
   Do 1.596 "Zmień obiekt" stalo na dole menu, pod Pomoca. Na waskiej szynie ArenaBooking - sam znak, lista obok (booking-panel.css). */
.pasek .wybor-obiektu { position: relative; }
.pasek .wybor-obiektu > summary {
    list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; cursor: pointer;
    border: 1px solid var(--pasek-linia); background: var(--pasek-linia); color: var(--pasek-tekst-mocny);
}
.pasek .wybor-obiektu > summary::-webkit-details-marker { display: none; }
.pasek .wybor-obiektu > summary:hover, .pasek .wybor-obiektu[open] > summary { border-color: var(--pasek-linia-mocna); }
.pasek .wybor-obiektu > summary:focus-visible { outline: 2px solid var(--obrys-fokus); outline-offset: 2px; }
.pasek .wybor-obiektu > summary .opis-obiektu strong { font-size: 14px; }
.pasek .wybor-obiektu > summary .opis-obiektu span { color: var(--pasek-tekst-slaby); }
/* Napis "Zmień obiekt" - dla czytnika ekranu (i dymek na waskiej szynie); w pelnym menu karta mowi sama za siebie. */
.pasek .wybor-obiektu > summary .etykieta-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pasek .trojkat-obiektu { width: 16px; height: 16px; flex: 0 0 16px; margin-left: auto; opacity: .7; transition: transform .15s ease; }
.pasek .wybor-obiektu[open] .trojkat-obiektu { transform: rotate(180deg); }
.pasek .znak-obiektu {
    display: inline-grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; overflow: hidden;
    font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--pasek-znak-tekst); background: var(--marka);
}
.pasek .znak-obiektu.noclegi { background: var(--pasek-znak-noclegi); }
.pasek .znak-obiektu.szkola { background: var(--pasek-znak-szkola); }
.pasek .znak-obiektu.z-logo { background: var(--pasek-znak-tlo); padding: 3px; }
.pasek .znak-obiektu.z-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pasek .opis-obiektu { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.3; }
.pasek .opis-obiektu strong { font-weight: 600; overflow-wrap: anywhere; }
.pasek .opis-obiektu span { font-size: 12px; }
.pasek .lista-obiektow {
    margin: 6px 0 2px; padding: 6px; border: 1px solid var(--pasek-linia-mocna); border-radius: 11px; background: var(--pasek-tlo);
    box-shadow: var(--cien-rozwijany);
}
.pasek .lista-obiektow .naglowek-listy {
    margin: 2px 6px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--pasek-tekst-slaby);
}
.pasek .lista-obiektow ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pasek .obiekt-wiersz {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 0; padding: 7px 8px; border: 0;
    border-radius: 9px; background: none; color: var(--pasek-tekst); font: inherit; text-align: left; cursor: pointer;
}
.pasek button.obiekt-wiersz:hover, .pasek button.obiekt-wiersz:focus-visible { background: var(--pasek-linia); color: var(--pasek-tekst-mocny); }
.pasek .obiekt-wiersz .opis-obiektu strong { font-size: 13.5px; }
.pasek .obiekt-wiersz .opis-obiektu span { color: var(--pasek-tekst-slaby); }
.pasek .obiekt-wiersz.nieaktywny .znak-obiektu { opacity: .55; }
.pasek .obiekt-wiersz.biezacy { background: var(--pasek-wybrany-tlo, var(--pasek-linia)); color: var(--pasek-tekst-mocny); cursor: default; }
.pasek .ptaszek-obiektu { width: 16px; height: 16px; flex: 0 0 16px; margin-left: auto; color: var(--pasek-tekst-mocny); }
/* Stopka menu: motyw, konto, wylogowanie, firma - JEDNO miejsce dla trzech paneli; u gory ekranu zostaja czynnosci ROBOCZE.
   PRZYKLEJONA DO DOLU PASKA: przy dlugim menu i niskim oknie (laptop 768 px) przewijaja sie pozycje, a wylogowanie
   i motyw zostaja na widoku. Dolny odstep paska siedzi w stopce (padding), zeby przyklejona stala w tym samym miejscu
   co na koncu przewijania; wlasne tlo zaslania pozycje, ktore pod nia wjezdzaja. */
.pasek .stopka {
    margin-top: auto; display: flex; flex-direction: column; gap: 10px;
    position: sticky; bottom: 0; background: var(--pasek-tlo); padding: 10px 0 18px;
    box-shadow: 0 -14px 12px -8px var(--pasek-tlo);
}
.pasek .kto {
    font-size: 13px; color: var(--pasek-tekst-jasny); line-height: 1.45; padding: 12px 12px 0; text-align: center;
    border-top: 1px solid var(--pasek-linia); overflow-wrap: anywhere;
}
.pasek .stopka form { margin: 0; }
.pasek .stopka .wyloguj button {
    width: 100%; background: var(--pasek-linia); border: 1px solid var(--pasek-linia-mocna); color: var(--pasek-tekst-jasny);
    font-size: 14px; font-weight: 500; padding: 9px 12px; min-height: 40px; gap: 8px;
}
.pasek .stopka .wyloguj button:hover { background: var(--pasek-linia-mocna); }
.pasek .firma { color: var(--pasek-tekst-najslabszy); font-size: 11.5px; text-align: center; }
main { flex: 1 1 auto; min-width: 0; padding: 24px 28px 40px; }

/* --- Tytul ekranu -------------------------------------------------------------------------------------------
   JEDEN h1 na ekran, krojem marki 800 w GRADIENCIE MARKI (rozowy w niebieski, 135 stopni) - jak w oryginalnej aplikacji
   ArenaPay; decyzja Rafala 2026-09-21: gradient we WSZYSTKICH trzech panelach. width: fit-content, bo gradient rozciagniety
   na cala szerokosc bloku pokazalby pod krotkim tytulem sam rozowy poczatek. Po prawej stoja czynnosci ROBOCZE ekranu
   ("Nowa platnosc", "Wyplac"); konto, motyw i wylogowanie sa w stopce menu. */
.naglowek-tresci { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.powloka h1 {
    margin: 0; width: fit-content; max-width: 100%; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--gradient-marki); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: var(--tytul-filtr);
}
.podtytul { color: var(--tekst-trzeci); font-size: 14px; margin: 6px 0 0; }
.czynnosci-gorne { display: flex; align-items: center; gap: 10px; }
.czynnosci-gorne form { margin: 0; }
.okruszki { font-size: 13px; color: var(--tekst-trzeci); margin-bottom: 10px; }

/* PRZELACZNIK MOTYWU (Http\Motyw): jasny / jak w systemie / ciemny - formularz POST z tokenem, bo dwa z trzech paneli
   nie maja ani jednego skryptu. W pasku wybrany przycisk ma zawsze ciemny wariant (pasek jest ciemny w obu trybach). */
.motyw { display: flex; gap: 2px; margin: 0; }
.motyw button {
    width: 30px; height: 30px; min-height: 0; margin: 0; padding: 0; display: inline-grid; place-items: center;
    background: none; border: 1px solid transparent; border-radius: 8px; color: var(--pasek-tekst-cichy); cursor: pointer;
}
.motyw button svg { width: 15px; height: 15px; }
.motyw button:hover { color: var(--tekst-drugi); background: var(--pasek-najazd-motywu); }
.motyw button[aria-pressed="true"] { color: var(--motyw-wybrany); border-color: var(--motyw-wybrany-linia); background: var(--motyw-wybrany-tlo); }
.pasek .motyw { justify-content: center; }
.pasek .motyw button:hover { color: var(--pasek-tekst-jasny); }
.pasek .motyw button[aria-pressed="true"] { color: var(--pasek-podpis); border-color: var(--pasek-wybrany-linia); background: var(--pasek-wybrany-tlo); }

/* EKRANY SZEROKIE (desktop > 860px): kontrolki mobilnej szuflady sa calkowicie ukryte */
.menu-szuflada-przelacznik, .menu-zaslona, .belka-mobilna, .pasek .menu-zamknij { display: none !important; }

/* TELEFON (<= 860px): boczny pasek staje sie wysuwana szuflada (off-canvas drawer) z przyciemniana zaslona tla.
   Dziala w 100% w CSS bez JavaScriptu za pomoca checkboxa #menu-szuflada i powiazanych etykiet <label>.
   Z KLAWIATURY (1.396, audyt UX-01): checkbox jest niewidoczny, ale osiagalny - pierwsze miejsce Tab na stronie, Spacja otwiera
   i zamyka szuflade (wczesniej atrybut hidden: menu otwieral tylko palec albo mysz), obwodka fokusu rysuje sie na hamburgerze albo
   - przy otwartej - na krzyzyku. Zamknieta szuflada ma visibility: hidden, wiec Tab nie wchodzi w jej ok. 20 niewidocznych odnosnikow. */
@media (max-width: 860px) {
    .powloka { flex-direction: column; min-height: 0; }

    .menu-szuflada-przelacznik {
        display: block !important; position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0;
        opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none;
    }
    .menu-szuflada-przelacznik:focus-visible:not(:checked) ~ .belka-mobilna .menu-hamburger,
    .menu-szuflada-przelacznik:focus-visible:checked ~ .pasek .menu-zamknij { outline: 2px solid var(--pasek-tekst-mocny); outline-offset: 2px; }

    /* Belka mobilna na gorze ekranu: przycisk hamburgera, logo marki, obiekt */
    .belka-mobilna {
        display: flex !important; align-items: center; gap: 12px; height: 52px; padding: 0 14px;
        background: var(--pasek-tlo); border-bottom: 1px solid var(--pasek-linia);
        color: var(--pasek-tekst-mocny); position: sticky; top: 0; z-index: 800; flex: 0 0 auto;
    }
    .belka-mobilna .menu-hamburger {
        display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
        border-radius: 8px; cursor: pointer; color: var(--pasek-tekst-jasny); background: transparent;
        border: 1px solid var(--pasek-linia-mocna); flex-shrink: 0; -webkit-tap-highlight-color: transparent;
        padding: 0;
    }
    .belka-mobilna .menu-hamburger:hover { background: var(--pasek-najazd-motywu); color: var(--pasek-tekst-mocny); }
    .belka-mobilna .menu-hamburger svg { width: 20px; height: 20px; }
    .belka-mobilna .belka-marka {
        display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none;
        color: var(--pasek-tekst-mocny); font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        font-weight: 700; font-size: 1.1rem;
    }
    .belka-mobilna .belka-marka .belka-logo { color: var(--pasek-tekst-mocny); }
    .belka-mobilna .belka-marka .belka-podpis { font-size: 11px; color: var(--pasek-podpis); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
    .belka-mobilna .belka-obiekt {
        margin-left: auto; font-size: 13px; color: var(--pasek-tekst-cichy); overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; max-width: 45vw; text-align: right;
    }

    /* Przyciemniana zaslona tla (backdrop) */
    .menu-zaslona {
        display: block !important; position: fixed; inset: 0; background: var(--pasek-zaslona);
        z-index: 850; opacity: 0; pointer-events: none; transition: opacity .25s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .menu-szuflada-przelacznik:checked ~ .menu-zaslona {
        opacity: 1; pointer-events: auto;
    }

    /* Pasek wysuwany (szuflada) */
    .pasek {
        position: fixed !important; top: 0; bottom: 0; left: 0; width: min(85vw, 300px); max-width: 320px;
        height: 100vh; height: 100dvh; z-index: 900; display: flex !important; flex-direction: column;
        padding: 16px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch;
        transform: translateX(-100%); box-shadow: none;
        /* Zamknieta - niewidoczna takze dla klawiatury i czytnika; visibility gasnie dopiero po wysunieciu (opoznienie = czas ruchu). */
        visibility: hidden; transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear .28s;
    }
    .menu-szuflada-przelacznik:checked ~ .pasek {
        transform: translateX(0); box-shadow: var(--pasek-szuflada-cien);
        visibility: visible; transition: transform .28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
    }

    /* Przycisk zamkniecia szuflady */
    .pasek .menu-zamknij {
        display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 34px;
        position: absolute; top: 14px; right: 12px; cursor: pointer; border-radius: 8px;
        color: var(--pasek-tekst-cichy); border: 1px solid var(--pasek-linia-mocna); background: transparent;
        -webkit-tap-highlight-color: transparent; padding: 0;
    }
    .pasek .menu-zamknij:hover { color: var(--pasek-tekst-mocny); background: var(--pasek-najazd-motywu); }
    .pasek .menu-zamknij svg { width: 18px; height: 18px; }

    /* Wewnatrz paska: marka ma odstep z prawej na przycisk zamkniecia */
    .pasek .marka { padding-right: 42px; }

    /* Nawigacja wewnatrz szuflady pozostaje pelna, pionowa kolumna */
    .pasek nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
    .pasek nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13.5px; }

    /* Stopka w szufladzie: motyw, dane konta i wylogowanie */
    .pasek .stopka {
        margin-top: auto; padding-top: 14px; border-top: 1px solid var(--pasek-linia);
        display: flex; flex-direction: column; gap: 10px; position: static; box-shadow: none;
    }
    .pasek .kto { display: block; font-size: 12px; color: var(--pasek-tekst-cichy); }

    main { padding: 16px 14px 32px; }
}

/* ABONAMENT W PANELU KLIENTA (BLUEPRINT 1.174 krok D4, Rozliczenia\EkranAbonamentu) - ta sama strona w ArenaBooking i ArenaPay.
   Od 1.354 we wzorze pulpitu: karta stanu (.stan-ustawienia + .stan-fakty), przyciski platnosci na kazdy okres z dopiskiem netto + VAT,
   historia wplat w wierszach (data | za co z faktura pod spodem | kwota | stan z potwierdzeniem), z prawej "Jak to dziala". */
.stan-ustawienia.abonament .co-robic { margin: 12px 0 0; }
.abonament-platnosc > .info { margin-top: 0; }
.wplaty-abonamentu { list-style: none; margin: 0; padding: 0; }
.wiersz-wplaty-abonamentu { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto minmax(170px, auto); gap: 6px 16px; align-items: center;
    padding: 11px 0; border-top: 1px solid var(--linia); font-size: 14px; }
.wiersz-wplaty-abonamentu:first-child { border-top: 0; padding-top: 2px; }
.kiedy-wplaty { color: var(--tekst-drugi); font-variant-numeric: tabular-nums; }
.wiersz-wplaty-abonamentu .za-co strong { display: block; font-weight: 600; }
.wiersz-wplaty-abonamentu .za-co small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--tekst-trzeci); }
.wiersz-wplaty-abonamentu .za-co small .info { font-size: inherit; }
.wiersz-wplaty-abonamentu .kwota { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stan-wplaty { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; font-size: 13px; }
.historia-abonamentu > .info { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linia); }
@media (max-width: 600px) {
    .wiersz-wplaty-abonamentu { grid-template-columns: minmax(0, 1fr) auto; }
    .kiedy-wplaty { grid-column: 1 / -1; font-size: 12.5px; }
    .stan-wplaty { grid-column: 1 / -1; justify-content: flex-start; }
}
.abonament-przyciski { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-top: 6px; }
.abonament-okres { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.abonament-okres button { margin: 0; }
/* Na ekranie abonamentu okresy obok siebie, rowne (1.354) - dopisek "przejscie na rozliczenie..." lamie sie pod przyciskiem, nie spycha go. */
.abonament-platnosc .abonament-okres { flex: 1 1 220px; max-width: 320px; }
.abonament-platnosc .abonament-okres button { width: 100%; }
/* Na ekranie "abonament nieaktywny" (waska karta wejscia): przyciski jeden pod drugim, na cala szerokosc. */
.abonament-blokada { margin: 18px 0 16px; text-align: left; }
.abonament-blokada h2 { font-size: 17px; margin: 0 0 8px; }
.abonament-blokada .abonament-przyciski { flex-direction: column; }
.abonament-blokada .abonament-okres button { width: 100%; }
/* Zdanie pod przyciskami ("panel otworzy sie sam") - osobny akapit, nie dopisek ostatniego przycisku. */
.abonament-blokada > .info { margin: 16px 0 0; }
/* Na telefonie oba przyciski okresu na cala szerokosc - glowny nie moze byc wezszy od drugiego. W kolumnie podstawa 220 px z ekranu abonamentu
   bylaby WYSOKOSCIA okresu - przerwa miedzy "Pro na miesiac" a "Pro na rok" (1.719). */
@media (max-width: 600px) {
    .abonament-przyciski { flex-direction: column; }
    .abonament-platnosc .abonament-okres { flex-basis: auto; max-width: none; }
    .abonament-okres button { width: 100%; }
}

/* NAPISZ DO NAS (BLUEPRINT 1.259, Http\EkranKontaktu - oba panele): formularz i obok "Inne drogi" - od 1.354 w .uklad-3-2 (wzor pulpitu). */
.napisz select { max-width: 320px; }
.napisz label { margin-top: 14px; }
.napisz textarea { min-height: 180px; }
.napisz .karta p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .napisz select { max-width: none; } }

/* ==========================================================================================================================
   PIERWSZE KROKI - przewodnik konfiguracji obiektu (ArenaBooking 1.170 krok C, ArenaPay 1.303; do 1.302 w booking-panel.css):
   licznik postepu przy pozycji menu (w szynie z ikonami ArenaBooking chowa sie razem z napisami - postep jest w dymku), waska
   karta nad grafikiem / statystykami i lista krokow. JEDEN wyglad w obu panelach.
   ========================================================================================================================== */
.pasek nav a .licznik { margin-left:auto; background:var(--marka-jasna); color:var(--marka); border-radius:999px; padding:1px 8px;
    font-size:11.5px; font-weight:800; }
.przewodnik-postep { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.przewodnik-postep progress { flex:1 1 180px; max-width:320px; height:8px; appearance:none; border:0; border-radius:999px;
    background:var(--tlo-delikatne); overflow:hidden; accent-color:var(--marka); }
.przewodnik-postep progress::-webkit-progress-bar { background:var(--tlo-delikatne); border-radius:999px; }
.przewodnik-postep progress::-webkit-progress-value { background:var(--marka); border-radius:999px; }
.przewodnik-postep progress::-moz-progress-bar { background:var(--marka); border-radius:999px; }
.karta.przewodnik-pulpitu { border-color:var(--marka); display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.przewodnik-pulpitu .przewodnik-tresc { flex:1 1 360px; min-width:0; }
.przewodnik-pulpitu .przewodnik-nastepny { margin:8px 0 0; }
/* Zwezaja sie (flex-shrink), a nie "flex:none": na telefonie dwa przyciski z dluzszym napisem ("Ustaw regulamin i powrot" w ArenaPay)
   wychodzily poza karte - kontener bez zwezania mial szerokosc obu przyciskow w jednym rzedzie i nie zawijal (1.303). */
.przewodnik-pulpitu .przyciski { flex:0 1 auto; min-width:0; margin:0; }
/* Przyciski przewodnika na Pulpicie nieco mniejsze niz zwykle (prosba Rafala 2026-09-25) - karta ma byc niskim paskiem. */
.przewodnik-pulpitu .przyciski .przycisk { font-size:14px; min-height:38px; padding:8px 15px 6px; }
.przewodnik-nastepny { margin:10px 0 12px; color:var(--tekst-drugi); }
/* EKRAN LISTY (1.354, wzor pulpitu): karta postepu (.stan-przewodnika) z "Schowaj" w glowie, kroki w wierszach - znak | tresc | czynnosci
   z prawej (najwyzej dwie); na telefonie czynnosci pod trescia. */
.stan-przewodnika .opis-sekcji { margin:0 0 10px; }
.stan-przewodnika .przewodnik-postep progress { max-width:360px; }
.stan-przewodnika .schowany-przewodnik { margin:10px 0 0; }
.karta.pierwsze-kroki { padding-top:4px; padding-bottom:4px; }
.kroki-przewodnika { list-style:none; margin:0; padding:0; }
.krok-przewodnika { display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:6px 14px; align-items:center; padding:14px 0;
    border-top:1px solid var(--linia); }
.krok-przewodnika:first-child { border-top:0; }
.krok-przewodnika .znak-kroku { width:28px; height:28px; box-sizing:border-box; border-radius:50%; border:2px solid var(--linia-pola); display:grid;
    place-items:center; font-weight:800; font-size:14px; color:var(--tekst-trzeci); align-self:start; }
.krok-przewodnika.zrobiony .znak-kroku { background:var(--zn-zielony-tlo); border-color:var(--zn-zielony-tekst); color:var(--zn-zielony-tekst); }
.krok-przewodnika.do_zrobienia .znak-kroku { border-color:var(--marka); }
.krok-przewodnika .tresc-kroku { min-width:0; }
.karta .krok-przewodnika h2 { margin:2px 0 3px; padding:0; border:0; font-size:15.5px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.krok-przewodnika p { margin:0; color:var(--tekst-drugi); font-size:14px; }
.czynnosci-kroku { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; font-size:14px; }
.czynnosci-kroku form { display:inline; margin:0; }
.czynnosci-kroku .info { font-size:13px; }
.krok-przewodnika.zrobiony .stan-kroku { background:var(--zn-zielony-tlo); color:var(--zn-zielony-tekst); }
.krok-przewodnika.do_zrobienia .stan-kroku { background:var(--marka-jasna); color:var(--marka); }
.krok-przewodnika.pominiety .stan-kroku, .krok-przewodnika.niedostepny .stan-kroku { background:var(--zn-szary-tlo); color:var(--zn-szary-tekst); }
.krok-przewodnika.pominiety h2, .krok-przewodnika.niedostepny h2 { color:var(--tekst-drugi); }
@media (max-width: 700px) {
    .krok-przewodnika { grid-template-columns:28px minmax(0, 1fr); }
    .czynnosci-kroku { grid-column:2; justify-content:flex-start; }
}

/* =========================================================================================================================
   DZWONECZEK I STRONA POWIADOMIENIA - ArenaBooking (1.291) i ArenaPay (1.304), te same klasy i ten sam uklad.
   ========================================================================================================================== */
/* DZWONECZEK (ArenaBooking 1.291, makieta 2026-09-30; we wspolnym arkuszu od ArenaPay 1.304 - jeden wyglad w obu panelach): przycisk z licznikiem nowych przy tytule ekranu (na telefonie - na belce) i rozwijana lista
   ostatnich zdarzen (details, bez skryptu - jak "Zmien obiekt"). Nowe wiersze w jasnym niebieskim z kropka przy czasie; ikona w kolorze
   rodzaju (znaczniki palety - maja wersje ciemna). Strona Powiadomienia uzywa tej samej listy. */
.dzwonek { position:relative; flex:none; }
.dzwonek > summary { list-style:none; position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
    border:1px solid var(--linia); border-radius:10px; background:var(--papier); color:var(--tekst-drugi); cursor:pointer; }
.dzwonek > summary::-webkit-details-marker { display:none; }
.dzwonek > summary svg { width:20px; height:20px; }
.dzwonek > summary:hover, .dzwonek[open] > summary { color:var(--marka); border-color:var(--marka); }
.dzwonek-licznik { position:absolute; top:-6px; right:-6px; min-width:20px; padding:2px 5px 1px; border-radius:99px; background:var(--licznik-tlo); color:var(--licznik-tekst);
    font-size:11.5px; font-weight:800; line-height:1.3; text-align:center; box-shadow:0 0 0 2px var(--tlo); }
.dzwonek-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:min(380px, calc(100vw - 32px)); background:var(--papier);
    color:var(--tekst); border:1px solid var(--linia); border-radius:14px; box-shadow:var(--cien-rozwijany); overflow:hidden; text-align:left; }
.dzwonek-glowa { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px 10px; border-bottom:1px solid var(--linia); }
.dzwonek-glowa strong { font-size:15px; }
.dzwonek-glowa form { margin:0; }
.dzwonek-glowa button { min-height:0; border:0; background:none; padding:4px 2px 2px; color:var(--marka); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.dzwonek-glowa button:hover { text-decoration:underline; }
.dzwonek-lista { list-style:none; margin:0; padding:0; }
.dzwonek-panel .dzwonek-lista { max-height:min(420px, 60vh); overflow:auto; }
.dzwonek-lista li { margin:0; border-bottom:1px solid var(--linia); }
.dzwonek-lista a { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:2px 12px; padding:11px 16px 10px; color:var(--tekst); text-decoration:none; }
.dzwonek-lista a:hover { background:var(--tlo-najazd); }
.dzwonek-lista li.nowe a { background:color-mix(in srgb, var(--zn-niebieski-tlo) 55%, transparent); }
.dzwonek-ikona { grid-row:1 / span 2; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.dzwonek-ikona svg { width:17px; height:17px; }
.dzwonek-ikona.zn-niebieski { background:var(--zn-niebieski-tlo); color:var(--zn-niebieski-tekst); }
.dzwonek-ikona.zn-zielony { background:var(--zn-zielony-tlo); color:var(--zn-zielony-tekst); }
.dzwonek-ikona.zn-fiolet { background:var(--zn-fiolet-tlo); color:var(--zn-fiolet-tekst); }
.dzwonek-ikona.zn-zolty { background:var(--zn-zolty-tlo); color:var(--zn-zolty-tekst); }
.dzwonek-ikona.zn-czerwony { background:var(--zn-czerwony-tlo); color:var(--zn-czerwony-tekst); }
.dzwonek-ikona.zn-szary { background:var(--zn-szary-tlo); color:var(--zn-szary-tekst); }
.dzwonek-tytul { font-size:14px; font-weight:600; line-height:1.35; }
.dzwonek-opis { grid-column:2 / span 2; font-size:13px; line-height:1.4; color:var(--tekst-drugi); }
.dzwonek-czas { font-size:12px; color:var(--tekst-trzeci); white-space:nowrap; align-self:start; padding-top:2px; }
.nowe-kropka { display:inline-block; width:7px; height:7px; margin:0 6px 1px 0; border-radius:50%; background:var(--licznik-tlo); }
.dzwonek-stopka { display:block; padding:11px 16px 10px; text-align:center; font-size:13.5px; font-weight:600; color:var(--marka); text-decoration:none; }
.dzwonek-stopka:hover { text-decoration:underline; }
.dzwonek-pusto { margin:0; padding:16px; font-size:13.5px; color:var(--tekst-drugi); border-bottom:1px solid var(--linia); }
/* Przy tytule ekranu: po czynnosciach (maja margin-left:auto) albo sam na prawym brzegu. */
.naglowek-tresci > .dzwonek { margin-left:auto; }
.naglowek-tresci > .czynnosci-gorne + .dzwonek { margin-left:0; }
/* Na belce telefonu - jak przycisk menu; lista na cala szerokosc pod belka. */
.belka-mobilna .dzwonek { display:none; }
@media (max-width: 860px) {
  .naglowek-tresci > .dzwonek { display:none; }
  .belka-mobilna .dzwonek { display:block; margin-left:4px; }
  .belka-mobilna .dzwonek > summary { width:38px; height:38px; border-radius:8px; background:transparent; border-color:var(--pasek-linia-mocna);
      color:var(--pasek-tekst-jasny); }
  .belka-mobilna .dzwonek-licznik { box-shadow:0 0 0 2px var(--pasek-tlo); }
  .belka-mobilna .dzwonek-panel { position:fixed; left:12px; right:12px; top:60px; width:auto; }
}
/* Strona Powiadomienia: dni jako naglowki, lista w ramce. */
.powiadomienia-glowa { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.powiadomienia-glowa h2 { margin:0; }
.powiadomienia-dzien { margin:18px 0 8px; font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tekst-trzeci); }
.powiadomienia .dzwonek-lista { border:1px solid var(--linia); border-radius:12px; overflow:hidden; }
.powiadomienia .dzwonek-lista li:last-child { border-bottom:0; }
.powiadomienia-pusto { margin:12px 0 0; color:var(--tekst-drugi); }
/* PUSH NA TELEFON (ArenaBooking 1.292, ArenaPay 1.305 - wspolny arkusz): karta nad lista powiadomien - stan (zdanie skryptu), przycisk wlaczenia, urzadzenia osoby z "Wylacz". */
.push h3 { margin:18px 0 6px; font-size:15px; }
.push-wlacz { margin:10px 0 0; }
.push-stan { margin:0 0 10px; padding:10px 14px 9px; border-radius:10px; background:var(--zn-zolty-tlo); color:var(--zn-zolty-tekst); font-size:14px; }
.push-wlacz .przycisk svg { width:18px; height:18px; }
.urzadzenia-push { list-style:none; margin:0; padding:0; }
.urzadzenia-push li { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; padding:10px 0; border-top:1px solid var(--linia); font-size:14px; }
.urzadzenia-push li:last-child { border-bottom:1px solid var(--linia); }
.urzadzenia-push small { display:block; margin-top:2px; color:var(--tekst-drugi); font-size:12.5px; }
.urzadzenia-push form { margin:0; flex:none; }
.push-probne { margin:12px 0 0; }
/* Zdanie pomocy w karcie (iPhone, brak kluczy na serwerze) - jak .karta .pomoc-karty w ArenaBooking (tam ta klasa sluzy tez innym kartom). */
.push .pomoc-karty { margin:4px 0 12px; font-size:13px; line-height:1.55; color:var(--tekst-trzeci); }

/* --- Wzor ustawien: karta stanu, zwiniety formularz, "Jak to dziala", uklad 3:2 ----------------------------------
   Do 1.343 w pulpit.css; od 1.344 wspolny - ten sam wzor w panelu ArenaBooking (Ustawienia: Platnosci online, E-mail, SMS). */
/* UKLAD 3:2 EKRANOW USTAWIEN (1.325: WHMCS, Partnerzy platnosci, SMS): ustawienia po lewej (formularz na cala szerokosc kolumny),
   karta pomocnicza po prawej (historia, linki partnerskie, nazwy nadawcow); szerokie tabele - pod spodem. */
.uklad-3-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 20px; align-items: start; }
.uklad-3-2 > div > .karta, .uklad-3-2 > aside > .karta { margin: 0 0 20px; }
.uklad-3-2 .karta form.waski { max-width: none; }
@media (max-width: 1180px) { .uklad-3-2 { grid-template-columns: minmax(0, 1fr); } }
.co-wiedziec dl { margin: 0; font-size: 13.5px; }
.co-wiedziec dt { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-trzeci); margin-top: 12px; }
.co-wiedziec dt:first-child { margin-top: 0; }
.co-wiedziec dd { margin: 3px 0 0; color: var(--tekst-drugi); line-height: 1.55; }
/* Pulpit (1.341): Poczta, Pakiety i ceny, Platnosci, WHMCS, Zastrzezone adresy, SMS, Partnerzy platnosci; ArenaBooking (1.344): Platnosci
   online, E-mail, SMS. Na wierzchu karta STANU (znacznik, najwazniejsze wartosci w siatce, kto i kiedy zmienil, przycisk sprawdzenia),
   formularz ZWINIETY pod "Zmien ustawienia" (otwarty sam, gdy nic nie jest ustawione albo zapis wrocil z bledem), objasnienia w "Jak to
   dziala" (.co-wiedziec) z prawej. Bez skryptu - <details>. */
.stan-ustawienia { background: var(--papier); border: 1px solid var(--linia); border-radius: 14px; box-shadow: var(--cien); padding: 16px 18px; margin: 0 0 20px; }
.uklad-3-2 > div > .stan-ustawienia, .dwie-karty > .stan-ustawienia { margin-bottom: 20px; }
.stan-glowa { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.stan-glowa h2 { margin: 0; padding: 0; border: 0; font-size: 16.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stan-glowa .czynnosci { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.stan-fakty { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; margin: 0; }
.stan-fakty > div { min-width: 0; }
.stan-fakty dt { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-trzeci); }
.stan-fakty dd { margin: 3px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.stan-fakty dd code { font-size: 13px; }
.stan-fakty dd small { display: block; font-size: 12px; color: var(--tekst-trzeci); }
.stan-zmiana { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linia); font-size: 12.5px; color: var(--tekst-trzeci);
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stan-ustawienia > .komunikat { margin: 0 0 12px; }
details.zmien-ustawienia { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linia); }
details.zmien-ustawienia > summary { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--marka); display: inline-flex;
    gap: 6px; align-items: center; }
details.zmien-ustawienia > summary::-webkit-details-marker { display: none; }
details.zmien-ustawienia > summary::before { content: "▸"; font-size: 11px; }
details.zmien-ustawienia[open] > summary::before { content: "▾"; }
details.zmien-ustawienia[open] > summary { margin-bottom: 14px; }
details.zmien-ustawienia form { margin: 0; max-width: none; }
.dwie-karty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1180px) { .dwie-karty { grid-template-columns: minmax(0, 1fr); } }
.historia-zmian { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.historia-zmian li { padding: 9px 0; border-top: 1px solid var(--linia); }
.historia-zmian li:first-child { border-top: 0; padding-top: 0; }
.historia-zmian small { display: block; font-size: 12px; color: var(--tekst-trzeci); }
.stan-fakty.jedna-kolumna { grid-template-columns: minmax(0, 1fr); gap: 10px; }

/* --- OKNO POTWIERDZENIA (atrybut popover - bez JavaScriptu; do 1.350 w arkuszu ArenaBooking): na srodku ekranu, strona pod spodem
   przyciemniona. Stoi czesto w komorce albo wierszu z czynnosciami, wiec zeruje wyrownanie do prawej i brak zawijania. */
.okno-potwierdzenia { width: min(30rem, calc(100vw - 32px)); box-sizing: border-box; padding: 22px 24px; border: 1px solid var(--linia);
    border-radius: 14px; background: var(--papier); color: var(--tekst); box-shadow: var(--cien-wejscia); text-align: left; white-space: normal; }
.okno-potwierdzenia::backdrop { background: var(--pasek-zaslona); }
.okno-potwierdzenia h2 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; }
.okno-potwierdzenia p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--tekst-drugi); }
.okno-potwierdzenia form { margin: 0; }
.okno-potwierdzenia .przyciski { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* --- UZYTKOWNICY OBIEKTU (1.258; od 1.351 wzor pulpitu, wspolny ekran ArenaBooking i ArenaPay - Http\EkranUzytkownikow): osoby w wierszach
   (inicjaly, adres, od kiedy; rola z "Zmień rolę"; kosz z oknem potwierdzenia), "Dodaj osobę" zwiniete pod lista. */
.uzytkownicy h2 { display: flex; align-items: center; gap: 8px; }
.lista-uzytkownikow { margin: 0 calc(-1 * var(--odstep-karty)); }
.glowa-uzytkownikow, .wiersz-uzytkownika { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) 44px; gap: 8px 16px; align-items: center;
    padding: 11px var(--odstep-karty); }
.glowa-uzytkownikow { padding-top: 4px; padding-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--tekst-trzeci); }
.wiersz-uzytkownika { border-top: 1px solid var(--linia); font-size: 14px; }
.osoba-uzytkownika { display: flex; align-items: center; gap: 12px; min-width: 0; }
.osoba-uzytkownika > div { min-width: 0; overflow-wrap: anywhere; }
.osoba-uzytkownika small { display: block; margin-top: 2px; font-size: 12px; color: var(--tekst-trzeci); }
.inicjaly-uzytkownika { display: inline-grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; font-size: 12px;
    font-weight: 800; background: var(--zn-fiolet-tlo); color: var(--zn-fiolet-tekst); }
.uzytkownicy form.zmiana-roli { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.uzytkownicy form.zmiana-roli select { width: auto; margin: 0; min-height: 34px; padding: 5px 10px; font-size: 14px; }
.akcje-uzytkownika { display: flex; justify-content: flex-end; }
.uzytkownicy button.ikonowy { width: 32px; min-width: 32px; padding: 0; justify-content: center; }
.uzytkownicy details.dodaj-osobe { margin: 6px 0 0; }
.uzytkownicy .pola-uzytkownika { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 16px; }
/* KILKA OBIEKTOW FIRMY (1.496): "Daj dostęp także do" pod rola, "także: ..." przy osobie. */
.uzytkownicy fieldset.takze-do { margin: 4px 0 12px; padding: 10px 14px 6px; border: 1px solid var(--linia); border-radius: 10px; }
.uzytkownicy fieldset.takze-do legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--tekst-drugi); }
.uzytkownicy fieldset.takze-do .pole-wyboru { margin: 4px 0; }
.uzytkownicy fieldset.takze-do .info { margin: 6px 0 4px; font-size: 12.5px; }
.uzytkownicy > .komunikat { margin: 14px 0 0; }
@media (max-width: 700px) {
    .glowa-uzytkownikow { display: none; }
    .wiersz-uzytkownika { grid-template-columns: minmax(0, 1fr) 44px; }
    .wiersz-uzytkownika .osoba-uzytkownika { grid-column: 1 / -1; }
    .uzytkownicy .pola-uzytkownika { grid-template-columns: 1fr; }
}

/* ZNAK STANU (Http\ZnakStanu, 1.363; tutaj od 1.366 - wspolny dla ekranow wejscia trzech paneli i pulpitu): kolko z ikona w barwie znacznikow -
   zielone gotowe, niebieskie informacja, zolte czekamy albo brak dostepu (klodka), czerwone blad. */
.znak-stanu { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; }
.znak-stanu svg { width: 30px; height: 30px; }
.znak-stanu.ok { background: var(--zn-zielony-tlo); color: var(--zn-zielony-tekst); }
.znak-stanu.info { background: var(--zn-niebieski-tlo); color: var(--zn-niebieski-tekst); }
.znak-stanu.czeka { background: var(--zn-zolty-tlo); color: var(--zn-zolty-tekst); }
.znak-stanu.blad { background: var(--zn-czerwony-tlo); color: var(--zn-czerwony-tekst); }
/* PUSTY STAN / BLAD W PANELU (1.366, pierwszy - "Nie ma takiego obiektu" w pulpicie operatora): wysrodkowana karta ze znakiem stanu, tytulem,
   zdaniem i jednym przyciskiem. */
.stan-pusty { max-width: 520px; margin: 40px auto; padding: 32px 28px 28px; text-align: center; }
.stan-pusty h2 { margin: 0 0 6px; padding: 0; border: 0; font-size: 20px; }
.stan-pusty p { margin: 0 0 18px; color: var(--tekst-drugi); }
.stan-pusty .przyciski { justify-content: center; }

/* KOMUNIKATY OD OPERATORA (Http\KomunikatyPanelu, 1.576-1.577, migracja 114; makieta 2026-10-14-komunikaty): pasek nad trescia ekranu panelu
   (zwykly - niebieski z "Rozumiem", wazny - zolty do konca komunikatu), okienko waznego raz na osobe (zaslona bez skryptu), ramka na ekranie
   logowania i pozycja w dzwonku. Podglad w pulpicie operatora - te same klasy. */
.komunikat-operatora { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; padding: 12px 14px 12px 16px; border-radius: 12px;
    background: var(--zn-niebieski-tlo); color: var(--zn-niebieski-tekst); font-size: 14.5px; line-height: 1.5; }
.komunikat-operatora.wazny { background: var(--zn-zolty-tlo); color: var(--zn-zolty-tekst); }
/* Kilka naraz - jeden blok nad trescia, paski blizej siebie. */
.komunikaty-operatora { margin: 0 0 16px; }
.komunikaty-operatora > .komunikat-operatora { margin: 0 0 8px; }
.komunikaty-operatora > .komunikat-operatora:last-child { margin: 0; }
.komunikat-operatora > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.komunikat-operatora .tresc { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.komunikat-operatora strong { display: block; font-weight: 700; }
.komunikat-operatora .od { display: block; margin-top: 2px; font-size: 12.5px; opacity: .8; }
.komunikat-operatora a { color: inherit; font-weight: 600; text-decoration: underline; }
.komunikat-operatora form { margin: 0; flex: none; }
.komunikat-operatora .przycisk { min-height: 32px; padding: 6px 12px 5px; font-size: 13px; background: var(--papier); color: inherit; border-color: transparent; }
.zaslona-komunikatu { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; background: var(--pasek-zaslona); }
.okno-komunikatu { width: min(32rem, 100%); padding: 24px 24px 20px; border-radius: 16px; background: var(--papier); color: var(--tekst);
    box-shadow: var(--cien-wejscia); overflow-wrap: anywhere; }
.okno-komunikatu .znak-komunikatu { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 12px;
    background: var(--zn-zolty-tlo); color: var(--zn-zolty-tekst); }
.okno-komunikatu .znak-komunikatu svg { width: 22px; height: 22px; }
.okno-komunikatu h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 19px; }
.okno-komunikatu p { margin: 0 0 12px; color: var(--tekst-drugi); }
.okno-komunikatu p a { font-weight: 600; }
.okno-komunikatu .od { font-size: 12.5px; color: var(--tekst-trzeci); }
.okno-komunikatu .przyciski { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.okno-komunikatu .przyciski form { margin: 0; }
.komunikat-logowania { margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--zn-zolty-tlo); color: var(--zn-zolty-tekst); font-size: 14px;
    line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.komunikat-logowania strong { display: block; }
.komunikat-logowania a { color: inherit; font-weight: 600; text-decoration: underline; }
.dzwonek-lista li.komunikat-od-operatora .dzwonek-ikona { background: var(--zn-zolty-tlo); color: var(--zn-zolty-tekst); }
@media (max-width: 600px) { .komunikat-operatora { flex-wrap: wrap; } .komunikat-operatora form { flex-basis: 100%; padding-left: 32px; } }

/* "CO NOWEGO" (1.605, makieta 2026-10-16-co-nowego): ikonka z iskierkami tuz przed dzwoneczkiem - wyglad dzwoneczka, fioletowa kropka zamiast
   liczby; lista nowosci w panelu dzwoneczka (Http\NowosciPanelu). Dzwoneczek po ikonce nie dosuwa sie do prawej - stoja obok siebie. */
.naglowek-tresci > .dzwonek.nowosci + .dzwonek { margin-left: -6px; }
.dzwonek.nowosci > summary { position: relative; }
.dzwonek.nowosci .nowosci-kropka { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--zn-fiolet-tekst);
  box-shadow: 0 0 0 2px var(--papier); }
.dzwonek-lista li.nowosc { padding: 12px 16px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; }
.dzwonek-lista li.nowosc .dzwonek-ikona { grid-row: 1 / span 3; }
.dzwonek-lista li.nowosc .nowosc-glowa { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.dzwonek-lista li.nowosc .nowosc-glowa strong { font-size: 14px; line-height: 1.35; }
.dzwonek-lista li.nowosc p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tekst-drugi); }
.dzwonek-lista li.nowosc .nowosc-linki { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; font-weight: 600; }
.dzwonek-lista li.nowosc .nowosc-linki a { display: inline; padding: 0; color: var(--marka); text-decoration: none; }
.dzwonek-lista li.nowosc .nowosc-linki a:hover { background: none; text-decoration: underline; }
.dzwonek-lista li.nowosc .nowosc-plan { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--zn-fiolet-tlo);
  color: var(--zn-fiolet-tekst); font-size: 11px; font-weight: 700; vertical-align: 1px; }