/* Wyglad NASZEJ aplikacji. Strona klienta to wynik modelu i tu jej nie dotykamy —
   do podgladu wstrzykujemy tylko skrypt klikniec i styl podswietlenia zmian.
   Bez frameworka i bez npm (ograniczenie projektu): CSS pisany rekami. */

/* --- krój -------------------------------------------------------------------
   Schibsted Grotesk, HOSTOWANY U NAS (`wwwroot/fonts`, licencja OFL obok plikow).
   Zmiana decyzji „bez fontow z sieci" z 18.09 — Sebastian wybral kierunek A
   02.10. Sens tamtej decyzji zostaje: zadnego zapytania do obcego serwera, plik
   leci z naszej domeny. `swap`, bo tekst ma byc czytelny od pierwszej klatki,
   systemowym krojem, zanim plik dojdzie. Zmienna grubosc: jeden plik na 400–900. */
@font-face {
    font-family: "Schibsted Grotesk";
    src: url("fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Schibsted Grotesk";
    src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- motyw ------------------------------------------------------------------
   Paleta jasna jest DOMYSLNA i pelna — tu stoi kazdy token, takze te, ktore
   w ciemnym motywie sie nie zmieniaja. Kolor zdefiniowany wylacznie w bloku
   ciemnym nie istnialby dla polowy klientow.

   `--akcent` jest rozdzielony na DWA tokeny i to nie jest nadmiar:
   - `--akcent` to kolor TLA przycisku. Musi zostac na tyle ciemny, zeby bialy
     napis na nim mial kontrast — takze w motywie ciemnym.
   - `--akcent-tekst` to kolor NAPISU i obramowania akcentowego. W ciemnym musi
     byc jasny, inaczej link w kolorze cegly na wegielnym tle jest nieczytelny.
   W motywie jasnym oba maja te sama wartosc, wiec nic sie nie zmienia. */
:root {
    /* Mowi przegladarce, w jakim motywie ma renderowac SWOJE czesci: paski
       przewijania, pola formularzy, natywne kontrolki. Bez tego pole `input`
       zostaje biale na wegielnej stronie, a nasz CSS nic na to nie poradzi. */
    color-scheme: light;

    /* Kierunek „Dlugopis" (redesign 02.10): bialy papier, grafit i JEDEN niebieski
       — kolor dlugopisu, ktorym klient „zaznacza" na wydruku swojej strony. Ten sam
       niebieski nosza pinezki uwag w edytorze, wiec marka i narzedzie sa jednym.

       `--akcent` (TLO przycisku) jest GRAFITOWY, nie niebieski: glowne wezwanie
       ma byc spokojne, a niebieski zostaje dla dlugopisu — linkow, zaznaczen,
       numerow uwag. Dwa niebieskie role na jednym ekranie bily sie ze soba. */
    --tresc: #1e2126;
    --tresc-cicha: #5b6068;
    --tlo: #fcfcfa;
    --karta: #ffffff;
    --linia: #e3e4e0;
    --akcent: #1e2126;
    --akcent-tekst: #2541b2;
    --akcent-tlo: #eef1fb;
    --akcent-linia: #d5dbf3;

    /* Jedyny kolor z kierunku „Szyld", uzywany BARDZO oszczednie (decyzja Sebastiana):
       `--zakreslacz` — zolty sygnal jako zakreslacz pod tym, co sie ZMIENILO.
       Butelkowa zielen pasa zamykajacego zdjeta 02.10 (decyzja Sebastiana). */
    --sygnal: #f2b705;
    --zakreslacz: rgb(242 183 5 / 42%);

    /* Sekcje, ktore sa ciemne ZAWSZE, niezaleznie od motywu: granatowy hero strony
       glownej, lewa kolumna rejestracji, scena edytora. NIE WOLNO im uzywac `--tresc`
       jako tla — w motywie ciemnym `--tresc` z definicji robi sie JASNE i bialy napis
       na nim znika. Zlapane okiem w przegladarce: naglowek „Konto zajmuje minute"
       stal sie bialy na tle rgb(236,235,231). Te dwa tokeny maja te sama wartosc
       w obu motywach i o to wlasnie chodzi. */
    --ciemna: #1e2126;
    --na-ciemnej: #fff;
    --na-akcencie: #fff;
    --uwaga: #c2410c;
    --ok: #166534;
    --promien: 10px;
    --cien: 0 1px 2px rgb(30 33 38 / 8%), 0 4px 12px rgb(30 33 38 / 6%);

    /* Cien pod oknami przegladarki w hero jest CIEPLY (brazowy, nie szary):
       szary pod papierowym tlem wyglada jak brud, a caly ekran ma byc cieply. */
    --cien-cieply: 0 1px 2px rgb(30 33 38 / 6%), 0 24px 48px -12px rgb(30 33 38 / 18%);
}

/* Ciemna paleta zapisana RAZ, w jednym miejscu, i uzyta przez oba selektory nizej.
   Dwie kopie tej listy rozjechalyby sie na pierwszej poprawce koloru. */
@media (prefers-color-scheme: dark) {
    /* Za ustawieniem systemu — ale TYLKO gdy klient nie wymusil jasnego. */
    :root:not([data-motyw="jasny"]) {
        color-scheme: dark;

        --tresc: #ecedef;
        --tresc-cicha: #a3a8b0;
        --tlo: #16171a;
        --karta: #1f2125;
        --linia: #33363c;
        /* W ciemnym motywie przycisk jest JASNY z ciemnym napisem — grafit na
           grafitowym tle by zniknal. Stad tez `--na-akcencie` sie odwraca. */
        --akcent: #ecedef;
        --akcent-tekst: #9db0f2;
        --akcent-tlo: #1d2333;
        --akcent-linia: #2e3a66;
        --na-akcencie: #16171a;
        --zakreslacz: rgb(242 183 5 / 30%);
        --uwaga: #f08a5d;
        --ok: #6ee7a8;
        --cien: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 30%);
        --cien-cieply: 0 2px 4px rgb(0 0 0 / 45%), 0 24px 48px -12px rgb(0 0 0 / 55%);
    }
}

/* Wybor klienta wygrywa z systemem — i musi wygrywac W OBIE STRONY. Blok wyzej
   jest zamkniety w `@media`, wiec sam z siebie nie zadziala u kogos, kto ma jasny
   system i chce ciemna strone; ten dziala zawsze. Symetrycznie `:not([data-motyw="jasny"])`
   wyzej pozwala wymusic jasna strone na ciemnym systemie. Wersja z jednym blokiem
   dziala tylko w jedna strone i wyglada poprawnie, dopoki nie trafi sie drugi przypadek. */
:root[data-motyw="ciemny"] {
    color-scheme: dark;

    --tresc: #ecedef;
    --tresc-cicha: #a3a8b0;
    --tlo: #16171a;
    --karta: #1f2125;
    --linia: #33363c;
    /* W ciemnym motywie przycisk jest JASNY z ciemnym napisem — grafit na
       grafitowym tle by zniknal. Stad tez `--na-akcencie` sie odwraca. */
    --akcent: #ecedef;
    --akcent-tekst: #9db0f2;
    --akcent-tlo: #1d2333;
    --akcent-linia: #2e3a66;
    --na-akcencie: #16171a;
    --zakreslacz: rgb(242 183 5 / 30%);
    --uwaga: #f08a5d;
    --ok: #6ee7a8;
    --cien: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px rgb(0 0 0 / 30%);
    --cien-cieply: 0 2px 4px rgb(0 0 0 / 45%), 0 24px 48px -12px rgb(0 0 0 / 55%);
}

* { box-sizing: border-box; }

/* KAZDY odnosnik w naszej aplikacji ma nasz kolor. Bez tej reguly przegladarka
   maluje wlasnym granatem i FIOLETEM (link odwiedzony) — a fiolet nie istnieje
   nigdzie w tej palecie. Zlapane dwa razy tego samego dnia: „Zobacz, jak to dziala"
   na stronie glownej i „Zaloguj sie" na ekranie konta, oba widoczne dopiero
   w motywie ciemnym. Reguly nizej, ktore ustawiaja kolor same, wygrywaja normalnie.
   Strony KLIENTA to osobne dokumenty w ramce — ta regula ich nie dotyczy. */
a { color: var(--akcent-tekst); }

body {
    margin: 0;
    /* Bez fontow z sieci: kolejny request, ktory moze nie dojsc, a klient i tak
       oglada WLASNA strone w iframe — nasza typografia ma nie przeszkadzac. */
    font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tresc);
    background: var(--tlo);
}

body:has(.wybor) .strona { max-width: none; }

