/* Energia Optima — arkusz aplikacji. Żadnych zasobów z cudzych serwerów przy otwarciu strony: krój IBM Plex Sans z własnego
   serwera (fonts/ibm-plex-sans), arkusze i skrypty wyłącznie z tej aplikacji.

   SZATA Z 10 PAŹDZIERNIKA 2026 R. (polecenie właściciela: „to inny brand, ale też ma być nowoczesny — tyle że to bardziej szeroko
   rozumiane narzędzie do workflow i obiegu dokumentów”; zamysł i pomiary: var\energia_wyglad_2026-10-10\STAN.md w repozytorium
   OptimAgent). Narzędzie pracy: grafitowy pasek aplikacji z akcentem marki w pomarańczu, menu w kolumnie po lewej, treść na kartach
   i w wykazach, gęste, ale czytelne tabele. Barwy WYŁĄCZNIE ze zmiennych motywu (Layout/Motyw.cs → zmienne --mud-palette-*), odcienie
   jaśniejsze przez color-mix z barwą powierzchni — bez barw wpisanych wprost (kontrola K5). Stan zawsze niesie znak ikony i słowo,
   barwa jest dodatkiem (K7); para „czerwień — zieleń” nie występuje.

   ESTETYKA JAK iOS (polecenie właściciela z 11 października 2026 r.: „tylko pamiętaj o estetyce jak iOS”): krój systemowy (na iPhonie
   San Francisco, na Windows Segoe UI), duże zaokrąglenia, karty bez obramowania na szarym tle z bardzo miękkim cieniem, linie włosowe,
   jasny półprzezroczysty pasek aplikacji i dolny pasek z rozmyciem tła, przyciski i pola o wysokości 44 px (najmniejszy cel dotyku
   w wytycznych Apple), duże tytuły stron na telefonie, wybór jednej z kilku opcji przełącznikiem segmentowym. Granice bez zmian:
   barwy tylko ze zmiennych motywu, stan zawsze ze słowem albo znakiem, obramowanie pól o kontraście 3:1 (WCAG 1.4.11). */

:root {
    --eo-kroj: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --eo-kroj-tytulow: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --eo-tekst: 1rem;
    --eo-tekst-wykazu: .9375rem;
    --eo-tekst-drobny: .875rem;
    --eo-zaokraglenie: 14px;
    --eo-zaokraglenie-male: 10px;
    --eo-linia: color-mix(in srgb, var(--mud-palette-text-primary) 11%, transparent);
    --eo-cien: 0 1px 2px color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent), 0 2px 10px color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
    --eo-cien-podniesiony: 0 8px 24px color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    --eo-tlo-akcentu: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    --eo-szklo: color-mix(in srgb, var(--mud-palette-surface) 78%, transparent);
    --eo-szklo-rozmycie: saturate(180%) blur(20px);
    --eo-szerokosc-menu: 15.5rem;
}

html, body {
    font-family: var(--eo-kroj);
    font-size: 16px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Przyklejony pasek aplikacji nie zasłania elementu z fokusem ani celu odnośnika w obrębie strony (WCAG 2.4.11; recenzja dostępności
   5eb3892a, uwaga 5). Na telefonie pasek nie jest przyklejony (reguła w bloku 640 px). */
html {
    scroll-padding-top: 4.75rem;
}

body {
    margin: 0;
    line-height: 1.5;
}

small {
    font-size: var(--eo-tekst-drobny);
}

/* Odnośniki w treści: barwa czynności i podkreślenie (60% krycia, pełne przy najechaniu); fokus zawsze widoczny (3:1 wobec tła).
   Długi wyraz bez odstępu (adres e-mail) łamie się dopiero wtedy, gdy nie mieści się w wierszu (break-word nie zmienia najmniejszej
   szerokości tabel). */
.eo-glowna {
    overflow-wrap: break-word;
}

.eo-glowna a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--mud-palette-primary) 60%, transparent);
    text-underline-offset: .18em;
}

.eo-glowna a:hover {
    text-decoration-color: currentColor;
}

/* Przycisk zbudowany z odnośnika (recenzja 5eb3892a, wada B2): reguła odnośników w treści ma wagę 0,1,1 i wygrywała z .eo-przycisk
   (0,1,0), więc napis miał barwę tła przycisku (1:1). Waga 0,2,1 przywraca napis przycisku i zdejmuje podkreślenie. Kontrast napisu
   każdego przycisku sprawdza próba przeglądarkowa RegulaZrodelTresciWPrzegladarceEnergiiTests. */
.eo-glowna a.eo-przycisk, .eo-glowna a.eo-przycisk:hover {
    color: var(--mud-palette-primary-text);
    text-decoration: none;
}

.eo-glowna a.eo-przycisk-drugorzedny, .eo-glowna a.eo-przycisk-drugorzedny:hover {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

/* Obwódka fokusu idzie za zaokrągleniem elementu — bez własnego promienia, który zmieniał kształt przycisków. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Tekst wyłącznie dla czytnika ekranu (słowo stanu, którego nie trzeba powtarzać na ekranie). */
.eo-ukryte {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

main#tresc:focus {
    outline: none;
}

/* ─── Układ: pasek aplikacji, treść, stopka ─────────────────────────────────────────────────────────────── */
.eo-aplikacja {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.eo-kontener {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.eo-glowna {
    flex: 1 0 auto;
    padding: 1.5rem 0 2.5rem;
}

/* Pasek aplikacji jak pasek nawigacji iOS: jasny, półprzezroczysty, z rozmyciem treści pod spodem i linią włosową u dołu. */
.eo-naglowek {
    position: sticky;
    top: 0;
    z-index: 100;
    color: var(--mud-palette-text-primary);
    background: var(--eo-szklo);
    -webkit-backdrop-filter: var(--eo-szklo-rozmycie);
    backdrop-filter: var(--eo-szklo-rozmycie);
    border-bottom: 1px solid var(--eo-linia);
}

.eo-naglowek-wnetrze {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 90rem;
    min-height: 3.5rem;
    margin: 0 auto;
    padding: .375rem 1.5rem;
    box-sizing: border-box;
}

.eo-marka {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    margin-right: auto;
    min-width: 0;
}

.eo-znak-marki {
    flex: none;
    display: block;
}

.eo-znak-tlo {
    fill: var(--mud-palette-secondary);
}

.eo-znak-rysunek {
    fill: var(--mud-palette-appbar-background);
}

.eo-marka-tekst {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.eo-marka-nazwa {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.eo-marka-opis {
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
}

.eo-pasek-czynnosci {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.eo-wylogowanie {
    margin: 0 0 0 .5rem;
}

.eo-przycisk, .eo-przycisk-paska, .eo-przycisk-drugorzedny {
    font: inherit;
    cursor: pointer;
}

/* Pozycje paska: bieżący dział pogrubiony, w barwie czynności i podkreślony kreską (aria-current). Kreska jest obramowaniem, a nie
   cieniem — w trybie wysokiego kontrastu systemu Windows cień znika, a obramowanie zostaje. Od szaty iOS (11 X 2026) kreska jest w barwie
   czynności, bo pomarańcz na jasnym pasku nie ma kontrastu 3:1. */
.eo-przycisk-paska {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .375rem .75rem;
    font-size: var(--eo-tekst-wykazu);
    font-weight: 500;
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--eo-zaokraglenie-male);
    text-decoration: none;
    white-space: nowrap;
}

a.eo-przycisk-paska {
    margin-right: 0;
}

.eo-przycisk-paska:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.eo-przycisk-paska[aria-current="page"] {
    font-weight: 600;
    color: var(--mud-palette-primary);
    border-bottom: 3px solid var(--mud-palette-primary);
    padding-bottom: calc(.375rem - 2px);
    border-radius: var(--eo-zaokraglenie-male) var(--eo-zaokraglenie-male) 0 0;
}

.eo-przycisk-wyloguj {
    border-color: var(--mud-palette-lines-inputs);
}

.eo-stopka {
    flex: none;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 1rem 0 1.5rem;
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
}

/* Odnośniki stopki i komunikatu o błędzie podkreślone: sam odcień niebieskiego obok szarego tekstu stopki ma 1,45:1, więc bez
   podkreślenia odnośnik byłby rozpoznawalny wyłącznie barwą (WCAG 1.4.1; recenzja dostępności 5eb3892a, uwaga 6). */
.eo-stopka a, #blazor-error-ui a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* ─── Nagłówki i bloki treści ──────────────────────────────────────────────────────────────────────────── */
/* Tytuł strony jak „duży tytuł” iOS: krój wyświetlany, pogrubiony, ciaśniejsze odstępy liter. */
.eo-konto-tytul {
    font-family: var(--eo-kroj-tytulow);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 .75rem;
}

.eo-panel-sekcja {
    font-family: var(--eo-kroj-tytulow);
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    margin: 2rem 0 .75rem;
}

.eo-glowna p {
    margin: 0 0 .75rem;
}

.eo-akapit {
    margin-bottom: .75rem;
}

/* Strony kont (krok 0.3, zlecenie Z6): zwykły HTML na stronach statycznych — karta formularza. */
.eo-konto {
    max-width: 40rem;
    padding: 1.75rem 2rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
    box-sizing: border-box;
}

.eo-konto ul {
    padding-left: 1.25rem;
}

/* Strona logowania: karta formularza i obok rysunek przebiegu sprawy (ukryty na telefonie). */
.eo-wejscie {
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 24rem);
    gap: 2.5rem;
    align-items: start;
    justify-content: center;
    padding: 2rem 0;
}

.eo-wejscie .eo-konto {
    max-width: none;
}

.eo-wejscie-ilustracja {
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--mud-palette-background-gray);
    border-radius: var(--eo-zaokraglenie);
}

.eo-wejscie-ilustracja-tytul {
    margin: 0 0 .75rem;
    font-weight: 600;
}

.eo-wejscie-ilustracja svg {
    display: block;
    width: 100%;
    height: auto;
}

.eo-ilustracja-linia {
    stroke: var(--mud-palette-lines-inputs);
    stroke-width: 2;
    stroke-dasharray: 4 4;
    fill: none;
}

.eo-ilustracja-karta {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-lines-default);
}

.eo-ilustracja-obrys {
    fill: var(--mud-palette-surface);
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
}

.eo-ilustracja-wypelnienie {
    fill: var(--mud-palette-primary);
}

.eo-ilustracja-napis {
    fill: var(--mud-palette-text-primary);
    font-family: var(--eo-kroj);
    font-size: 15px;
}

/* ─── Pola i przyciski ─────────────────────────────────────────────────────────────────────────────────── */
.eo-pole {
    width: 100%;
    max-width: 26rem;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    font: inherit;
    font-size: var(--eo-tekst);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--eo-zaokraglenie-male);
    box-sizing: border-box;
}

.eo-pole:hover {
    border-color: var(--mud-palette-text-secondary);
}

textarea.eo-pole {
    min-height: 5rem;
}

label {
    font-weight: 500;
}

/* Pola wyboru większe niż domyślne 13 px i w jednym wierszu z etykietą (recenzja 5eb3892a, uwaga D2). */
input[type="checkbox"], input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: .125rem 0 0;
    flex: none;
    accent-color: var(--mud-palette-primary);
}

