/* Panel admin.tabellio.pl - warstwa wizualna w duchu macOS (Sonoma/Ventura).
   ZASADY (dyktat wlasciciela 2026-08-04): JEDEN krój - systemowy stack Apple, zero
   web-fontow i zero CDN (panel dziala bez internetu). Tekst bazowy 16px, drobny
   nigdy ponizej 14px. Wysoki kontrast: #F5F5F7 na #0B0B0F (18:1), drugorzedny
   #C7C7CC (11:1), najsłabszy dopuszczalny #A1A1AA (7,6:1) - wyblakle szarosci
   znikaja. Warstwy rozdziela JASNOSC tla, nie ramka; hairline rgba(255,255,255,.08)
   tylko tam, gdzie krawedz musi byc czytelna. Promienie 12-16px, odstepy w siatce 8/4.
   Dark-only. Bez gradientow, bez glow, bez emoji-ikon. tabular-nums w kazdej liczbie.
   MONO wylacznie dla ciagow maszynowych (hash, token) - reszta jednym krojem. */

:root {
    --tlo: #0B0B0F;
    --powierzchnia: #16161C;
    --powierzchnia-2: #20212A;
    --powierzchnia-3: #2A2B36;
    --powierzchnia-hover: rgba(255, 255, 255, .045);
    --linia: rgba(255, 255, 255, .08);
    --linia-slaba: rgba(255, 255, 255, .05);

    --tekst: #F5F5F7;       /* 18:1 na tle - tekst glowny */
    --tekst-2: #C7C7CC;     /* 11:1 - dane drugoplanowe */
    --tekst-3: #A1A1AA;     /* 7,6:1 - podpisy; CIEMNIEJ NIE WOLNO */

    --akcent: #6E79D6;
    --akcent-jasny: #A5ADF5;   /* akcent jako TEKST na ciemnym tle (9:1) */
    --akcent-tlo: #5C67CE;     /* akcent pod BIALYM tekstem (4,9:1) */
    --ok: #30D158;
    --warn: #FF9F0A;
    --err: #FF453A;
    --info: #64D2FF;

    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;

    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
            Inter, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --promien: 16px;      /* karty */
    --promien-m: 12px;    /* przyciski, pola, kafle wewnetrzne */
    --promien-s: 8px;     /* plakietki */
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font: 400 16px/1.5 var(--sans);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }

/* --- gorny pasek --------------------------------------------------------- */

.pasek {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding: 0 var(--s6);
    height: 60px;
    background: rgba(11, 11, 15, .72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--linia);
}

.marka {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tekst);
}

.marka svg { color: var(--akcent-jasny); }

.pasek nav { display: flex; align-items: center; gap: var(--s1); margin-left: var(--s3); }

/* Kto jest zalogowany. Stoi w prawej grupie razem z cennikiem i „Wyloguj", wiec jest
   zwyklym podpisem - bez paddingu pozycji menu, ktory robil z niego zakladke. */
.konto-znacznik {
    font-size: 15px;
    font-weight: 500;
    color: var(--tekst-2);
    white-space: nowrap;
}

.pasek nav a {
    padding: var(--s2) var(--s3);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--tekst-2);
}

.pasek nav a:hover { background: rgba(255, 255, 255, .06); color: var(--tekst); }

.pasek nav a.aktywny {
    background: rgba(255, 255, 255, .10);
    color: var(--tekst);
    font-weight: 600;
}

.pasek .prawa { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }

.pasek .cennik { font-size: 15px; color: var(--tekst-3); }

/* --- uklad --------------------------------------------------------------- */

main { max-width: 1280px; margin: 0 auto; padding: var(--s7) var(--s6) var(--s8); }

h1 {
    margin: 0 0 var(--s2);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
}

h2 {
    margin: var(--s7) 0 var(--s4);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tekst);
}

.podtytul {
    margin: 0 0 var(--s6);
    color: var(--tekst-3);
    font-size: 17px;
    line-height: 1.45;
}

/* Naglowek tuz pod podtytulem otwiera widok, wiec nie odpycha sie od gory - 48px
   po 32px odstepu podtytulu robilo dziure. Gdy cos stoi miedzy (karta z kodem),
   selektor nie lapie i pelny odstep wraca - i o to chodzi. To samo dla naglowka
   pierwszej sekcji tuz pod rzedem kafli. */
.podtytul + h2, .kafle + h2 { margin-top: 0; }

