` z odstępem.
Zakładać ją wolno WYŁĄCZNIE po zdarzeniu `error`, nigdy „na wszelki
wypadek": ukryty obrazek, który dałoby się pokazać, jest gorszy od
pękniętej ikonki, bo nikt się o nim nie dowie. */
.docbody .imgbrak{display:none}
/* miejsce na zrzut ekranu - szare pole z podpisem pod nim. Agent AI zapisuje
„[ZRZUT: co ma być widoczne]", konsultant podmienia to na prawdziwy obrazek. */
.docbody .shot-ph{margin:18px 0}
.docbody .shot-ph-box{display:flex;align-items:center;justify-content:center;
min-height:170px;background:var(--cx-mist);border:2px dashed var(--line2);
border-radius:var(--radius-md);color:var(--soft)}
.docbody .shot-ph figcaption,.docbody figcaption{margin-top:var(--space-2);font-size:13.5px;
line-height:1.5;color:var(--muted);font-style:italic}
/* obrazek zastępczy wstawiony do monday doca wygląda w portalu tak samo */
.docbody img[src*="zrzut-placeholder"]{border-style:dashed;cursor:default}
.docbody img[src*="zrzut-placeholder"]:hover{box-shadow:none;transform:none}
/* ── komponenty przeniesione z MDX Readme.io (build_portal.py, readme_mdx_to_html) ── */
/* sekcji, i każdy z nich wie
lepiej, jakiego koloru ma być na swoim tle.
Wcześniej otoczka malowała wszystko na szewronowy szary, a wewnętrzny
wracał na sztywno do --text (ciemny atrament). Na kaflu kategorii
- ciemna karta rgb(22,36,37) na jasnej sekcji - dawało to kontrast
1,05:1, czyli nazwę kategorii niewidoczną. `.app b` ustawiało tam biel,
ale ten ją zjadał. Po zmianie: 7,67:1 na kaflu, 13,0:1
w nagłówku sekcji na jasnym tle. */
.chevtitle{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:10px;
max-width:100%}
.chevtitle>.cx-chev-l,.chevtitle>.cx-chev-r{color:var(--cx-ink-20)}
.chevtitle>span{color:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
/* eyebrow nad nagłówkiem sekcji */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--space-3);
font-size:var(--fs-small);color:var(--muted)}
.eyebrow .cx-mark{color:var(--cx-ink-20);gap:1px}
.eyebrow .cx-chev-l,.eyebrow .cx-chev-r{width:7px;height:13px}
.eyebrow--on-dark{color:var(--cx-lime-soft)}
.eyebrow--on-dark .cx-mark{color:var(--cx-lime)}
/* znak CXLABS: dwa szewrony zwrócone do siebie, jak w hero strony firmowej */
.cx-mark{display:inline-flex;align-items:center;gap:2px;color:var(--cx-lime)}
.cx-mark .cx-chev-l,.cx-mark .cx-chev-r{width:15px;height:27px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-body);background:var(--surface-alt);color:var(--text);
font-size:var(--fs-body);line-height:var(--lh-body);min-height:100vh;
display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none} a:hover{color:var(--cx-ink)}
::selection{background:var(--cx-lime);color:var(--cx-ink)}
h1,h2,h3.sg{font-family:var(--font-display);font-weight:400}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--space-6);width:100%}
@keyframes cxUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes cxFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes cxPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cxGlow{0%,100%{opacity:.5}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* ── Nagłówek 1:1 z makiety cxlabs.digital/pl (plik „index (3)" od CXLABS):
przezroczysty pasek NAD treścią hero, marka = znak + kreska + dwuwierszowy
podpis partnera, odnośniki 16 px co 36 px, CTA w lime. Wariant ciemny
(portal ma ciemne hero) bierze kolory z .hero--dark z tamtego pliku. */
/* pasek „wersja rozwojowa" stoi nad wszystkim, więc nagłówek zaczyna się
pod nim (--chrome), a nie na samej górze dokumentu */
header.nav{position:relative;z-index:30;display:flex;
align-items:center;justify-content:space-between;gap:clamp(16px,2.5vw,40px);
padding:clamp(16px,2.4vh,24px) clamp(24px,4vw,64px);
background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav__brand{display:flex;align-items:center;gap:20px;text-decoration:none}
.nav__logo{height:18px;width:auto;display:block;color:var(--cx-mist)}
.nav__partner{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.nav__partner-name{font-family:var(--font-body);font-weight:700;font-size:14px;
color:var(--cx-mist)}
.nav__partner-sub{font-size:12px;color:var(--cx-ink-20)}
.nav__links{display:flex;align-items:center;flex-wrap:nowrap;gap:3px;
list-style:none;margin:0;padding:0}
/* Pozycje menu stoją w jednej linii także wtedy, gdy któraś ma ikonę:
inline-flex z wyśrodkowaniem zamiast obrazka na linii pisma, przez który
„Baza wiedzy" siedziała wyżej od reszty. */
.nav__links>li{display:flex;align-items:center}
/* Selektor celuje w BEZPOŚREDNIE dzieci pozycji listy. Panel produktów
siedzi w `
na stronie (decyzja 9): większy
stopień, lżejsza waga, więcej powietrza pod kreską. */
.zgnag{padding-bottom:clamp(20px,3vh,28px)}
/* Zgłoszenie kolegi widziane przez menedżera (#97). */
.zgcudze{margin:8px 0 0;max-width:62ch;font-size:13.5px;line-height:1.5;color:var(--soft)}
.tkkto{display:block;margin-top:2px;font-size:12px;color:var(--soft)}
.zgnag h1{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3vw,34px);
line-height:1.15;letter-spacing:-.01em;color:var(--text);margin:8px 0 0;max-width:34ch}
/* ── Wątek jako rozmowa ────────────────────────────────────────────────
Wiadomość klienta odbija się na prawo i ma własne tło z ogonkiem, nasza
zostaje po lewej na białym. Dymek nie rozlewa się na całą szerokość -
min(76ch, 86%) - bo długiego akapitu na pełnej kolumnie nie da się czytać. */
.thread{list-style:none;display:flex;flex-direction:column;gap:var(--space-5);
margin:clamp(28px,4vh,44px) 0 0;padding:0}
.msg{display:grid;grid-template-columns:34px minmax(0,1fr);
grid-template-areas:"av kto" ". babel";gap:6px var(--space-3);
justify-items:start}
/* Prośba o potwierdzenie siedzi W ŚRODKU białego dymka ostatniej odpowiedzi
(poprawka Radka 29.09). Do tego dnia była osobną płytką pod dymkiem,
w kreskowanej ramce - czyli czymś OBOK wiadomości, a pytanie dotyczy
właśnie TEJ wiadomości. Oddziela je sama kreska nad, bez drugiego tła:
płytka w płytce wygląda jak wtrącenie z innego ekranu. */
.msgprosba{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
margin:var(--space-4) 0 0;padding:var(--space-4) 0 0;
border-top:1px solid var(--line)}
.msgprosba p{margin:0;font-size:14.5px;line-height:1.5;flex:1;min-width:180px}
/* Minimalny odstęp POD wiadomością z prośbą - dymek urósł o pytanie, więc
bez tego następna wiadomość zaczyna się zaraz za guzikiem. */
.msg--prosba{margin-bottom:var(--space-3)}
/* Pytanie „na pewno?" zamiast okienka przeglądarki - staje dokładnie
w miejscu klikniętego guzika, w nagłówku i w dymku tak samo. */
.zgpotw{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px var(--space-3)}
.zgpotwtx{font-size:14px;color:var(--text);font-weight:600}
.zgpotwbtn{display:inline-flex;flex-wrap:wrap;gap:8px}
.zgpotwblad{flex-basis:100%;font-size:13px;color:var(--cx-error)}
@media (max-width:599px){
.msgprosba{flex-direction:column;align-items:stretch}
.msgprosba .btn{width:100%;justify-content:center}
.zgpotw{display:flex;align-items:stretch;flex-direction:column}
.zgpotwbtn{display:grid;grid-template-columns:1fr 1fr}
.zgpotwbtn .btn{width:100%;justify-content:center}
}
.msg--klient{grid-template-columns:minmax(0,1fr) 34px;
grid-template-areas:"kto av" "babel .";justify-items:end}
/* Ta sama zasada co w liście zgłoszeń: inicjały człowieka to białe litery
na szarym kole. Wątek ma je przy każdej wiadomości klienta. */
.msgav{grid-area:av;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
font-size:11.5px;font-weight:600;flex:none;overflow:hidden;
background:var(--cx-gray-2);color:var(--cx-white);border:1px solid var(--cx-gray-2)}
.msgav--cx{background:var(--cx-ink);color:var(--cx-lime);border-color:var(--cx-ink)}
.msgav svg{width:100%;height:100%;display:block}
.msgkto{grid-area:kto;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);
font-size:12px;color:var(--soft);align-self:center}
.msg--klient .msgkto{flex-direction:row-reverse}
.msgkto b{font-size:13.5px;font-weight:600;color:var(--text)}
/* Ogonek dymka: jeden róg zostaje ostry po stronie awatara. */
.msgbabel{grid-area:babel;max-width:min(76ch,86%);min-width:0;
padding:13px var(--space-4);border:1px solid var(--line);
border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 4px;
background:var(--cx-white)}
/* Wiadomość KLIENTA siedzi na jasnej płycie w barwie szaty, z CIEMNĄ farbą -
kolory odczytane z makiety Claude Design przysłanej przez Radka 1.10
(`rgb(237,243,241)` dymek, `rgb(232,236,237)` kółko awatara), a nie dobrane
z oka.
TO ZASTĘPUJE decyzję z 29.09, w której dymek był `#ACACAC`, a farba biała.
Tamto zestawienie dawało kontrast **2,2:1**, czyli poniżej progu WCAG AA
(4,5:1) - i było to przy tej decyzji zapisane wprost jako jej koszt. Nowa
para daje **13,5:1**, więc koszt zniknął razem ze starym tłem.
Zasada zostaje ta sama i warto ją powtórzyć, bo łatwo się o nią potknąć
przy następnej zmianie: **tło i farba chodzą w parze** - zmiana samego tła
zostawia farbę z poprzedniego świata. */
.msg--klient .msgbabel{background:rgb(237,243,241);border-color:rgb(226,234,231);
border-radius:var(--radius-md) var(--radius-md) 4px var(--radius-md)}
.msg--klient .zgtresc{color:var(--text)}
/* Kółko z inicjałami klienta: jasne, z ciemnymi literami - jak w makiecie.
Domyślne `.msgav` (ciemnoszare tło, biała farba) zostaje dla miejsc, gdzie
awatar stoi na ciemnym pasku. */
.msg--klient .msgav{background:rgb(232,236,237);color:var(--text);
border-color:rgb(222,228,229)}
/* Adres pod nazwiskiem - w firmie pisze kilka osób i to on rozstrzyga,
która. Stoi tylko wtedy, gdy podpis go nie zawiera. */
.msgmail{font-style:normal;font-size:12px;color:var(--soft)}
@media(max-width:640px){
.msgbabel{max-width:100%}
}
/* treść przychodzi z maila, więc może przynieść własne znaczniki - trzymamy ją
w ryzach, żeby nie rozjechała kolumny */
.zgtresc{font-size:14.5px;line-height:1.65;color:var(--body-fg);overflow-wrap:anywhere}
.zgtresc p{margin:0 0 .7em}
.zgtresc p:last-child{margin-bottom:0}
.zgtresc a{color:var(--cx-turquoise-600);text-decoration:underline}
.zgtresc img{max-width:100%;height:auto;border-radius:8px}
.zgtresc table{max-width:100%;display:block;overflow-x:auto}
.zgtresc blockquote{margin:0 0 .7em;padding-left:var(--space-4);
border-left:2px solid var(--line);color:var(--soft)}
/* odpowiedź */
/* Pole odpowiedzi nie jest już kartą: sama kreska nad nim wystarczy,
żeby oddzielić je od wątku, a ekran robi się o kartę lżejszy.
Turkusowy fokus na polu zostaje - to mocniejszy sygnał dostępnościowy
niż samo przyciemnienie obrysu. */
.zgodp{margin-top:clamp(28px,4vh,44px);padding-top:clamp(24px,3.5vh,36px);
border-top:1px solid var(--line)}
.zgodp textarea{width:100%;font:inherit;font-size:14.5px;line-height:1.6;padding:12px 13px;
color:var(--text);background:var(--cx-white);border:1px solid var(--line);
border-radius:var(--radius-sm);resize:vertical;min-height:110px}
.zgodp textarea:focus{outline:none;border-color:var(--cx-turquoise-600);
box-shadow:0 0 0 3px rgba(74,158,150,.16)}
.zgodpstopka{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);
margin-top:var(--space-3)}
.zgodpstopka .btn{margin-left:auto}
.zgpliki{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-3)}
.zgplik{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;padding:5px 10px;
border-radius:7px;background:var(--cx-mist);border:1px solid var(--line);color:var(--body-fg)}
.zgplik button{background:none;border:0;padding:0;cursor:pointer;color:var(--soft);line-height:0}
.zgplik button:hover{color:var(--cx-error)}
.zgdodaj{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;
padding:8px 13px;border-radius:var(--radius-sm);cursor:pointer;
background:var(--cx-white);border:1px solid var(--line);color:var(--body-fg)}
.zgdodaj:hover{background:var(--cx-mist);color:var(--text)}
/* ankieta po rozwiązaniu */
.zgcsat{margin-top:var(--space-5);background:var(--cx-mist);border:1px solid var(--line);
border-radius:var(--radius-md);padding:var(--space-5);text-align:center}
.zgcsat h3{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--text);margin:0}
.zggwiazdki{display:flex;justify-content:center;gap:6px;margin:var(--space-4) 0}
.zggwiazdka{background:none;border:0;padding:4px;cursor:pointer;color:var(--cx-cloud-2);line-height:0}
.zggwiazdka:hover,.zggwiazdka.on{color:#e8b33a}
/* PODGLĄD POD KURSOREM ZAPALA GWIAZDKI OD PIERWSZEJ, nie samą wskazaną
(zgłoszenie Radka 29.09: „w przypadku oceny cztery powinny podświetlić się
gwiazdki od jeden do cztery, a nie tylko czwarta"). Kliknięcie robiło to
poprawnie od początku - `.on` dostają wszystkie do wybranej - ale najazd
zapalał jedną i wyglądało to jak zepsuta ocena.
Sam najazd na pasek GASI poprzedni wybór, żeby podgląd mówił prawdę:
inaczej przy ocenie 4 i kursorze na 2 świeciłyby się cztery.
`:has(~ …)` sięga do gwiazdek STOJĄCYCH PRZED tą pod kursorem - inaczej
trzeba by odwracać kolejność w znaczniku, a wtedy czytnik ekranu czyta
ocenę od pięciu do jednego. Gdzie `:has()` nie działa, zostaje stare
zachowanie - czyli gorszy podgląd, a nie zepsuty ekran. */
.zggwiazdki:hover .zggwiazdka{color:var(--cx-cloud-2)}
.zggwiazdki .zggwiazdka:has(~ .zggwiazdka:hover),
.zggwiazdki .zggwiazdka:hover{color:#e8b33a}
/* ekran oceny obsługi (własny formularz CSAT, wejście z maila bez logowania).
Osobne klasy, a nie `.zgcsat`: tam ankieta jest dopiskiem pod wątkiem,
tutaj jest CAŁYM ekranem - inna skala gwiazdek, inne odstępy, inna waga. */
.ocnwrap{max-width:620px;margin:0 auto}
.ocnkarta{background:var(--cx-white);border:1px solid var(--line);
border-radius:var(--radius-md);padding:var(--space-6);text-align:center}
.ocnkicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--body-fg)}
.ocnkicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cx-lime)}
.ocnkarta h1,.ocndzieki h1{font-family:var(--font-display);font-weight:500;font-size:27px;
line-height:1.25;color:var(--text);margin:var(--space-3) 0 0}
.ocnsub{font-size:15px;color:var(--body-fg);margin:var(--space-2) auto 0;max-width:44ch}
.ocnkontekst{margin-top:var(--space-4);padding:12px 14px;background:var(--cx-mist);
border:1px solid var(--line);border-radius:var(--radius-sm);
display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;align-items:baseline}
.ocnnumer{font-weight:600;font-size:14px;color:var(--text)}
.ocntemat{font-size:14px;color:var(--body-fg)}
.ocngwiazdy{display:flex;justify-content:center;gap:4px;margin:var(--space-5) 0 var(--space-2)}
.ocngwiazda{background:none;border:0;padding:4px;cursor:pointer;line-height:0;
color:var(--cx-cloud-2);transition:transform .16s ease,color .16s ease}
.ocngwiazda svg{width:40px;height:40px}
.ocngwiazda:hover{transform:scale(1.14)}
.ocngwiazda:hover,.ocngwiazda.on{color:#e8b33a}
/* To samo co przy gwiazdkach pod zgłoszeniem: najazd zapala od pierwszej. */
.ocngwiazdy:hover .ocngwiazda{color:var(--cx-cloud-2)}
.ocngwiazdy .ocngwiazda:has(~ .ocngwiazda:hover),
.ocngwiazdy .ocngwiazda:hover{color:#e8b33a}
.ocngwiazdy--wynik .ocngwiazda{color:var(--cx-cloud-2);line-height:0;padding:4px}
.ocngwiazdy--wynik .ocngwiazda.on{color:#e8b33a}
.ocnpodpis{font-size:14px;color:var(--body-fg);margin:0;min-height:20px}
.ocnzmaila{display:block;font-size:12.5px;color:var(--muted-fg,var(--body-fg));margin-top:4px}
.ocnpole{margin-top:var(--space-5);text-align:left}
.ocnpole textarea{width:100%;font:inherit;font-size:15px;line-height:1.6;padding:11px 13px;
color:var(--text);background:var(--cx-white);border:1px solid var(--line);
border-radius:var(--radius-sm);resize:vertical}
.ocnwyslij{margin-top:var(--space-5);width:100%;justify-content:center}
.ocnwyslij[disabled]{opacity:.5;cursor:default}
.ocndzieki{text-align:center;padding:var(--space-6) var(--space-4)}
.ocndzieki p{font-size:15px;color:var(--body-fg);margin:var(--space-2) auto var(--space-5);max-width:44ch}
@media (max-width:560px){
.ocnkarta{padding:var(--space-5) var(--space-4)}
.ocngwiazda svg{width:34px;height:34px}
.ocnkarta h1,.ocndzieki h1{font-size:23px}
}
/* formularz nowego zgłoszenia */
.zgnowe{max-width:720px}
.zgnowe .fld textarea{width:100%;font:inherit;font-size:15px;line-height:1.6;padding:11px 13px;
color:var(--text);background:var(--cx-white);border:1px solid var(--line);
border-radius:var(--radius-sm);resize:vertical;min-height:150px}
.zgnowe .fld textarea:focus{outline:none;border-color:var(--cx-turquoise-600);
box-shadow:0 0 0 3px rgba(74,158,150,.16)}
.zglicznik{font-size:12px;color:var(--soft);text-align:right}
.zgdrop{border:1.5px dashed var(--line);border-radius:var(--radius-md);padding:var(--space-5);
text-align:center;color:var(--body-fg);font-size:14px;cursor:pointer;
transition:border-color .15s,background .15s}
.zgdrop:hover,.zgdrop.nad{border-color:var(--cx-turquoise-600);background:var(--cx-mist)}
.zgdrop b{display:block;color:var(--text);font-weight:600;margin-bottom:3px}
/* Pole na załączniki w formularzu zgłoszenia (makieta Claude Design): ikona
„wgraj" nad dwiema liniami, w ramce z kreski. Tło jest jasne OD RAZU, a nie
dopiero na najechaniu - panel po prawej ma się czytać jako osobna płyta,
nie jako puste miejsce. */
.zncol--bok .zgdrop{display:flex;flex-direction:column;align-items:center;gap:4px;
padding:var(--space-5) var(--space-4);background:var(--surface-alt);
border-color:var(--line2)}
.zncol--bok .zgdrop svg{color:var(--body-fg)}
.zncol--bok .zgdrop b{margin:0;font-weight:500}
.zncol--bok .zgdrop b u{font-weight:700;text-decoration:none}
.zncol--bok .zgdrop>span{font-size:12.5px;color:var(--muted)}
/* `.btn--ghost` jest pomyślany na ciemne płyty (ma `color:mist !important`),
więc na białej karcie znika. Ten wariant jest jego odpowiednikiem na jasnym
tle - stąd `!important`, inaczej przegrywa z regułą bazową. */
.btn--obrys{background:var(--cx-white)!important;color:var(--text)!important;
border:1px solid var(--line)!important}
.btn--obrys:hover{background:var(--cx-mist)!important;color:var(--cx-ink)!important;filter:none}
.zgpusto{text-align:center;padding:var(--space-7) var(--space-4)}
.zgpusto img{width:min(300px,70%);height:auto;margin-bottom:var(--space-4)}
.zgpusto :is(h2,h3){font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--text);margin:0}
.zgpusto p{font-size:14.5px;color:var(--body-fg);margin:var(--space-2) auto 0;max-width:46ch}
/* ── Konto: logowanie, prośba o dostęp, reset hasła ──────────────────────
Układ z makiety Claude Design: dwie karty obok siebie na jasnym tle -
biała z formularzem, ciemna z ofertą planu. Wcześniej stały tu dwie płyty
na całą szerokość ekranu (tak wyglądała aplikacja React) i ciemna połowa
wyglądała jak pusta plama. Poniżej 900 px karty idą jedna pod drugą,
formularzem do góry - na telefonie ludzie przychodzą się zalogować,
a nie czytać ofertę. */
.authwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr);
gap:clamp(24px,3vw,48px);align-items:stretch;
max-width:1180px;margin:0 auto;width:100%;
padding:clamp(36px,6vh,80px) var(--space-6) clamp(48px,7vh,88px)}
.authmain{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.authcard{width:100%;max-width:none;background:var(--cx-white);border:1px solid var(--line2);
border-radius:var(--radius-lg);padding:clamp(28px,3.5vw,44px);
box-shadow:0 1px 2px rgba(18,32,33,.04),0 18px 40px -28px rgba(18,32,33,.35)}
/* Ciemna karta: ten sam promień i to samo powietrze co biała, plus poświata
w rogu - ta sama, którą mają sekcje na ciemnym tle na stronie głównej. */
.authside{position:relative;overflow:hidden;background:var(--cx-ink);color:var(--on-dark);
border-radius:var(--radius-lg);padding:clamp(28px,3.5vw,44px);
display:flex;flex-direction:column;justify-content:center;gap:var(--space-3)}
.authside::before{content:"";position:absolute;inset:auto -20% -30% -20%;height:70%;
background:var(--hero-glow);pointer-events:none}
.authside>*{position:relative}
.authside h2{font-family:var(--font-display);font-weight:500;font-size:clamp(23px,2.6vw,31px);
line-height:1.15;color:var(--cx-white);margin:var(--space-2) 0 0}
.authside .pkgline{font-size:13.5px;color:var(--cx-lime);margin:var(--space-2) 0 0}
.authside .authlead{font-size:14.5px;line-height:1.6;color:var(--cx-lime-soft);
margin:var(--space-3) 0 0;max-width:46ch}
.authpts{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);
margin:var(--space-4) 0 0;font-size:14px;line-height:1.5;color:var(--cx-lime-soft)}
.authpts li{display:flex;gap:var(--space-3);align-items:flex-start}
.authpts b{color:var(--cx-white);font-weight:500}
.authpts .pkgbul{flex:none;margin-top:3px}
/* Guzik „Porównaj plany" w płycie oferty (prośba Radka 29.09). Płyta
opowiada o subskrypcji, a nie prowadziła nigdzie - czytelnik dostawał
argumenty i żadnego następnego kroku. `align-self` trzyma guzik przy
szerokości treści: płyta jest kolumną flex, więc bez tego rozciągnąłby
się na całą jej szerokość i wyglądał jak pasek. */
.authside .pkgbtn{align-self:flex-start;margin-top:var(--space-4)}
/* Nota pod listą - jak w makiecie: baza wiedzy stoi otworem bez logowania. */
.authnote{margin-top:var(--space-5);padding-top:var(--space-4);
border-top:1px solid var(--cx-ink-60);font-size:13px;line-height:1.6;
color:var(--cx-ink-20)}
.authnote a{color:var(--cx-lime)}
.authcard :is(h1,.acch){font-family:var(--font-display);font-weight:500;font-size:26px;
line-height:1.15;color:var(--text);margin:0}
.authcard .authsub{font-size:14.5px;line-height:1.55;color:var(--body-fg);margin:var(--space-2) 0 0}
.authform{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-5)}
.authcard--center{text-align:center}
.authcard--center .authsub{max-width:42ch;margin-left:auto;margin-right:auto}
.authlegal{font-size:12.5px;color:var(--soft);text-align:center;max-width:420px}
/* ── Urządzenia (Z039) ────────────────────────────────────────────────────
Lista sesji konta na ekranie profilu. Wiersz to jedna linia nazwy
(przeglądarka + system) i druga, cichsza, z adresem i datą. Bieżące
urządzenie wyróżnia lewa krawędź w kolorze marki - nie kolor tła, bo ten
sam wiersz ma być czytelny i w jasnym, i w ciemnym motywie. */
.urzlista{margin-top:var(--space-4)}
.urzlist{list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
/* 9.10: po lewej znaki systemu i przeglądarki, pośrodku opis z miejscem,
po prawej guzik „Wyloguj" (tylko przy cudzych urządzeniach). Na wąskim
ekranie guzik schodzi pod opis, a znaki zostają w swojej kolumnie. */
.urzrow{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.urzrow--ja{border-color:var(--cx-turquoise-600);
box-shadow:inset 3px 0 0 var(--cx-turquoise-600)}
.urzikony{display:flex;gap:6px;flex:none;color:var(--text)}
.urzik{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
background:var(--cx-cloud);color:var(--cx-ink)}
.urzik svg{width:17px;height:17px}
.urzopis{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.urznaz{font-size:14px;font-weight:600;color:var(--text)}
.urzja{display:inline-flex;align-items:center;gap:3px;margin-left:4px;
font-weight:600;color:var(--cx-turquoise-600)}
.urzja svg{width:15px;height:15px}
.urzmeta{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.urzwyl{flex:none;padding:6px 14px!important;min-height:0!important;font-size:13px!important}
.urzzrodlo{margin-top:var(--space-3);font-size:11.5px;color:var(--muted)}
.urzzrodlo a{color:inherit;text-decoration:underline}
@media(max-width:560px){
.urzrow{flex-wrap:wrap}
.urzwyl{margin-left:calc(66px + var(--space-3))}
}
/* ── Oczekiwanie po logowaniu Google (paczka 17.09) ───────────────────────
Nakładka na czas między zgodą w Google a wejściem do portalu. Kroki nazywają
to, co się dzieje - sam kręcący się znak nie mówi, czy proces stoi, czy trwa.
Znak marki bierzemy z tego samego preloadera co reszta portalu. */
.authwait{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
padding:var(--space-5);background:rgba(18,32,33,.94);backdrop-filter:blur(6px);
animation:waitIn .18s ease-out}
@keyframes waitIn{from{opacity:0}to{opacity:1}}
.authwaitbox{width:min(420px,100%);display:flex;flex-direction:column;
align-items:center;text-align:center}
.authwaitbox .cxpre{width:96px;height:96px;margin-bottom:var(--space-4)}
.authwaitbox h2{font-family:var(--font-display);font-weight:400;
font-size:clamp(20px,2.4vw,26px);letter-spacing:-.01em;color:var(--cx-white)}
.authwaitbox p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--cx-lime-soft)}
.waitsteps{list-style:none;display:flex;flex-direction:column;gap:10px;
margin-top:clamp(22px,3.4vh,32px);width:100%;text-align:left}
.waitsteps li{display:flex;align-items:center;gap:11px;padding:10px 14px;
border-radius:var(--radius-sm);font-size:13.5px;
/* pełny kolor, nie krycie: tekst 13,5 px z alfą .45 dawał 3,7:1 */
color:rgb(143,159,157);background:rgba(255,255,255,.03)}
/* Tekst kroku siedzi w tylko po to, żeby dało się go podmienić po
odpowiedzi backendu - grubość zostaje taka jak reszty listy. */
.wsteptx{font-weight:inherit}
.wstepic{display:grid;place-items:center;flex:none;width:20px;height:20px;
border-radius:50%;border:1px solid rgba(219,236,233,.3);color:var(--cx-ink)}
.wstepic svg{width:11px;height:11px;opacity:0}
.waitsteps .is-done{color:var(--cx-lime-soft)}
.waitsteps .is-done .wstepic{background:var(--cx-lime);border-color:var(--cx-lime);
color:var(--cx-ink)}
.waitsteps .is-done .wstepic svg{opacity:1}
/* bieżący krok: pierścień, który się obraca - stan widać też bez koloru */
.waitsteps .is-now{color:var(--cx-white);background:rgba(173,247,99,.08)}
.waitsteps .is-now .wstepic{border-color:var(--cx-lime);border-top-color:transparent;
border-width:2px}
/* Obrót deklarujemy TYLKO dla widocznej nakładki. Zapisany globalnie na
`.wstepic` wisiał w arkuszu także przy `hidden` i blokował eksport PNG
całego ekranu logowania - narzędzie klonuje DOM razem z regułą, nie
patrząc na `display:none` przodka. */
.authwait:not([hidden]) .waitsteps .is-now .wstepic{
animation:waitSpin .8s linear infinite}
@keyframes waitSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
.authwait{animation:none}
.authwait:not([hidden]) .waitsteps .is-now .wstepic{animation:none}
.waitsteps .is-now .wstepic{border-top-color:var(--cx-lime)}
}
.authlegal a{color:var(--cx-turquoise-600)}
/* pola formularza */
.fld{display:flex;flex-direction:column;gap:6px}
/* `.fldlab` to etykieta grupy (np. Priorytet), która nie moze byc