.eo-glowna p:has(> input[type="checkbox"]), .eo-glowna p:has(> input[type="radio"]) {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

/* Przyciski jak w iOS: wysokość 44 px, duże zaokrąglenie; drugorzędny — tło w odcieniu barwy czynności bez obwódki (napis 4,6:1). */
.eo-przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem 1.25rem;
    font-weight: 600;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    border-radius: 12px;
}

.eo-przycisk:hover {
    background: var(--mud-palette-primary-darken);
    border-color: var(--mud-palette-primary-darken);
}

.eo-przycisk-drugorzedny {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem 1.125rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: var(--eo-tlo-akcentu);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-surface));
    border-radius: 12px;
}

.eo-przycisk-drugorzedny:hover {
    border-color: var(--mud-palette-primary);
}

.eo-czynnosci button {
    margin: 0 .5rem .5rem 0;
}

/* Formularze i zestawy pól na kartach i w ramkach (eo-role — formularz czynności, eo-potwierdzenie — potwierdzenie czynności). */
.eo-role, .eo-potwierdzenie {
    max-width: 44rem;
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-sizing: border-box;
}

fieldset.eo-role {
    background: var(--mud-palette-background);
}

.eo-role legend {
    padding: 0 .375rem;
    font-weight: 600;
}

.eo-rola {
    display: block;
}

.eo-filtr {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .5rem .75rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
}

.eo-filtr .eo-pole {
    width: auto;
}