.karta {
    background: var(--powierzchnia);
    border: 1px solid var(--linia-slaba);
    border-radius: var(--promien);
    padding: var(--s5);
}

.karta + .karta { margin-top: var(--s4); }

/* Naglowek na poczatku karty nie odpycha sie od jej gornej krawedzi. */
.karta > h2:first-child { margin-top: 0; }

/* Krotki formularz nie ma po co ciagnac sie przez 1280px - pole na kod urzadzenia
   czyta sie w kolumnie, nie w pasie przez caly ekran. */
.karta.waska { max-width: 560px; }
.karta.srednia { max-width: 680px; }

/* Komunikat miedzy podtytulem a trescia niesie wlasny odstep, zeby kazdy szablon
   nie dopisywal go osobno w atrybucie `style`. */
main > .komunikat { margin-bottom: var(--s5); }

/* --- kafle liczbowe ------------------------------------------------------ */

.kafle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s6);
}

.kafel {
    background: var(--powierzchnia);
    border: 1px solid var(--linia-slaba);
    border-radius: var(--promien);
    padding: var(--s5);
}

.kafel .etykieta {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tekst-3);
}

.kafel .wartosc {
    margin-top: var(--s3);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* Kafel ze slowem zamiast liczby (status, stan lancucha) - krotszy oddech. */
.kafel .wartosc.slowna { font-size: 24px; letter-spacing: -.01em; }

/* Podpis pod wartoscia. Zyje takze poza kaflem (pod polem, na koncu karty), wiec
   krój jest tutaj, a kafel dokłada sam odstep. */
.dopisek {
    font-size: 15px;
    line-height: 1.4;
    color: var(--tekst-3);
}

.kafel .dopisek { margin-top: var(--s2); }

/* --- tabele -------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

th {
    padding: 0 var(--s4) var(--s3);
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tekst-3);
    border-bottom: 1px solid var(--linia);
    white-space: nowrap;
}

td {
    padding: var(--s4);
    border-bottom: 1px solid var(--linia-slaba);
    font-size: 16px;
    line-height: 1.45;
    vertical-align: top;
}

thead + tbody tr:first-child td { padding-top: var(--s4); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--powierzchnia-hover); }

th:first-child, td:first-child { padding-left: var(--s2); }
th:last-child, td:last-child { padding-right: var(--s2); }

/* Tabela o wielu kolumnach (flota ma osiem). Przy 16px z obu stron same odstepy
   zjadaly 256px i tabela wychodzila poza karte o 56px, przewijajac CALA strone
   (zmierzone 2026-08-10). Sciete sa wylacznie odstepy POZIOME - pionowe zostaja,
   bo to one daja wierszowi oddech. */
table.gesta th, table.gesta td { padding-left: var(--s3); padding-right: var(--s3); }
table.gesta th:first-child, table.gesta td:first-child { padding-left: var(--s2); }
table.gesta th:last-child, table.gesta td:last-child { padding-right: var(--s2); }

/* Ostatnia linia obrony: gdy tresc mimo wszystko urosnie, tabela przewija sie
   WEWNATRZ karty, zamiast rozpychac uklad strony. */
.przewijak { overflow-x: auto; }

/* Liczba nigdy sie nie lamie - zlamane "120 960 / 8 260" czyta sie jak dwie dane. */
td.num, th.num { text-align: right; white-space: nowrap; }

/* Dawniej mono na kazdej danej - dzis JEDEN kroj, a kolumny trzyma tabular-nums. */
.mono { font-variant-numeric: tabular-nums; }

/* Ciagi maszynowe (hash, token) - jedyne miejsce na mono. */
.hex { font-family: var(--mono); font-size: 15px; letter-spacing: -.01em; }

/* Nazwa wlasna z systemu plikow albo grupy (`serwis`, sciezka w repo). BEZ mono -
   dyktat mowi, ze mono nalezy sie wylacznie `.hex` i `.token` - a bez tej reguly
   przegladarka i tak dawala swoj monospace w ~13px, czyli pod progiem 15px.
   Literal odroznia wiec tlo i lekki wciecie, nie drugi kroj. */
code {
    padding: 1px 6px;
    border-radius: var(--promien-s);
    background: var(--powierzchnia-2);
    font-family: inherit;
    font-size: .94em;
    color: var(--tekst);
}

/* Kod urzadzenia = nazwa wiersza, wiec czyta sie jak tytul, nie jak dana.
   NIGDY sie nie lamie: „KANCELARIA-BIERUN" zlamane na „KANCELARIA-" i „BIERUN"
   przestaje byc jednym identyfikatorem, a wlasnie po nim szuka sie wiersza. */
.kod { font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

/* Komorka scalona za kolumny, ktorych ten wiersz nie ma z definicji. Drobniejsza
   i przygaszona - to znak „tu nic nie bedzie", a nie dana do czytania. */
.nie-dotyczy { font-size: 15px; }

.przygasle { color: var(--tekst-3); }

/* Dana, ktora zlamana na dwie linie zmienia znaczenie („heartbeat 6 dni / temu"). */
.bez-lamania { white-space: nowrap; }

/* Podpis pod wartoscia w komorce tabeli (kancelaria, wiek heartbeatu, model). */
.pod { margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--tekst-3); }

.zawijaj { max-width: 340px; }

/* --- znaczniki stanu ----------------------------------------------------- */

.znacznik {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

.kropka { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.ton-ok { color: var(--ok); }
.ton-warn { color: var(--warn); }
.ton-err { color: var(--err); }
.ton-info { color: var(--info); }

.plakietka {
    display: inline-block;
    min-width: 28px;
    padding: 3px var(--s2);
    border-radius: var(--promien-s);
    background: var(--powierzchnia-2);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--tekst-2);
}

.plakietka.klasa-A { color: var(--tekst-2); }
.plakietka.klasa-B { color: var(--info); }
.plakietka.klasa-C { color: var(--warn); }
.plakietka.klasa-D { color: var(--akcent-jasny); }

/* --- formularze i przyciski ---------------------------------------------- */

label {
    display: block;
    margin-bottom: var(--s2);
    font-size: 15px;
    font-weight: 500;
    color: var(--tekst-2);
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: var(--s3) var(--s4);
    background: var(--powierzchnia-2);
    border: 1px solid var(--linia);
    border-radius: var(--promien-m);
    color: var(--tekst);
    font: 400 17px/1.4 var(--sans);
    outline: none;
}

/* Material kryptograficzny (.pub, .crt) wkleja sie w calosci - stad mono i wysokosc
   na kilka linii. To jedyne pole tekstowe, ktore ma prawo byc monospace. */
textarea {
    width: 100%;
    min-height: 132px;
    padding: var(--s3) var(--s4);
    background: var(--powierzchnia-2);
    border: 1px solid var(--linia);
    border-radius: var(--promien-m);
    color: var(--tekst);
    font: 400 15px/1.5 var(--mono);
    resize: vertical;
    outline: none;
}

select {
    padding: var(--s3) var(--s4);
    background: var(--powierzchnia-2);
    border: 1px solid var(--linia);
    border-radius: var(--promien-m);
    color: var(--tekst);
    font: 400 17px/1.4 var(--sans);
    outline: none;
}

input::placeholder, textarea::placeholder { color: var(--tekst-3); }
input:focus, textarea:focus, select:focus {
    border-color: var(--akcent-jasny);
    box-shadow: 0 0 0 3px rgba(110, 121, 214, .28);
}

/* Przyciski akcji w wierszu tabeli - mniejsze od glownego, ale nadal 15px. */
.przycisk.maly { padding: var(--s1) var(--s3); font-size: 15px; font-weight: 500; }

/* Jedyna akcja waskiego formularza (logowanie) bierze cala jego szerokosc. */
.przycisk.pelna { width: 100%; }

.akcje { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* Drugi rzad akcji w tej samej komorce (zarzadzanie pod wejsciem). */
.akcje-drugi-rzad { margin-top: var(--s2); }

/* Para guzikow dostepu serwisowego (Ekran/SSH). Zwijanie do dwoch linii rozpychalo
   wiersz floty na wysokosc, wiec ta para trzyma sie jednej linii - kolumna moze byc
   szersza, bylo by wiersz zostal plaski. */
.akcje.zwarte { flex-wrap: nowrap; }

/* Stopka formularza: przycisk + objasnienie w jednej linii. */
.pod-formularzem {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-top: var(--s4);
    flex-wrap: wrap;
}

.pod-formularzem .nota { color: var(--tekst-3); }

/* Objasnienie przy tabeli lub formularzu - akapit, ktory tlumaczy skutek akcji.
   Dotad zyl w atrybutach `style` i kazdy szablon powtarzal te same trzy deklaracje.
   Odstep zalezy od tego, po ktorej stronie tresci stoi, stad dwa modyfikatory. */
.nota { font-size: 15px; line-height: 1.5; color: var(--tekst-2); }

p.nota { margin: 0; }
.nota-nad { margin-bottom: var(--s5); }
.nota-pod { margin-top: var(--s5); }

/* Dopisek zamykajacy karte (nie mylic z `.pod` w komorce tabeli). */
p.dopisek { margin: var(--s4) 0 0; }

.pole + .pole { margin-top: var(--s5); }

/* Pole ma szerokosc POLA, nie szerokosc karty. Bez tego login na /konta mierzyl
   1166px (zmierzone), co czyta sie jak blad ukladu, nie jak formularz. Material
   kryptograficzny dostaje tyle, ile ma linia PEM - 64 znaki mono - i nic ponad. */
.pole input[type="text"], .pole input[type="password"] { max-width: 420px; }
.pole textarea { max-width: 620px; }

/* Objasnienie pod polem trzyma sie pola, a nie plywa w odstepie miedzy polami. */
.pole .dopisek { margin-top: var(--s1); }

.przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s3) var(--s5);
    background: var(--akcent-tlo);
    border: none;
    border-radius: var(--promien-m);
    color: #fff;
    font: 600 17px/1.25 var(--sans);
    cursor: pointer;
    /* Napis na guziku nie lamie sie nigdy - „Ekran (RDP)" zlamany na dwie linie
       rozpychal wiersz floty na wysokosc i wygladal jak dwa guziki. */
    white-space: nowrap;
}

.przycisk:hover { background: var(--akcent); color: #fff; }

.przycisk.wtorny {
    background: var(--powierzchnia-2);
    color: var(--tekst);
    border: 1px solid var(--linia);
}

.przycisk.wtorny:hover { background: var(--powierzchnia-3); color: #fff; }

/* Akcja odbierajaca dostep (wylacz konto, anuluj kod, odwolaj certyfikat).
   Na spoczynku NEUTRALNA. Czerwien w kazdym wierszu jest stala, a stala nie niesie
   informacji: na „Dostepie zdalnym" kolumna szesciu czerwonych guzikow przekrzykiwala
   pomaranczowe „brak certyfikatu", czyli jedyny stan, ktory naprawde wolal o uwage.
   Ostrzezenie zapala sie w chwili zamiaru - pod kursorem i na fokusie z klawiatury,
   bo inaczej nie doszloby do nikogo, kto nie uzywa myszy. */
.przycisk.niebezpieczny:hover,
.przycisk.niebezpieczny:focus-visible {
    background: rgba(255, 69, 58, .16);
    border-color: rgba(255, 69, 58, .40);
    color: #FF8A80;
}

/* Rzad przyciskow zamykajacy karte (Wroc do floty / Dodaj kolejne). */
.rzad-akcji {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s5);
    flex-wrap: wrap;
}

/* --- komunikaty ---------------------------------------------------------- */

.komunikat {
    padding: var(--s4) var(--s5);
    border-radius: var(--promien-m);
    background: var(--powierzchnia-2);
    border-left: 3px solid var(--tekst-3);
    font-size: 16px;
    line-height: 1.5;
    color: var(--tekst-2);
}

.komunikat.blad {
    border-left-color: var(--err);
    background: rgba(255, 69, 58, .12);
    color: #FFC4C0;
}

.komunikat.uwaga {
    border-left-color: var(--warn);
    background: rgba(255, 159, 10, .12);
    color: #FFDCA8;
}

.pusto {
    padding: var(--s7) 0;
    text-align: center;
    color: var(--tekst-3);
    font-size: 16px;
}

.pusto a, .link { color: var(--akcent-jasny); }

/* --- logowanie ----------------------------------------------------------- */

.ekran-logowania {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s5);
}

.ekran-logowania .karta { width: 100%; max-width: 420px; padding: var(--s6); }

.ekran-logowania .marka { margin-bottom: var(--s5); }

/* --- sekcja z tokenem ---------------------------------------------------- */

.token {
    display: block;
    margin: var(--s4) 0;
    padding: var(--s5);
    background: var(--powierzchnia-3);
    border-radius: var(--promien-m);
    font: 400 16px/1.7 var(--mono);
    color: var(--tekst);
    word-break: break-all;
    user-select: all;
}

.para { display: grid; grid-template-columns: 220px 1fr; gap: var(--s4) var(--s5); }

/* Karta na calej szerokosci: pary ida DWIE w rzedzie, inaczej zostaje pas pustki. */
.para.szeroka { grid-template-columns: 220px minmax(0, 1fr) 220px minmax(0, 1fr); }

.para dt { font-size: 16px; color: var(--tekst-3); }

.para dd { margin: 0; font-size: 16px; color: var(--tekst); }

/* Para dopieta pod komunikat albo pod token nalezy do tej samej karty, wiec odstep
   jest jej wlasnoscia, nie dopiskiem w szablonie. */
.komunikat + .para, .token + .para { margin-top: var(--s5); }

/* Lista „termin -> wyjasnienie" (Co warto wiedziec). Bez wlasnej siatki <dl> dostaje
   domyslne wciecie <dd> z przegladarki i czyta sie jak surowy dokument, nie jak
   panel. Termin trzyma stala kolumne, zeby oko wracalo zawsze w to samo miejsce. */
.pary {
    margin: 0;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--s4) var(--s5);
    /* Termin trzyma sie GORY wiersza. Bez tego przy wielolinijkowym wyjasnieniu
       rozciaga sie na cala jego wysokosc i przestaje stac w jednej linii z
       pierwszym zdaniem, ktore opisuje. */
    align-items: start;
}