main, .strona {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

h1 { font-size: 1.6rem; margin: 0 0 1.25rem; letter-spacing: -0.01em; }

/* `Routes.razor` ma <FocusOnNavigate Selector="h1">, wiec po KAZDEJ nawigacji Blazor
   ustawia fokus na naglowku — po to, zeby czytnik ekranu przeczytal, gdzie klient
   trafil. Skutek uboczny: przegladarka rysuje wokol naglowka ramke fokusa, ktora
   przy zwyklym klikaniu wyglada jak blad. Naglowek nie jest interaktywny, wiec
   ramka nic tu nie komunikuje — sam fokus (a z nim odczyt) zostaje.
   Szablon Blazora mial ta regule; skasowalem ja jako „martwa" przy przepisywaniu
   arkusza i wrocila jako brzydota widoczna na pierwszym zrzucie ekranu. */
h1:focus { outline: none; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
p { margin: 0 0 0.75rem; }

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

button {
    font: inherit;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    background: var(--karta);
    color: var(--tresc);
    cursor: pointer;
}

button:hover:not(:disabled) { border-color: var(--tresc-cicha); }

button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Widoczny fokus zostaje. Klient moze byc na klawiaturze, a to jedyna
   wskazowka, gdzie jest. Kolor akcentu, nie `--uwaga`: pomaranczowa ramka
   wokol pola, w ktorym klient pisze, wygladala jak blad (krytyka 24.10). */
:where(button, input, textarea, a):focus-visible {
    outline: 3px solid var(--akcent-tekst);
    outline-offset: 2px;
}

/* Typy pol wymieniane z nazwy, bez golego `input`: `checkbox` i `radio` maja
   zostac natywne. E-mail i haslo doszly razem z ekranem konta — bez nich pola
   logowania renderowaly sie jako systemowa ramka obok naszych. */
/* Przyklad w polu ma sie dac przeczytac: domyslny szary przegladarki wychodzil
   3,5:1 na ciemnej karcie (detektor, krytyka 24.10). */
::placeholder { color: var(--tresc-cicha); opacity: 1; }

textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
    font: inherit;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    background: var(--karta);
    color: var(--tresc);
    resize: vertical;
}

label { display: block; margin-bottom: 0.35rem; color: var(--tresc-cicha); }

/* --- kreator --------------------------------------------------------------- */

/* Przelacznik trybu to dwa ODNOSNIKI, nie przyciski: bez obwodu Blazora
   przelaczenie jest wejsciem na drugi adres (i dzieki temu przezywa odswiezenie).
   Wyglada jak przelacznik w jednej rynience — dwie opcje jednego pytania. */
.wybor-zrodla {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.3rem;
    background: color-mix(in srgb, var(--linia) 45%, var(--tlo));
    border-radius: 12px;
}

.wybor-zrodla a {
    display: inline-flex;
    align-items: center;
    min-height: 2.6rem;
    padding: 0 1.1rem;
    color: var(--tresc-cicha);
    text-decoration: none;
    border-radius: 9px;
    transition: background var(--ruch) var(--krzywa), color var(--ruch) var(--krzywa);
}

.wybor-zrodla a:hover { color: var(--tresc); }

/* Na telefonie dwie rowne polowki na cala szerokosc — inaczej druga opcja
   spadala pod pierwsza i przelacznik przestawal wygladac jak jedno pytanie. */
@media (max-width: 30rem) {
    .wybor-zrodla { display: grid; grid-template-columns: 1fr 1fr; align-self: stretch; }
    .wybor-zrodla a { justify-content: center; text-align: center; padding: 0.4rem 0.5rem; font-size: 0.95rem; line-height: 1.2; }
}

.wybor-zrodla :is(button, a).wybrany {
    background: var(--karta);
    color: var(--tresc);
    font-weight: 600;
    box-shadow: 0 1px 2px rgb(30 33 38 / 10%);
}

/* --- wybor propozycji ------------------------------------------------------
   Ekran wyboru zajmuje CALE OKNO: trzy szkice krawedz w krawedz, bez naglowka,
   bez odstepow i bez ramek. Klient porownuje strony, a nie karty w naszym UI —
   kazdy piksel oddany na nasze ozdoby jest pikselem, na ktorym nie widzi swojej
   strony.

   Stron nie SCISKAMY do szerokosci kolumny (wtedy ukladaja sie jak na telefonie
   i klient porownuje trzy kolumny tekstu). Renderujemy w szerokosci komputera
   i zmniejszamy w calosci. Skala liczy sie sama z jednostek kontenera, wiec
   plynie razem z animacja podzialu — bez JS i bez przeskoku na koncu. */

/* Naglowek strony jest w drzewie, ale nie na ekranie: FocusOnNavigate potrzebuje
   go do ustawienia fokusa, a czytnik ekranu do powiedzenia, gdzie klient trafil. */
.tylko-dla-czytnika {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Uklad (redesign 02.10): pasek u gory, pytanie, a pod nimi scena na reszte okna —
   DUZY szkic po lewej na dwa wiersze, dwa mniejsze po prawej jeden pod drugim.
   Ktory jest duzy, mowi klasa, nie kolejnosc w drzewie: `grid-row` przenosi go
   w lewa kolumne niezaleznie od miejsca na liscie. */
body:has(.wybieranie) .strona, body:has(.czekanie-ekran) .strona { max-width: none; padding: 0; }

.wybieranie {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    background: var(--tlo);
}

.wybieranie-pasek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    min-height: 4.25rem;
    padding: 0.5rem clamp(1.25rem, 3vw, 2.5rem);
    border-bottom: 1px solid var(--linia);
}
.wybieranie-pasek .postep { margin-right: auto; }

.wybieranie-naglowek {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 2rem;
    padding: 1.4rem clamp(1.25rem, 3vw, 2.5rem) 1.1rem;
}
.wybieranie-pytanie { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.wybieranie-otucha { margin: 0; color: var(--tresc-cicha); max-width: 34em; }

.wybor {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    min-height: 0;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.szkic {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: 12px;
    box-shadow: var(--cien);
    transition: box-shadow var(--ruch) var(--krzywa), border-color var(--ruch) var(--krzywa);
}
.szkic.duzy { grid-column: 1; grid-row: 1 / span 2; box-shadow: var(--cien-cieply); }
.szkic.maly { grid-column: 2; }
.szkic.maly:hover { border-color: var(--akcent-tekst); }

.rama {
    /* Zrodlo dla cqw nizej — bez tego skala nie ma od czego sie liczyc. */
    container-type: inline-size;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.rama iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border: 0;
    width: var(--szerokosc-strony);
    transform-origin: top left;
    scale: calc(100cqw / var(--szerokosc-strony));
    /* Wysokosc ma PRZEKRACZAC kadr, nie zgadzac sie z nim — inaczej pasek
       przewijania przez caly szkic. Widoczny wycinek ustala SKALA, nie ta liczba. */
    height: calc(var(--szerokosc-strony) * 4);
}

/* Telefon w NATURALNEJ skali — 390px rozciagniete na pol ekranu wygladaloby jak
   strona dla olbrzyma. */
.rama-telefon { display: flex; justify-content: center; padding-top: 1.25rem; background: var(--ciemna); }
/* Biale tlo: strona klienta czesto nie ustawia tla `body`, a iframe jest wtedy
   przezroczysty — pod jej sekcjami przeswitywal grafit ramki. */
.rama-telefon iframe { position: static; scale: 1; height: 100%; border-radius: 14px 14px 0 0; background: #fff; }

/* Podpis POD szkicem, nie na nim: przyciski na stronie klienta zaslanialy jej dol
   i ginely na kazdym kolorze tla. */
.szkic figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--linia);
}
.szkic-nazwa { font-weight: 600; font-size: 1.0625rem; margin-right: auto; }
.szkic-podpis { color: var(--tresc-cicha); font-size: 0.9rem; }
.szkic.duzy .szkic-nazwa { font-size: 1.2rem; }
.szkic.maly figcaption { padding: 0.6rem 0.85rem; flex-wrap: nowrap; }
.szkic.maly .szkic-nazwa { font-size: 0.95rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.szkic.maly figcaption button { min-height: 2.4rem; padding: 0 0.85rem; font-size: 0.9rem; white-space: nowrap; }

.szkic figcaption button {
    min-height: 2.75rem;
    padding: 0 1.1rem;
    font: inherit;
    font-weight: 600;
    color: var(--tresc);
    background: var(--karta);
    border: 1.5px solid var(--tresc);
    border-radius: 10px;
    cursor: pointer;
    transition: background var(--ruch) var(--krzywa), color var(--ruch) var(--krzywa);
}
.szkic figcaption button:hover { background: var(--tresc); color: var(--tlo); }
.szkic figcaption button.glowny { min-height: 3rem; padding: 0 1.5rem; color: var(--na-akcencie); background: var(--akcent); border-color: var(--akcent); }
.szkic figcaption button.glowny:hover { background: var(--akcent-tekst); border-color: var(--akcent-tekst); color: #fff; }
.szkic figcaption button:focus-visible { outline: 3px solid var(--akcent-tekst); outline-offset: 2px; }

/* Odmowa z API musi byc WIDOCZNA nad scena — jako zwykly akapit wyladowalaby pod
   nia i klient nie dowiedzialby sie, co sie stalo. */
body:has(.wybor) [data-test="kolizja"] {
    position: fixed;
    top: 1rem;
    left: 50%;
    z-index: 10;
    max-width: min(40rem, 90vw);
    margin: 0;
    padding: 0.75rem 1.25rem;
    background: var(--karta);
    border: 1px solid var(--uwaga);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    transform: translateX(-50%);
}

/* Na telefonie szkice jeden pod drugim, strona sie przewija. */
@media (max-width: 48rem) {
    .wybieranie { position: static; display: block; }
    .wybor { grid-template-columns: 1fr; grid-template-rows: none; }
    .szkic.duzy, .szkic.maly { grid-column: 1; grid-row: auto; }
    .szkic.duzy { height: 75vh; }
    .szkic.maly { height: 45vh; }
}

/* --- edytor: strona klienta na cale okno -----------------------------------
   Klient ma tu OGLADAC SWOJA STRONE, a nie nasza aplikacje. Strona zajmuje wiec
   cale okno, bez naglowka i bez niczego przyklejonego do dolu; wszystko, co nasze,
   siedzi w zwijanym panelu po prawej albo w okienku, ktore plywa przy wskazanym
   elemencie. */

/* Uklad (redesign 02.10): pasek u gory na cala szerokosc, pod nim scena i panel.
   Scena jest JASNOSZARA, a strona klienta lezy na niej jak kartka — klient widzi,
   gdzie konczy sie jego strona, a zaczyna nasze narzedzie. Wczesniej strona szla
   od krawedzi do krawedzi i obrys, pinezki oraz okienko wygladaly jak czesc strony. */
.edytor {
    /* fixed, nie zwykly blok: MainLayout otacza tresc paddingiem, a edytor ma
       wypelnic okno. */
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--tlo);
}

.edytor-pasek {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    min-height: 3.75rem;
    padding: 0.4rem 1.25rem;
    background: var(--karta);
    border-bottom: 1px solid var(--linia);
}
.edytor-wstecz { color: var(--tresc); font-weight: 600; text-decoration: none; }
.edytor-wstecz:hover { color: var(--akcent-tekst); }
.edytor-gdzie { display: flex; align-items: baseline; gap: 0.6rem; margin-right: auto; padding-left: 1.25rem; border-left: 1px solid var(--linia); }
.edytor-gdzie span { color: var(--tresc-cicha); font-size: 0.9rem; }

/* Adres strony pod *.vibesite.pl — w pasku edytora i na karcie w „Moje strony".
   Kolorem pisma (--akcent-tekst), bo to link, ktory klient ma zauwazyc i skopiowac. */
.adres-w-sieci { font-size: 0.9rem; color: var(--tresc-cicha); overflow-wrap: anywhere; }
a.adres-w-sieci { color: var(--akcent-tekst); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
a.adres-w-sieci:hover { text-decoration-thickness: 2px; }
.adres-w-sieci-etykieta { color: var(--tresc-cicha); font-weight: 400; }
.edytor-pasek .adres-w-sieci { margin-right: 1rem; }
.moje-tresc .adres-w-sieci { display: block; margin-top: 0.5rem; }
@media (max-width: 720px) { .edytor-pasek .adres-w-sieci-etykieta { display: none; } }

.scena {
    position: relative;
    min-width: 0;
    min-height: 0;
    background: color-mix(in srgb, var(--linia) 55%, var(--tlo));
}

/* BIEL TUTAJ JEST STALA I NIE WOLNO JEJ ZAMIENIC NA `var(--karta)`. Wszystko
   ponizej pokazuje STRONE KLIENTA — a ona nie nalezy do naszego motywu. Klient
   ocenia to, co dostanie w ZIP-ie; wymuszenie na podgladzie naszych ciemnych
   kolorow byloby klamstwem o wyniku. */
/* Kontener podgladu. W trybie „Komputer" iframe wypelnia kartke w naturalnej
   skali — klient widzi to, co zobaczy jego wlasny klient, bez zmniejszania. */
.scena-strona {
    position: absolute;
    inset: 1.25rem 1.25rem 0;
    overflow: hidden;
    background: #fff;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px 2px rgb(30 33 38 / 8%), 0 16px 40px -20px rgb(30 33 38 / 30%);
}

.scena-strona iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

/* Telefon: SAM iframe zwezony do 390px (Podglad.SzerokoscMobile), naturalna skala,
   wysrodkowany na scenie jak telefon lezacy na biurku. Zwezamy iframe, nie
   skalujemy strony — inaczej tryb klamalby o tym, co widzi klient (kontrakt 3.2). */
.scena-telefon {
    display: flex;
    justify-content: center;
    background: transparent;
    box-shadow: none;
    padding-top: 0.25rem;
}

.scena-telefon iframe {
    width: 390px;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 0 0 8px var(--ciemna), 0 24px 48px -16px rgb(30 33 38 / 45%);
}

/* --- okienko z uwaga, plywajace przy wskazanym elemencie -------------------- */

/* Pozycja przychodzi z iframe'a (przeliczona przez shim, sprawdzona w C#), a `clamp`
   docina ja do okna: element przy prawej krawedzi strony nie ma prawa wypchnac
   okienka z polem tekstowym poza ekran. Ten sam powod, dla ktorego wspolrzedne
   przechodza przez `LinkPodgladu.Wspolrzedna` — tylko po stronie ukladu. */
.dymek-grupa {
    position: fixed;
    z-index: 30;
    left: clamp(0.5rem, var(--x, 0px), calc(100vw - 24rem));
    top: clamp(0.5rem, calc(var(--y, 0px) + 0.5rem), calc(100dvh - 16rem));
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.dymek {
    width: 22rem;
    max-width: calc(100vw - 2rem);
    padding: 0.9rem 1rem;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: 0 8px 28px rgb(20 24 28 / 30%);
}

.dymek label { margin-bottom: 0.4rem; color: var(--tresc); font-weight: 600; }
.dymek textarea { margin-bottom: 0.6rem; }
.dymek-akcje { display: flex; gap: 0.5rem; }

.dymek button.glowny {
    color: var(--na-akcencie);
    background: var(--akcent);
    border-color: var(--akcent);
}

/* Przycisk przejscia stoi OBOK okienka, nie w nim: to inna czynnosc niz pisanie
   uwagi — klient sprawdza, gdzie link prowadzi, i wraca. */
.dymek-link {
    flex: 0 0 auto;
    width: max-content;
    max-width: 13rem;
    padding: 0.5rem 0.8rem;
    font: inherit;
    color: var(--tresc);
    text-align: left;
    text-decoration: none;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: 0 8px 28px rgb(20 24 28 / 30%);
    cursor: pointer;
}

.dymek-link:hover { border-color: var(--akcent-tekst); color: var(--akcent-tekst); }

/* --- panel zmian (prawa strona, zwijany) ----------------------------------- */

.panel-zmian {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--karta);
    border-left: 1px solid var(--linia);
    /* Animujemy SZEROKOSC, bo panel ma dwie ustalone szerokosci, nie udzialy. */
    transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.panel-zmian.otwarty { width: min(25rem, 38vw); }
.panel-zmian.zwiniety { width: 2.75rem; }

/* Uchwyt jest CZESCIA panelu i zostaje widoczny po zwinieciu — inaczej klient nie
   mialby czym go rozwinac. */
.panel-uchwyt {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    padding: 0.6rem 0;
    font-size: 1.1rem;
    color: var(--tresc-cicha);
    background: var(--karta);
    border: 0;
    border-bottom: 1px solid var(--linia);
    cursor: pointer;
}

.panel-uchwyt:hover { color: var(--tresc); background: var(--karta); }

/* Liczba niewyslanych uwag widoczna TAKZE przy zwinietym panelu: bez tego klient
   zwija panel, pisze uwage i nie ma zadnego sladu, ze cos czeka na wyslanie. */
.panel-odznaka {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    min-width: 1.25rem;
    padding: 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--na-akcencie);
    background: var(--akcent);
    border-radius: 999px;
}

.panel-tresc {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 1.1rem 2rem;
}

.rundy { margin: 0.4rem 0 0; color: var(--tresc-cicha); font-size: 0.9rem; text-align: center; }
/* Koszt najblizszej rundy czyta sie w chwili decyzji — zwykly kolor tekstu, nie szary dopisek. */
.rundy.rundy-koszt { color: var(--tresc); }

/* Etykiety sekcji panelu zdaniem, nie wersalikami z rozstrzelonym rozstawem —
   klient czyta je jak pytania („Uwagi do wysłania"), a nie jak naglowki tabeli. */
.panel-etykieta {
    margin: 1.4rem 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tresc);
}
.panel-tresc > .panel-etykieta:first-child { margin-top: 0.25rem; }

.panel-pusto {
    margin: 0 0 0.5rem;
    padding: 0.9rem 1rem;
    color: var(--tresc-cicha);
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--tlo);
    border: 1px dashed var(--linia);
    border-radius: 10px;
}

/* Link w roli przycisku (Dokup poprawki) — ten sam ksztalt co „Popraw to", ktory zastepuje. */
.panel-tresc a.glowny {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid;
    box-sizing: border-box;
}

.panel-tresc button.glowny,
.panel-tresc a.glowny {
    color: var(--na-akcencie);
    background: var(--akcent);
    border-color: var(--akcent);
}

.panel-tresc .szeroki { width: 100%; min-height: 3.25rem; margin: 1rem 0 0.5rem; font-weight: 600; font-size: 1.0625rem; border-radius: 12px; }
.panel-tresc button.glowny:hover:not(:disabled) { background: var(--akcent-tekst); border-color: var(--akcent-tekst); color: var(--na-akcencie); }

.panel-tresc .ostrzezenie { color: var(--uwaga); }

/* Koncowka pakietu: potwierdzenie w miejscu przycisku, ktory je wywolal. */
.potwierdz-runde {
    margin: 1rem 0 0.5rem;
    padding: 0.9rem 1rem;
    background: var(--akcent-tlo);
    border: 1px solid var(--akcent-linia);
    border-radius: 12px;
}
.potwierdz-runde p { margin: 0 0 0.75rem; line-height: 1.5; color: var(--tresc); }
.potwierdz-runde-przyciski { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.potwierdz-runde-przyciski button { flex: 1; min-height: 2.75rem; font-weight: 600; }

/* Odmowa z API plywa nad scena, a nie w panelu: zwiniety panel schowalby zdanie,
   ktorego klient MUSI zobaczyc (to samo, co na ekranie wyboru propozycji). */
.pasek-kolizji {
    position: absolute;
    top: 1rem;
    left: 50%;
    z-index: 20;
    max-width: min(40rem, 90%);
    margin: 0;
    padding: 0.75rem 1.25rem;
    background: var(--karta);
    border: 1px solid var(--uwaga);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    transform: translateX(-50%);
}

/* Zdanie na pustej scenie: „wczytuje", „nie ma takiej strony", „strona sie buduje". */
.komunikat-pusty {
    max-width: 32rem;
    margin: 20vh auto 0;
    padding: 1.25rem 1.5rem;
    text-align: center;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
}
.komunikat-pusty > p:last-child { margin-bottom: 0; }


/* Na telefonie panel nie moze zjadac szerokosci strony — ida jedno pod drugim. */
@media (max-width: 48rem) {
    .edytor { position: static; display: flex; flex-direction: column; }
    .scena { height: 70vh; }
    .scena-strona { inset: 0.75rem 0.75rem 0; }
    .panel-zmian.otwarty, .panel-zmian.zwiniety { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-zmian { transition: none; }
}

/* --- uwagi ----------------------------------------------------------------- */

.uwagi {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1.25rem;
    display: grid;
    gap: 0.6rem;
}

.uwaga {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--linia);
    /* Otwarta uwaga niesie niebieski dlugopisu — ten sam co jej pinezka. */
    border-left: 4px solid var(--akcent-tekst);
    border-radius: var(--promien);
    background: var(--karta);
}

.uwaga.applied { border-left-color: var(--ok); }
.uwaga.rejected { border-left-color: var(--tresc-cicha); }

.uwaga .gdzie {
    display: flex;
    align-items: center;
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    color: var(--tresc-cicha);
}

.uwaga .tresc { margin: 0; }

.uwaga .odpowiedz {
    margin: 0.4rem 0 0;
    color: var(--ok);
}

/* Runda na scenie (krytyka 24.10): ten sam pas co odmowa, ale w akcencie — to wiadomosc,
   nie ostrzezenie. Wjezdza z gory raz, przy pojawieniu sie; bez ruchu przy reduced-motion. */
/* Na DOLE sceny, jak podpowiedz: u gory zaslanial naglowek strony klienta, czyli
   akurat to, co klient po poprawce oglada najpierw (ponowna krytyka 24.10). */
.pasek-rundy {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(40rem, 90%);
    margin: 0;
    padding: 0.7rem 1rem 0.7rem 1.1rem;
    color: var(--tresc);
    background: var(--karta);
    border: 1px solid var(--akcent-linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    transform: translateX(-50%);
    animation: pasek-rundy-wjazd 320ms var(--krzywa) both;
}
.pasek-rundy p { margin: 0; line-height: 1.45; }
.pasek-rundy-gotowe { background: var(--akcent-tlo); }
.pasek-rundy button { flex: none; min-height: 2.25rem; padding: 0 1rem; font-weight: 600; }
.pasek-rundy button.glowny { color: var(--na-akcencie); background: var(--akcent-tekst); border-color: var(--akcent-tekst); }
.pasek-rundy button.glowny:hover { background: color-mix(in srgb, var(--akcent-tekst) 85%, var(--tresc)); }
.pasek-rundy-kolko {
    flex: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--akcent-tekst);
    border-right-color: transparent;
    animation: kreci 1s linear infinite;
}
@keyframes pasek-rundy-wjazd { from { opacity: 0; transform: translate(-50%, 0.5rem); } }
@media (prefers-reduced-motion: reduce) {
    .pasek-rundy { animation: none; }
    .pasek-rundy-kolko { animation-duration: 3s; }
}

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

[role="alert"] {
    padding: 0.8rem 1rem;
    border: 1px solid var(--uwaga);
    border-radius: var(--promien);
    background: var(--akcent-tlo);
    color: var(--akcent-tekst);
}

[data-test="pracuje"] {
    padding: 0.8rem 1rem;
    border: 1px dashed var(--linia);
    border-radius: var(--promien);
    background: var(--karta);
    color: var(--tresc-cicha);
}

[data-test="licznik"] { color: var(--tresc-cicha); }

/* --- historia wersji ------------------------------------------------------- */

[data-test="historia"] ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.4rem;
}

[data-test="historia"] li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    background: var(--karta);
}

[data-test="historia"] li.aktualna {
    border-color: var(--akcent-tekst);
    background: var(--akcent-tlo);
}

[data-test^="porzucona-"] { color: var(--tresc-cicha); font-size: 0.9rem; }

/* --- awarie Blazora: teksty widzi KLIENT, wiec po polsku -------------------- */

.blazor-error-boundary {
    padding: 1rem;
    border-radius: var(--promien);
    background: #7f1d1d;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "Coś się u nas zacięło. Odśwież stronę — Twoja strona i uwagi są na miejscu.";
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: 0.8rem 1.25rem;
    background: #fde68a;
    color: #422006;
    box-shadow: 0 -1px 6px rgb(0 0 0 / 20%);
}

#blazor-error-ui .reload, #blazor-error-ui .dismiss {
    margin-left: 0.75rem;
    cursor: pointer;
}