/* Etykieta nad polem, jak na stronie logowania (recenzja 5eb3892a, uwaga D5). */
.eo-filtr-pole {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Formularz zwinięty pod opisowym nagłówkiem (karta firmy): czynność widać od razu, pola dopiero po rozwinięciu. */
.eo-rozwijane {
    max-width: 44rem;
    margin: 0 0 .75rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
}

.eo-rozwijane > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .5rem 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.eo-rozwijane > summary::-webkit-details-marker {
    display: none;
}

.eo-rozwijane > summary::before {
    content: "▸";
    flex: none;
    width: 1em;
    color: var(--mud-palette-text-secondary);
}

.eo-rozwijane[open] > summary::before {
    content: "▾";
}

.eo-rozwijane > summary:hover {
    background: var(--eo-tlo-akcentu);
}

.eo-rozwijane[open] > summary {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.eo-rozwijane-tresc {
    padding: .875rem 1rem .25rem;
}

.eo-rozwijane-tresc > .eo-role:last-child {
    margin-bottom: .75rem;
}

.eo-rozwijane .eo-role {
    max-width: none;
}

.eo-rozwijane-dopisek {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* ─── Komunikaty (KomunikatStanu): pasek z lewej w barwie rodzaju, ikona i etykieta słowna (K7) ───────────── */
.eo-komunikat {
    margin: 1rem 0;
    padding: .75rem 1rem;
    max-width: 52rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 5px solid var(--mud-palette-info);
    border-radius: var(--eo-zaokraglenie-male);
}

.eo-komunikat-odmowa {
    border-left-color: var(--mud-palette-error);
}

.eo-komunikat-uwaga {
    border-left-color: var(--mud-palette-warning);
}

.eo-komunikat-wykonano {
    border-left-color: var(--mud-palette-success);
}

.eo-komunikat-ikona {
    margin-right: .5rem;
}

.eo-kody code {
    font-size: 1.1rem;
}

/* ─── Tabele: wykaz na karcie, nagłówek w szarym pasku, linia pod każdym wierszem ──────────────────────── */
.eo-tabela {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin: 0 0 1rem;
    font-size: var(--eo-tekst-wykazu);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    overflow: hidden;
}

.eo-tabela th, .eo-tabela td {
    padding: .625rem .75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.eo-tabela thead th {
    font-size: var(--eo-tekst-drobny);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-bottom-color: var(--mud-palette-lines-default);
}

.eo-tabela tbody tr:last-child > * {
    border-bottom: 0;
}

.eo-tabela tbody tr:hover {
    background: var(--eo-tlo-akcentu);
}

/* Ramka tabeli (RamkaTabeli; recenzja 5eb3892a, wada B1): szeroka tabela przewija się w bok wewnątrz ramki, a nie razem ze stroną —
   wyrazy, daty, numery i kwoty zostają całe (tabele danych są wyjęte z wymogu przeformatowania, WCAG 1.4.10). Ramka niesie obramowanie
   i zaokrąglenie, które wcześniej miała tabela; przyjmuje fokus, żeby dało się ją przewinąć klawiaturą. Wzór zasady: portal
   (src/OptimaClientPortal/wwwroot/app.css, okno cennika) — czytelność ważniejsza niż brak przewijania. */
.eo-tabela-ramka {
    margin: 0 0 1rem;
    overflow-x: auto;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
}

.eo-tabela-ramka > .eo-tabela {
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

/* Daty, numery NIP i punktów poboru, godziny: bez zawijania, cyfry o stałej szerokości. Kwoty dodatkowo wyrównane do prawej. */
.eo-liczba {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.eo-tabela .eo-kwota {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.eo-tabela th.eo-kwota {
    white-space: normal;
}

.eo-dopisek-komorki {
    display: block;
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
    white-space: normal;
}

.eo-wykaz-w-komorce {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eo-wykaz-w-komorce li {
    min-width: 16rem;
    font-variant-numeric: tabular-nums;
}

.eo-wykaz-w-komorce li + li {
    margin-top: .25rem;
}

/* Panel kont Biura (krok 0.3, zlecenie Z9b): stan konta niesie ikona i etykieta, bez koloru (K7). */
.eo-panel .eo-legenda {
    padding: .75rem 1rem .75rem 2rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
}

/* ─── Znacznik stanu (ZnacznikStanu): ikona i słowo; barwa stanu (--eo-barwa) na pasku z lewej, obramowaniu i jasnym tle.
   Znak ikony ma barwę napisu — znak w żółci albo pomarańczu na jasnym tle miałby kontrast poniżej 3:1. ─────────────────────── */
.eo-stan {
    white-space: nowrap;
}

.eo-stan-ikona {
    margin-right: .3rem;
}

.eo-znacznik {
    --eo-barwa: var(--mud-palette-text-secondary);
    display: inline-block;
    padding: .05rem .5rem .05rem .4rem;
    font-size: var(--eo-tekst-drobny);
    font-weight: 500;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--eo-barwa) 13%, var(--mud-palette-surface));
    border: 1px solid color-mix(in srgb, var(--eo-barwa) 60%, var(--mud-palette-surface));
    border-left: 4px solid var(--eo-barwa);
    border-radius: 4px;
    vertical-align: baseline;
}

/* Dwa znaczniki obok siebie z odstępem (Blazor usuwa odstęp między elementami w znacznikach strony). */
.eo-znacznik + .eo-znacznik {
    margin-left: .375rem;
}

/* ─── Strony sprzedaży: menu w kolumnie po lewej, treść obok ───────────────────────────────────────────── */
.eo-przestrzen {
    display: grid;
    grid-template-columns: var(--eo-szerokosc-menu) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.eo-menu-sprzedazy {
    position: sticky;
    top: 4.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: .25rem 0;
}

.eo-menu-grupa {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.eo-menu-naglowek {
    padding: 0 .75rem .25rem;
    font-size: var(--eo-tekst-drobny);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.eo-menu-sprzedazy a, .eo-menu-telefon a {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.25rem;
    padding: .375rem .75rem;
    font-size: var(--eo-tekst-wykazu);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    border-radius: var(--eo-zaokraglenie-male);
    border-left: 3px solid transparent;
}

.eo-menu-sprzedazy a:hover, .eo-menu-telefon a:hover {
    background: var(--mud-palette-background-gray);
}

/* Bieżąca pozycja jak zaznaczenie w pasku bocznym iPadOS: pogrubienie, barwa czynności i zaokrąglone tło w jej odcieniu; kreska
   z lewej zostaje jako znak niezależny od barwy (K7). */
.eo-menu-sprzedazy a[aria-current="page"], .eo-menu-telefon a[aria-current="page"] {
    font-weight: 600;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, var(--mud-palette-surface));
    border-left-color: var(--mud-palette-primary);
}

/* Obwódka fokusu wewnątrz pozycji menu: kolumna menu przewija się w pionie, a jej krawędź przycinała obwódkę wystającą na zewnątrz
   (recenzja dostępności 5eb3892a, uwaga 4). */
.eo-menu-sprzedazy a:focus-visible, .eo-menu-telefon a:focus-visible {
    outline-offset: -3px;
}

.eo-menu-biezaca {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.eo-ikona-menu {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eo-licznik {
    margin-left: auto;
    padding: 0 .45rem;
    font-size: var(--eo-tekst-drobny);
    font-weight: 600;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border-radius: 999px;
    white-space: nowrap;
}

/* Menu na telefonie (recenzja 5eb3892a, wada W6): zamiast poziomego pasa, z którego widać było trzy pozycje z dziewięciu, jedno pole
   „Menu sprzedaży” z nazwą bieżącej pozycji, a po rozwinięciu pełny wykaz z nazwami grup. Bez skryptu — element details. Na komputerze
   to pole jest ukryte, a menu stoi w kolumnie. */
.eo-menu-telefon {
    display: none;
}

.eo-sprzedaz {
    min-width: 0;
    max-width: 68rem;
}

/* Wykazy w treści stron sprzedaży (lista bezpośrednio w treści strony): wiersze na karcie, bez kropek wyliczenia. Listy w dokumentach
   (informacja o danych, karta zgody, polityka) zostają zwykłym wyliczeniem — leżą w eo-dokument albo eo-karta. */
.eo-sprzedaz > ul:not([class]), .eo-pulpit > ul:not([class]), .eo-kolumna-lejka > ul {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: var(--eo-tekst-wykazu);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
}

.eo-sprzedaz > ul:not([class]) > li, .eo-pulpit > ul:not([class]) > li, .eo-kolumna-lejka > ul > li {
    padding: .625rem .875rem;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.eo-sprzedaz > ul:not([class]) > li:last-child, .eo-pulpit > ul:not([class]) > li:last-child, .eo-kolumna-lejka > ul > li:last-child {
    border-bottom: 0;
}

.eo-sprzedaz > ul:not([class]) > li .eo-znacznik, .eo-pulpit > ul:not([class]) > li .eo-znacznik {
    margin-right: .375rem;
}

.eo-podsekcja {
    font-size: var(--eo-tekst-wykazu);
    font-weight: 600;
    margin: 1rem 0 .5rem;
}

/* Części pulpitu Biura bez spraw: jeden wykaz zdań pod częściami, w których coś jest (recenzja 5eb3892a, wada W8). */
.eo-bez-spraw {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    color: var(--mud-palette-text-secondary);
}

/* Pulpit: liczby „do zrobienia” na górze, części pulpitu jako wykazy; zdanie „nie ma …” w części bez pozycji wyciszone. */
.eo-kafle {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .75rem;
    margin: 1.25rem 0 .5rem;
    padding: 0;
}

.eo-kafel > a, .eo-kafel > .eo-kafel-tresc {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    height: 100%;
    padding: 1rem 1.125rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
    box-sizing: border-box;
}

.eo-kafel > a:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--eo-cien-podniesiony);
}

.eo-kafel-liczba {
    font-family: var(--eo-kroj-tytulow);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.eo-kafel-opis {
    font-weight: 500;
}

.eo-kafel-dopisek {
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
}

.eo-kafel > a .eo-kafel-dopisek {
    color: var(--mud-palette-primary);
    text-decoration: underline;
    text-underline-offset: .18em;
}

/* Liczba zadań po terminie w kafelku: ikona zegara i pogrubienie, nie sama barwa (recenzja 5eb3892a, wada W4). */
.eo-kafel-pilne {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: var(--eo-tekst-drobny);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.eo-kafel-pilne svg {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
}

.eo-pulpit > h2.eo-panel-sekcja + p {
    color: var(--mud-palette-text-secondary);
}

/* Lejek (recenzja 5eb3892a, wada W3): główna droga — pięć kolumn w jednym rzędzie, w kolejności etapów; przy wąskim oknie przewija się
   sama tablica, nie strona. „Utracony” i „Odłożony” stoją osobno, pod nagłówkiem „Poza główną drogą lejka”. Firma jako karta: nazwa
   w pierwszym wierszu, dzień wejścia w etap w drugim, pismem drugorzędnym. */
.eo-tablica-okno {
    margin-top: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.eo-tablica-lejka {
    display: grid;
    grid-template-columns: repeat(5, minmax(11rem, 1fr));
    gap: .75rem;
}

.eo-tablica-poza {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 22rem));
}

.eo-kolumna-lejka {
    display: flex;
    flex-direction: column;
    padding: .75rem;
    background: var(--mud-palette-background-gray);
    border-radius: var(--eo-zaokraglenie);
}

.eo-kolumna-naglowek {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    margin: 0 0 .625rem;
    font-size: var(--eo-tekst-wykazu);
    font-weight: 600;
    line-height: 1.35;
}

.eo-kolumna-liczba {
    font-size: var(--eo-tekst-drobny);
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.eo-kolumna-lejka > ul {
    margin: 0;
}

.eo-karta-firmy-nazwa {
    display: block;
}

.eo-karta-firmy-od {
    display: block;
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
}

/* Przebieg (PrzebiegKrokow — etapy sprawy na karcie firmy, stany dokumentu na stronie oferty; recenzja 5eb3892a, wada W1). Krok
   zakończony: znak ✓ w kole i słowo „zakończony”, pełna linia do następnego kroku. Krok bieżący: ramka, barwa etapu na pasku z lewej,
   napis „bieżący” i aria-current. Krok dalszy: bez ramki, linia przerywana, słowo „dalszy” dla czytnika ekranu. Kroki nie mają kształtu
   przycisku, bo nie są odnośnikami. Krok poza główną drogą stoi osobno, bez linii. */
.eo-przebieg {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.75rem;
    margin: .5rem 0 1.25rem;
    padding: 0;
    /* Linia łącząca pierwszy krok nowego wiersza wystawałaby w lewo poza wykaz — przycina ją krawędź wykazu. */
    overflow: hidden;
}

.eo-przebieg-tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}

.eo-przebieg-krok {
    --eo-barwa: var(--mud-palette-lines-inputs);
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .25rem;
    font-size: var(--eo-tekst-wykazu);
    color: var(--mud-palette-text-secondary);
}

.eo-przebieg-krok + .eo-przebieg-krok::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -1.5rem;
    width: 1.25rem;
    border-top: 2px dashed var(--mud-palette-lines-inputs);
}

.eo-przebieg-zakonczony + .eo-przebieg-krok::before {
    border-top-style: solid;
    border-top-color: var(--mud-palette-text-primary);
}

.eo-przebieg-zakonczony {
    color: var(--mud-palette-text-primary);
}

.eo-przebieg-krok[aria-current="step"] {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    padding: .375rem .75rem;
    background: color-mix(in srgb, var(--eo-barwa) 13%, var(--mud-palette-surface));
    border: 2px solid var(--mud-palette-text-primary);
    border-left: 6px solid var(--eo-barwa);
    border-radius: var(--eo-zaokraglenie);
}

.eo-przebieg-krok.eo-przebieg-poza {
    margin-left: .75rem;
}

.eo-przebieg-krok.eo-przebieg-poza::before {
    display: none;
}

.eo-przebieg-znak {
    flex: none;
}

.eo-przebieg-obrys {
    fill: var(--mud-palette-surface);
    stroke: currentColor;
    stroke-width: 1.5;
}

.eo-przebieg-dalszy .eo-przebieg-obrys {
    stroke-dasharray: 2.5 2;
}

.eo-przebieg-wypelnienie {
    fill: currentColor;
}

.eo-przebieg-kreska {
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    fill: none;
}

.eo-przebieg-tlo-ptaszka {
    fill: var(--mud-palette-text-primary);
}

.eo-przebieg-ptaszek {
    fill: none;
    stroke: var(--mud-palette-surface);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eo-przebieg-dopisek {
    font-size: var(--eo-tekst-drobny);
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.eo-przebieg-biezacy {
    padding: 0 .4rem;
    font-size: var(--eo-tekst-drobny);
    font-weight: 600;
    color: var(--mud-palette-surface);
    background: var(--mud-palette-text-primary);
    border-radius: 999px;
    white-space: nowrap;
}

/* Blok „Do zrobienia w tej sprawie” na karcie firmy (recenzja 5eb3892a, wada W2): zadania i to, na co sprawa czeka, zaraz pod przebiegiem. */
.eo-do-zrobienia {
    max-width: 52rem;
    margin: 0 0 1.5rem;
    padding: .25rem 1.25rem .5rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: var(--eo-zaokraglenie);
}

.eo-do-zrobienia .eo-panel-sekcja {
    margin-top: 1rem;
}

.eo-do-zrobienia ul {
    margin: 0 0 .75rem;
    padding-left: 0;
    list-style: none;
}

.eo-do-zrobienia li {
    padding: .375rem 0;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.eo-do-zrobienia li:last-child {
    border-bottom: 0;
}

.eo-do-zrobienia .eo-znacznik {
    margin-right: .375rem;
}

/* Strona startowa: czynności zamiast samego opisu (recenzja 5eb3892a, wada W7). */
.eo-start-czynnosci {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1rem 0 1.5rem;
}

/* Oferta: czynności nieodwracalne osobno, pod pozostałymi (recenzja 5eb3892a, wada W5). */
.eo-czynnosci-nieodwracalne {
    max-width: 44rem;
    margin-top: 2rem;
    padding-top: .25rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.eo-ikona-czynnosci {
    flex: none;
    margin-right: .5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─── Strony informacyjne (krok 0.5): polityka prywatności i zasady korzystania — dokument na karcie ─────── */
.eo-dokument {
    max-width: 52rem;
    padding: 1.75rem 2rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-sizing: border-box;
}

.eo-dokument h2 {
    font-size: 1.1875rem;
    font-weight: 600;
    margin: 1.75rem 0 .5rem;
}

.eo-dokument p {
    margin: 0 0 .75rem;
    line-height: 1.6;
}

.eo-dokument-metryczka {
    color: var(--mud-palette-text-secondary);
}

.eo-dokument .eo-tabela {
    margin: .5rem 0 1rem;
    border-collapse: collapse;
    border-radius: 0;
}

.eo-dokument .eo-tabela caption {
    text-align: left;
    font-weight: 600;
    padding-bottom: .25rem;
}

.eo-dokument .eo-tabela th, .eo-dokument .eo-tabela td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: .4rem .6rem;
}

/* Gotowa wiadomość do sprzedawcy (zlecenie A3c, decyzja D3-NIP): tekst do skopiowania, z zachowaniem wierszy. */
.eo-wiadomosc {
    white-space: pre-wrap;
    padding: .75rem 1rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie-male);
    font: inherit;
}

/* Informacja o danych osobowych i karta zgody (etap 1A, zlecenie A4b): prawo sprzeciwu w osobnej ramce (art. 21 ust. 4 RODO)
   — wyróżnienie ramką i pogrubieniem, bez barwy (K7); karta KZ-1 większym pismem i z odstępami do zaznaczania na tablecie.
   Wydruk bez paska aplikacji, menu sprzedaży, stopki i wskazówek dla agenta. */
.eo-sprzeciw {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border: 2px solid currentColor;
    border-radius: var(--eo-zaokraglenie-male);
}

.eo-karta {
    max-width: 48rem;
    padding: 1.75rem 2rem;
    font-size: 1.05rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-sizing: border-box;
}

.eo-karta p {
    margin: 0 0 1rem;
    line-height: 1.7;
}

.eo-karta-tytul {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.eo-karta-pole {
    font-size: 1.15rem;
}

/* Zdanie o nieobsłużonym błędzie obwodu (uwaga FB-FA-Z9B-BEZP-04 recenzji Z9b; wzór portalu src/OptimaClientPortal/wwwroot/app.css:207-224).
   Ukryte, dopóki skrypt Blazora go nie pokaże; tło i pasek z motywu (paleta Okabe-Ito), a stan niesie ikona i etykieta (K7). */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: .6rem 3rem .7rem 1.25rem;
    background: var(--mud-palette-background-gray);
    border-top: 4px solid var(--mud-palette-warning);
    box-shadow: var(--eo-cien-podniesiony);
    box-sizing: border-box;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ─── Aplikacja agenta w terenie (11 października 2026 r.) ─────────────────────────────────────────────────────
   Polecenie właściciela: „nowoczesna aplikacja dla agentów w terenie”, „prosty w obsłudze, z planerem”, „przejrzystość, intuicyjność”.
   Plan dnia i tygodnia, kończące się umowy, wiedza i rynek energii, dolny pasek na telefonie. Barwy wyłącznie ze zmiennych motywu (K5);
   stan zawsze niesie znacznik ze słowem, kreska z lewej jest dodatkiem (K7). */

.eo-wstep-strony {
    max-width: 68ch;
    margin: 0 0 1.25rem;
    color: var(--mud-palette-text-secondary);
}

.eo-pusty-stan {
    margin: 0 0 1.25rem;
    padding: 1rem 1.125rem;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--eo-zaokraglenie);
}

/* Wykaz planu: godzina (albo dzień) w stałej kolumnie z lewej, treść obok, dopisek pismem drugorzędnym w drugim wierszu. */
.eo-wykaz-planu {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
    overflow: hidden;
}

.eo-plan-pozycja {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .75rem .875rem .75rem .75rem;
    border-bottom: 1px solid var(--mud-palette-table-lines);
    border-left: 4px solid transparent;
}

.eo-plan-pozycja:last-child {
    border-bottom: 0;
}

.eo-plan-po-terminie {
    border-left-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 5%, var(--mud-palette-surface));
}

.eo-plan-umowa {
    border-left-color: var(--mud-palette-primary);
}

.eo-plan-godzina {
    font-size: var(--eo-tekst-wykazu);
    font-weight: 600;
    white-space: nowrap;
}

.eo-plan-tresc {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .5rem;
    min-width: 0;
    font-size: var(--eo-tekst-wykazu);
}

.eo-plan-dopisek {
    flex-basis: 100%;
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
}

.eo-dopisek-wykazu {
    margin: -.5rem 0 1rem;
    font-size: var(--eo-tekst-drobny);
}

/* Planer: nawigacja tygodni, potem dni jako karty jedna pod drugą (czyta się jak terminarz, także na telefonie). */
.eo-planer-nawigacja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: .25rem 0 1.25rem;
}

.eo-planer-zakres {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.eo-planer-nowe {
    margin-left: auto;
}

.eo-tydzien {
    list-style: none;
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
}

.eo-dzien {
    padding: .875rem 1rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
}

.eo-dzien-dzis {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary), var(--eo-cien-podniesiony);
}

.eo-dzien-miniony {
    background: var(--mud-palette-background);
    box-shadow: none;
}

.eo-dzien-naglowek {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.eo-dzien-nazwa {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.eo-dzien-nazwa::first-letter {
    text-transform: uppercase;
}

.eo-dzien-dzis-napis {
    color: var(--mud-palette-primary);
}

.eo-glowna a.eo-dzien-dodaj {
    font-size: var(--eo-tekst-drobny);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.eo-dzien-pusty {
    flex: 1 1 auto;
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
}

/* Dzień bez wpisów: jeden wiersz, bez cienia — puste dni nie spychają spotkań w dół ekranu. */
.eo-dzien-bez-wpisow {
    padding: .5rem 1rem;
    box-shadow: none;
}

.eo-dzien-bez-wpisow .eo-dzien-naglowek {
    margin-bottom: 0;
}

.eo-dzien-bez-wpisow .eo-dzien-nazwa {
    font-weight: 500;
}

.eo-dzien .eo-wykaz-planu {
    margin: 0;
    border-color: var(--mud-palette-table-lines);
    box-shadow: none;
}

.eo-planer-po-terminie {
    max-width: none;
    margin: 0 0 1rem;
}

.eo-planer-po-terminie .eo-wykaz-planu {
    margin: 0;
}

/* Kończące się umowy: karta na umowę — firma i etap, koniec, termin wypowiedzenia, punkt, skrót „Zaplanuj rozmowę”. */
.eo-wykaz-kart {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
}

.eo-karta-umowy {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1rem 1.125rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
    min-width: 0;
}

.eo-karta-umowy-glowa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .375rem .5rem;
}

.eo-karta-umowy-firma {
    font-weight: 600;
}

.eo-karta-umowy-dane {
    display: grid;
    gap: .25rem;
    margin: 0;
    font-size: var(--eo-tekst-wykazu);
}

.eo-karta-umowy-dane > div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: .5rem;
}

.eo-karta-umowy-dane dt {
    color: var(--mud-palette-text-secondary);
}

.eo-karta-umowy-dane dd {
    margin: 0;
}

.eo-karta-umowy-czynnosci {
    margin: auto 0 0;
}

/* Rynek energii na pulpicie i strona „Wiedza i rynek energii”: odnośniki jako karty z nazwą, zdaniem i adresem napisanym wprost. */
.eo-rynek {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    margin: 1.25rem 0;
    padding: .875rem 1.125rem;
    background: var(--eo-tlo-akcentu);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, var(--mud-palette-surface));
    border-radius: var(--eo-zaokraglenie);
}

.eo-rynek-tytul {
    margin: 0;
    font-size: var(--eo-tekst-wykazu);
    font-weight: 600;
}

.eo-rynek-odnosniki {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.125rem;
    margin: 0;
    font-size: var(--eo-tekst-wykazu);
}

.eo-odnosniki {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
}

.eo-glowna a.eo-odnosnik {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem 1.125rem;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
}

.eo-glowna a.eo-odnosnik:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--eo-cien-podniesiony);
}

.eo-odnosnik-nazwa {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.eo-odnosnik-opis {
    font-size: var(--eo-tekst-wykazu);
    color: var(--mud-palette-text-secondary);
}

.eo-odnosnik-adres {
    margin-top: auto;
    padding-top: .25rem;
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
}

.eo-slowniczek {
    display: grid;
    gap: .5rem;
    margin: 0 0 1.5rem;
}

.eo-slowniczek > div {
    padding: .75rem 1rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
}

.eo-slowniczek dt {
    font-weight: 600;
}

.eo-slowniczek dd {
    max-width: 75ch;
    margin: .25rem 0 0;
    color: var(--mud-palette-text-secondary);
}

.eo-przebieg-sprawy {
    display: grid;
    gap: .5rem;
    max-width: 75ch;
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}

/* Karta firmy: szybkie czynności jako kafelki z ikoną (na telefonie trzy w rzędzie, w zasięgu kciuka) i następny krok z brakami. */
.eo-szybkie-czynnosci {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .5rem;
    margin: 1rem 0 1.25rem;
}

.eo-glowna a.eo-czynnosc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 4.75rem;
    padding: .625rem .5rem;
    font-size: var(--eo-tekst-drobny);
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
}

.eo-glowna a.eo-czynnosc:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: var(--eo-cien-podniesiony);
}

.eo-ikona-czynnosci-duza {
    flex: none;
    fill: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.eo-czynnosc-dopisek {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.eo-nastepny-krok {
    margin: 0 0 1.5rem;
    padding: 1rem 1.125rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
}

.eo-nastepny-krok > h2.eo-panel-sekcja {
    margin-top: 0;
}

.eo-nastepny-krok > p:last-child {
    margin-bottom: 0;
}

.eo-braki {
    list-style: none;
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
}

.eo-braki li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--mud-palette-table-lines);
}

.eo-braki li:first-child {
    border-top: 0;
}

.eo-brak-znak {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-error) 16%, var(--mud-palette-surface));
    border-radius: 50%;
}

.eo-gotowe span[aria-hidden="true"] {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .25rem;
    font-size: .8125rem;
    background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-surface));
    border-radius: 50%;
}

/* Symulacja oszczędności: cztery kroki z numerem, grupa taryfowa jako przyciski, wynik nad formularzem — oszczędność dużą cyfrą,
   warianty jako karty, wszystkie warianty w rozwijanej tabeli. Wybrana grupa ma znak „✓”, grubszą ramkę i tło, nie samą barwę (K7). */
.eo-symulacja-krok {
    margin: 0 0 1rem;
    padding: 1rem 1.125rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
}

.eo-symulacja-krok-tytul {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0 0 .75rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.eo-symulacja-nr {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    font-size: .875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    background: var(--eo-tlo-akcentu);
    border: 2px solid var(--mud-palette-primary);
    border-radius: 50%;
}

.eo-symulacja-krok label {
    display: block;
    margin-bottom: .25rem;
}

.eo-symulacja-krok > p:last-child {
    margin-bottom: 0;
}

.eo-symulacja-krok .eo-dopisek-wykazu {
    margin: 0 0 .75rem;
    color: var(--mud-palette-text-secondary);
}

/* Wybór grupy jako przełącznik segmentowy iOS: szara szyna, wybrany segment — biały, uniesiony cieniem, pogrubiony i ze znakiem „✓”. */
.eo-wybor-grupy {
    display: flex;
    gap: 2px;
    max-width: 36rem;
    margin: 0 0 .75rem;
    padding: 2px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, var(--mud-palette-surface));
    border-radius: 10px;
}

.eo-glowna a.eo-grupa {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2.25rem;
    padding: .25rem;
    font-size: var(--eo-tekst-drobny);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    background: transparent;
    border-radius: 8px;
}

.eo-glowna a.eo-grupa:hover {
    background: color-mix(in srgb, var(--mud-palette-surface) 60%, transparent);
}

.eo-glowna a.eo-grupa-wybrana,
.eo-glowna a.eo-grupa-wybrana:hover {
    font-weight: 700;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--mud-palette-text-primary) 14%, transparent), 0 1px 1px color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
}

.eo-symulacja-pola {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0 1.25rem;
}

.eo-symulacja-pola > p {
    min-width: 0;
    margin: 0 0 .75rem;
}

.eo-symulacja-pola > p.eo-symulacja-pole-szerokie {
    grid-column: 1 / -1;
}

.eo-symulacja-para {
    display: flex;
    gap: .5rem;
    max-width: 26rem;
}

.eo-symulacja-para > .eo-pole {
    flex: 1 1 0;
    min-width: 0;
}

.eo-symulacja-licz {
    min-height: 3rem;
    padding-inline: 1.75rem;
    font-size: 1rem;
}

.eo-symulacja-wynik {
    margin: 0 0 1.5rem;
}

.eo-symulacja-glowna {
    margin: 0 0 1.25rem;
    padding: 1.25rem 1.375rem;
    background: var(--eo-tlo-akcentu);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-surface));
    border-left: 6px solid var(--mud-palette-primary);
    border-radius: var(--eo-zaokraglenie);
}