.pary dt { font-weight: 600; color: var(--tekst); }

.pary dd { margin: 0; color: var(--tekst-2); }

/* Wariant pod polem formularza: krotsza kolumna terminu i drobniejszy stopien, zeby
   objasnienie nie przekrzykiwalo samego pola, przy ktorym stoi. */
.pary.zwarta {
    margin-top: var(--s2);
    grid-template-columns: 130px minmax(0, 1fr);
    gap: var(--s2) var(--s4);
    font-size: 15px;
    line-height: 1.45;
}

.kolumny {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: var(--s5);
    align-items: start;
}

/* Naglowek sekcji wewnatrz kolumny nie odpycha sie od gory tak jak samodzielny -
   odstep niesie caly blok, zeby obie kolumny zaczynaly sie na tej samej wysokosci.
   Wartosc jest ta sama co margines <h2>, wiec kazda sekcja panelu - zwykla czy
   dwukolumnowa - zaczyna sie w tym samym rytmie. */
.kolumny { margin-top: var(--s7); }
.kolumny > div > h2:first-child { margin-top: 0; }

/* Pasek gorny konczy sie wczesniej niz reszta ukladu: szesc pozycji menu + cennik +
   login + „Wyloguj" przestaja sie miescic juz przy ~1100px, a nie przy 860px. Przy
   nizszym progu pasek rozpadal sie na trzy linie i „Wyloguj" wyjezdzal poza ekran,
   mimo ze tresc strony byla jeszcze zupelnie w porzadku. Stad OSOBNY prog. */