/* figure ma domyslny margines przegladarki - w gridzie rozjezdza karty */
.propozycja { margin: 0; }

/* --- czekanie na model (redesign 02.10) ------------------------------------
   Powstalo ze zmierzonej liczby: generacja propozycji trwala 275 s. Po lewej
   postep, zdanie i etapy, po prawej trzy OKNA, ktore sie skladaja — klient widzi
   ksztalt tego, na co czeka. */
.czekanie-ekran { min-height: 100dvh; background: var(--tlo); }

.czekanie-uklad {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem 4.5rem;
    max-width: 82rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem) 4rem;
    align-items: start;
}
@media (min-width: 62rem) { .czekanie-uklad { grid-template-columns: 24rem minmax(0, 1fr); } }

.czekanie-lewa { display: flex; flex-direction: column; gap: 1.5rem; }

.czekanie { display: flex; flex-direction: column; gap: 1.25rem; margin: 0; }
.czekanie-co { margin: 0; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }

.czekanie-etapy { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; font-size: 1.0625rem; }
.etap { display: flex; gap: 0.75rem; align-items: center; color: var(--tresc-cicha); }

/* Znak etapu to kolko: pelne niebieskie z haczykiem (zrobione), obwodka
   w ruchu (trwa), cienka szara (przed). Tresc znaku (✓ / •) zostaje w drzewie
   dla przegladarki bez CSS, na ekranie ja chowamy. */
.etap-znak {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1.5px solid var(--linia);
    box-sizing: border-box;
    font-size: 0;
}
.etap.zrobione { color: var(--tresc); }
.etap.zrobione .etap-znak {
    border-color: var(--akcent-tekst);
    background: var(--akcent-tekst) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.etap.trwa { color: var(--tresc); font-weight: 600; }
.etap.trwa .etap-znak { border: 2px solid var(--akcent-tekst); border-right-color: transparent; animation: kreci 1s linear infinite; }
@keyframes kreci { to { rotate: 1turn; } }

/* Wskaznik ZYCIA, nie postepu: procentu nie znamy, a zmyslony stanalby na 90%
   i klient by to wychwycil. */
.czekanie-pasek { height: 4px; border-radius: 999px; background: var(--linia); overflow: hidden; }
.czekanie-pasek > span {
    display: block;
    width: 35%;
    height: 100%;
    border-radius: inherit;
    background: var(--akcent-tekst);
    animation: przesuw 2.2s ease-in-out infinite;
}
@keyframes przesuw {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

.czekanie-czas { margin: 0; font-variant-numeric: tabular-nums; color: var(--tresc-cicha); }
.czekanie-spokoj { margin: 0; color: var(--tresc-cicha); font-size: 0.95rem; line-height: 1.5; }

/* Trzy okna-szkielety. */
.propozycje { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; }
.propozycja {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: 12px;
    box-shadow: var(--cien);
}
.szkielet { pointer-events: none; }
.szkielet-pasek { display: flex; gap: 0.35rem; align-items: center; height: 1.9rem; padding: 0 0.75rem; border-bottom: 1px solid var(--linia); }
.szkielet-pasek i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--linia); }
.szkielet-podglad { height: clamp(14rem, 34vh, 22rem); margin: 1rem; border-radius: 8px; background: var(--linia); }
.propozycja figcaption { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1rem 1.1rem; }
.szkielet-tekst { display: block; height: 0.8rem; width: 70%; border-radius: 999px; background: var(--linia); }
.szkielet-tekst.krotki { width: 45%; }

/* Okna skladaja sie po kolei — jedyny ruch tego ekranu poza paskiem zycia. */
.szkielet-podglad, .szkielet-tekst { animation: puls 1.8s ease-in-out infinite; }
.propozycja:nth-child(2) .szkielet-podglad, .propozycja:nth-child(2) .szkielet-tekst { animation-delay: 0.3s; }
.propozycja:nth-child(3) .szkielet-podglad, .propozycja:nth-child(3) .szkielet-tekst { animation-delay: 0.6s; }
@keyframes puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* Ruch potrafi szkodzic — przy „ogranicz ruch" zostaje sam uklad, bez animacji.
   Pasek zostaje widoczny (pelna szerokosc), zeby nadal cos znaczyl. */
@media (prefers-reduced-motion: reduce) {
    .czekanie-pasek > span { animation: none; width: 100%; opacity: 0.6; }
    .szkielet-podglad, .szkielet-tekst, .etap.trwa .etap-znak { animation: none; }
}

/* ── Panel wewnetrzny ────────────────────────────────────────────────────────
   Jedyny ekran w aplikacji, ktorego klient nigdy nie zobaczy. Gestszy od reszty
   (mniejszy tekst, tabela zamiast kart), bo tu chodzi o przeglad kilkudziesieciu
   projektow naraz, a nie o prowadzenie kogos za reke. */

.panel { max-width: 76rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* --- Panel admina: redesign 22.10 (nawigacja, pulpit, karty) --------------------- */
.panel-nawigacja {
    display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 1.5rem; padding: 0.3rem;
    border: 1px solid var(--linia); border-radius: 12px; background: var(--karta);
}
.panel-nawigacja a {
    padding: 0.5rem 0.9rem; border-radius: 9px; color: var(--tresc-cicha); text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.panel-nawigacja a:hover { color: var(--tresc); background: var(--tlo); }
.panel-nawigacja a[aria-current="page"] { color: var(--na-akcencie); background: var(--akcent); }
.panel h2 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.panel h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.panel-wiecej { font-size: 0.85rem; font-weight: 500; margin-left: 0.5rem; }

.panel-alarmy ul, .panel-lista-kart { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.panel-alarmy li, .panel-lista-kart li {
    padding: 0.65rem 0.9rem; border: 1px solid var(--linia); border-radius: 10px; background: var(--karta);
}
.panel-alarmy li.stan-bad { box-shadow: inset 3px 0 0 var(--uwaga); }
.panel-alarmy li.stan-warn { box-shadow: inset 3px 0 0 var(--sygnal); }
.panel-alarmy a, .panel-lista-kart a { color: var(--akcent-tekst); font-weight: 600; }

.panel-liczby { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }
.panel-liczby div { padding: 1rem 1.1rem; border: 1px solid var(--linia); border-radius: 12px; background: var(--karta); }
.panel-liczby span { display: block; color: var(--tresc-cicha); font-size: 0.85rem; }
.panel-liczby strong { display: block; margin-top: 0.25rem; font-size: 1.6rem; font-variant-numeric: tabular-nums; }

.panel-szukaj { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; }
.panel-szukaj input { flex: 1 1 18rem; min-height: 2.5rem; padding: 0 0.8rem; border: 1px solid var(--linia); border-radius: 9px; background: var(--karta); color: var(--tresc); font: inherit; }
.panel-szukaj select, .panel-szukaj button { min-height: 2.5rem; padding: 0 0.8rem; border: 1px solid var(--linia); border-radius: 9px; background: var(--karta); color: var(--tresc); font: inherit; }
.panel-szukaj button { background: var(--akcent); color: var(--na-akcencie); border-color: var(--akcent); font-weight: 600; }
.panel-szukaj a { color: var(--akcent-tekst); margin-left: auto; }

.panel-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin-top: 0.25rem; font-size: 0.8rem; color: var(--tresc-cicha); }
.panel-pigulka { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.panel-pigulka.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.panel-pigulka.uwaga { background: var(--akcent-tlo); color: var(--akcent-tekst); }
.panel-pigulka.problem { background: color-mix(in srgb, var(--uwaga) 16%, transparent); color: var(--uwaga); }

.panel-okruchy { margin: 0; font-size: 0.85rem; color: var(--tresc-cicha); }
.panel-okruchy a { color: var(--akcent-tekst); }
.panel-karta h2 { margin-top: 0.25rem; }
.panel-opis-pelny { max-width: 60rem; color: var(--tresc-cicha); }
.panel-karta-siatka { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: 1.5rem; margin-top: 1rem; }
@media (max-width: 60rem) { .panel-karta-siatka { grid-template-columns: 1fr; } }
.panel-podglad { width: 100%; height: 26rem; border: 1px solid var(--linia); border-radius: 12px; background: #fff; }
.panel-karta-boki h3:first-child { margin-top: 0; }
.panel-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0 0 0.75rem; font-size: 0.9rem; }
.panel-dl dt { color: var(--tresc-cicha); }
.panel-dl dd { margin: 0; overflow-wrap: anywhere; }
.panel-wersje { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; margin: 0; }
.panel-wersje li { padding: 0.35rem 0.7rem; border: 1px solid var(--linia); border-radius: 9px; background: var(--karta); font-size: 0.85rem; }
.panel-wersje li > * + * { margin-left: 0.35rem; }
.panel-niebezpieczne { margin-top: 2rem; padding: 0.75rem 1rem; border: 1px solid color-mix(in srgb, var(--uwaga) 40%, var(--linia)); border-radius: 10px; }
.panel-niebezpieczne summary { cursor: pointer; color: var(--uwaga); font-weight: 600; }
.panel-lista tfoot td { font-weight: 600; border-top: 1px solid var(--linia); }

/* Naglowek trzyma tytul i wylogowanie w jednej linii. `h1` ma tu wlasny margines
   z reguly ogolnej, wiec zerujemy go — inaczej przycisk odjezdza w dol. */
.panel-naglowek {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.panel-naglowek h1 { margin: 0; }

/* Wylogowanie jest drugorzedne wzgledem tego, po co sie tu przyszlo — wyglada
   jak odnosnik, nie jak glowne dzialanie ekranu. */
.panel-wyloguj button {
    padding: 0.3rem 0.6rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--tresc-cicha);
    background: none;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    cursor: pointer;
}

.panel-wyloguj button:hover { background: var(--karta); }

/* Historia wersji: domyslnie zwinieta, bo przy przegladzie kilkudziesieciu projektow
   liczy sie gestosc. Rozwija sie tam, gdzie akurat cos sprawdzamy. */
.panel-historia { margin-top: 0.35rem; font-size: 0.85rem; }
.panel-historia summary { cursor: pointer; color: var(--tresc-cicha); }

.panel-historia ol {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.2rem;
}

/* Odstep miedzy elementami wiersza robimy tutaj, a nie encjami w szablonie —
   inaczej odstepy znikaja przy zawijaniu i skladaja sie z marginesami. */
.panel-historia li > * + * { margin-left: 0.4rem; }

.panel-znacznik {
    padding: 0.05rem 0.35rem;
    font-size: 0.75rem;
    color: var(--akcent-tekst);
    background: var(--akcent-tlo);
    border-radius: var(--promien);
}

.panel-wejscie {
    display: grid;
    gap: 0.5rem;
    max-width: 22rem;
    padding: 1.25rem;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
}

.panel-wejscie input {
    padding: 0.55rem 0.7rem;
    font: inherit;
    border: 1px solid var(--linia);
    border-radius: 6px;
}

.panel-suma {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: baseline;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
}

.panel-suma p { margin: 0; color: var(--tresc-cicha); }
.panel-suma .ostrzezenie { flex-basis: 100%; color: var(--uwaga); }

.panel-lista {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    overflow: hidden;
}

.panel-lista th {
    text-align: left;
    font-weight: 600;
    color: var(--tresc-cicha);
    background: var(--tlo);
}

.panel-lista th, .panel-lista td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--linia);
    vertical-align: top;
}

.panel-lista tr:last-child td { border-bottom: 0; }

/* Wiersz, na ktory trzeba spojrzec: zamrozony, po limicie albo nieczytelny.
   Pasek z boku, nie czerwone tlo — czerwien na calym wierszu przy kilkunastu
   projektach przestaje cokolwiek znaczyc. */
.panel-lista tr.uwaga td:first-child { box-shadow: inset 3px 0 0 var(--uwaga); }

.panel-id {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.85em;
    color: var(--tresc-cicha);
}

.panel-opis { display: block; max-width: 26rem; }
.panel-brak { color: var(--tresc-cicha); font-size: 0.85em; }
.panel-lista a { color: var(--akcent-tekst); }
.panel-lista a + a { margin-left: 0.6rem; }

/* Cennik i dosypywanie rund (PanelActions). */
.panel-komunikat { margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: 10px; background: var(--karta); }
.panel-cennik { margin: 0 0 1.5rem; }
.panel-cennik h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.panel-cennik form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-top: 0.5rem; }
.panel-cennik label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--tresc-cicha); }
.panel-cennik input { width: 8rem; }
.panel-cennik .ostrzezenie { flex-basis: 100%; margin: 0; color: var(--uwaga); }
.panel-dosyp { display: flex; gap: 0.35rem; margin-top: 0.35rem; }
.panel-dosyp input[name="rundy"] { width: 3.5rem; }
.panel-dosyp input[name="powod"] { width: 7rem; }
.panel-test { margin-left: 0.35rem; padding: 0 0.35rem; border-radius: 6px; font-size: 0.8em; color: var(--tresc-cicha); border: 1px dashed var(--tresc-cicha); }
.panel-wplaty { margin-top: 1.5rem; }
.panel-wplaty h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.panel-wplaty ol { margin: 0; padding-left: 1.25rem; }
.panel-wplaty li > * + * { margin-left: 0.5rem; }
.panel-kolejka { margin: 0 0 1.5rem; }
.panel-kolejka h2, .panel-konta h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.panel-kolejka h3 { margin: 0.75rem 0 0.25rem; font-size: 0.95rem; }
.panel-kolejka ol { margin: 0; padding-left: 1.25rem; }
.panel-kolejka li > * + * { margin-left: 0.5rem; }
.panel-konta { margin-top: 1.5rem; }
.panel-wiadomosci { margin: 0 0 1.5rem; }
.panel-wiadomosci h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.panel-wiadomosc-tresc { white-space: pre-wrap; overflow-wrap: anywhere; }
.panel-stan { margin: 0 0 1.5rem; }
.panel-link-hasla { width: 100%; font-family: ui-monospace, monospace; font-size: 0.85rem; }
.panel-zdarzenia { margin: 0 0 1.5rem; padding: 0.75rem 1rem; border-radius: 10px; border: 1px solid var(--uwaga); }
.panel-zdarzenia h2 { margin: 0 0 0.25rem; font-size: 1.1rem; color: var(--uwaga); }
.panel-zdarzenia ol { margin: 0 0 0.5rem; padding-left: 1.25rem; }
.panel-zdarzenia li > * + * { margin-left: 0.5rem; }
.panel-stan h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.panel-stan ul { margin: 0.25rem 0 0; padding: 0; list-style: none; }
.panel-stan li > * + * { margin-left: 0.5rem; }
.stan-znak { display: inline-block; width: 1rem; font-weight: 700; color: var(--tresc-cicha); }
.stan-ok .stan-znak { color: var(--ok); }
.stan-warn .stan-znak, .stan-warn strong { color: var(--uwaga); }
.stan-bad .stan-znak, .stan-bad strong, .stan-bad span { color: var(--uwaga); font-weight: 700; }