.eo-symulacja-glowna p {
    max-width: 70ch;
    margin: 0;
}

.eo-symulacja-glowna .eo-symulacja-glowna-napis {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.eo-symulacja-glowna .eo-symulacja-glowna-kwota {
    margin: .25rem 0 .625rem;
    font-size: clamp(2rem, 7vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.eo-symulacja-podtytul {
    margin: 0 0 .625rem;
    font-size: 1rem;
    font-weight: 600;
}

.eo-wykaz-wariantow {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    align-items: start;
    gap: .75rem;
    margin: 0 0 1rem;
    padding: 0;
}

.eo-karta-wariantu {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
    padding: 1rem 1.125rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
}

.eo-karta-wariantu-najtanszy {
    border: 2px solid var(--mud-palette-primary);
}

.eo-karta-wariantu-glowa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem .5rem;
}

.eo-karta-wariantu-nazwa {
    font-weight: 600;
}

.eo-karta-wariantu-znacznik {
    padding: .125rem .5rem;
    font-size: var(--eo-tekst-drobny);
    font-weight: 700;
    background: var(--eo-tlo-akcentu);
    border: 1px solid var(--mud-palette-primary);
    border-radius: 999px;
}

.eo-karta-wariantu-okres {
    margin: 0;
    font-size: var(--eo-tekst-wykazu);
    color: var(--mud-palette-text-secondary);
}

.eo-karta-wariantu-kwoty {
    display: grid;
    gap: .375rem;
    margin: 0;
    font-size: var(--eo-tekst-wykazu);
    font-variant-numeric: tabular-nums;
}

.eo-karta-wariantu-kwoty > div {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: .5rem;
}

.eo-karta-wariantu-kwoty dt {
    color: var(--mud-palette-text-secondary);
}

.eo-karta-wariantu-kwoty dd {
    margin: 0;
}

.eo-karta-wariantu-kwoty > div.eo-karta-wariantu-ceny {
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
}

.eo-ceny-lat-ramka {
    max-width: 100%;
    overflow-x: auto;
}

.eo-ceny-lat {
    border-collapse: collapse;
    font-size: var(--eo-tekst-drobny);
    font-variant-numeric: tabular-nums;
}

.eo-ceny-lat th,
.eo-ceny-lat td {
    padding: .25rem .625rem .25rem 0;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

.eo-ceny-lat thead th {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.eo-ceny-lat tbody th {
    font-weight: 600;
}

.eo-karta-wariantu .eo-dopisek-wykazu {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}

.eo-symulacja-wszystkie {
    max-width: none;
    margin: 0 0 1rem;
}

.eo-symulacja-dalej {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    margin: 1rem 0 0;
}

/* Lista klientów jako CRM: nazwa i NIP w jednej komórce, pod wartością drobny dopisek (rodzaj kontaktu, „za N dni”, „+ Zaplanuj”).
   Na telefonie wiersz staje się kartą (blok 640 px niżej). */
.eo-wykaz-klientow-liczba {
    margin: 0 0 .5rem;
    color: var(--mud-palette-text-secondary);
}

.eo-klient-nazwa {
    font-weight: 600;
}

.eo-klient-nip,
.eo-klient-dopisek {
    display: block;
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
}

.eo-klient-brak {
    color: var(--mud-palette-text-secondary);
}

/* Moduł zarządzania sprzedażą: wynik miesiąca w kafelkach, „Wymaga Pana decyzji” jako wiersze listy iOS (znak, zdanie, przycisk), lejek
   z paskami (element progress — bez stylu w atrybucie, reguła źródeł treści), praca agentów jako tabela kart. */
.eo-zarzadzanie-sekcja {
    margin: 0 0 1.75rem;
}

.eo-wykaz-decyzji {
    list-style: none;
    margin: 0;
    padding: 0 1rem;
    background: var(--mud-palette-surface);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
}

.eo-wykaz-decyzji li {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem .75rem;
    padding: .625rem 0;
    border-top: 1px solid var(--eo-linia);
}

.eo-wykaz-decyzji li:first-child {
    border-top: 0;
}

.eo-decyzja-znak {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: .875rem;
    background: var(--eo-tlo-akcentu);
    border-radius: 50%;
}

.eo-lejek-zarzadzania {
    list-style: none;
    display: grid;
    gap: 0;
    margin: 0 0 .75rem;
    padding: .25rem 1rem;
    background: var(--mud-palette-surface);
    border-radius: var(--eo-zaokraglenie);
    box-shadow: var(--eo-cien);
}

.eo-lejek-zarzadzania li {
    display: grid;
    grid-template-columns: 13rem minmax(6rem, 1fr) 3rem minmax(0, 1.4fr);
    align-items: center;
    gap: .5rem 1rem;
    padding: .625rem 0;
    border-top: 1px solid var(--eo-linia);
}

.eo-lejek-zarzadzania li:first-child {
    border-top: 0;
}

.eo-lejek-pasek {
    width: 100%;
    height: .625rem;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, var(--mud-palette-surface));
    overflow: hidden;
}

.eo-lejek-pasek::-webkit-progress-bar {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 7%, var(--mud-palette-surface));
    border-radius: 999px;
}

.eo-lejek-pasek::-webkit-progress-value {
    background: var(--mud-palette-primary);
    border-radius: 999px;
}

.eo-lejek-pasek::-moz-progress-bar {
    background: var(--mud-palette-primary);
    border-radius: 999px;
}

.eo-lejek-liczba {
    font-family: var(--eo-kroj-tytulow);
    font-size: 1.25rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.eo-lejek-opis {
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
}

.eo-ryzyko {
    display: block;
    font-size: var(--eo-tekst-drobny);
}

/* Dolny pasek: wyłącznie na telefonie i w wąskim oknie (blok 960 px niżej). */
.eo-dolny-pasek {
    display: none;
}

/* ─── Telefon i wąskie okno ────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .eo-przestrzen {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    /* Menu sprzedaży nad treścią: pole „Menu sprzedaży” z nazwą bieżącej pozycji, po rozwinięciu pełny wykaz z nazwami grup
       (recenzja 5eb3892a, wada W6). Kolumna menu z komputera jest wtedy ukryta. */
    .eo-menu-sprzedazy {
        display: none;
    }

    .eo-menu-telefon {
        display: block;
    }

    .eo-menu-telefon > .eo-rozwijane {
        max-width: none;
        margin: 0;
    }

    .eo-menu-telefon summary {
        flex-wrap: wrap;
        column-gap: .5rem;
    }

    .eo-menu-telefon-wykaz {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        padding: .75rem .5rem;
    }

    .eo-wejscie {
        grid-template-columns: minmax(0, 1fr);
        padding: .5rem 0;
    }

    .eo-wejscie-ilustracja {
        display: none;
    }

    /* Dolny pasek aplikacji agenta: pięć miejsc w zasięgu kciuka, środkowe „Nowa firma” jako wyróżniony przycisk; bieżące miejsce —
       aria-current, pogrubienie i zaokrąglone tło pod ikoną. Strona dostaje u dołu odstęp na pasek, żeby nie zasłaniał stopki. */
    .eo-dolny-pasek {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 110;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom, 0px));
        /* Pasek kart jak w iOS: półprzezroczysty z rozmyciem treści pod spodem i linią włosową u góry, bez cienia. */
        background: var(--eo-szklo);
        -webkit-backdrop-filter: var(--eo-szklo-rozmycie);
        backdrop-filter: var(--eo-szklo-rozmycie);
        border-top: 1px solid var(--eo-linia);
    }

    .eo-glowna .eo-dolny-pasek a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: .125rem;
        min-height: 3.25rem;
        padding: .25rem .125rem;
        font-size: .75rem;
        line-height: 1.2;
        text-align: center;
        color: var(--mud-palette-text-secondary);
        text-decoration: none;
        border-radius: var(--eo-zaokraglenie-male);
    }

    .eo-dolny-pasek .eo-ikona-menu {
        width: 22px;
        height: 22px;
    }

    .eo-glowna .eo-dolny-pasek a[aria-current="page"] {
        font-weight: 600;
        color: var(--mud-palette-primary);
    }

    /* Bieżące miejsce: barwa czynności, pogrubienie i zaokrąglone tło pod ikoną (kształt, nie sama barwa — K7). */
    .eo-dolny-pasek a[aria-current="page"] > .eo-ikona-menu {
        box-sizing: content-box;
        padding: .1875rem .875rem;
        margin: -.1875rem 0;
        background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
        border-radius: 999px;
    }

    .eo-dolny-pasek a:focus-visible {
        outline-offset: -3px;
    }

    .eo-dolny-dodaj-kolo {
        display: grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        margin-top: -1.125rem;
        color: var(--mud-palette-primary-text);
        background: var(--mud-palette-primary);
        border-radius: 50%;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    }

    .eo-dolny-dodaj-kolo .eo-ikona-menu {
        stroke-width: 2.25;
    }

    .eo-dolny-licznik {
        position: absolute;
        top: .125rem;
        left: calc(50% + .375rem);
        min-width: 1.25rem;
        box-sizing: border-box;
        padding: 0 .3rem;
        font-size: .6875rem;
        font-weight: 700;
        line-height: 1.25rem;
        color: var(--mud-palette-primary-text);
        background: var(--mud-palette-primary);
        border-radius: 999px;
    }

    body:has(.eo-dolny-pasek) {
        padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
    }

    .eo-planer-nowe {
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    /* Na telefonie pasek nie jest przyklejony: ma dwa rzędy i zasłaniałby treść z fokusem (WCAG 2.4.11). */
    html {
        scroll-padding-top: 0;
    }

    /* Symulacja na telefonie: kwoty wariantu pod nazwą pozycji, przycisk na całą szerokość w zasięgu kciuka. */
    .eo-symulacja-krok {
        padding: .875rem;
    }

    .eo-karta-wariantu-kwoty > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .eo-symulacja-licz {
        width: 100%;
    }

    /* Lejek w module zarządzania na telefonie: nazwa etapu i liczba w pierwszym wierszu, pasek i opis pod spodem. */
    .eo-lejek-zarzadzania li {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .375rem .75rem;
    }

    .eo-lejek-pasek,
    .eo-lejek-opis {
        grid-column: 1 / -1;
    }

    .eo-lejek-pasek {
        order: 3;
    }

    .eo-lejek-opis {
        order: 4;
    }

    .eo-wykaz-decyzji li {
        grid-template-columns: 1.75rem minmax(0, 1fr);
    }

    .eo-wykaz-decyzji li > .eo-przycisk-drugorzedny {
        grid-column: 2;
        justify-self: start;
    }

    /* Tabela kart na telefonie (lista klientów, praca agentów): każdy wiersz to karta, przy każdej wartości podpis z atrybutu data-etykieta; nagłówek tabeli zostaje
       wyłącznie dla czytnika ekranu. */
    .eo-tabela-ramka:has(.eo-tabela-kart) {
        overflow: visible;
        background: none;
        border: 0;
    }

    .eo-tabela-kart thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .eo-tabela-kart,
    .eo-tabela-kart tbody,
    .eo-tabela-kart tr {
        display: block;
        background: none;
        border: 0;
    }

    .eo-tabela-kart tr {
        margin: 0 0 .75rem;
        padding: .75rem .875rem;
        background: var(--mud-palette-surface);
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--eo-zaokraglenie);
        box-shadow: var(--eo-cien);
    }

    .eo-tabela-ramka .eo-tabela-kart td {
        position: relative;
        display: block;
        min-width: 0;
        padding: .3rem 0 .3rem 6.75rem;
        border: 0;
    }

    .eo-tabela-kart td::before {
        content: attr(data-etykieta);
        position: absolute;
        top: .3rem;
        left: 0;
        width: 6.25rem;
        font-size: var(--eo-tekst-drobny);
        color: var(--mud-palette-text-secondary);
    }

    .eo-tabela-ramka .eo-tabela-kart td:first-child {
        padding: 0 0 .375rem;
    }

    .eo-tabela-kart td:first-child::before {
        content: none;
    }

    /* Harmonogram obu stron łańcucha na karcie umowy Biura: podpisy („Kancelaria — najpóźniej do”) są dłuższe niż kolumna podpisu i łamałyby się
       na podpis następnej wartości, więc podpis stoi nad wartością (etap 4, rozdział 11, przegląd po budowie — zarzuty przeglądu, pkt 11). */
    .eo-tabela-ramka .eo-tabela-kart.eo-harmonogram-obu-stron td {
        padding-left: 0;
    }

    .eo-tabela-kart.eo-harmonogram-obu-stron td::before {
        position: static;
        display: block;
        width: auto;
    }

    /* Strzałka „›” przy nazwie w pierwszej komórce — jak przy wierszu listy iOS, który otwiera szczegóły. */
    .eo-tabela-kart .eo-klient-nazwa::after {
        content: " ›";
        font-weight: 400;
        color: var(--mud-palette-text-secondary);
    }

    .eo-naglowek {
        position: static;
    }

    .eo-kontener {
        padding: 0 1rem;
    }

    .eo-glowna {
        padding-top: 1rem;
    }

    .eo-naglowek-wnetrze {
        flex-wrap: wrap;
        gap: .25rem .75rem;
        padding: .5rem 1rem .375rem;
    }

    .eo-marka {
        width: 100%;
    }

    /* Pozycje paska zawijają się do następnego wiersza zamiast przewijać się w bok: „Wyloguj” jest zawsze cały, a obwódka fokusu nie jest
       przycinana krawędzią pasa (recenzja 5eb3892a, wada W6; recenzja dostępności, uwagi 3 i 4). */
    .eo-pasek-czynnosci {
        width: 100%;
        flex-wrap: wrap;
        gap: .25rem;
        margin: 0;
        padding: 0 0 .25rem;
    }

    .eo-przycisk-paska {
        padding: .25rem .5rem;
    }

    .eo-przycisk-paska[aria-current="page"] {
        padding-bottom: calc(.25rem - 2px);
    }

    .eo-wylogowanie {
        margin-left: auto;
    }

    .eo-konto, .eo-dokument, .eo-karta {
        padding: 1.25rem 1rem;
    }

    .eo-konto-tytul {
        font-size: 2.125rem;
        line-height: 1.15;
    }

    .eo-kafle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .eo-kafel > a, .eo-kafel > .eo-kafel-tresc {
        padding: .75rem .875rem;
    }

    .eo-kafel-liczba {
        font-size: 1.5rem;
    }

    /* Tabele: mniejsze pismo i odstępy; szeroka tabela przewija się w ramce (RamkaTabeli). Wyrazy, daty i kwoty nie łamią się w środku
       (recenzja 5eb3892a, wada B1 — wcześniejsze „overflow-wrap: anywhere” rozbijało kwoty i daty na kawałki). */
    .eo-tabela {
        font-size: var(--eo-tekst-drobny);
    }

    .eo-tabela th, .eo-tabela td {
        padding: .45rem .5rem;
    }

    /* Kolumny z tekstem nie ściskają się do jednego wyrazu w wierszu — tabela jest wtedy szersza i przewija się w ramce. */
    .eo-tabela-ramka th, .eo-tabela-ramka td {
        min-width: 6.5rem;
    }

    /* Znacznik stanu poza tabelą (np. długi znacznik ochrony firmy pod nazwą) zawija się między wyrazami; w tabeli stoi w jednym wierszu. */
    .eo-stan {
        white-space: normal;
    }

    .eo-tabela .eo-stan {
        white-space: nowrap;
    }

    .eo-tabela button {
        margin-bottom: .25rem;
    }

    .eo-tablica-lejka, .eo-tablica-poza {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Przebieg w kolumnie: linia łącząca biegnie w pionie przez środek znaku kroku. Każdy krok ma te same odstępy co krok bieżący
       (przezroczyste obramowanie), więc znaki stoją w jednej osi. */
    .eo-przebieg {
        flex-direction: column;
        align-items: flex-start;
        gap: .375rem;
    }

    .eo-przebieg-krok {
        padding: .375rem .75rem;
        border: 2px solid transparent;
        border-left-width: 6px;
    }

    .eo-przebieg-krok + .eo-przebieg-krok::before {
        top: calc(-.375rem - 2px);
        left: calc(.75rem + 9px);
        width: 0;
        height: .375rem;
        border-top: 0;
        border-left: 2px dashed var(--mud-palette-lines-inputs);
    }

    .eo-przebieg-zakonczony + .eo-przebieg-krok::before {
        border-left-style: solid;
        border-left-color: var(--mud-palette-text-primary);
    }

    .eo-przebieg-krok.eo-przebieg-poza {
        margin: .5rem 0 0;
    }

    .eo-role, .eo-potwierdzenie {
        padding: .875rem 1rem;
    }

    .eo-plan-pozycja {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: .5rem;
        padding: .625rem .75rem .625rem .625rem;
    }

    .eo-karta-umowy-dane > div {
        grid-template-columns: 7.5rem minmax(0, 1fr);
    }

    .eo-szybkie-czynnosci {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .eo-braki li {
        grid-template-columns: 1.5rem minmax(0, 1fr);
    }

    .eo-brak-czynnosc {
        grid-column: 2;
        justify-self: start;
    }

    /* Planer na telefonie: zakres dni w pierwszym wierszu, „Wcześniej” i „Dalej” obok siebie pod nim, przycisk planowania na całą szerokość. */
    .eo-planer-zakres {
        order: -1;
        flex-basis: 100%;
    }

    .eo-planer-nawigacja .eo-przycisk-drugorzedny {
        flex: 1 1 0;
        text-align: center;
    }

    .eo-planer-nowe {
        flex-basis: 100%;
        text-align: center;
    }

    .eo-planer-po-terminie summary {
        flex-wrap: wrap;
        column-gap: .5rem;
    }

    .eo-planer-po-terminie .eo-rozwijane-dopisek {
        flex-basis: 100%;
    }
}

/* ─── Prowizje (etap 4, 6.2–6.5; krok K8): rachunek cyframi o stałej szerokości, kafel prowizji na górze pulpitu agenta, harmonogram,
   wiersz „Razem”, ostrzeżenia i wiersze transz w formularzu. Barwy wyłącznie zmiennymi motywu; stan zawsze słowem i znakiem (K7).
   Tabele harmonogramu (pozycje na stronie agenta, harmonogram obu stron na karcie umowy Biura) mają klasę eo-tabela-kart, więc na telefonie każda pozycja
   jest kartą z podpisem każdej wartości (6.5) i strona nie przewija się w bok; pozostałe tabele Biura przewijają się w bok wewnątrz RamkaTabeli. Kwota
   ujemna (eo-kwota-ujemna) ma zawsze minus i słowo, a klasa dodaje jej wyłącznie pogrubienie. ───────────────────────────── */
.eo-rachunek {
    margin: 0 0 1rem;
    padding: .875rem 1.125rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
    font-variant-numeric: tabular-nums;
}

.eo-rachunek-wiersz {
    margin: 0;
    padding: .25rem 0;
    overflow-wrap: anywhere;
}

.eo-rachunek-wiersz + .eo-rachunek-wiersz {
    border-top: 1px solid var(--eo-linia);
}

.eo-kwota-ujemna {
    font-weight: 600;
}

.eo-harmonogram {
    font-variant-numeric: tabular-nums;
}

ul.eo-harmonogram {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

ul.eo-harmonogram li + li {
    margin-top: .25rem;
}

.eo-kafle-prowizji {
    margin-bottom: 0;
}

.eo-kafel-prowizji-tytul {
    font-family: var(--eo-kroj-tytulow);
    font-size: 1.125rem;
    font-weight: 600;
}

/* Poprawki wyglądu po próbie na żywo (12 października 2026 r.): w kaflu prowizji pulpitu duża liczba „Do wypłaty” (jak w pozostałych kaflach), obok niej
   mniejszym stopniem „Przewidywana” i „Wypłacona w {rok} r.” — kwoty stoją przy swoich podpisach, a nie przy prawej krawędzi szerokiego kafla — i wskaźnik
   prognozy (element progress ze zdaniem obok; stan niesie zdanie, nie barwa paska). Na telefonie kwoty stoją jedna pod drugą. */
.eo-kafel-prowizji > a {
    gap: .625rem;
}

.eo-kafel-prowizji-kwoty {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem 2.75rem;
    font-variant-numeric: tabular-nums;
}

.eo-kafel-prowizji-glowna,
.eo-kafel-prowizji-poboczna {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.eo-kafel-prowizji-kwota {
    font-family: var(--eo-kroj-tytulow);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.eo-kafel-prowizji .eo-kafel-liczba {
    white-space: nowrap;
}

.eo-kafel-prowizji-podpis {
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-secondary);
}

.eo-kafel-prowizji-glowna .eo-kafel-prowizji-podpis {
    font-size: var(--eo-tekst-wykazu);
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.eo-kafel-prowizji-postep {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .875rem;
    font-size: var(--eo-tekst-drobny);
    color: var(--mud-palette-text-primary);
}

.eo-kafel-prowizji-pasek {
    flex: 0 0 16rem;
    width: 16rem;
}

/* „Moje prowizje”: kwoty kafli nie łamią się; zdanie o składzie prognozy pod kaflami, objaśnienie w elemencie rozwijanym na dole strony. */
.eo-kafle-moje-prowizje .eo-kafel-liczba {
    white-space: nowrap;
}

.eo-sklad-prognozy {
    margin: 0 0 .75rem;
    font-variant-numeric: tabular-nums;
}

.eo-rozwijane-objasnienie {
    max-width: none;
    margin-top: 1.25rem;
}

.eo-prowizje-zaleglosc {
    font-weight: 600;
}

/* Zdanie stanu prowizji pod nagłówkiem i w karcie umowy — cyfry o stałej szerokości. */
.eo-zdanie-stanu, .eo-karta-umowy-stan {
    font-variant-numeric: tabular-nums;
}

/* Znacznik stanu w karcie i w danych umowy zawija się w obrębie karty (długi znacznik przypisania wychodził przy 1440 px poza prawą krawędź). */
.eo-znacznik-zawijany .eo-znacznik {
    max-width: 100%;
    white-space: normal;
    box-sizing: border-box;
}

/* Prowizje w łańcuchu: kolumny pokrewne w jednej komórce — wartość, a pod nią dopisek; nagłówki zawijają się, tabela mieści się na szerokim ekranie. */
.eo-tabela-lancucha th {
    white-space: normal;
}

.eo-tabela-lancucha .eo-wartosc-komorki {
    display: block;
    white-space: nowrap;
}

.eo-tabela-lancucha .eo-dopisek-komorki + .eo-wartosc-komorki {
    margin-top: .25rem;
}

/* Szerokość preferowana kolumn „Klient” i „Stan” (w układzie tabeli działa jak najmniejsza): krótki znacznik stanu stoi w jednym wierszu. */
.eo-tabela-lancucha thead th:first-child {
    width: 10.5rem;
}

.eo-tabela-lancucha thead th:last-child {
    width: 9.75rem;
}

/* Dane umowy na telefonie: podpis nad wartością, pary oddzielone odstępem. */
@media (max-width: 640px) {
    .eo-dane-umowy > div + div {
        margin-top: .375rem;
    }

    .eo-dane-umowy dt {
        font-size: var(--eo-tekst-drobny);
    }
}

textarea.eo-pole-wielowierszowe {
    min-height: 3.75rem;
    resize: vertical;
}

.eo-dane-umowy {
    margin: 0 0 1rem;
    padding: .875rem 1.125rem;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--eo-zaokraglenie);
}

.eo-tabela tr.eo-wiersz-razem > * {
    font-weight: 600;
    background: var(--mud-palette-background-gray);
}

.eo-wykaz-ostrzezen {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.eo-wykaz-ostrzezen li + li {
    margin-top: .5rem;
}

fieldset.eo-wiersz-transzy {
    margin: 0 0 .75rem;
}

.eo-odnosnik-startowy {
    display: inline-block;
    margin: .125rem .5rem .125rem 0;
}

@media (max-width: 640px) {
    /* Kafel „Moje prowizje” stoi sam w wykazie, więc na telefonie zajmuje całą szerokość, a nie lewą kolumnę z dwóch (etap 4, rozdział 11,
       przegląd po budowie — zarzuty przeglądu, pkt 10). */
    .eo-kafle.eo-kafle-prowizji,
    .eo-kafle.eo-kafle-moje-prowizje {
        grid-template-columns: minmax(0, 1fr);
    }

    .eo-kafel-prowizji-kwoty {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }

    .eo-kafel-prowizji-pasek {
        flex-basis: 100%;
        width: 100%;
    }

    .eo-dane-umowy .eo-karta-umowy-dane > div,
    .eo-dane-umowy > div {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Karty tabel na telefonie (poprawki wyglądu po próbie na żywo, 12 października 2026 r.): podpisy i wartości wyrównane jednolicie do lewej — kwoty nie
       stoją już przy prawej krawędzi, a ich podpisy w prawej części kolumny podpisu (zygzak); kwoty z cyframi o stałej szerokości. */
    .eo-tabela-ramka .eo-tabela-kart.eo-harmonogram td.eo-kwota,
    .eo-tabela-ramka .eo-tabela-kart.eo-harmonogram td.eo-kwota::before {
        text-align: left;
    }

    .eo-tabela-kart.eo-harmonogram td.eo-kwota {
        font-variant-numeric: tabular-nums;
    }

    /* Podpis wartości w kartach tabel prowizji zawija się w kolumnie podpisu (komórka kwoty ma white-space: nowrap, a podpis dziedziczył je i nachodził
       na wartość). */
    .eo-tabela-kart.eo-harmonogram td::before {
        white-space: normal;
    }

    /* Łańcuch na telefonie: podpis nad wartością (podpisy są długie), komórki bez wartości w wierszu „Razem” znikają z karty, a karta „Razem” ma tło
       wiersza sumy na całej powierzchni; znacznik stanu zawija się w obrębie karty. */
    .eo-tabela-ramka .eo-tabela-kart.eo-tabela-lancucha td {
        padding-left: 0;
    }

    .eo-tabela-kart.eo-tabela-lancucha td::before {
        position: static;
        display: block;
        width: auto;
    }

    .eo-tabela-lancucha .eo-pusta-komorka {
        display: none;
    }

    /* Rachunek punkt po punkcie, zasada pokrycia i okresy rozliczeniowe na karcie umowy Biura (poprawki wyglądu po próbie na żywo, 12 października
       2026 r.): karty z podpisem nad wartością, jak harmonogram i łańcuch — kwota i termin nie stoją już za krawędzią ramki przewijanej w bok. */
    .eo-tabela-ramka .eo-tabela-kart.eo-tabela-kart-podpis-nad td {
        padding-left: 0;
    }

    .eo-tabela-kart.eo-tabela-kart-podpis-nad td::before {
        position: static;
        display: block;
        width: auto;
    }

    .eo-tabela-kart tr.eo-wiersz-razem {
        background: var(--mud-palette-background-gray);
    }

    .eo-tabela-kart tr.eo-wiersz-razem > * {
        background: none;
    }

    .eo-tabela-kart .eo-znacznik-zawijany .eo-stan {
        white-space: normal;
    }
}

@media print {
    .eo-naglowek, .eo-menu-sprzedazy, .eo-menu-telefon, .eo-dolny-pasek, .eo-stopka, .eo-bez-wydruku {
        display: none !important;
    }

    html, body {
        background: none;
    }

    .eo-przestrzen {
        display: block;
    }

    .eo-glowna {
        padding: 0;
    }

    .eo-karta, .eo-dokument {
        border: 0;
        padding: 0;
    }
}