@media (max-width: 1100px) {
    .pasek { padding: 0 var(--s4); gap: var(--s3); }
    /* Menu przewija sie w poziomie (bez widocznego paska - to nie jest tresc do
       przewijania, tylko awaryjny zapas), a `flex: none` po prawej pilnuje, zeby
       „Wyloguj" nigdy nie wyjechalo poza ekran. `min-width: 0` jest konieczne, bo
       bez niego element flex nie kurczy sie ponizej swojej tresci i overflow nigdy
       by sie nie wlaczyl. */
    .pasek nav {
        margin-left: 0;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .pasek nav::-webkit-scrollbar { display: none; }
    .pasek nav a { flex: none; }
    .pasek .prawa { flex: none; }
    .pasek .cennik { display: none; }
}

@media (max-width: 860px) {
    main { padding: var(--s5) var(--s4) var(--s7); }
    h1 { font-size: 28px; }
    .para, .para.szeroka { grid-template-columns: 1fr; gap: var(--s1) 0; }
    /* Termin nad wyjasnieniem - na waskim ekranie kolumna 260px zostawialaby
       wyjasnieniu pasek na kilka znakow. `.pary.zwarta` wymieniona osobno, bo ma
       wyzsza specyficznosc i sama regula `.pary` by jej nie przykryla. */
    .pary, .pary.zwarta { grid-template-columns: 1fr; gap: var(--s1) 0; }
    .pary dd + dt { margin-top: var(--s4); }
    .kolumny { grid-template-columns: 1fr; }
    table { display: block; overflow-x: auto; }
}

/* Wiersz konta: przelacznik i zmiana hasla obok siebie, nie jedno pod drugim. */
.dzialania-konta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.dzialania-konta form { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.dzialania-konta .haslo-inline input { width: 180px; }