/* Panel bywa otwierany na telefonie („co ten klient ma?" w drodze). Tabela
   szersza niz ekran ma sie przewijac w SWOIM pudelku, a nie rozpychac strony. */
@media (max-width: 48rem) {
    .panel-lista { display: block; overflow-x: auto; white-space: nowrap; }
    .panel-opis { white-space: normal; }
}

/* ── Odbior strony ───────────────────────────────────────────────────────────
   Koniec drogi klienta: pobranie paczki i wlasny link. Wyrozniony blok, bo to
   jedyne miejsce, w ktorym klient dostaje cos NA WLASNOSC — reszta edytora sluzy
   do zamawiania zmian. */

.odbior {
    margin: 2rem 0 0;
    padding: 1.25rem;
    background: var(--akcent-tlo);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
}

.odbior h2 { margin: 0 0 0.75rem; font-size: 1.15rem; }
.odbior p { margin: 0 0 0.75rem; }
.odbior p:last-child { margin-bottom: 0; }

.pobierz {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    font-weight: 600;
    color: var(--na-akcencie);
    text-decoration: none;
    background: var(--akcent);
    border-radius: 6px;
}

.pobierz:hover { filter: brightness(1.1); }
.odbior-opis { display: block; margin-top: 0.4rem; color: var(--tresc-cicha); font-size: 0.9rem; }

.odbior-link label { display: block; margin-bottom: 0.35rem; }

/* Adres jest dlugi, a klient ma go SKOPIOWAC — pole rosnie, przycisk nie. */
.odbior-link-pole { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.odbior-link-pole input {
    flex: 1 1 20rem;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    font: inherit;
    font-size: 0.9rem;
    color: var(--tresc-cicha);
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: 6px;
}

/* --- strona glowna: kierunek „Dlugopis", uklad „biurko i kartki" (08.10) ----
   Kazda sekcja ma tlo do krawedzi, a TRESC w `.start-srodek` o stalej szerokosci —
   na monitorze 1920 px wiersz tekstu inaczej mial 1800 px (zmierzone wczesniej).

   ZASADA UKLADU: tlo strony to BIURKO (nasz interfejs), a biala KARTKA oznacza
   wylacznie strone KLIENTA — wydruk salonu, przed/po warsztatu, cennik kwiaciarni.
   Nasze teksty leza wprost na biurku, bez kart, ramek i cieni.

   Kolory stron KLIENTA na kartkach — i atrament dlugopisu na nich — sa na sztywno,
   w obu motywach: to cudza strona na papierze, nie nasz interfejs. Dzieki temu
   w ciemnym motywie gasnie tylko biurko (krytyka 05.10, P1: kolko #c4bbf7 na bialej
   kartce bylo ledwo widac). Wszystko inne idzie z tokenow. */
/* Strona glowna idzie do krawedzi okna: kontener `.strona` z ukladu ma tu nie
   zwezac niczego (tla pasow sa pelnej szerokosci, tresc ma wlasny `.start-srodek`). */
body:has(.start) .strona { max-width: none; padding: 0; }

/* Tokeny na `body`, nie na `.start`: biurko ma byc tez pod przewinieciem poza
   krawedz strony (overscroll), inaczej mignie tlo aplikacji. */
body:has(.start) {
    --tresc-szer: 75rem;
    --start-odstep: clamp(4.5rem, 8vw, 6.5rem);
    --start-biurko: #ecebf2;
    --linia: #d6d4e2;

    /* Akcent strony glownej: LAWENDA (decyzja Sebastiana 03.10) — w linkach, pinezkach,
       ramkach i pasie przed/po. PRZYCISKI zostaja ciemne (grafit z `:root`),
       lawendowe dopiero po najechaniu.
       Tylko tutaj — reszta aplikacji zostaje przy grafitowym przycisku i niebieskim
       dlugopisie. Nadpisane tokeny, nie nowe kolory w regulach: wszystko pod `.start`
       (linki, pinezka w logo, ramki) bierze lawende samo. */
    --akcent-tekst: #4a3ab0;
    --akcent-tlo: #f1effc;
    --akcent-linia: #dcd7f6;
    --start-akcent-mocny: #4a3ab0;
    --start-pas: #5b4bc4;
    --start-cien-akcentu: rgb(91 75 196 / 26%);
    /* Atrament NA PAPIERZE: staly w obu motywach, jak sama kartka. */
    --start-atrament: #4a3ab0;
    --start-cien-papieru: 0 1px 2px rgb(30 33 38 / 6%), 0 24px 48px -12px rgb(30 33 38 / 22%);
    /* Ruch PO ekranie (kursor w rundzie, linia krokow) — wejscia ida na `--krzywa`. */
    --krzywa-ruch: cubic-bezier(0.77, 0, 0.175, 1);

    background: var(--start-biurko);
}
:root[data-motyw="ciemny"] body:has(.start) {
    --start-biurko: #16171a;
    --linia: #2e3036;
    --akcent-tekst: #c4bbf7;
    --akcent-tlo: #24213a;
    --akcent-linia: #3a3560;
    --start-akcent-mocny: #c4bbf7;
    --start-pas: #3d3290;
    --start-cien-akcentu: rgb(0 0 0 / 40%);
    --start-cien-papieru: 0 2px 4px rgb(0 0 0 / 45%), 0 24px 48px -12px rgb(0 0 0 / 60%);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-motyw="jasny"]) body:has(.start) {
        --start-biurko: #16171a;
        --linia: #2e3036;
        --akcent-tekst: #c4bbf7;
        --akcent-tlo: #24213a;
        --akcent-linia: #3a3560;
        --start-akcent-mocny: #c4bbf7;
        --start-pas: #3d3290;
        --start-cien-akcentu: rgb(0 0 0 / 40%);
        --start-cien-papieru: 0 2px 4px rgb(0 0 0 / 45%), 0 24px 48px -12px rgb(0 0 0 / 60%);
    }
}

.start-srodek {
    width: 100%;
    max-width: var(--tresc-szer);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 3vw, 2rem);
    box-sizing: border-box;
}

.start h1, .start h2 { margin: 0; text-wrap: balance; letter-spacing: -0.02em; font-weight: 800; }
.start h2 { font-size: clamp(2rem, 1.4rem + 2vw, 2.625rem); line-height: 1.08; }
.start h3 { margin: 0; font-size: 1.3125rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.start p, .start dl, .start dd, .start figure { margin: 0; }
.start p { text-wrap: pretty; }

.start-stos-pionowy { display: flex; flex-direction: column; gap: 1.25rem; }
.start-stos-duzy { display: flex; flex-direction: column; gap: 4.5rem; }

/* Dwie kolumny, ktore na telefonie skladaja sie w jedna. */
.start-dwie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 3.5rem 4rem;
    align-items: center;
}
.start-dwie-waska { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 52rem) { .start-dwie-waska { grid-template-columns: 1fr; gap: 2rem; } }

/* Szerokosc w `em` trzyma wiersz ponizej ~65 znakow (krytyka: bylo ~108). */
.start-podtytul { font-size: 1.125rem; line-height: 1.6; color: var(--tresc-cicha); max-width: 34em; }
.start-podtytul-szeroki { max-width: 36em; }

/* --- przyciski ---------------------------------------------------------- */
.start-glowny {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0 1.6rem;
    border-radius: 12px;
    background: var(--akcent);
    color: var(--na-akcencie);
    font-weight: 600;
    font-size: 1.0625rem;
    text-decoration: none;
    transition: background-color var(--ruch) ease, transform 160ms var(--krzywa);
}
.start-glowny:active { transform: scale(0.97); }
/* Najechanie zmienia grafit w lawende — tylko mysza: dotyk zostawia „wiszacy" hover po stuknieciu. */
@media (hover: hover) and (pointer: fine) {
    .start-glowny:hover { background: var(--start-akcent-mocny); color: var(--na-akcencie); }
}
.start-glowny:focus-visible, .start a:focus-visible { outline: 3px solid var(--akcent-tekst); outline-offset: 3px; }
.start-glowny-maly { min-height: 2.75rem; padding: 0 1.1rem; font-size: 1rem; }

.start-link {
    color: var(--akcent-tekst);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.3em;
}

/* --- pasek gorny ---------------------------------------------------------- */
/* Pasek PRZYKLEJONY u gory: „Zaloz konto" i „Zaloguj sie" zostaja pod reka przez cala
   dluga strone, bez przewijania z powrotem. Tlo pelne, bo pod spodem przejezdza tresc.
   Dziala tylko, gdy zaden przodek (.strona, body) nie ma `overflow` — dzis nie ma. */
.start-pasek {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--start-biurko);
    border-bottom: 1px solid var(--linia);
}

/* Kotwice z paska (#jak, #cena…) zatrzymuja sekcje POD paskiem, a nie pod nim schowane. */
.start [id] { scroll-margin-top: 5.5rem; }
.start-pasek-tresc { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; flex-wrap: wrap; }
.start-pasek-tresc > .znak { margin-right: auto; }
.start-nawigacja { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.start-nawigacja a { color: var(--tresc); text-decoration: none; font-weight: 500; }
.start-nawigacja a.start-glowny { color: var(--na-akcencie); }
.start-nawigacja a:not(.start-glowny):hover { color: var(--akcent-tekst); }
.start-zaloguj { font-weight: 600 !important; text-decoration: underline !important; text-underline-offset: 0.3em; }
@media (max-width: 52rem) { .start-nawigacja a[href^="#"] { display: none; } }
/* Na telefonie pasek ma sie zmiescic w JEDNEJ linii: znak, „Zaloguj sie" i przycisk.
   Przelacznik motywu znika — motyw i tak idzie za ustawieniem telefonu. */
@media (max-width: 30rem) {
    .start-nawigacja .motyw-przelacznik { display: none; }
    .start-nawigacja { gap: 1rem; }
}

/* --- hero: wydruk zaznaczony dlugopisem ----------------------------------- */
.start-hero { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(5rem, 9vw, 7.5rem); }
.start-hero-siatka {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
    gap: 4rem;
    align-items: center;
}
.start-hero-tekst { display: flex; flex-direction: column; gap: 1.75rem; }
.start-hero h1 { font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.25rem); line-height: 1.02; }
.start-wstep { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--tresc-cicha); max-width: 30em; }
.start-do-rzeczy { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.start-drobne { font-size: 0.95rem; color: var(--tresc-cicha); }
.start-drobne strong { color: var(--tresc); }

.start-wydruk { position: relative; padding: 0 0 5.5rem 1.5rem; }
.start-wydruk .start-kartka { rotate: -0.6deg; box-shadow: var(--start-cien-papieru); }
@media (max-width: 30rem) {
    .start-wydruk { padding: 0; }
    .start-wydruk .start-kartka { padding: 1.5rem; rotate: none; }
    .start-wydruk .start-kartka-nazwa { font-size: 1.6rem; }
}
/* Kartka strony klienta. Uzywa jej tez ekran rejestracji (`konto-kartka`). */
.start-kartka {
    background: #fff;
    color: #1e2126;
    border: 1px solid #e3e4e0;
    border-radius: 6px;
    box-shadow: var(--cien-cieply);
    padding: 2.25rem 2.5rem 2.5rem;
}
.start-kartka-adres { font-size: 0.8rem; color: #5b6068; margin-bottom: 1.4rem !important; }
.start-kartka-foto { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 650; object-fit: cover; border-radius: 3px; margin-bottom: 1.25rem; }
.start-kartka-foto-niska { aspect-ratio: 1000 / 470; }
.start-kartka-nazwa { font-size: 2.1rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.start-kartka-opis { margin-top: 0.5rem !important; color: #5b6068; }
.start-kartka-cennik { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.75rem !important; }
.start-kartka-cennik div { display: flex; justify-content: space-between; gap: 1rem; }
.start-kartka-cennik dt, .start-kartka-cennik dd { margin: 0; }
.start-kartka-cennik dd { font-variant-numeric: tabular-nums; }
/* #5b6068, nie #8a8f96: tamto mialo 3,3:1 na bialym (krytyka 05.10). */
.start-kartka-stopka { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 1.9rem !important; font-size: 0.8rem; color: #5b6068; }

/* Kolko dlugopisu wokol telefonu. `pathLength="1"` w znaczniku, wiec rysowanie
   to po prostu `stroke-dashoffset` z 1 do 0 — bez liczenia dlugosci sciezki. */
.start-zakreslone { position: relative; white-space: nowrap; color: #1e2126; }
.start-kolko {
    position: absolute;
    left: -1.1rem;
    top: -0.85rem;
    width: calc(100% + 2.4rem);
    height: 2.9rem;
    color: var(--start-atrament);
    overflow: visible;
    pointer-events: none;
}

.start-notatka {
    position: absolute;
    right: -0.75rem;
    bottom: 0;
    width: min(18rem, 80%);
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--karta);
    color: var(--tresc);
    border: 1px solid var(--akcent-linia);
    border-radius: 12px;
    box-shadow: 0 12px 32px -8px var(--start-cien-akcentu);
    font-size: 0.95rem;
    line-height: 1.45;
}
@media (max-width: 30rem) { .start-notatka { position: static; width: auto; margin-top: 1rem; } }

/* Ta sama kropla co pinezka w edytorze — numer uwagi to ten sam znak w calym
   produkcie, od strony glownej po panel zmian. */
.start-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50% 50% 50% 4px;
    background: var(--akcent-tekst);
    color: var(--na-akcencie);
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 2px 6px var(--start-cien-akcentu);
}
/* Na stronie glownej pinezki stoja na papierze albo przy nim — atrament staly. */
.start .start-pin { background: var(--start-atrament); color: #fff; box-shadow: 0 2px 6px rgb(74 58 176 / 30%); }

/* --- pasy tresci ---------------------------------------------------------- */
.start-pas { padding-block: var(--start-odstep); }
.start-pas + .start-pas { border-top: 1px solid var(--linia); }

/* --- trzy kroki: jedna linia, kazdy krok z wlasnym obrazkiem --------------- */
.start-kroki {
    position: relative;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
}
@media (min-width: 56rem) {
    .start-kroki { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
    .start-kroki::before {
        content: "";
        position: absolute;
        top: 1.35rem;
        left: 2.75rem;
        right: 2.75rem;
        height: 2px;
        background: var(--linia);
        transform-origin: left center;
    }
}
.start-kroki li { position: relative; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.start-kroki p { color: var(--tresc-cicha); font-size: 1.0625rem; line-height: 1.55; max-width: 30em; }
.start-krok-nr {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--start-biurko);
    border: 2px solid var(--tresc);
    font-weight: 800;
    font-size: 1.15rem;
}
.start .start-czas { font-size: 0.9rem; font-weight: 600; color: var(--tresc); }
.start-krok-obraz { height: 11.5rem; display: flex; align-items: center; }

/* Krok 1: wiadomosc klienta — nasz interfejs, wiec bez papieru. */
.start-wiadomosc {
    max-width: 19rem;
    padding: 0.9rem 1.1rem;
    background: var(--karta);
    color: var(--tresc);
    border: 1px solid var(--linia);
    border-radius: 14px 14px 14px 4px;
    font-size: 0.95rem;
    line-height: 1.5;
    transform-origin: bottom left;
}

/* Krok 2: trzy kierunki tej samej firmy — rozne zdjecia, jeden wybrany. */
.start-wachlarz { position: relative; width: 100%; max-width: 19rem; height: 10rem; }
.start-mini {
    position: absolute;
    top: 0.5rem;
    width: 6.8rem;
    height: 8.8rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e4e0;
    border-radius: 4px;
    box-shadow: var(--start-cien-papieru);
}
.start-mini img { display: block; width: 100%; height: 2.6rem; object-fit: cover; }
.start-mini i { display: block; height: 0.35rem; margin: 0.45rem 0.6rem 0; border-radius: 2px; background: #d9dad6; }
.start-mini i.krotka { width: 55%; }
.start-mini i.mocna { height: 0.6rem; width: 70%; background: #3a3d44; }
.start-mini-a { left: 0; rotate: -6deg; }
.start-mini-b { left: 6rem; z-index: 2; outline: 3px solid var(--start-atrament); outline-offset: 3px; }
.start-mini-b i.mocna { background: #7a3b2e; }
.start-mini-c { left: 12rem; rotate: 6deg; }
.start-mini-c img { height: 3.6rem; }
.start-wybrana { position: absolute; left: 7.4rem; bottom: -0.4rem; z-index: 3; display: flex; gap: 0.4rem; align-items: center; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.start-wybrana .start-pin { width: 1.4rem; height: 1.4rem; font-size: 0.75rem; }

/* Krok 3: kartka z dwiema pinezkami uwag. */
.start-z-uwagami {
    position: relative;
    width: 100%;
    max-width: 19rem;
    height: 9.5rem;
    padding: 1rem 1.2rem;
    background: #fff;
    border: 1px solid #e3e4e0;
    border-radius: 4px;
    box-shadow: var(--start-cien-papieru);
}
.start-z-uwagami i { display: block; height: 0.45rem; margin-top: 0.6rem; border-radius: 2px; background: #d9dad6; }
.start-z-uwagami i.mocna { height: 0.8rem; width: 60%; margin-top: 0; background: #3a3d44; }
.start-z-uwagami .start-pin { position: absolute; width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }

/* --- przed / po: jedyny duzy moment, jedyny pelny kolor -------------------- */
.start-przedpo { background: var(--start-pas); color: #fff; padding-block: clamp(5rem, 9vw, 7rem); }
.start-przedpo-naglowek { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.5rem 4rem; align-items: end; margin-bottom: 1.75rem; }
.start-przedpo-naglowek p { font-size: 1.125rem; line-height: 1.55; color: rgb(255 255 255 / 85%); max-width: 30em; }
.start-przedpo-siatka { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.75rem 3rem; }
.start-przedpo figure { position: relative; display: flex; flex-direction: column; gap: 0.9rem; }
.start-przedpo figcaption { font-size: 0.95rem; font-weight: 600; }
.start-przedpo a:focus-visible { outline-color: #fff; }

.start-strona {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 16rem;
    padding: 2rem;
    background: #fff;
    color: #1e2126;
    border-radius: 4px;
    box-shadow: 0 24px 48px -16px rgb(0 0 0 / 35%);
}
.start-strona-gora { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.start-strona-foto { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 474; object-fit: cover; border-radius: 3px; }
.start-strona-nazwa { font-size: 1.5rem; font-weight: 700; }
.start-strona-opis { font-size: 0.95rem; color: #5b6068; }
.start-strona-drobne { font-size: 0.85rem; color: #5b6068; margin-top: auto !important; }
.start-strona-telefon { background: #1e2126; color: #fff; border-radius: 999px; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.95rem; }
.start-strona-nowe { font-size: 1.0625rem; font-weight: 600; }

/* Zakreslacz z kierunku „Szyld": zolty pod tym, co sie ZMIENILO. Jedyne znaczenie
   zoltego w produkcie. Zawsze na papierze, wiec staly w obu motywach. Rysowany jako
   `background-image` o pelnym rozmiarze, zeby dalo sie go „przeciagnac" (background-size). */
.start mark {
    background-color: transparent;
    background-image: linear-gradient(transparent 38%, rgb(242 183 5 / 45%) 38%, rgb(242 183 5 / 45%) 92%, transparent 92%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: inherit;
    padding-inline: 2px;
}

/* Na papierowej kartce — jasne w obu motywach, jak sama kartka. */
.start-uwaga { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: auto !important; padding: 0.8rem 0.9rem; background: #f1effc; color: #1e2126; border-radius: 10px; font-size: 0.95rem; line-height: 1.45; }

/* --- pola za darmo -------------------------------------------------------- */
.start-pola-obraz { position: relative; display: flex; flex-direction: column; }
.start-kartka-kwiaciarnia { padding: 2rem 2.25rem; rotate: 0.5deg; box-shadow: var(--start-cien-papieru); }
.start-pola-cennik { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; font-size: 1.0625rem; }
.start-pola-cennik li { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.start-pola-podpis { margin-top: 1rem !important; font-size: 0.9rem; color: var(--tresc-cicha); }

/* --- co dostajesz i pytania: listy definicji, nie kafle ------------------- */
.start-dostajesz { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 2rem 3rem; }
.start-dostajesz dt, .start-pytania dt { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.4rem; }
.start-dostajesz dd, .start-pytania dd { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--tresc-cicha); }

.start-pytania { display: flex; flex-direction: column; }
.start-pytania > div {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 0.5rem 1.5rem;
    padding-block: 1.35rem;
    border-top: 1px solid var(--linia);
}
.start-pytania > div:last-child { border-bottom: 1px solid var(--linia); }
.start-pytania dt { margin: 0; }
@media (max-width: 40rem) { .start-pytania > div { grid-template-columns: 1fr; } }

/* --- plan: kwota na biurku, bez karty -------------------------------------- */
.start-plan { display: flex; flex-direction: column; gap: 1.5rem; }
.start-kwota { font-size: clamp(3.5rem, 2rem + 5vw, 5.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.start-kwota small { display: block; margin-top: 0.6rem; font-size: 1.125rem; font-weight: 600; letter-spacing: 0; color: var(--tresc-cicha); }
.start-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; font-size: 1.0625rem; }
.start-plan li { display: flex; gap: 0.75rem; }
.start-plan li::before {
    content: "";
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    background: var(--akcent-tekst);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- domkniecie i stopka -------------------------------------------------- */
.start-domkniecie { padding-block: clamp(4.5rem, 8vw, 6rem); border-top: 1px solid var(--linia); }
.start-domkniecie-tresc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.start-domkniecie h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); line-height: 1.05; max-width: 14em; }

.start-stopka { border-top: 1px solid var(--linia); }
.start-stopka-tresc { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 2.25rem 3rem; font-size: 0.95rem; }
.start-stopka-tresc > .znak { margin-right: auto; color: var(--tresc-cicha); }
.start-stopka-tresc a { color: var(--tresc-cicha); }
.start-stopka-tresc a:hover { color: var(--akcent-tekst); }

/* --- elementy pokazu rundy i edycji cennika ------------------------------ */
.start-niewidoczne { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.start-wyslij-wiersz { display: none; }
.start-ruch .start-wyslij-wiersz { display: flex; }
.start-wyslij {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0 0.6rem 0 1.1rem;
    border: 0;
    border-radius: 10px;
    background: #fff;
    color: #1e2126;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--ruch) ease, transform 160ms var(--krzywa);
}
.start-wyslij:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .start-wyslij:hover { background: #f1effc; } }
.start-wyslij:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.start .start-wyslij .start-pin { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; box-shadow: none; }

/* Kursor i fala klikniecia: jeden element kazdy, przesuwany skryptem. */
.start-kursor { position: absolute; left: 0; top: 0; z-index: 5; width: 24px; height: 24px; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 35%)); }
.start-klik { position: absolute; left: 0; top: 0; z-index: 4; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid #fff; border-radius: 50%; opacity: 0; pointer-events: none; }

.start-strona { position: relative; }
.start-runda { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.start-runda > span { grid-area: 1 / 1; padding: 0.55rem 1rem; border-radius: 999px; background: #1e2126; color: #fff; font-size: 0.95rem; font-weight: 600; opacity: 0; }
.start-runda-trwa { display: flex; flex-direction: column; gap: 0.45rem; }
.start-runda-pasek { display: block; height: 3px; border-radius: 2px; background: rgb(255 255 255 / 25%); overflow: hidden; }
.start-runda-pasek i { display: block; height: 100%; background: #fff; transform-origin: left center; }

.start-pola-nowy { outline: 2px dashed transparent; outline-offset: 5px; border-radius: 2px; transition: outline-color var(--ruch) ease; }
.start-pola-nowy.edytuje { outline-color: var(--start-atrament); }
.start-litera.karetka::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: -0.15em;
    background: var(--start-atrament);
    animation: start-mruga 1s steps(1) infinite;
}
@keyframes start-mruga { 50% { opacity: 0; } }
.start-zapisano {
    position: absolute;
    top: 1rem;
    right: -0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    background: #1e2126;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 10px 24px -8px rgb(0 0 0 / 40%);
}
@media (max-width: 30rem) { .start-zapisano { right: 0.5rem; } }

/* --- ruch przy wczytaniu: jedna orkiestrowana sekwencja (okolo 2,5 s) ------
   W CSS, nie w JS: zaczyna sie razem z wstawieniem elementow, wiec nic nie mignie
   gotowym widokiem, zanim dojdzie skrypt. Kolejnosc opowiada produkt: naglowek,
   kartka klienta kladzie sie na biurku, dlugopis zakresla telefon, wjezdza uwaga.
   Stalowke dlugopisu po sciezce kolka prowadzi SMIL ze skryptu (`start-ruch.js`).
   Ograniczony ruch: zostaja same przenikania kartki i notatki. */
.start-h1-linia { display: block; overflow: clip; padding-block: 0.04em 0.12em; margin-block: -0.04em -0.12em; }
.start-h1-linia > span { display: inline-block; }
.start-kolko-sciezka { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
    .start-h1-linia > span { animation: start-linia 850ms var(--krzywa) 80ms both; }
    .start-h1-linia + .start-h1-linia > span { animation-delay: 200ms; }
    .start-hero .start-wstep { animation: start-wjazd 600ms var(--krzywa) 420ms both; }
    .start-hero .start-do-rzeczy { animation: start-wjazd 600ms var(--krzywa) 490ms both; }
    .start-hero .start-drobne { animation: start-wjazd 600ms var(--krzywa) 560ms both; }
    .start-pasek .znak-kropla { animation: start-kropla 650ms var(--krzywa) 700ms both; }
    .start-wydruk .start-kartka { animation: start-kartka 950ms var(--krzywa) 220ms both; }
    .start-wydruk .start-kartka-foto { animation: start-foto 1500ms var(--krzywa) 220ms both; }
    .start-kolko-sciezka { animation: start-rysuj 900ms var(--krzywa) 1050ms both; }
    .start-notatka { animation: start-notatka 500ms var(--krzywa) 1950ms both; }
    .start-notatka .start-pin { animation: start-wbij 550ms var(--krzywa) 2150ms both; }
}
@media (prefers-reduced-motion: reduce) {
    .start-wydruk .start-kartka { animation: start-przenikanie 400ms ease both; }
    .start-notatka { animation: start-przenikanie 400ms ease 300ms both; }
}
@keyframes start-linia { from { transform: translateY(110%); } }
@keyframes start-wjazd { from { opacity: 0; transform: translateY(10px); } }
@keyframes start-kropla {
    from { opacity: 0; transform: translateY(-0.9em); }
    70%  { opacity: 1; transform: translateY(0.05em); }
}
/* `to` pominiete: koncem jest wlasny `rotate` kartki (-0.6deg, a na telefonie brak). */
@keyframes start-kartka { from { opacity: 0; translate: 0 36px; rotate: -3.5deg; } }
@keyframes start-foto { from { transform: scale(1.08); } }
@keyframes start-rysuj { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes start-notatka { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes start-wbij {
    from { opacity: 0; transform: translateY(-14px) scale(0.9); }
    70%  { opacity: 1; transform: translateY(2px); }
}
@keyframes start-przenikanie { from { opacity: 0; } }

@media print {
    .start *, .start *::before, .start *::after { animation: none !important; }
}

/* --- konto: rejestracja i logowanie (kierunek „Dlugopis") -----------------
   Formularz po lewej na jasnym, po prawej grafitowy panel z tym samym wydrukiem
   i pinezka co na stronie glownej. Na telefonie panel znika: liczy sie pole
   e-mail nad klawiatura. */
.konto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    background: var(--tlo);
}

@media (min-width: 62rem) {
    .konto { grid-template-columns: minmax(28rem, 40rem) minmax(0, 1fr); }
}

.konto-formularz {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 5.5rem);
}

.konto-do-domu { align-self: flex-start; text-decoration: none; }
.konto-srodek { margin-block: auto; display: flex; flex-direction: column; gap: 1.25rem; width: 100%; max-width: 26rem; }
.konto-srodek h1 { margin: 0; font-size: clamp(2.25rem, 1.6rem + 1.8vw, 2.9rem); line-height: 1.05; letter-spacing: -0.02em; }
.konto-wstep { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--tresc-cicha); }

.konto-pola { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 0.5rem; }
.konto-pole { display: flex; flex-direction: column; gap: 0.45rem; }
.konto-pole label { font-weight: 600; }
.konto-pole input, .konto-pole select, .konto-pole textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 3.25rem;
    padding: 0 0.9rem;
    font: inherit;
    font-size: 1.0625rem;
    color: var(--tresc);
    background: var(--karta);
    border: 1.5px solid var(--linia);
    border-radius: 10px;
}
.konto-pole textarea { min-height: 10rem; padding-block: 0.8rem; resize: vertical; }
.konto-pole select { padding-right: 0.5rem; }
.konto-pole input:focus, .konto-pole select:focus, .konto-pole textarea:focus { outline: none; border-color: var(--akcent-tekst); box-shadow: 0 0 0 3px var(--akcent-tlo); }
/* pulapka na boty w /kontakt: poza ekranem, nie `display: none` (czesc botow to pomija) */
.kontakt-pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.konto-pod-polem { margin: 0; font-size: 0.9rem; color: var(--tresc-cicha); }
.konto-blad { margin: 0; color: var(--uwaga); font-weight: 600; }

.konto-przycisk {
    min-height: 3.4rem;
    border: 0;
    border-radius: 12px;
    background: var(--akcent);
    color: var(--na-akcencie);
    font: inherit;
    font-weight: 600;
    font-size: 1.0625rem;
    cursor: pointer;
    transition: background var(--ruch) var(--krzywa), transform var(--ruch-krotki) var(--krzywa);
}
.konto-przycisk:hover { background: var(--akcent-tekst); color: #fff; }
.konto-przycisk:active { transform: translateY(1px); }
.konto-przycisk:focus-visible { outline: 3px solid var(--akcent-tekst); outline-offset: 3px; }

/* „Kontynuuj z Google" nad formularzem — obrysowany, zeby glownym przyciskiem
   ekranu zostal formularz, a Google byl rowna, ale druga droga. */
.konto-google {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-height: 3.4rem; margin-top: 0.5rem;
    border: 1px solid var(--linia); border-radius: 12px;
    color: inherit; font-weight: 600; font-size: 1.0625rem; text-decoration: none;
    transition: border-color var(--ruch) var(--krzywa);
}
.konto-google:hover { border-color: var(--akcent-tekst); }
.konto-google:focus-visible { outline: 3px solid var(--akcent-tekst); outline-offset: 3px; }
.konto-albo { display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 0 0; color: var(--tresc-cicha); font-size: 0.9rem; }
.konto-albo::before, .konto-albo::after { content: ""; flex: 1; border-top: 1px solid var(--linia); }

.konto-przelacz { margin: 0; color: var(--tresc-cicha); }
.konto-przelacz a { font-weight: 600; }
.konto-drobne { margin: 0; font-size: 0.9rem; color: var(--tresc-cicha); }

.konto-obok {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
    padding: clamp(2rem, 5vw, 5rem);
    background: var(--ciemna);
    color: var(--na-ciemnej);
}
@media (min-width: 62rem) { .konto-obok { display: flex; } }

.konto-wydruk { position: relative; margin: 0; max-width: 32rem; }
.konto-kartka { rotate: -1.2deg; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 55%); }
.konto-kartka .start-kartka-cennik { margin-top: 1.25rem !important; }
.konto-zmienione { background: linear-gradient(transparent 38%, rgb(242 183 5 / 40%) 38%, rgb(242 183 5 / 40%) 92%, transparent 92%); margin-inline: -6px; padding-inline: 6px; }
.konto-notatka {
    position: absolute;
    right: -2rem;
    bottom: -1.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 0.9rem;
    background: #fff;
    color: #1e2126;
    border-radius: 12px;
    box-shadow: 0 14px 30px -10px rgb(0 0 0 / 50%);
    font-size: 0.95rem;
}

.konto-kroki { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; max-width: 30rem; font-size: 1.125rem; }
.konto-kroki li { display: flex; gap: 0.9rem; align-items: baseline; }
.konto-kroki span { color: #9db0f2; font-weight: 700; }

/* --- pasek ekranow aplikacji (za kontem) ----------------------------------
   Jeden pasek na krok 1, czekanie, wybor i „Moje strony": znak po lewej, gdzie
   jestem po prawej. Bez nawigacji marketingowej — klient jest juz w srodku. */
.aplikacja-pasek {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    min-height: 4.25rem;
    padding: 0.5rem clamp(1.25rem, 3vw, 3rem);
    background: var(--tlo);
    border-bottom: 1px solid var(--linia);
}
.aplikacja-znak { text-decoration: none; }
.aplikacja-sciezka { color: var(--tresc-cicha); font-size: 0.95rem; }
.aplikacja-sciezka a { color: var(--tresc); }
.aplikacja-sciezka strong { color: var(--tresc); font-weight: 600; }

/* Postep trzech krokow — kreski, nie kolka z numerami: kolejnosc widac bez
   cyfr, a podpis obok mowi ja slowami. */
.postep { display: flex; align-items: center; gap: 0.5rem; }
.postep-krok { width: 4.5rem; height: 4px; border-radius: 2px; background: var(--linia); }
.postep-krok.zrobiony { background: var(--akcent-tekst); }
.postep-podpis { margin-left: 0.6rem; font-size: 0.9rem; color: var(--tresc-cicha); }

/* --- krok 1: opis firmy (za kontem) --------------------------------------- */
.nowa {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem 4.5rem;
    max-width: 75rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem) 4rem;
}
@media (min-width: 62rem) { .nowa { grid-template-columns: minmax(0, 1fr) 22rem; } }

.nowa-glowna { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.nowa h1 { margin: 0; font-size: clamp(2.25rem, 1.5rem + 2vw, 2.9rem); line-height: 1.05; letter-spacing: -0.02em; }

.nowa-formularz { display: flex; flex-direction: column; gap: 0.6rem; }
.nowa-formularz label { margin: 0.4rem 0 0.2rem; color: var(--tresc); font-weight: 600; font-size: 1.0625rem; }
.nowa-formularz textarea, .nowa-formularz input {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 1.15rem;
    font: inherit;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--tresc);
    background: var(--karta);
    border: 1.5px solid var(--linia);
    border-radius: 12px;
}
.nowa-formularz textarea { min-height: 15rem; resize: vertical; }
/* P6: pole zdjec ma wygladac jak przycisk do wyboru, a nie jak pole do pisania (iPhone). */
.nowa-formularz input[type="file"] { padding: 0.6rem; border-style: dashed; cursor: pointer; color: var(--tresc-cicha); }
.nowa-formularz input[type="file"]::file-selector-button {
    margin-right: 0.9rem; padding: 0.7rem 1.1rem; border: 0; border-radius: 10px;
    background: var(--akcent); color: var(--na-akcencie); font: inherit; font-weight: 600; cursor: pointer;
}
.nowa-formularz textarea:focus, .nowa-formularz input:focus { outline: none; border-color: var(--akcent-tekst); box-shadow: 0 0 0 3px var(--akcent-tlo); }
.nowa-pod-polem { margin: 0; font-size: 0.95rem; color: var(--tresc-cicha); }
.nowa-blad { margin: 0; color: var(--uwaga); font-weight: 600; }

.nowa-akcje { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 0.75rem; }
.nowa-przycisk {
    min-height: 3.5rem;
    padding: 0 1.75rem;
    border: 0;
    border-radius: 12px;
    background: var(--akcent);
    color: var(--na-akcencie);
    font: inherit;
    font-weight: 600;
    font-size: 1.0625rem;
    cursor: pointer;
    transition: background var(--ruch) var(--krzywa), transform var(--ruch-krotki) var(--krzywa);
}
.nowa-przycisk:hover { background: var(--akcent-tekst); color: #fff; }
.nowa-przycisk:active { transform: translateY(1px); }
.nowa-przycisk:focus-visible { outline: 3px solid var(--akcent-tekst); outline-offset: 3px; }
.nowa-drobne { margin: 0; color: var(--tresc-cicha); font-size: 0.95rem; line-height: 1.45; }

/* Lista „czego warto napisac". Kolka puste bez JS; z JS (`.zywa`) wypelniaja
   sie na niebiesko, gdy w tekscie jest to, czego dotycza. */
.nowa-lista {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.6rem 1.75rem;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: 16px;
}
@media (min-width: 62rem) { .nowa-lista { margin-top: 7.5rem; } }
.nowa-lista h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
.nowa-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; font-size: 1.0625rem; }
.nowa-lista li { display: flex; gap: 0.75rem; align-items: center; color: var(--tresc-cicha); }
.nowa-lista li::before {
    content: "";
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    border: 1.5px solid var(--linia);
    box-sizing: border-box;
    transition: background var(--ruch) var(--krzywa), border-color var(--ruch) var(--krzywa);
}
.nowa-lista li.jest { color: var(--tresc); }
.nowa-lista li.jest::before {
    border-color: var(--akcent-tekst);
    background: var(--akcent-tekst) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.nowa-lista-drobne { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--linia); font-size: 0.9rem; color: var(--tresc-cicha); }
/* Bez JS nic sie nie odhacza — wtedy zdanie „odhacza sie samo" byloby nieprawda. */
.nowa-lista:not(:has(.zywa)) .nowa-lista-samo { display: none; }

/* --- edytor: pole na uwage do calej strony ---------------------------------
   Stoi NAD lista uwag, bo jest wejsciem, a nie podsumowaniem — i dlatego, ze
   klient, ktory nie wie, gdzie kliknac, ma tu miejsce, w ktorym po prostu pisze. */
/* Wysylka przyklejona do dolu przewijanego panelu: przycisk, potwierdzenie i koszt
   zawsze w zasiegu, ile by nie bylo nad nimi raportu i historii. Ujemne marginesy
   wyrownuja tlo do krawedzi panelu (padding `.panel-tresc`). */
.panel-wyslij {
    position: sticky;
    bottom: -2rem;
    z-index: 2;
    margin: 1rem -1.1rem 0;
    padding: 0.75rem 1.1rem 2rem;
    background: var(--karta);
    border-top: 1px solid var(--linia);
}
.panel-wyslij .szeroki { margin-top: 0; }

/* Wysylka w kolorze pinezki (decyzja Przemka po ponownej krytyce 24.10): przycisk
   z najwazniejsza liczba nie moze wygladac jak „Anuluj". Hover miesza w strone tekstu
   — w jasnym motywie ciemniej, w ciemnym jasniej; kontrast z `--na-akcencie` zostaje. */
.panel-wyslij button.glowny,
.panel-wyslij a.glowny {
    color: var(--na-akcencie);
    background: var(--akcent-tekst);
    border-color: var(--akcent-tekst);
}
.panel-wyslij button.glowny:hover:not(:disabled),
.panel-wyslij a.glowny:hover {
    color: var(--na-akcencie);
    background: color-mix(in srgb, var(--akcent-tekst) 85%, var(--tresc));
    border-color: color-mix(in srgb, var(--akcent-tekst) 85%, var(--tresc));
}
.panel-wyslij .potwierdz-runde { margin-top: 0; }

.panel-prompt-otworz {
    width: 100%;
    margin: 0.25rem 0 1.25rem;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    color: var(--tresc-cicha);
    background: none;
    border: 1px dashed var(--linia);
    border-radius: var(--promien);
    cursor: pointer;
}
.panel-prompt-otworz:hover { color: var(--tresc); border-color: var(--tresc-cicha); }

.panel-prompt { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.panel-prompt label { font-weight: 600; font-size: 0.9rem; }

.panel-prompt textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 0.6rem 0.7rem;
    color: var(--tresc);
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    resize: vertical;
}

.panel-prompt-stopka {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--tresc-cicha);
}

.panel-prompt-stopka button { padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.panel-prompt-stopka button:disabled { color: var(--tresc-cicha); cursor: default; opacity: 0.65; }

/* --- przelacznik „Komputer / Telefon" --------------------------------------
   Jeden element z dwoma polami, nie dwa luzne przyciski. Ta sama rynienka co
   przelacznik trybu w kroku 1 i w edytorze (`.scena-tryb`) — klient uczy sie
   jej raz. */
.tryb-widoku {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--linia) 45%, var(--tlo));
}

.tryb-widoku button {
    min-height: 2.4rem;
    padding: 0 1.1rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--tresc-cicha);
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
}
.tryb-widoku button:hover { color: var(--tresc); }
.tryb-widoku button.wybrany { font-weight: 600; color: var(--tresc); background: var(--karta); box-shadow: 0 1px 2px rgb(30 33 38 / 10%); }

/* --- edytor: co plywa nad strona klienta ----------------------------------
   Dwa drobiazgi w rogach sceny. Nie w panelu, bo dotycza STRONY, nie naszego
   spisu uwag — i maja dzialac takze wtedy, gdy panel jest zwiniety. */
.scena-podpowiedz {
    position: absolute;

    /* NA DOLE, przy pasku trybu widoku, a nie w lewym gornym rogu: tam zaslaniala
       menu strony klienta (zmierzone na prawdziwej stronie — „USLUGI" chowalo sie
       pod podpowiedzia). Kazde miejsce nad cudza strona cos zaslania, ale dol jest
       najmniej zajety, a nasze rzeczy trzymaja sie wtedy razem. */
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    /* Tlo jest zawsze biale (lezy na stronie klienta), wiec kolor tez staly — token
       `--tresc-cicha` w ciemnym motywie dawal 2,1:1 (krytyka 24.10). */
    color: #5b6068;
    background: rgb(255 255 255 / 94%);
    border-radius: var(--promien);
    box-shadow: var(--cien);
}


/* Naglowek listy uwag niesie LICZBE, bo lista bywa dluzsza niz panel. */
.panel-etykieta-liczba { display: flex; align-items: center; gap: 0.5rem; }

/* --- krok 3: moje strony -------------------------------------------------- */
/* Lista, nie kokpit. Klient wchodzi tu po to, zeby wrocic do jednej ze swoich stron
   albo zaczac nowa — wiec te dwie rzeczy sa jedynymi, ktore rzucaja sie w oczy.
   Ani jednej liczby o kosztach (kontrakt 4.1); licznik rund jest, bo jego klient
   widziec MA. */
.moje { max-width: 78rem; margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 5vw, 4rem) 4rem; }

.moje-naglowek {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.moje-naglowek h1 { margin: 0; font-size: clamp(2.25rem, 1.6rem + 1.8vw, 2.9rem); line-height: 1.05; letter-spacing: -0.02em; }

.moje-konto { display: flex; flex-wrap: nowrap; gap: 0.75rem 1rem; align-items: center; }
.moje-kto { color: var(--tresc-cicha); font-size: 0.95rem; }
.moje-wyloguj { margin: 0; }
.moje-wyloguj button { min-height: 2.5rem; padding: 0 0.9rem; font: inherit; font-size: 0.95rem; background: none; border: 1px solid var(--linia); border-radius: 10px; color: var(--tresc); cursor: pointer; }
.moje-wyloguj button:hover { border-color: var(--tresc-cicha); }
@media (max-width: 30rem) { .moje-kto, .moje-konto .motyw-przelacznik { display: none; } }

/* Siatka kart, nie lista wierszy: klient rozpoznaje swoje strony po WYGLADZIE,
   a nie po opisie, ktory sam kiedys wpisal. `auto-fill` z minimum 19rem daje trzy
   karty na monitorze i jedna na telefonie, bez ani jednego progu w pikselach. */
.moje-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 1.75rem;
}

.moje-karta {
    display: flex;
    flex-direction: column;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    box-shadow: var(--cien);
    overflow: hidden;
    transition: transform var(--ruch-krotki, 140ms) var(--krzywa, ease),
                box-shadow var(--ruch, 240ms) var(--krzywa, ease);
}

.moje-karta:hover { transform: translateY(-2px); box-shadow: var(--cien-cieply); }

/* MINIATURA. Ta sama sztuczka co przy szkicach w kreatorze: strona renderuje sie
   w szerokosci komputera i jest ZMNIEJSZANA w calosci, wiec proporcje zostaja te
   same, co u klienta na monitorze. Waski iframe ulozylby strone jak na telefonie
   i miniatura klamalaby o tym, jak strona wyglada. */
.moje-podglad {
    position: relative;
    height: 13.5rem;
    background: #fff;
    border-bottom: 1px solid var(--linia);
    overflow: hidden;
}

.moje-rama {
    container-type: inline-size;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.moje-rama {
    /* Szerokosc renderowania jako DLUGOSC, nie liczba: `scale` potrzebuje liczby,
       a `calc(100cqw / 1280)` daje dlugosc i cala regula jest odrzucana po cichu —
       miniatura renderuje sie wtedy w skali 1:1 i widac sam lewy gorny rog. Zlapane
       dopiero pomiarem w przegladarce (`scale` = "none"), bo CSS nie ma jak o tym
       powiedziec. Ten sam idiom co `--szerokosc-strony` przy szkicach w kreatorze. */
    --szer-podgladu: 1280px;
}

.moje-rama iframe {
    /* Nieklikalna z zasady: to obrazek, a nie druga aplikacja w srodku naszej.
       Klikniecie ma otworzyc edytor, nie strone klienta w karcie listy. */
    pointer-events: none;
    border: 0;
    /* O pasek przewijania szerszy, niz wynika ze skali: strona klienta jest dluga,
       wiec przegladarka rysuje w ramce suwak, ktory w miniaturze wyglada jak jasny
       pasek przy krawedzi. Nadmiar obcina `overflow: hidden` ramki. */
    width: calc(var(--szer-podgladu) + 1rem);

    /* Wysokosc jak PRAWDZIWE okno (16:10), a nie „cztery ekrany w dol" jak przy
       szkicach w kreatorze. Strony klienta uzywaja `100vh` w pierwszej sekcji:
       przy iframie wysokim na 3200 px ta sekcja ma 3200 px i miniatura pokazuje
       sam pasek nawigacji nad pustka. Zlapane na zrzucie, nie w tescie. */
    height: 800px;
    transform-origin: top left;
    scale: calc(100cqw / var(--szer-podgladu));
}

.moje-bez-podgladu {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0;
    color: var(--tresc-cicha);
    font-size: 0.9rem;
    background: var(--tlo);
}

.moje-znacznik {
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tresc);
    background: rgb(255 255 255 / 92%);
    border-radius: 999px;
    box-shadow: var(--cien);
}

.moje-znacznik-ok { color: #14532d; background: #dcfce7; }
.moje-znacznik-uwaga { color: #7c2d12; background: #ffedd5; }

/* Opis klienta bywa dluga notatka o firmie — w karcie ma byc rozpoznawalny, nie
   kompletny. Dwie linie, reszta ucieta w CSS; czytnik ekranu dostaje caly tekst. */
.moje-opis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.4;
}
.moje-drobne { margin-top: 0.35rem; color: var(--tresc-cicha); font-size: 0.9rem; }

/* Kafel „Druga firma?" — przerywana ramka, bo to MIEJSCE na strone, a nie strona. */
.moje-kolejna a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 100%;
    min-height: 16rem;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--tresc);
    border: 1.5px dashed var(--linia);
    border-radius: 14px;
    transition: border-color var(--ruch) var(--krzywa), background var(--ruch) var(--krzywa);
}
.moje-kolejna a:hover { border-color: var(--akcent-tekst); background: var(--akcent-tlo); }
.moje-kolejna span:last-child { color: var(--tresc-cicha); font-size: 0.95rem; }
.moje-kolejna-plus {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--akcent-tekst);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.moje-tresc { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 1rem 1.1rem 1.1rem; }

/* Licznik w karcie jest jednym z wierszy opisu, a nie podpisem pod przyciskiem
   jak w edytorze — stad wyrownanie do lewej i mniejszy odstep. */
.moje-karta .rundy { margin: 0.1rem 0 0; font-size: 0.85rem; text-align: left; }

.moje-przyciski { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }

.moje-pobierz {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--tresc);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    text-decoration: none;
}

.moje-pobierz:hover { border-color: var(--tresc-cicha); }

/* Usuwanie strony: tekst, nie przycisk, i na koncu wiersza — daleko od „Otwórz". */
.moje-usun {
    align-self: center;
    margin-left: auto;
    padding: 0.5rem 0.25rem;
    font-size: 0.9rem;
    color: var(--tresc-cicha);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--linia);
}
.moje-usun:hover { color: var(--uwaga); text-decoration-color: currentColor; }

.moje-stopka {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--linia);
    font-size: 0.9rem;
}
.moje-stopka a { color: var(--tresc-cicha); text-underline-offset: 0.2em; }
.moje-stopka a:hover { color: var(--uwaga); }

.moje-pusto {
    padding: clamp(2rem, 6vw, 4rem) 1.5rem;
    text-align: center;
    background: var(--karta);
    border: 1px dashed var(--linia);
    border-radius: var(--promien);
}

.moje-pusto h2 { margin: 0 0 0.6rem; }
.moje-pusto p { margin: 0 auto 1.5rem; max-width: 40ch; color: var(--tresc-cicha); }

/* `.glowny` nigdzie w tym pliku nie stoi samodzielnie — jest zawsze dopieciem do
   `button`. Link wygladajacy jak przycisk musi wiec dostac swoj styl, inaczej
   „Nowa strona" jest golym odnosnikiem. */
.moje a.glowny {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1.2rem;
    font-weight: 600;
    color: var(--na-akcencie);
    text-decoration: none;
    background: var(--akcent);
    border: 1px solid var(--akcent);
    border-radius: 10px;
    white-space: nowrap;
    transition: background var(--ruch) var(--krzywa);
}

.moje a.glowny:hover { background: var(--akcent-tekst); border-color: var(--akcent-tekst); color: #fff; }
.moje-naglowek a.glowny { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1.0625rem; border-radius: 12px; }

/* Wyjscie z edytora na liste stron. Do kont edytor nie mial dokad wyprowadzac,
   wiec ten link jest tu nowy, a nie przeniesiony. */
/* Dwa wyjscia z edytora, oba w tej samej formie. `.odbior-edycja` bez wlasnej
   reguly renderowalo sie jako DOMYSLNY NIEBIESKI LINK obok ostylowanego
   „Wszystkie moje strony" — zobaczone na zrzucie w motywie ciemnym, gdzie
   niebieski na prawie czarnym tle jest w dodatku nieczytelny. */
/* `block`, nie `inline-block`: to sa DWA osobne wyjscia, a obok siebie czytaja sie
   jak jedno zdanie („Popraw to sam — za darmo Wszystkie moje strony"). Przy dluzszym
   napisie lamalo sie samo i wygladalo dobrze przez przypadek — zobaczone na zrzucie
   dopiero po skroceniu tekstu. `width: max-content`, zeby podkreslenie przy najechaniu
   nie ciagnelo sie przez cala szerokosc panelu. */
.odbior-moje,
.odbior-edycja {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 1rem;
    color: var(--akcent-tekst);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

/* Ten link prowadzi do jedynej drogi zmiany, ktora NIC NIE KOSZTUJE, wiec stoi
   nad „Wszystkie moje strony" i dostaje wlasny odstep, a nie podwojny. */
.odbior-edycja { margin-bottom: 0; }

.odbior-moje:hover,
.odbior-edycja:hover { text-decoration: underline; }

/* Instrukcja wgrania paczki na hosting. Zwijana, bo dotyczy tylko tych klientow,
   ktorzy nie wiedza, co zrobic z archiwum — a ci, ktorzy wiedza, maja tu przycisk
   pobierania i link i nie chca miedzy nimi sciany tekstu. */
.odbior-jak { margin-top: 0.9rem; font-size: 0.9rem; }

.odbior-jak summary {
    cursor: pointer;
    color: var(--akcent-tekst);
    font-weight: 600;
}

.odbior-jak ol { margin: 0.7rem 0 0; padding-left: 1.2rem; }
.odbior-jak li { margin-bottom: 0.45rem; color: var(--tresc-cicha); }
.odbior-jak p { margin: 0.7rem 0 0; color: var(--tresc-cicha); }

/* Nazwa katalogu ma byc do PRZEPISANIA bez pomylki — „public_html" pisane tym samym
   krojem co reszta zdania gubi podkreslnik przy szybkim czytaniu. */
.odbior-jak code {
    padding: 0.05rem 0.3rem;
    font-size: 0.95em;
    background: var(--tlo);
    border: 1px solid var(--linia);
    border-radius: 4px;
}

/* --- przelacznik motywu ----------------------------------------------------
   Dwa przyciski widoczne zawsze, bez JavaScriptu. Ktory jest AKTYWNY, pokazuje
   CSS — tymi samymi trzema regulami co cala paleta, wiec podswietlenie nie moze
   rozjechac sie z tym, co klient naprawde widzi.

   Domyslnie (brak wyboru) nie podswietlamy zadnego: serwer nie wie, co ustawil
   system klienta, a zgadywanie konczyloby sie strzalka pokazujaca w zla strone. */
.motyw-przelacznik { display: inline-flex; gap: 0.15rem; margin: 0; }

.motyw-przelacznik button {
    padding: 0.35rem 0.55rem;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--tresc-cicha);
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
}

.motyw-przelacznik button:hover { color: var(--tresc); border-color: var(--linia); }

/* Aktywny w motywie jasnym — czyli gdy klient wymusil jasny ALBO gdy system jest
   jasny i klient niczego nie wymusil. */
:root[data-motyw="jasny"] .motyw-jasny { color: var(--akcent-tekst); border-color: var(--linia); }
:root[data-motyw="ciemny"] .motyw-ciemny { color: var(--akcent-tekst); border-color: var(--linia); }

@media (prefers-color-scheme: dark) {
    :root:not([data-motyw="jasny"]) .motyw-ciemny { color: var(--akcent-tekst); border-color: var(--linia); }
}

@media (prefers-color-scheme: light) {
    :root:not([data-motyw="ciemny"]) .motyw-jasny { color: var(--akcent-tekst); border-color: var(--linia); }
}

/* --- reczna edycja tresci: panel `/edycja/{id}` --------------------------- */
/* Ekran renderowany STATYCZNIE (poza routerem Blazora), wiec zadnego stanu
   w JS — kazdy formularz to pelne zadanie. Stad osobna karta na kazde pole. */
.edycja-naglowek { margin-bottom: 2rem; }
.edycja-naglowek h1 { margin: 0 0 0.5rem; }

/* Zdanie o tym, ze to nic nie kosztuje, jest TRESCIA tej funkcji, nie ozdoba:
   klient przychodzi tu z ekranu, na ktorym kazda zmiana zabiera mu runde. */
.edycja-darmo {
    margin: 0;
    color: var(--tresc-cicha);
    background: var(--akcent-tlo);
    border: 1px solid var(--akcent-linia);
    border-radius: var(--promien);
    padding: 0.8rem 1rem;
    max-width: 60ch;
}

.edycja-blad {
    margin: 0 0 1.5rem;
    padding: 0.8rem 1rem;
    border-radius: var(--promien);
    border: 1px solid var(--akcent-linia);
    background: var(--akcent-tlo);
    color: var(--uwaga);
    max-width: 60ch;
}

.edycja-podpowiedz { color: var(--tresc-cicha); max-width: 55ch; }

.edycja-pole, .edycja-zdjecie {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
    background: var(--karta);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--cien);
    max-width: 44rem;
}

.edycja-pole label, .edycja-zdjecie label { display: block; width: 100%; }
.edycja-etykieta {
    display: block;
    font-size: 0.82rem;
    color: var(--tresc-cicha);
    margin-bottom: 0.3rem;
}

.edycja-pole textarea {
    width: 100%;
    font: inherit;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    background: var(--tlo);
    color: var(--tresc);
    resize: vertical;
}

/* Miniatura, zeby klient wiedzial, KTORE zdjecie podmienia — sama nazwa pliku
   nic mu nie mowi, bo nadalismy ja my. */
.edycja-miniatura {
    max-width: 12rem;
    max-height: 8rem;
    border-radius: var(--promien);
    border: 1px solid var(--linia);
}

.edycja-wyjscie { margin-top: 2rem; }

/* Komunikat w edytorze o recznych wartosciach, ktore nie przetrwaly rundy. */
.panel-zgubione {
    border: 1px solid var(--akcent-linia);
    background: var(--akcent-tlo);
    border-radius: var(--promien);
    padding: 0.8rem 1rem;
    margin-top: 1rem;
}

.panel-zgubione ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.panel-zgubione p { margin: 0; font-size: 0.9rem; }

/* Wersja reczna na liscie historii — musi byc odrozalna od rundy modelu,
   inaczej powrot do wersji jest zgadywaniem (kontrakt 5.1). */
.znacznik-reczna {
    font-size: 0.78rem;
    color: var(--akcent-tekst);
    border: 1px solid var(--akcent-linia);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    white-space: nowrap;
}

/* Druga droga zmiany, w dymku pod przyciskami: „opisz modelowi" zuzywa poprawke
   z puli, „popraw sam" nie kosztuje nic. Celowo NIE wyglada jak przycisk glowny —
   to alternatywa, nie domyslne dzialanie. */
.dymek-sam {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.86rem;
    color: var(--akcent-tekst);
    text-decoration: none;
    border-bottom: 1px solid var(--akcent-linia);
}

.dymek-sam:hover { border-bottom-color: var(--akcent-tekst); }

/* --- sprawdzanie domeny (sekcja „Odbierz swoją stronę") -------------------- */
.odbior-domena { margin-top: 1.5rem; }
.odbior-domena label { display: block; font-size: 0.9rem; margin-bottom: 0.4rem; }

.odbior-domena-pole { display: flex; gap: 0.5rem; }
.odbior-domena-pole input {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    background: var(--tlo);
    color: var(--tresc);
}

.odbior-domena-wyniki {
    list-style: none;
    margin: 0.8rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.odbior-domena-wyniki li {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--promien);
    border: 1px solid var(--linia);
    font-size: 0.9rem;
}

/* Kolor NIE jest jedynym nosnikiem informacji — stan jest zawsze napisany slowem.
   Daltonizm to nie przypadek brzegowy, a tu chodzi o decyzje zakupowa klienta. */
.odbior-domena-wyniki .domena-wolna { border-color: var(--ok); }
.odbior-domena-wyniki .domena-wolna span { color: var(--ok); font-weight: 600; }
.odbior-domena-wyniki .domena-zajeta span { color: var(--tresc-cicha); }
.odbior-domena-wyniki .domena-nie-wiadomo span { color: var(--uwaga); }

.odbior-domena-dalej { margin-top: 0.6rem; font-size: 0.85rem; color: var(--tresc-cicha); }

/* --- strona glowna: ruch ----------------------------------------------------
   Zasady, ktore obowiazuja kazda animacje w tym pliku:

   - nic nie trwa dluzej niz ~0,5 s. Dluzsze nie wyglada „plynniej", tylko
     powolnie, a klient czeka na tresc, nie na nasz efekt,
   - ruszamy WYLACZNIE `transform` i `opacity`. Kazda inna wlasciwosc (szerokosc,
     wysokosc, margines) kaze przegladarce przeliczyc uklad w kazdej klatce,
   - krzywa wykladnicza, nie `ease` i nie odbicie. Rzeczy w swiecie hamuja
     gladko; odbicie zwraca uwage na sama animacje zamiast na tresc,
   - wejscia sekcji jada na `animation-timeline: view()`, czyli BEZ JS.
     Gdzie przegladarka tego nie zna, animacji po prostu nie ma i tresc stoi
     widoczna od pierwszej klatki. To cala obsluga braku wsparcia: zaden
     obserwator, zaden skrypt, ktory moze nie dojsc, i zero ryzyka, ze klient
     zobaczy pusta strone, bo cos sie nie wykonalo.

   Dlaczego w ogole: „trzy rozne kierunki" to obietnica, ktorej zdanie nie udzwiga
   tak jak obrazek, na ktorym te trzy okna SIE SKLADAJA. Reszta ruchu to juz tylko
   potwierdzanie klikniec. */

:root {
    --ruch-krotki: 140ms;
    --ruch: 240ms;
    --ruch-wejscie: 460ms;

    /* ease-out-quint i ease-out-expo. Nazwane po ROLI, nie po liczbach. */
    --krzywa: cubic-bezier(0.22, 1, 0.36, 1);
    --krzywa-zdecydowana: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- znak aplikacji i obrazek na ekranach konta ----------------------------
   Znak jest JEDNYM komponentem (`Znak.razor`) i jednym zestawem regul. Wczesniej
   w trzech ekranach staly trzy rozne warianty, wiec „nasz znak" nie istnial jako
   jedna rzecz — a marke poznaje sie po tym, ze wszedzie wyglada tak samo. */
.znak {
    display: inline-flex;
    align-items: center;
    color: var(--tresc);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* Logotyp „vibesite": slowo w 800 i ciasnym rozstawie — przy 400 i normalnym
   rozstawie to bylby zwykly tekst, a nie znak. */
.znak-slowo {
    font-family: "Schibsted Grotesk", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.045em;
}

/* „i" bez kropki z pinezka nad nim. Wymiary w `em`, wiec kropla rosnie razem ze
   slowem. Kolor kropli to niebieski dlugopisu z tokenu — ten sam, co pinezki. */
.znak-i { position: relative; display: inline-block; }
.znak-kropla {
    position: absolute;
    left: 50%;
    /* Na wysokosci naturalnej kropki drugiego „i" (zmierzone przy 8rem), tylko
       troche wieksza — ma byc widac, ze to pinezka, a nie zwykla kropka. */
    top: 0.055em;
    width: 0.245em;
    height: 0.245em;
    translate: -48% 0;
    background: var(--akcent-tekst);
    border-radius: 50% 50% 50% 0.04em;
}

.znak.jasny { color: var(--na-ciemnej); }
.znak.jasny .znak-kropla { background: #6f86e6; }

.znak-duzy { font-size: 2rem; }

/* Sama ikona: grafitowy kwadrat z „v" i kropla w rogu. Tak samo jak favicon. */
.znak-ikona {
    position: relative;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 0.38em;
    background: var(--ciemna);
    color: #fff;
    font-size: 1.25rem;
}
.znak-ikona-v { font-weight: 800; letter-spacing: -0.04em; margin-top: -0.12em; }
.znak-ikona-kropla {
    position: absolute;
    right: 0.22em;
    top: 0.22em;
    width: 0.36em;
    height: 0.36em;
    background: #4f6ce0;
    border-radius: 50% 50% 50% 0.05em;
}

/* --- uwagi na wzor komentarzy przy artefaktach ----------------------------
   Trzy elementy, ktore musza sie zgadzac ze soba co do koloru i numeru:
   obrys pod kursorem w podgladzie, pinezka z numerem na stronie i pozycja na
   liscie zmian. Warstwa narzedziowa jest NIEBIESKA (obrys, pinezka, wskazany
   blok), czyli osobna od marki i od strony klienta — tak jak narzedzia
   przegladarki: klient od razu widzi, co jest jego strona, a co naszym narzedziem.
   Numer w okienku, na pinezce i na liscie to ten sam numer. */
/* Okienko WYRASTA z pinezki: stoi na prawo od niej, wiec rosnie od lewego gornego
   rogu, z lekkim przestrzeleniem na koncu — tak jak dymek przy komentarzu w
   artefaktach. Tresc wchodzi chwile pozniej, zeby ruch czytal sie jako „otwarcie". */
.dymek {
    transform-origin: 0 0.75rem;
    animation: dymek-wjazd 240ms cubic-bezier(0.34, 1.35, 0.64, 1) both;
}

.dymek > * { animation: dymek-tresc 200ms 80ms ease-out both; }

/* Brak miejsca pod elementem: okienko NAD nim. `--y` to wtedy gora elementu,
   a cale okienko przesuwamy o wlasna wysokosc w gore. */
.dymek-grupa.nad {
    top: max(0.5rem, var(--y, 0px));
    translate: 0 calc(-100% - 0.5rem);
    align-items: flex-end;
}
.dymek-grupa.nad .dymek { transform-origin: 0 100%; }

/* Klik w inne miejsce przy otwartym okienku: okienko przeplywa, nie skacze.
   Klasa jest tylko przy kliknieciu — przy przewijaniu jej nie ma (Editor.Przesun). */
.dymek-grupa.plynnie {
    transition: left 200ms cubic-bezier(0.2, 0.8, 0.2, 1), top 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes dymek-wjazd {
    from { opacity: 0; transform: translateX(-8px) scale(0.85); }
    to   { opacity: 1; transform: none; }
}

@keyframes dymek-tresc {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

.dymek-naglowek {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}

/* Ten sam ksztalt co pinezka w podgladzie (kropla z jednym ostrym rogiem), zeby
   klient zobaczyl w okienku TO, co za chwile pojawi sie na jego stronie. */
.dymek-numer,
.uwaga-numer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: #2541b2;
    border-radius: 50% 50% 50% 3px;
}

.dymek-tytul { font-weight: 600; color: var(--tresc); }

.dymek textarea {
    min-height: 4.5rem;
    border-color: var(--linia);
}

.dymek textarea:focus { border-color: #2541b2; outline: 2px solid rgb(37 65 178 / 25%); outline-offset: 0; }

.dymek-akcje { flex-wrap: wrap; align-items: center; }

.dymek-skroty {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--tresc-cicha);
}

.dymek-skroty kbd {
    display: inline-block;
    min-width: 1.2rem;
    padding: 0.05rem 0.3rem;
    font: inherit;
    font-size: 0.7rem;
    text-align: center;
    border: 1px solid var(--linia);
    border-bottom-width: 2px;
    border-radius: 4px;
}

/* Na telefonie skrotow klawiaturowych nie ma — podpowiedz bylaby nieprawda. */
@media (hover: none) {
    .dymek-skroty { display: none; }
}

/* --- pole za darmo w okienku (kontrakt §7) ---
   Ten sam dymek, inny akcent: zielen „gotowe, bez kosztu" zamiast niebieskiej
   (tla z bialym tekstem na sztywno, jak niebieska warstwa narzedzi — `--ok` w ciemnym
   motywie jest jasny i bialy tekst by na nim zniknal)
   warstwy uwag — tak samo jak obrys pola w podgladzie. Klient ma widziec od razu,
   ze to nie idzie do modelu i nie zabiera poprawki. */
.dymek-pole { border-top: 3px solid #16a34a; }

.dymek-znak-pola {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.8rem;
    color: #fff;
    background: #16a34a;
    border-radius: 50%;
}

.dymek-darmo {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ok);
    background: rgb(22 163 74 / 12%);
    border-radius: 999px;
}

.dymek-pole textarea { min-height: 2.6rem; resize: vertical; }
.dymek-pole textarea:focus { border-color: #16a34a; outline-color: rgb(22 163 74 / 25%); }
.dymek-pole button.glowny { background: #15803d; border-color: #15803d; color: #fff; }

.dymek-wskazowka { margin: -0.3rem 0 0.6rem; font-size: 0.8rem; color: var(--tresc-cicha); }
.dymek-powod { margin: -0.2rem 0 0.6rem; font-size: 0.85rem; color: var(--uwaga); }

button.dymek-sam {
    margin-top: 0.7rem;
    padding: 0;
    font: inherit;
    font-size: 0.9rem;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    color: var(--tresc-cicha);
    cursor: pointer;
}
button.dymek-sam:hover { color: var(--akcent-tekst); border-bottom-color: var(--akcent-tekst); }

/* Potwierdzenie zapisu pola — na dole, tuz nad podpowiedzia o klikaniu, i znika
   samo po kilku sekundach. Nie modal: klient ma dalej patrzec na swoja strone. */
.zapisane-pole {
    position: fixed;
    z-index: 35;
    left: 50%;
    bottom: 5.5rem;     /* nad podpowiedzia o klikaniu i przelacznikiem trybu */
    margin: 0;
    padding: 0.6rem 1.1rem;
    translate: -50% 0;
    font-weight: 600;
    color: #fff;
    background: #15803d;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
    animation: zapisane-wjazd 260ms cubic-bezier(0.34, 1.35, 0.64, 1) both;
}

@keyframes zapisane-wjazd {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .zapisane-pole { animation: none; }
}

.uwaga-numer { width: 1.25rem; height: 1.25rem; font-size: 0.7rem; margin-right: 0.4rem; vertical-align: -0.2em; }

/* Uwaga, ktorej pinezke klient wlasnie kliknal. Mignięcie, a nie stale tlo:
   ma pokazac „to ta", a nie oznaczyc uwage na zawsze. */
.uwaga.podswietlona { animation: uwaga-miganie 1.4s ease-out; }

@keyframes uwaga-miganie {
    0%, 30% { background: rgb(37 65 178 / 14%); }
    100%    { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .dymek, .dymek > * { animation: none; }
    .dymek-grupa.plynnie { transition: none; }
    .uwaga.podswietlona { animation: none; background: rgb(37 65 178 / 10%); }
}

/* --- regulamin i polityka prywatnosci (DokumentPrawny) ----------------------
   Jedna kolumna do czytania, nic wiecej: to tekst, ktory klient ma przeczytac,
   a nie ekran do ogladania. `dokument-brak` to zakreslacz na zaslepkach danych —
   widoczny celowo, dopoki ich ktos nie uzupelni. */
.dokument {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 2rem);
    background: var(--tlo);
}

.dokument-tresc { max-width: none; margin: 0; padding: 0; line-height: 1.6; }  /* zeruje globalne `main` */
.dokument-tresc h1 { margin: 0; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; }
.dokument-tresc h2 { margin: 2.25rem 0 0.6rem; font-size: 1.2rem; }
.dokument-tresc p { margin: 0.6rem 0; }
.dokument-tresc ol, .dokument-tresc ul { margin: 0.6rem 0; padding-left: 1.4rem; }
.dokument-tresc li + li { margin-top: 0.4rem; }
.dokument-data { color: var(--tresc-cicha); }
.dokument-brak { background: var(--zakreslacz); color: inherit; padding: 0 0.15em; }

.dokument-stopka {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linia);
    font-size: 0.95rem;
}

/* --- zgody na pliki cookie (ZgodaCookie.razor, js/zgoda.js) ---------------- */
.zgoda {
    position: fixed; z-index: 1000;
    left: 1rem; right: 1rem; bottom: 1rem;
    max-width: 40rem; margin: 0 auto; padding: 1.25rem 1.25rem 1rem;
    box-sizing: border-box;
    background: var(--karta); color: var(--tresc);
    border: 1px solid var(--linia); border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    font-size: 0.95rem;
}
.zgoda[hidden] { display: none; }
.zgoda h2 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.zgoda p { margin: 0 0 0.9rem; line-height: 1.5; }
.zgoda-wybor { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1rem; }
.zgoda-wybor[hidden] { display: none; }
.zgoda-wybor label { display: flex; gap: 0.5rem; align-items: center; }
/* Rownorzedne: ten sam wyglad dla akceptacji i odrzucenia (wytyczne EROD/UODO). */
.zgoda-przyciski { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.zgoda-przyciski button {
    flex: 1 1 9rem; min-height: 2.75rem;
    font: inherit; font-weight: 600; cursor: pointer;
    background: transparent; color: inherit;
    border: 1.5px solid var(--linia); border-radius: 10px;
}
.zgoda-przyciski button[hidden] { display: none; }
.zgoda-przyciski button:hover { border-color: var(--akcent-tekst); }
.zgoda-przyciski button:focus-visible { outline: 3px solid var(--akcent-tekst); outline-offset: 2px; }
/* „Ustawienia cookie" w stopce i w polityce — tylko gdy baner istnieje. */
.zgoda-link { display: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; background: none; border: 0; cursor: pointer; }
html.zgoda-aktywna .zgoda-link { display: inline; }

/* Pasek oplaty (okres probny / wstrzymana / odnowienie) — edytor i /moje. */
.pasek-oplaty { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; padding: .6rem 1rem; border-radius: var(--promien); background: var(--akcent-tlo); border: 1.5px solid var(--akcent-linia); font-size: .95rem; }
.pasek-oplaty-stop { border-color: var(--uwaga); }
/* Naglowek edytora zawija sie we flexie — pasek ma dostac cala linie, nie sciskac sie obok adresu. */
.edytor-pasek .pasek-oplaty, .edytor-pasek .zapisane-pole { flex-basis: 100%; }

/* Ekran zamowienia przed kasa Stripe i zgoda przy dokupieniu pakietu (art. 21 ust. 2 upk). */
.zamowienie-pozycja { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; margin: 1.5rem 0; border: 1px solid var(--linia); border-radius: var(--promien); background: var(--karta); }
.zamowienie-pozycja dt { font-weight: 600; }
.zamowienie-pozycja dd { margin: 0; font-weight: 700; white-space: nowrap; }
.zamowienie-zgoda, .moje-dokup-zgoda { display: flex; gap: 0.75rem; align-items: flex-start; line-height: 1.45; cursor: pointer; }
.zamowienie-zgoda input, .moje-dokup-zgoda input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--akcent-tekst); }
.moje-dokup-zgoda { font-size: 0.85rem; color: var(--tresc-cicha); margin-bottom: 0.5rem; }
/* Dokupienie zwiniete do cichego przycisku w rzedzie; rozwiniete zajmuje caly wiersz
   pod przyciskami. */
.moje-dokup-zwin > summary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    color: var(--tresc);
    border: 1px solid var(--linia);
    border-radius: var(--promien);
    cursor: pointer;
    list-style: none;
}
.moje-dokup-zwin > summary::-webkit-details-marker { display: none; }
.moje-dokup-zwin > summary:hover { border-color: var(--tresc-cicha); }
.moje-dokup-zwin[open] { flex-basis: 100%; order: 1; }
.moje-dokup-zwin[open] > summary { margin-bottom: 0.75rem; }
.zamowienie-wroc { display: inline-block; margin-top: 1rem; color: var(--tresc-cicha); }

/* P5: ekran czekania, gdy zadanie stoi w kolejce. */
.czekanie-kolejka { margin: 0.5rem 0 1rem; padding: 0.6rem 0.9rem; border-radius: 10px; background: var(--akcent-tlo); color: var(--akcent-tekst); font-weight: 600; }