/* mot3r.css — WYGENEROWANY. Nie edytuj ręcznie.
   Źródło: RADS systemy/mot/project/tokens.json (zmienne) + project/mot3r-komponenty.css (komponenty);
   generator: systemy/mot/narzedzia/mot3r-css.py. Skóra mot3r od 13.10: baza = 6 ekranów przyjętych przez Króla,
   kolor i kroje = eter.engineering (sygnał #f04a41 / #d93a31); klimat = lekcja prostoty, mobile OS first.
   Tryb podstawowy: czerń; jasny (ARRIVAL): [data-motyw="jasny"] albo motyw telefonu (prefers-color-scheme: light) bez data-motyw.
   ⛔ Literały barw stoją wyłącznie w dwóch blokach zmiennych niżej. */

@font-face{font-family:'DotGothic16';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DotGothic16-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DotGothic16';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DotGothic16-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/InterTight-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/InterTight-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/GeistMono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/GeistMono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* --- barwy: czerń (podstawowy); wyświetlacz LED z tłem = wyspa czerni w obu trybach (tokens.json color.themes[czern].wyspa) --- */
:root,[data-motyw="czern"],.m3-led{
  color-scheme: dark;
  --mot3r-tlo: #000000;
  --mot3r-karta: #141414;
  --mot3r-karta-2: color-mix(in srgb, #ffffff 7.84%, var(--mot3r-karta));
  --mot3r-kontrolka: var(--mot3r-karta-2);
  --mot3r-linia: #ffffff14;
  --mot3r-tekst: #ffffff;
  --mot3r-tekst-dim: #9398a5;
  --mot3r-wylaczony: #9398a58c;
  --mot3r-sygnal: #f04a41;
  --mot3r-tekst-na-sygnale: #000000;
  --mot3r-online: oklch(0.74 0.17 155);
  --mot3r-alarm: oklch(0.65 0.24 25);
  --mot3r-fokus: oklch(0.65 0.24 289.5);
}
/* --- barwy: jasny --- */
[data-motyw="jasny"]{
  color-scheme: light;
  --mot3r-tlo: #cedfde;
  --mot3r-karta: #ebf4f4;
  --mot3r-karta-2: color-mix(in srgb, #001014 12.16%, var(--mot3r-karta));
  --mot3r-kontrolka: var(--mot3r-karta);
  --mot3r-linia: #0010141f;
  --mot3r-tekst: #001014;
  --mot3r-tekst-dim: #3d5155;
  --mot3r-wylaczony: #3d51558c;
  --mot3r-sygnal: #d93a31;
  --mot3r-tekst-na-sygnale: #000000;
  --mot3r-online: oklch(0.55 0.16 155);
  --mot3r-alarm: oklch(0.58 0.22 25);
  --mot3r-fokus: oklch(0.45 0.24 289.5);
}
/* --- motyw z telefonu: jasny, gdy system go chce, a strona nie wymusza data-motyw (Theme EQ nadpisuje atrybutem) --- */
@media (prefers-color-scheme: light){
  :root:not([data-motyw]){
    color-scheme: light;
    --mot3r-tlo: #cedfde;
    --mot3r-karta: #ebf4f4;
    --mot3r-karta-2: color-mix(in srgb, #001014 12.16%, var(--mot3r-karta));
    --mot3r-kontrolka: var(--mot3r-karta);
    --mot3r-linia: #0010141f;
    --mot3r-tekst: #001014;
    --mot3r-tekst-dim: #3d5155;
    --mot3r-wylaczony: #3d51558c;
    --mot3r-sygnal: #d93a31;
    --mot3r-tekst-na-sygnale: #000000;
    --mot3r-online: oklch(0.55 0.16 155);
    --mot3r-alarm: oklch(0.58 0.22 25);
    --mot3r-fokus: oklch(0.45 0.24 289.5);
  }
}
/* --- kroje, odstępy, promienie, ruch (wspólne dla trybów) --- */
:root{
  --mot3r-font-kropka: "DotGothic16", "Geist Mono", ui-monospace, monospace;
  --mot3r-font-tekst: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --mot3r-font-nadruk: "Geist Mono", ui-monospace, Consolas, monospace;
  --mot3r-margines: 16px;
  --mot3r-odstep-kart: 8px;
  --mot3r-wnetrze-karty: 20px;
  --mot3r-odstep-sekcji: 32px;
  --mot3r-dotyk: 44px;
  --mot3r-kciuk: 64px;
  --mot3r-pasek-stanu: 44px;
  --mot3r-kolo: 64px;
  --mot3r-awatar: 48px;
  --mot3r-ptt: 120px;
  --mot3r-pigulka-h: 52px;
  --mot3r-dioda: 8px;
  --mot3r-krok-1: 4px;
  --mot3r-krok-2: 8px;
  --mot3r-krok-3: 12px;
  --mot3r-krok-4: 16px;
  --mot3r-krok-5: 24px;
  --mot3r-krok-6: 32px;
  --mot3r-ptt-min: 96px;
  --mot3r-kolumna: 480px;
  --mot3r-kolumna-laptop: 720px;
  --mot3r-panel: 320px;
  --mot3r-ikona: 24px;
  --mot3r-ikona-s: 20px;
  --mot3r-gora-h: 56px;
  --mot3r-wiersz-h: 60px;
  --mot3r-wiersz-h-duzy: 84px;
  --mot3r-przel-w: 52px;
  --mot3r-przel-h: 32px;
  --mot3r-kolo-male: 56px;
  --mot3r-awatar-s: 40px;
  --mot3r-ptt-tor: 88px;
  --mot3r-orb: 252px;
  --mot3r-orb-maly: 96px;
  --mot3r-bank-h: 48px;
  --mot3r-znacznik-h: 24px;
  --mot3r-kropka-stanu: 12px;
  --mot3r-kropka-stanu-s: 10px;
  --mot3r-zaslona-kciuka: 40px;
  --mot3r-dioda-s: 6px;
  --mot3r-dioda-xs: 4px;
  --mot3r-galka: 50px;
  --mot3r-karta-pol-h: 152px;
  --mot3r-gwiazda: 300px;
  --mot3r-gwiazda-mala: 250px;
  --mot3r-led-odczyt: 4px;
  --mot3r-led-xl: var(--mot3r-led-odczyt);
  --mot3r-led-l: var(--mot3r-led-odczyt);
  --mot3r-led-s: var(--mot3r-led-odczyt);
  --mot3r-promien-karta: 22px;
  --mot3r-promien-wiersz: 8px;
  --mot3r-promien-pigulka: 999px;
  --mot3r-promien-kolo: 50%;
  --mot3r-wylaczony-krycie: 0.4;
  --mot3r-zaslona: 72%;
  --mot3r-ruch-czas: 180ms;
  --mot3r-ruch-krzywa: cubic-bezier(.2,.8,.2,1);
  --mot3r-ruch: var(--mot3r-ruch-czas) var(--mot3r-ruch-krzywa);
  --mot3r-led-wypelnienie: 0.8;
  --mot3r-t-wyswietlacz-xl: 400 48px/1 var(--mot3r-font-kropka);
  --mot3r-t-wyswietlacz-l: 400 32px/1 var(--mot3r-font-kropka);
  --mot3r-t-wyswietlacz-m: 400 24px/1 var(--mot3r-font-kropka);
  --mot3r-t-wyswietlacz-s: 400 16px/1.2 var(--mot3r-font-kropka);
  --mot3r-t-wyswietlacz-s-rozstaw: 0.04em;
  --mot3r-t-znak: 400 16px/1 var(--mot3r-font-kropka);
  --mot3r-t-znak-rozstaw: 0.2em;
  --mot3r-t-ekran: 400 32px/1.05 var(--mot3r-font-kropka);
  --mot3r-t-ekran-rozstaw: 0;
  --mot3r-t-ekran-adres: 400 32px/1.05 var(--mot3r-font-tekst);
  --mot3r-t-ekran-adres-rozstaw: -0.02em;
  --mot3r-t-adres: 400 24px/1.15 var(--mot3r-font-tekst);
  --mot3r-t-adres-rozstaw: -0.02em;
  --mot3r-t-tytul-karty: 600 17px/1.3 var(--mot3r-font-tekst);
  --mot3r-t-tytul-karty-rozstaw: -0.02em;
  --mot3r-t-wpis: 400 16px/1.5 var(--mot3r-font-tekst);
  --mot3r-t-akapit: 400 15px/1.6 var(--mot3r-font-tekst);
  --mot3r-t-podtytul: 400 13px/1.5 var(--mot3r-font-tekst);
  --mot3r-t-podpis: 400 12px/1.3 var(--mot3r-font-tekst);
  --mot3r-t-wiersz: var(--mot3r-t-akapit);
  --mot3r-t-komunikat: var(--mot3r-t-tytul-karty);
  --mot3r-t-komunikat-rozstaw: var(--mot3r-t-tytul-karty-rozstaw);
  --mot3r-t-podpis-s: var(--mot3r-t-podpis);
  --mot3r-t-etykieta: 400 12px/1.2 var(--mot3r-font-nadruk);
  --mot3r-t-etykieta-rozstaw: 0.18em;
  --mot3r-t-etykieta-ptt: 500 16px/1 var(--mot3r-font-nadruk);
  --mot3r-t-etykieta-ptt-rozstaw: 0.18em;
  --mot3r-t-znacznik: 400 12px/1.3 var(--mot3r-font-nadruk);
  --mot3r-t-znacznik-rozstaw: 0.18em;
  --mot3r-t-jednostka: 400 14px/1 var(--mot3r-font-nadruk);
  --mot3r-t-jednostka-rozstaw: 0.02em;
}
:root{scrollbar-color:var(--mot3r-karta-2) var(--mot3r-tlo)}

/* ==========================================================================
   mot3r — komponenty skóry mot3r (źródło; mot3r.css jest z tego GENEROWANY przez narzedzia/mot3r-css.py)
   Baza: 6 ekranów przyjętych przez Króla 13.10 · kolor i kroje: eter.engineering (systemy/3t3r-engineering).
   Król 13.10 ~07:35Z: lekcja prostoty wzoru, nie kopia 1:1; mobile OS first (cytat: README §Skóra mot3r).
   Zasady (README §Lekcja): telefon jako system — stan na górze (SystemBar), kciuk na dole (ThumbBar),
   jeden ekran = jedna rzecz, karty jak widżety, kropka jako język, monochrom + JEDEN sygnał na ekran,
   cel dotyku ≥ 44 px, tekst ≥ 12 px, jeden ruch (gaśnie przy prefers-reduced-motion).
   ⛔ Zero literałów barw w tym pliku — tylko var(--mot3r-*). ⛔ Zero literałów typografii — font: var(--mot3r-t-*).
   ⛔ R3: zero literałów rozmiaru — width / height / min-height > 3 px tylko z tokenów (var(--mot3r-*)).
   Strażnik trzech praw: mot3r-css.py (kod wyjścia 1).
   Krój kropkowy (--mot3r-font-kropka) TYLKO na liczbach i znakach (eter: „nigdy jako rodzina tekstowa”);
   słowa, adresy i tytuły — krój tekstu (sędziowie R2 13.10).
   R3 (13.10 ~09:25Z): warstwa wyświetlacza LED (Mot3rLedDisplay) — matryca kwadratowych pikseli na czarnym
   kole albo okienku; inspiracja Króla 13.10 ~09:25Z, zrzut wzoru LED (cytat i ścieżka: systemy/mot/ZRODLO.md).
   R4 (sędziowie 13.10): JEDEN wyświetlacz LED na ekran — jedna liczba albo znak bohatera (Linie: orb · Linia: MEMORY ·
   Mikser: Volume · Moja strona: WALLET); pozostałe liczby DotGothic16 (Mot3rDotDisplay). Dwie podziałki: bohater (orb / 25)
   i odczyt (mot3r-led-odczyt). Krój matrycy = DotGothic16 (narzedzia/led-kroj.mjs), nie ręczny.
   R6 (sędziowie rundy 2 kompletu jednej linii 13.10): WYBÓR zawsze biały, sygnał = tylko AKCJA (+ litera orbu na Linie);
   skala tekstu = eter (akapit 15 · podtytuł 13 · etykieta 400), pole wpisu 16; tytuł ekranu krojem kropkowym (adres jako tytuł —
   tekst); tytuł karty cichy (nadruk tekst-dim); jednostka zawsze nadrukiem (m3-jedn); bez poświat (eter: dwa cienie i jedna poświata).
   R7 (sędziowie rundy 3 kompletu jednej linii 13.10): TRZY formy = trzy znaczenia — WYBÓR biały (koło, segment, pigułka, zakładka),
   AKCJA GŁÓWNA sygnałem (pigułka główna, koło akcji, PTT na #glos), AKCJA DRUGA = sam włos bez wypełnienia (m3-kolo--akcja: >> EJECT,
   <<wepnij; m3-ptt--tor: PTT w pasku toru Miksera) — akcja nigdy nie zostaje wciśnięta. Plus przy awatarach bez sygnału (strefa kciuka
   ma swoją akcję). Długa nazwa linii w pasku stanu gaśnie zanikiem (nie wielokropkiem, nie przelewem). Bohater pełnego ekranu w strefie
   kciuka (margin-top:auto). Wyłączony blok (plan za flagą) nie jest przygaszonym sygnałem.
   ========================================================================== */

/* ---------- baza ---------- */
.m3{background:var(--mot3r-tlo);color:var(--mot3r-tekst);font:var(--mot3r-t-akapit);font-synthesis:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;text-size-adjust:100%}
/* barwa otoczenia dla obrysu soczewki wyświetlacza LED (wyspa czerni ma własne tokeny, obrys bierze barwę strony) */
:root,[data-motyw],.m3{--m3-led-otoczenie:var(--mot3r-linia)}
.m3 *,.m3 *::before,.m3 *::after{box-sizing:border-box}
/* :where() = zero specyficzności: reset nie nadpisuje kroju ani barwy komponentów (.m3-pigulka, .m3-ptt…) */
:where(.m3) button{font:inherit;color:inherit;cursor:pointer}
:where(.m3) a{color:inherit;text-decoration:none}
/* fokus klawiatury; .m3-pokaz-fokus = ta sama reguła na stronie pokazowej (stan „fokus” narysowany) */
.m3 :focus-visible,.m3 .m3-pokaz-fokus{outline:2px solid var(--mot3r-fokus);outline-offset:3px}
/* JEDEN stan wyłączony w całym systemie: token mot3r-wylaczony-krycie (0,4) */
.m3 :is([disabled],[aria-disabled="true"]){cursor:not-allowed;opacity:var(--mot3r-wylaczony-krycie)}
.m3-ikona{width:var(--mot3r-ikona);height:var(--mot3r-ikona);flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.m3-ikona .wyp{fill:currentColor;stroke:none}
.m3 [hidden]{display:none!important}
.m3-ukryte{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- typografia: klasy = style tokens.json (type.groups mot3r-*); R3: 6 stylów tekstu ---------- */
.m3-t-xl{font:var(--mot3r-t-wyswietlacz-xl)}
.m3-t-l{font:var(--mot3r-t-wyswietlacz-l)}
.m3-t-m{font:var(--mot3r-t-wyswietlacz-m)}
.m3-t-s{font:var(--mot3r-t-wyswietlacz-s);letter-spacing:var(--mot3r-t-wyswietlacz-s-rozstaw)}
.m3-t-znak{font:var(--mot3r-t-znak);letter-spacing:var(--mot3r-t-znak-rozstaw)}
.m3-t-ekran{font:var(--mot3r-t-ekran);letter-spacing:var(--mot3r-t-ekran-rozstaw);text-transform:uppercase;margin:0}
.m3-t-ekran-adres{font:var(--mot3r-t-ekran-adres);letter-spacing:var(--mot3r-t-ekran-adres-rozstaw);margin:0}
.m3-t-adres{font:var(--mot3r-t-adres);letter-spacing:var(--mot3r-t-adres-rozstaw);margin:0}
.m3-t-tytul{font:var(--mot3r-t-tytul-karty);letter-spacing:var(--mot3r-t-tytul-karty-rozstaw);margin:0}
.m3-t-tekst,.m3-t-akapit{font:var(--mot3r-t-akapit);color:var(--mot3r-tekst-dim);margin:0}
.m3-t-pod{font:var(--mot3r-t-podtytul);color:var(--mot3r-tekst-dim);margin:0}
.m3-t-podpis{font:var(--mot3r-t-podpis)}
.m3-t-podpis--dim{color:var(--mot3r-tekst-dim)}
/* aliasy R3 (na czas przejścia): wiersz → akapit, komunikat → tytuł karty, podpis-s → podpis */
.m3-t-wiersz{font:var(--mot3r-t-akapit)}
.m3-t-komunikat{font:var(--mot3r-t-tytul-karty);letter-spacing:var(--mot3r-t-tytul-karty-rozstaw)}
.m3-t-podpis-s{font:var(--mot3r-t-podpis)}
.m3-t-etykieta{font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);text-transform:uppercase}
.m3-t-znacznik{font:var(--mot3r-t-znacznik);letter-spacing:var(--mot3r-t-znacznik-rozstaw);text-transform:uppercase;color:var(--mot3r-tekst-dim)}
.m3-t-jednostka{font:var(--mot3r-t-jednostka);letter-spacing:var(--mot3r-t-jednostka-rozstaw);color:var(--mot3r-tekst-dim)}

/* ==========================================================================
   Mot3rScreen — rama ekranu telefonu (system); laptop = rozciągnięty telefon (reguły na końcu pliku)
   ========================================================================== */
.m3-ekran{width:100%;max-width:var(--mot3r-kolumna);margin:0 auto;
  padding:0 max(var(--mot3r-margines),env(safe-area-inset-right,0px)) calc(var(--mot3r-kciuk) + var(--mot3r-zaslona-kciuka) + env(safe-area-inset-bottom,0px)) max(var(--mot3r-margines),env(safe-area-inset-left,0px))}
/* pełny: kolumna na całą wysokość, .m3-dol siada nad dokiem kciuka (np. #linie bez linii) */
.m3-ekran--pelny,.m3-ekran--zadanie{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
/* zadanie (SHELL, ADD LINE): jeden widok, akcja w dolnej 1/3, bez ThumbBar */
.m3-ekran--zadanie{padding-bottom:calc(var(--mot3r-krok-5) + env(safe-area-inset-bottom,0px))}
.m3-dol{margin-top:auto;padding-top:var(--mot3r-krok-5)}
.m3-dol > * + *{margin-top:var(--mot3r-krok-2)}
/* akcja ekranu zadania zostaje w strefie kciuka także na niskim telefonie (przewija się treść, nie akcja) */
.m3-ekran--zadanie .m3-dol{position:sticky;bottom:0;z-index:5;margin-bottom:calc(-1 * var(--mot3r-krok-5));padding-top:var(--mot3r-krok-4);
  padding-bottom:calc(var(--mot3r-krok-5) + env(safe-area-inset-bottom,0px));background:var(--mot3r-tlo)}
/* R6 (sędziowie 1 linii r2, 320 × 568): przyklejona jest TYLKO akcja główna; nad nią zanik do tła (ten sam wzór co zasłona doku) —
   treść nie kończy się twardą krawędzią w pół linii */
.m3-ekran--zadanie .m3-dol::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--mot3r-krok-5);pointer-events:none;
  background:linear-gradient(to top,var(--mot3r-tlo),transparent)}
/* R7 (sędzia telefonu, 320 × 568): ostatnia rzecz nad przyklejoną akcją kończy się tam, gdzie zaczyna się zanik — zanik nie gasi
   ostatniej akcji drugiej („ADD SHELL ( buy or subscribe )”, „kup agenta vps”) przy maksymalnym przewinięciu */
.m3-ekran--zadanie > :nth-last-child(2){margin-bottom:var(--mot3r-krok-5)}
/* R7: bohater pełnego ekranu (orb na Linie) schodzi w strefę kciuka — karta STATUS stoi pod tytułem, orb = wejście w linię nad dokiem */
.m3-ekran--pelny > .m3-bohater{margin-top:auto}
/* bez linii: akcja (ADD LINE) tuż pod bohaterem — orb zostaje w tej samej strefie co przy jednej linii (układ nie skacze, R3) */
.m3-ekran--pelny > .m3-bohater ~ .m3-dol{margin-top:0}
/* R7: akcja główna ekranu pełnego (Mikser: ADD 2 LINE) zostaje nad dokiem także na niskim telefonie — przewija się treść, nie akcja
   (ten sam wzór co ekran zadania: tło + zanik nad nią; tło sięga do doku — treść nie prześwituje między akcją a dokiem); gdy treść się mieści,
   stoi tam, gdzie i tak by stała (margin-top:auto; dolne wnętrze = ujemny margines) */
.m3-ekran--pelny > .m3-dol{position:sticky;bottom:calc(var(--mot3r-kciuk) + var(--mot3r-krok-3) + env(safe-area-inset-bottom,0px));z-index:5;background:var(--mot3r-tlo);
  padding-bottom:calc(var(--mot3r-zaslona-kciuka) - var(--mot3r-krok-3));margin-bottom:calc(var(--mot3r-krok-3) - var(--mot3r-zaslona-kciuka))}
.m3-ekran--pelny > .m3-dol::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--mot3r-krok-5);pointer-events:none;
  background:linear-gradient(to top,var(--mot3r-tlo),transparent)}
.m3-stopka{display:flex;justify-content:center;gap:var(--mot3r-krok-2);margin-top:var(--mot3r-krok-6);
  font:var(--mot3r-t-znacznik);letter-spacing:var(--mot3r-t-znacznik-rozstaw);text-transform:uppercase;color:var(--mot3r-tekst-dim)}

/* ==========================================================================
   Mot3rSystemBar — stan na górze: USB (32) z lewej · bieżąca linia + kropka stanu · (11) VAULT z prawej
   ========================================================================== */
.m3-system{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:var(--mot3r-krok-1);
  height:calc(var(--mot3r-pasek-stanu) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);
  margin:0 calc(-1 * var(--mot3r-margines));padding-inline:max(var(--mot3r-krok-1),env(safe-area-inset-left,0px)) max(var(--mot3r-krok-1),env(safe-area-inset-right,0px));
  background:var(--mot3r-tlo)}
.m3-system--pokaz{position:relative;margin:0;padding:0}
.m3-system-strona{position:relative;flex:none;display:inline-flex;align-items:center;gap:var(--mot3r-krok-2);height:var(--mot3r-dotyk);min-width:var(--mot3r-dotyk);
  padding:0 var(--mot3r-krok-2);border:0;border-radius:var(--mot3r-promien-pigulka);background:none;color:var(--mot3r-tekst-dim);
  font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);text-transform:uppercase;white-space:nowrap}
.m3-system-strona b{font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);color:var(--mot3r-tekst)}
.m3-system-strona[data-nowe]::after{content:"";width:var(--mot3r-dioda-s);height:var(--mot3r-dioda-s);border-radius:var(--mot3r-promien-kolo);background:var(--mot3r-tekst)}
/* środek: linia w ręku = NAZWA linii tak, jak ją wpisał user (krój tekstu, bez wersalików — sędziowie 1 linii 13.10: „alfa”
   nie może czytać się jako „ALFA”) + kropka stanu; dotknięcie → Linie */
.m3-system-srodek{display:inline-flex;align-items:center;gap:var(--mot3r-krok-2);flex:0 1 auto;height:var(--mot3r-dotyk);min-width:0;overflow:hidden;
  padding:0 var(--mot3r-krok-2);border:0;border-radius:var(--mot3r-promien-pigulka);background:none;color:var(--mot3r-tekst);
  font:var(--mot3r-t-tytul-karty);letter-spacing:var(--mot3r-t-tytul-karty-rozstaw);text-transform:none;white-space:nowrap}
/* R7 (sędzia telefonu: nazwa 32 znaki = przelew 33 px przy 320 na każdym ekranie): USB i VAULT się nie ściskają, środek oddaje miejsce;
   nazwa, która się nie mieści, GAŚNIE zanikiem ku prawej (nie wielokropek — słowo nie jest ucięte znakiem); data-przelew liczy
   M3.przewijane (krótka nazwa bez maski) */
.m3-system-nazwa{display:block;flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.m3-system-nazwa[data-przelew]{-webkit-mask-image:linear-gradient(to left,transparent,var(--mot3r-tlo) var(--mot3r-krok-4));
  mask-image:linear-gradient(to left,transparent,var(--mot3r-tlo) var(--mot3r-krok-4))}
/* bez linii: znak słowny mot3r krojem kropkowym (znak, nie słowo) — zawsze małymi literami */
.m3-system-srodek--znak{font:var(--mot3r-t-znak);letter-spacing:var(--mot3r-t-znak-rozstaw)}
/* brak połączenia: kropka alarmu + słowo (nadruk — słowo ma polskie litery) */
.m3-system-slowo{font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);text-transform:uppercase}

/* ==========================================================================
   Mot3rTopBar — strzałka · tytuł · akcja w kole (jedna)
   ========================================================================== */
/* R6: krok-2 nad paskiem tytułu — strzałka wstecz ≥ 8 px od przycisku USB paska stanu także na niskim telefonie (było 2 px) */
.m3-gora{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;column-gap:var(--mot3r-krok-3);row-gap:var(--mot3r-krok-2);min-height:var(--mot3r-gora-h);padding-top:var(--mot3r-krok-2)}
/* R3 (sędziowie DS r2): znacznik DANE PRZYKŁADOWE nie stoi w pasku — wraca przy danych (Mot3rStatusLine .m3-odczyty, karta).
   Gdyby jednak stanął w pasku: do prawej, a przy 320 px pod tytułem od lewej (nie osierocony po prawej). */
.m3-gora > .m3-znacznik{margin-left:auto}
.m3-gora-lewa{display:flex;align-items:center;gap:var(--mot3r-krok-3);min-width:0}
/* tytuł ekranu = krój kropkowy WERSALIKAMI (R6: baza 13.10 + dyrektywa general@ — tytuł jak znak, nie rodzina tekstowa; krój ma równe komórki
   tylko dla wersalików — małe „l” zostawiało dziurę: „Vo l ume”); nigdy wielokropek — przy braku miejsca reszta paska schodzi pod tytuł */
.m3-gora-tytul{flex:none;margin:0;font:var(--mot3r-t-ekran);letter-spacing:var(--mot3r-t-ekran-rozstaw);text-transform:uppercase;white-space:nowrap}
.m3-wstecz{width:var(--mot3r-dotyk);height:var(--mot3r-dotyk);margin-left:calc(-1 * var(--mot3r-krok-3));flex:none;display:grid;place-items:center;border:0;padding:0;
  border-radius:var(--mot3r-promien-kolo);background:none;color:var(--mot3r-tekst)}
.m3-kolo-akcja{width:var(--mot3r-awatar);height:var(--mot3r-awatar);flex:0 0 var(--mot3r-awatar);display:grid;place-items:center;padding:0;
  border-radius:var(--mot3r-promien-kolo);border:1px solid var(--mot3r-linia);background:var(--mot3r-karta);color:var(--mot3r-tekst);
  font:var(--mot3r-t-wyswietlacz-m);transition:transform var(--mot3r-ruch)}
.m3-kolo-akcja:active{transform:scale(.98)}
.m3-kolo-akcja--puste{border-color:transparent;background:none}
/* jedyna akcja, jakiej ekran chce (np. „ADD 2 LINE” przy jednej linii) = jedyny sygnał */
.m3-kolo-akcja--sygnal{border-color:transparent;background:var(--mot3r-sygnal);color:var(--mot3r-tekst-na-sygnale)}
.m3-tytul-duzy{margin:var(--mot3r-krok-2) 0 0;font:var(--mot3r-t-ekran);line-height:1.08;letter-spacing:var(--mot3r-t-ekran-rozstaw);text-transform:uppercase;overflow-wrap:anywhere}
.m3-tytul-duzy--m{font:var(--mot3r-t-adres);letter-spacing:var(--mot3r-t-adres-rozstaw);text-transform:none}
/* adres jako tytuł ekranu (#linia, #akcje) i samo @mot.email: krój tekstu — kropkowy rozsypuje adres */
.m3-tytul-duzy--adres{font:var(--mot3r-t-ekran-adres);line-height:1.08;letter-spacing:var(--mot3r-t-ekran-adres-rozstaw);text-transform:none}
.m3-wstep{margin:var(--mot3r-krok-3) 0 0;font:var(--mot3r-t-akapit);color:var(--mot3r-tekst-dim);overflow-wrap:anywhere}

/* ==========================================================================
   Mot3rStatusLine — stan zawsze = kropka + słowo
   ========================================================================== */
.m3-kropka{display:inline-block;flex:none;width:var(--mot3r-dioda);height:var(--mot3r-dioda);border-radius:var(--mot3r-promien-kolo);background:var(--mot3r-tekst-dim);
  transition:background-color var(--mot3r-ruch)}
.m3-kropka[data-stan="available"]{background:var(--mot3r-online)}
/* Busy = pełna kropka tekstu (R6: bez poświaty — od Available różni ją barwa online, od Pause tekst-dim) */
.m3-kropka[data-stan="busy"]{background:var(--mot3r-tekst)}
.m3-kropka[data-stan="pause"]{background:var(--mot3r-tekst-dim)}
.m3-kropka[data-stan="off"]{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mot3r-tekst-dim)}
.m3-kropka[data-stan="retired"],.m3-kropka[data-stan="archived"],.m3-kropka[data-stan="pusto"]{background:var(--mot3r-wylaczony)}
.m3-kropka[data-stan="blad"]{background:var(--mot3r-alarm)}
/* stan systemu „Ładowanie” — nie myli się z Busy linii: kropka miga tym samym krokiem co pętla */
.m3-kropka[data-stan="ladowanie"]{background:var(--mot3r-tekst);animation:m3-miga 1.2s steps(2,jump-none) infinite}
@keyframes m3-miga{0%{background:var(--mot3r-tekst)}100%{background:var(--mot3r-wylaczony)}}
.m3-stan{display:inline-flex;align-items:center;gap:var(--mot3r-krok-2);font:var(--mot3r-t-podtytul);color:var(--mot3r-tekst);white-space:nowrap}
.m3-stan--dim{color:var(--mot3r-tekst-dim)}
/* odczyty pod bohaterem: jeden rząd „▪▪▪▫▫ MOM 3,2 GB · PRZYKŁAD” (R6, sędzia 4: kropki i znacznik nie wiszą osobno) */
.m3-odczyty{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:var(--mot3r-krok-4);row-gap:var(--mot3r-krok-2);margin-top:var(--mot3r-krok-4)}
.m3-odczyty--lewo{justify-content:flex-start}
.m3-odczyt{display:flex;flex-direction:row;align-items:center;gap:var(--mot3r-krok-2);font:var(--mot3r-t-podtytul);color:var(--mot3r-tekst);white-space:nowrap}
.m3-odczyty > .m3-znacznik{min-height:0}
/* komunikat Ai (VAULT): najwyżej 2 linie, bez ucinania w pół słowa na 1 linii */
.m3-komunikat{display:flex;align-items:center;gap:var(--mot3r-krok-3);min-height:var(--mot3r-wiersz-h);padding:var(--mot3r-krok-2) var(--mot3r-krok-1) var(--mot3r-krok-2) var(--mot3r-krok-4);
  border:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-karta);background:var(--mot3r-karta)}
.m3-komunikat-tekst{flex:1;min-width:0;font:var(--mot3r-t-tytul-karty);letter-spacing:var(--mot3r-t-tytul-karty-rozstaw);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m3-komunikat .m3-wstecz{margin:0}
.m3-kursor{display:inline-block;width:var(--mot3r-dioda);height:var(--mot3r-krok-4);margin-left:var(--mot3r-krok-1);vertical-align:-2px;background:var(--mot3r-tekst);animation:m3-kursor 1.2s steps(1,end) infinite}
@keyframes m3-kursor{50%{opacity:0}}

/* ==========================================================================
   Mot3rLedDisplay — wyświetlacz LED (R3, Król 13.10 ~09:25Z; R4 sędziowie): matryca KWADRATOWYCH pikseli
   wł (mot3r-tekst) · przygaszony (mot3r-tekst-dim) · wył (mot3r-karta-2) · sygnał (mot3r-sygnal — tylko nadawanie i alarm)
   na czarnym kole (m3-led--kolo) albo okienku (prostokąt). Wyświetlacz = WYSPA CZERNI w obu trybach (generator dopisuje
   .m3-led do bloku barw czerni). Zawartość liczy M3.led z danych: krój DotGothic16 (próbkowany), ikony 9 × 9 = ikony bazy.
   Koło: soczewka = czarny dysk + włosowy obrys na R + 0,75 podziałki, piksele < R − 0,5 (równy pierścień czerni wokół siatki).
   Okienko: margines czerni 1 podziałki, promień narożnika 1 podziałki, szerokość z całych kolumn; nigdy szersze niż rodzic.
   ========================================================================== */
.m3-led{display:block;flex:none;overflow:visible;color:var(--mot3r-tekst);
  --m3-led-podzialka:var(--mot3r-led-odczyt);
  width:calc(var(--m3-led-k,1) * var(--m3-led-podzialka));max-width:100%;height:auto;aspect-ratio:var(--m3-led-k,1) / var(--m3-led-w,1)}
/* koło: rozmiar z kontekstu (bohater, ikona w pokazie), proporcja 1:1 */
.m3-led--kolo{width:100%;aspect-ratio:1}
.m3-led--stan{width:var(--mot3r-awatar)}
.m3-led .tlo{fill:var(--mot3r-tlo)}
.m3-led .wyl{fill:var(--mot3r-karta-2)}
.m3-led .wl{fill:var(--mot3r-tekst)}
.m3-led .dim{fill:var(--mot3r-tekst-dim)}
.m3-led .syg{fill:var(--mot3r-sygnal)}
.m3-led .mig{animation:m3-kursor 1.2s steps(1,end) infinite}
/* obrys soczewki: jeden włos w barwie OTOCZENIA (nie wyspy) — w czerni to on rysuje koło, w jasnym leży na krawędzi dysku */
.m3-led .obrys{fill:none;stroke:var(--m3-led-otoczenie);stroke-width:1;vector-effect:non-scaling-stroke}
/* odczyt LED + jednostka słowem (Geist Mono) na wspólnej linii dołu */
.m3-led-odczyt{display:inline-flex;align-items:flex-end;gap:var(--mot3r-krok-2);white-space:nowrap;min-width:0}
.m3-led-odczyt > .m3-jedn{padding-bottom:var(--mot3r-krok-1)}

/* ==========================================================================
   Mot3rLineOrb — bohater ekranu Linie: wyświetlacz LED 25 × 25 (litera linii DotGothic16 7 × 13 + znak stanu 5 × 5)
   na czarnym kole z obrysem soczewki (R4: bez osi). Wariant data-wariant="pierscienie" = orb R2 (sześć pierścieni kropek).
   ========================================================================== */
.m3-bohater{display:flex;flex-direction:column;align-items:center;width:100%;padding:var(--mot3r-krok-2) 0 var(--mot3r-krok-1);border:0;background:none;color:var(--mot3r-tekst);
  border-radius:var(--mot3r-promien-karta);transition:transform var(--mot3r-ruch)}
.m3-bohater:active{transform:scale(.98)}
.m3-orb{display:block;width:min(66vw,var(--mot3r-orb),30dvh);height:auto;margin:var(--mot3r-krok-3) auto 0;overflow:visible}
.m3-orb--maly{width:var(--mot3r-orb-maly);margin:0}
/* R6 (sędzia 4): awatar linii = TA SAMA matryca co bohater (litera DotGothic16 jako tekst ~20 px czytała się jak „Å”) —
   svg.m3-orb w kole awatara, kropka stanu zostaje w rogu; tożsamość linii wszędzie jednym obrazem */
.m3-awatar > .m3-orb{width:100%;height:auto;margin:0}
.m3-awatar:has(> .m3-orb){background:none}
/* wybrany awatar w rzędzie (2+ linie): pierścień tekstu wokół soczewki (tło zasłania matryca) */
.m3-awatar:has(> .m3-orb):is([aria-checked="true"],[aria-current="true"]){background:none;outline:2px solid var(--mot3r-tekst);outline-offset:2px}
.m3 .m3-awatar:focus-visible{outline:2px solid var(--mot3r-fokus);outline-offset:3px}
/* wariant pierścieni (R2) */
.m3-orb .kr{fill:var(--mot3r-tekst);transition:fill var(--mot3r-ruch)}
.m3-orb .litera{fill:var(--mot3r-tekst);font-family:var(--mot3r-font-kropka)}
.m3-orb .stan{fill:var(--mot3r-tekst-dim);stroke:var(--mot3r-tlo);stroke-width:6;paint-order:stroke}
.m3-orb .stan[data-stan="available"]{fill:var(--mot3r-online)}
.m3-orb .stan[data-stan="busy"]{fill:var(--mot3r-tekst)}
.m3-orb .stan[data-stan="off"]{fill:var(--mot3r-tlo);stroke:var(--mot3r-tekst-dim);stroke-width:3}
.m3-orb .stan[data-stan="blad"]{fill:var(--mot3r-alarm)}
.m3-orb[data-stan="pause"] .kr{fill:var(--mot3r-tekst-dim)}
.m3-orb[data-stan="off"] .kr,.m3-orb[data-stan="retired"] .kr,.m3-orb[data-stan="archived"] .kr,.m3-orb[data-stan="pusto"] .kr{fill:var(--mot3r-wylaczony)}
.m3-orb[data-stan="off"] .litera{fill:var(--mot3r-tekst-dim)}
/* adres linii = krój tekstu (DotGothic16 rozsypuje „alfa@mot.email” na „a l fa@mot. ema i l”); bez linii: słowo Pusto przygaszone w tym samym miejscu */
.m3-bohater-adres{margin-top:var(--mot3r-wnetrze-karty);font:var(--mot3r-t-adres);letter-spacing:var(--mot3r-t-adres-rozstaw);text-align:center;overflow-wrap:anywhere}
.m3-bohater-adres--pusto{color:var(--mot3r-tekst-dim)}

/* ==========================================================================
   Mot3rLineAvatarRow — A · B · C + plus (przewijanie palcem, plus przypięty)
   ========================================================================== */
.m3-awatary{display:flex;align-items:center;gap:var(--mot3r-krok-3);min-height:var(--mot3r-awatar);margin-top:var(--mot3r-krok-2)}
.m3-awatary-lista{display:flex;align-items:center;gap:var(--mot3r-krok-3);flex:1;min-width:0;overflow-x:auto;padding:var(--mot3r-krok-2);margin:calc(-1 * var(--mot3r-krok-2));
  scrollbar-width:none;scroll-snap-type:x proximity}
.m3-awatary-lista::-webkit-scrollbar{display:none}
.m3-awatar{position:relative;width:var(--mot3r-awatar);height:var(--mot3r-awatar);flex:0 0 var(--mot3r-awatar);display:grid;place-items:center;padding:0;
  border:0;border-radius:var(--mot3r-promien-kolo);background:var(--mot3r-kontrolka);color:var(--mot3r-tekst);
  font:var(--mot3r-t-wyswietlacz-m);scroll-snap-align:start;transition:background-color var(--mot3r-ruch),color var(--mot3r-ruch)}
.m3-awatar[aria-current="true"],.m3-awatar[aria-checked="true"]{background:var(--mot3r-tekst);color:var(--mot3r-tlo)}
.m3-awatar > .m3-kropka{position:absolute;z-index:1;top:1px;right:1px;width:var(--mot3r-kropka-stanu);height:var(--mot3r-kropka-stanu);outline:2px solid var(--mot3r-tlo)}
/* plus ADD LINE w rzędzie awatarów (od 2 linii) = powierzchnia kontrolki jak awatary, białe „+” — R7 (sędzia telefonu): sygnał w górnym
   rogu (9–13 % wysokości) to najtrudniejsze miejsce dla kciuka; akcja ADD LINE w strefie kciuka stoi w Mikserze i w MENU */
.m3-awatar--dodaj{background:var(--mot3r-kontrolka);color:var(--mot3r-tekst);border:0}
/* rząd awatarów w pasku tytułu (oszczędza rząd na niskim telefonie): tytuł z lewej, A · B · + z prawej */
.m3-gora > .m3-awatary{flex:0 1 auto;min-width:0;margin:0 0 0 auto}
.m3-karta .m3-awatar:not([aria-checked="true"]):not([aria-current="true"]){background:var(--mot3r-karta-2)}
.m3-awatar--s{--mot3r-awatar:var(--mot3r-awatar-s);font:var(--mot3r-t-wyswietlacz-s)}
.m3-awatar--s > .m3-kropka{width:var(--mot3r-kropka-stanu-s);height:var(--mot3r-kropka-stanu-s)}
/* ładowanie / błąd listy: Mot3rEmptyLoadingError w wierszu (m3-stany--wiersz) zamiast awatarów, plus zostaje */
.m3-awatary > .m3-stany--wiersz{flex:1}

/* ==========================================================================
   Mot3rRoundToggleGroup — duże koła z podpisem (jeden wybór albo wiele)
   ========================================================================== */
.m3-kola{display:flex;justify-content:space-around;align-items:flex-start;gap:var(--mot3r-krok-2);margin-top:var(--mot3r-krok-4)}
.m3-kolo{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--mot3r-krok-3);border:0;padding:0;background:none;
  color:var(--mot3r-tekst-dim);font:var(--mot3r-t-podpis);text-align:center;transition:color var(--mot3r-ruch)}
.m3-kolo-tarcza{width:var(--mot3r-kolo);height:var(--mot3r-kolo);display:grid;place-items:center;border-radius:var(--mot3r-promien-kolo);
  background:var(--mot3r-karta-2);color:var(--mot3r-tekst);transition:background-color var(--mot3r-ruch),color var(--mot3r-ruch),transform var(--mot3r-ruch)}
.m3-kolo[aria-checked="true"],.m3-kolo[aria-pressed="true"]{color:var(--mot3r-tekst)}
.m3-kolo[aria-checked="true"] .m3-kolo-tarcza,.m3-kolo[aria-pressed="true"] .m3-kolo-tarcza{background:var(--mot3r-tekst);color:var(--mot3r-tlo)}
.m3-kolo:active .m3-kolo-tarcza{transform:scale(.98)}
.m3 .m3-kolo:focus-visible,.m3 .m3-kolo.m3-pokaz-fokus{outline:none}
.m3-kolo:focus-visible .m3-kolo-tarcza,.m3-kolo.m3-pokaz-fokus .m3-kolo-tarcza{outline:2px solid var(--mot3r-fokus);outline-offset:3px}
.m3-kolo-podpis{white-space:nowrap}
.m3-kolo-podpis small{display:block;margin-top:2px;font:var(--mot3r-t-podpis);color:var(--mot3r-tekst-dim)}
/* dopisek ze stanem pod podpisem akcji (R7: „● kabel Claude” pod >> EJECT) — kropka + słowo, łamie się w wąskiej kolumnie */
.m3-kolo-podpis small.m3-stan{display:block;margin-top:var(--mot3r-krok-1);text-align:center;white-space:normal}
.m3-kolo-podpis small.m3-stan > .m3-kropka{margin-right:var(--mot3r-krok-1);vertical-align:1px}
.m3-kolo-podpis small > .m3-znacznik{display:flex;justify-content:center;min-height:0}
.m3-kola--male{--mot3r-kolo:var(--mot3r-kolo-male)}
/* cichy podpis NAD kołem — nagłówek kolumny z tabeli Króla (E1 WHO nad GOD IN, F1 WHERE nad GOD OUT; G1 puste = pusty podpis) */
.m3-kolo-nad{display:flex;align-items:center;justify-content:center;gap:var(--mot3r-krok-1);min-height:var(--mot3r-znacznik-h);
  font:var(--mot3r-t-znacznik);letter-spacing:var(--mot3r-t-znacznik-rozstaw);text-transform:uppercase;color:var(--mot3r-tekst-dim);white-space:nowrap}
.m3-kolo-nad > .m3-znacznik{min-height:0}
/* R7 (sędziowie: >> EJECT wyglądał jak trzeci przełącznik): AKCJA w rzędzie kół = inna FORMA — tarcza bez wypełnienia, sam włos;
   akcja nigdy nie zostaje wciśnięta (bez aria-pressed). Para przełączników stoi w .m3-kola-para, akcja za pionowym włosem i większą przerwą */
.m3-kola-para{display:flex;justify-content:space-around;align-items:flex-start;gap:var(--mot3r-krok-2);flex:2 1 0;min-width:0}
.m3-kolo--akcja{position:relative;color:var(--mot3r-tekst)}
.m3-kolo--akcja .m3-kolo-tarcza{background:none;box-shadow:inset 0 0 0 1px var(--mot3r-linia);color:var(--mot3r-tekst)}
.m3-kola-para ~ .m3-kolo--akcja{margin-left:var(--mot3r-krok-3)}
.m3-kola-para ~ .m3-kolo--akcja::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--mot3r-krok-3) / 2 - var(--mot3r-krok-2) / 2);width:1px;background:var(--mot3r-linia)}

/* ==========================================================================
   Mot3rPillGroup — pigułki (wybór) i przełącznik segmentowy
   R3: niewybrana pigułka mówi tekst-dim (hierarchia barwą, nie pięcioma białymi wersalikami); wybrana bez zmian
   ========================================================================== */
.m3-pigulki{display:grid;grid-template-columns:1fr 1fr;gap:var(--mot3r-krok-2);margin-top:var(--mot3r-krok-4)}
.m3-pigulki--rzad{display:flex;flex-wrap:wrap}
.m3-pigulki--4{grid-template-columns:repeat(4,1fr)}
/* jeden przewijany rząd (pigułki STATUS na ekranie Linia): 44 px, przyciąganie do pigułki, bez paska przewijania;
   wnętrze krok-2 z ujemnym marginesem = miejsce na obrys fokusu (overflow nie tnie obrysu) */
.m3-pigulki--przewijane{display:flex;flex-wrap:nowrap;gap:var(--mot3r-krok-1);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:calc(var(--mot3r-krok-4) - var(--mot3r-krok-2)) calc(-1 * var(--mot3r-krok-2)) calc(-1 * var(--mot3r-krok-2));padding:var(--mot3r-krok-2);
  scroll-padding-inline:var(--mot3r-margines)}
.m3-pigulki--przewijane::-webkit-scrollbar{display:none}
.m3-pigulki--przewijane > .m3-pigulka{flex:1 0 auto;scroll-snap-align:start;overflow-wrap:normal;white-space:nowrap}
/* sędziowie 1 linii 13.10: ucięta pigułka = WIDOCZNA wskazówka gestu — rząd, który ma schowaną treść po prawej (data-przelew,
   liczy M3.przewijane), gaśnie ku prawej krawędzi; przewinięty do końca albo mieszczący się — bez maski.
   Rząd przewijany tylko dla zmiennej liczby pozycji (skorupy z szafy); stałe zestawy (STATUS, zakładki VAULT) = m3-pigulki--rowne / m3-zakladki (jeden rząd, R6) */
.m3-pigulki--przewijane[data-przelew]{-webkit-mask-image:linear-gradient(90deg,var(--mot3r-tlo) 85%,transparent);mask-image:linear-gradient(90deg,var(--mot3r-tlo) 85%,transparent)}
/* stały zestaw pigułek w JEDNYM rzędzie bez przewijania (STATUS: Retired · Archived · Busy): każda widoczna, zawsze jeden rząd —
   R6: słowo „etc” stoi POD rzędem jako przypis (w rzędzie udawało cel dotyku i łamało rząd przy 320); < 390 px ciaśniejsze wnętrze */
.m3-pigulki--rowne{display:flex;align-items:center;gap:var(--mot3r-krok-1);margin-top:var(--mot3r-krok-3)}
.m3-pigulki--rowne > [role="radiogroup"]{display:flex;flex:1;gap:var(--mot3r-krok-1);min-width:0}
.m3-pigulki--rowne .m3-pigulka{flex:1 0 auto;white-space:nowrap;overflow-wrap:normal}
.m3-pigulka{display:inline-flex;align-items:center;justify-content:center;gap:var(--mot3r-krok-2);min-height:var(--mot3r-pigulka-h);min-width:var(--mot3r-dotyk);
  padding:var(--mot3r-krok-2) var(--mot3r-krok-4);border:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-pigulka);background:var(--mot3r-karta);color:var(--mot3r-tekst-dim);
  font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);text-transform:uppercase;text-align:center;overflow-wrap:anywhere;
  transition:background-color var(--mot3r-ruch),color var(--mot3r-ruch),transform var(--mot3r-ruch)}
.m3-karta .m3-pigulka{background:var(--mot3r-karta-2);border-color:transparent}
.m3-pigulka--niska{min-height:var(--mot3r-dotyk);padding:var(--mot3r-krok-1) var(--mot3r-krok-3)}
.m3-pigulka:active{transform:scale(.98)}
/* wybór = ZAWSZE biały (R6, sędzia 1: wybór miał trzy wyglądy zależne od szerokości; eter — sygnał należy do akcji). --sygnal wycofany */
.m3-pigulka[aria-checked="true"],.m3-pigulka[aria-pressed="true"]{background:var(--mot3r-tekst);color:var(--mot3r-tlo);border-color:transparent}
/* cała szerokość (ADD SHELL pod siatką skorup) */
.m3-pigulka--cala{grid-column:1/-1}
/* akcja główna ekranu: 64 px, sygnał, strefa kciuka — jedna forma i jeden krój (nadruk) na każdym ekranie (R6: --zdanie wycofane;
   dalsza część zdania z tabeli stoi nad pigułką jako m3-przypis) */
.m3-pigulka--glowna{min-height:var(--mot3r-kciuk);width:100%;background:var(--mot3r-sygnal);color:var(--mot3r-tekst-na-sygnale);border-color:transparent}
/* wyłączona akcja główna NIE jest przygaszonym sygnałem (krycie 0,4 na czerni dawało brąz spoza eter i czarny napis ok. 1,7 : 1 —
   sędziowie 1 linii 13.10): powierzchnia kontrolki + napis przygaszony (ok. 5,6 : 1), jak .m3-ptt[disabled]. Czerwień eter zapala się,
   gdy akcja jest gotowa */
.m3-pigulka--glowna:disabled,.m3-pigulka--glowna[aria-disabled="true"]{opacity:1;background:var(--mot3r-karta-2);color:var(--mot3r-tekst-dim);border-color:transparent}
.m3-karta--wylaczona :is(.m3-pigulka--glowna,.m3-kolo-akcja--sygnal){background:var(--mot3r-karta-2);color:var(--mot3r-tekst-dim);border-color:transparent}
.m3-pigulka--tekst{width:100%;border-color:transparent;background:none;color:var(--mot3r-tekst-dim)}
.m3-karta .m3-pigulka--tekst{background:none}
.m3-sekcja + .m3-pigulki{margin-top:0}
/* strefa kciuka: pigułki jedna pod drugą co krok-2; pojedyncza pigułka na całą szerokość */
.m3-dol .m3-pigulki{margin-top:0}
.m3-dol > * + .m3-pigulki,.m3-dol > * + .m3-pigulka{margin-top:var(--mot3r-krok-2)}
.m3-dol > .m3-pigulka{display:flex;width:100%}
/* przełącznik segmentowy: tor + segment wybrany biały */
.m3-segmenty{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--mot3r-krok-1);margin-top:var(--mot3r-krok-4);padding:var(--mot3r-krok-1);
  border-radius:var(--mot3r-promien-pigulka);background:var(--mot3r-karta-2)}
.m3-segment{min-height:var(--mot3r-dotyk);min-width:var(--mot3r-dotyk);padding:var(--mot3r-krok-1) var(--mot3r-krok-2);border:0;border-radius:var(--mot3r-promien-pigulka);background:none;
  color:var(--mot3r-tekst-dim);font:var(--mot3r-t-podtytul);white-space:nowrap;transition:background-color var(--mot3r-ruch),color var(--mot3r-ruch)}
.m3-segment[aria-checked="true"]{background:var(--mot3r-tekst);color:var(--mot3r-tlo)}
/* dopisek pod słowem segmentu (np. „mix” + „( PRO ? )” z D6 tabeli Króla): nadruk 12 px bez rozstrzelenia, mieści się przy 320 */
.m3-segment > small{display:block;font:var(--mot3r-t-znacznik);letter-spacing:0;text-transform:uppercase;color:var(--mot3r-tekst-dim)}
.m3-segment[aria-checked="true"] > small{color:inherit}
.m3-segment:has(> small){padding-inline:var(--mot3r-krok-1);line-height:1.15}
.m3-panika + .m3-segmenty{margin-top:var(--mot3r-krok-3)}

/* ==========================================================================
   Mot3rField — pole wpisu (R3): nazwa linii z przyklejonym @mot.email (ADD LINE, TUNNEL NAME → Edit)
   ========================================================================== */
.m3-wpis{display:flex;align-items:center;min-height:var(--mot3r-pigulka-h);margin-top:var(--mot3r-krok-4);padding:0 var(--mot3r-krok-5);
  border:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-pigulka);background:var(--mot3r-kontrolka);color:var(--mot3r-tekst);
  font:var(--mot3r-t-wpis);cursor:text;transition:border-color var(--mot3r-ruch)}
.m3-karta .m3-wpis,.m3-arkusz .m3-wpis{background:var(--mot3r-karta-2)}
/* pole rośnie z treścią (field-sizing), sufiks stoi tuż za nazwą — jeden adres; bez field-sizing pole bierze resztę rzędu */
.m3-wpis input{flex:1 1 auto;min-width:0;height:var(--mot3r-dotyk);margin:0;padding:0;border:0;background:none;color:var(--mot3r-tekst);font:inherit;outline:none}
@supports (field-sizing:content){.m3-wpis input{flex:0 1 auto;field-sizing:content;min-width:1ch;max-width:100%}}
.m3-wpis input::placeholder{color:var(--mot3r-tekst-dim);opacity:1}
.m3-wpis-sufiks{flex:none;color:var(--mot3r-tekst-dim);white-space:nowrap}
.m3-wpis:focus-within,.m3-wpis.m3-pokaz-fokus{outline:2px solid var(--mot3r-fokus);outline-offset:3px}
/* JEDEN obrys fokusu: rysuje go pigułka (:focus-within) — sam input nie dostaje drugiego obrysu z reguły bazowej .m3 :focus-visible
   (1-linia 13.10: w arkuszu TUNNEL NAME → Edit było widać dwa obrysy: pigułkę i prostokąt wokół wpisanej nazwy) */
.m3 .m3-wpis input:focus-visible,.m3 .m3-szukaj input:focus-visible{outline:none}
.m3-wpis[data-stan="blad"]{border-color:var(--mot3r-alarm)}
.m3-wpis:has(> input:disabled){opacity:var(--mot3r-wylaczony-krycie);cursor:not-allowed}
.m3-wpis > input:disabled{opacity:1}
/* komunikat pod polem: kropka alarmu + słowo (słowo systemu — propozycja, opisane w podpisie ramki pokazu) */
.m3-wpis-blad{margin:var(--mot3r-krok-2) var(--mot3r-krok-5) 0}

/* ==========================================================================
   Mot3rSegmentMeter — pasek z kropek (LED x/100%, Volume, suwaki portfela, poziom TRYB · TEMPO)
   ========================================================================== */
.m3-diody{display:flex;align-items:center;justify-content:space-between;gap:var(--mot3r-krok-1);height:var(--mot3r-dotyk);border-radius:var(--mot3r-promien-wiersz)}
.m3-diody i{flex:none;width:var(--mot3r-dioda);height:var(--mot3r-dioda);border-radius:var(--mot3r-promien-kolo);background:var(--mot3r-wylaczony);
  transition:background-color var(--mot3r-ruch)}
.m3-diody i.on{background:var(--mot3r-tekst)}
.m3-diody i.szczyt{background:var(--mot3r-sygnal)}
.m3-diody i.mig{animation:m3-miga 1.2s steps(2,jump-none) infinite}
/* suwak: pionowy gest przewija stronę (pan-y), poziomy przesuwa wartość — mot3r.js przejmuje palec dopiero po |dx| > 8 px i |dx| > |dy|
   (sędziowie 1 linii 13.10: touch-action:none porywał przewijanie portfela i zmieniał linie / skorupy / MOM) */
.m3-diody[role="slider"]{cursor:pointer;touch-action:pan-y}
/* pasek tylko do odczytu (MEMORY x/100%) nie potrzebuje wysokości celu dotyku */
.m3-diody:not([role="slider"],.m3-diody--mini,.m3-diody--lewo){height:var(--mot3r-krok-5)}
.m3-diody--mini{height:auto;justify-content:center;gap:3px}
.m3-diody--mini i{width:var(--mot3r-dioda-xs);height:var(--mot3r-dioda-xs)}
/* poziom (TRYB · TEMPO, wiersz 35 tabeli Króla): kropki od lewej, zapalone sygnałem — odczyt, nie wybór */
.m3-diody--lewo{height:auto;justify-content:flex-start;gap:var(--mot3r-krok-1)}
.m3-diody--sygnal i.on{background:var(--mot3r-sygnal)}
.m3-karta > .m3-diody{margin-top:var(--mot3r-krok-3)}

/* ==========================================================================
   Mot3rDotDisplay — liczby kropkowe (DotGothic16) tam, gdzie nie ma wyświetlacza LED (64/100%, 3 · 12 c)
   ========================================================================== */
.m3-wysw{display:inline-flex;align-items:baseline;gap:var(--mot3r-krok-2);font:var(--mot3r-t-wyswietlacz-m);color:var(--mot3r-tekst);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.m3-wysw--xl{font:var(--mot3r-t-wyswietlacz-xl)}
.m3-wysw--l{font:var(--mot3r-t-wyswietlacz-l)}
.m3-wysw--m{font:var(--mot3r-t-wyswietlacz-m)}
.m3-wysw--s{font:var(--mot3r-t-wyswietlacz-s);letter-spacing:var(--mot3r-t-wyswietlacz-s-rozstaw)}
.m3-wysw--dim{color:var(--mot3r-tekst-dim)}
/* ładowanie: „--” kropkowo, przygaszone; błąd: przygaszone + słowo obok (Mot3rWalletMeter) */
.m3-wysw[data-stan="ladowanie"],.m3-wysw[data-stan="blad"]{color:var(--mot3r-tekst-dim)}
.m3-jedn{font:var(--mot3r-t-jednostka);letter-spacing:var(--mot3r-t-jednostka-rozstaw);color:var(--mot3r-tekst-dim)}
/* R6 (sędzia 1): krój kropkowy TYLKO na cyfrach — każda jednostka (c · GB · %) nadrukiem m3-jedn, także wewnątrz liczby kropkowej
   („1 · 4 c”, „5 GB · 21 c”, „64/100%”), tak samo jak przy wyświetlaczu LED; klasa działa w środku .m3-wysw i .m3-wiersz-wartosc */
.m3-wysw-blok{display:flex;flex-direction:column;gap:var(--mot3r-krok-2)}
.m3-wysw-blok--prawo{align-items:flex-end;text-align:right}
.m3-wysw-blok > .m3-t-znacznik{white-space:nowrap}

/* ==========================================================================
   Mot3rCardSection — karta jak widżet: tytuł · podtytuł · stan (kropka + słowo)
   ========================================================================== */
.m3-karta{position:relative;display:block;width:100%;margin-top:var(--mot3r-odstep-kart);padding:var(--mot3r-wnetrze-karty);
  border:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-karta);background:var(--mot3r-karta);color:var(--mot3r-tekst);text-align:left;
  transition:transform var(--mot3r-ruch),opacity var(--mot3r-ruch)}
a.m3-karta:active,button.m3-karta:active{transform:scale(.98)}
.m3-karta--odstep{margin-top:var(--mot3r-krok-5)}
.m3-karta--tory{padding:var(--mot3r-krok-2)}
.m3-karta-glowa{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--mot3r-krok-3)}
.m3-karta-glowa--srodek{align-items:center}
/* głowa karty jako cel (link / przycisk — np. tor wybrany w Mikserze): ≥ 44 px także przy cichym tytule 12 px (R6) */
:is(a,button).m3-karta-glowa{min-height:var(--mot3r-dotyk)}
/* tytuł karty = CICHA etykieta (R6, sędzia 4): nadruk eter WERSALIKI 0,18 em w tekst-dim — bohaterem karty jest kontrolka, nie tytuł
   (17 / 600 wersalikami krzyczał). --wiersz = karta, której tytuł opisuje przełącznik albo jest adresem / nazwą: akapit w barwie tekstu */
.m3-karta-tytul{display:flex;align-items:center;flex-wrap:wrap;gap:var(--mot3r-krok-2);margin:0;font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);
  text-transform:uppercase;color:var(--mot3r-tekst-dim);overflow-wrap:anywhere}
.m3-karta-tytul--wiersz{font:var(--mot3r-t-akapit);letter-spacing:normal;text-transform:none;color:var(--mot3r-tekst)}
/* znacznik PRZYKŁAD / ? w głowie karty i w etykiecie sekcji — po prawej, przy danych, które oznacza (R6: nigdy wolnostojący) */
.m3-karta-glowa > .m3-znacznik,.m3-sekcja > .m3-znacznik{margin-left:auto;letter-spacing:var(--mot3r-t-znacznik-rozstaw)}
/* R7: dwa znaczniki obok siebie (PRZYKŁAD · ?) stoją razem po prawej */
.m3-karta-glowa > .m3-znacznik + .m3-znacznik,.m3-sekcja > .m3-znacznik + .m3-znacznik{margin-left:0}
.m3-karta-pod{margin:var(--mot3r-krok-1) 0 0;font:var(--mot3r-t-podtytul);color:var(--mot3r-tekst-dim)}
.m3-przypis{margin:var(--mot3r-krok-3) var(--mot3r-krok-1) 0;font:var(--mot3r-t-podtytul);color:var(--mot3r-tekst-dim)}
.m3-przypis--srodek{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;column-gap:var(--mot3r-krok-3);margin-top:var(--mot3r-krok-2)}
.m3-karta-stopka{display:flex;align-items:center;justify-content:space-between;gap:var(--mot3r-krok-2);margin-top:auto}
/* stopka pod głową karty (MEMORY: pasek x/100% + odczyt w jednym rzędzie) */
.m3-karta-glowa + .m3-karta-stopka{margin-top:var(--mot3r-krok-3)}
.m3-karta-stopka > .m3-diody{flex:1;margin:0}
.m3-wiecej{width:var(--mot3r-dotyk);height:var(--mot3r-dotyk);margin:calc(-1 * var(--mot3r-krok-3)) calc(-1 * var(--mot3r-krok-3)) 0 0;flex:none;display:grid;place-items:center;border:0;padding:0;
  border-radius:var(--mot3r-promien-kolo);background:none;color:var(--mot3r-tekst)}
/* w głowie wyśrodkowanej ••• stoi na osi tytułu (R6: ujemny margines tylko w górę podnosił kropki nad tytuł) */
.m3-karta-glowa--srodek > .m3-wiecej{margin-block:calc(-1 * var(--mot3r-krok-3))}
.m3-widgety{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mot3r-odstep-kart);margin-top:var(--mot3r-odstep-kart)}
.m3-widgety--odstep{margin-top:var(--mot3r-krok-5)}
.m3-widgety > .m3-karta{margin-top:0}
.m3-karta--cala{grid-column:1/-1}
.m3-karta--pol{min-height:var(--mot3r-karta-pol-h);display:flex;flex-direction:column;gap:var(--mot3r-krok-4)}
.m3-karta--wylaczona{opacity:var(--mot3r-wylaczony-krycie)}
.m3-karta--srodek{text-align:center}
.m3-sekcja{display:flex;align-items:center;flex-wrap:wrap;gap:var(--mot3r-krok-2);min-height:var(--mot3r-znacznik-h);margin:var(--mot3r-odstep-sekcji) var(--mot3r-krok-1) var(--mot3r-krok-3);
  font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);text-transform:uppercase;color:var(--mot3r-tekst-dim)}
.m3-arkusz .m3-sekcja{margin-top:var(--mot3r-krok-5)}
/* znacznik: DANE PRZYKŁADOWE · PRO ? · ? — nadruk eter WERSALIKI 0,18 em; R3: mały, BEZ obrysu, przygaszony, stoi przy samych danych */
.m3-znacznik{display:inline-flex;align-items:center;gap:var(--mot3r-krok-2);min-height:var(--mot3r-znacznik-h);padding:0;border:0;
  font:var(--mot3r-t-znacznik);letter-spacing:var(--mot3r-t-znacznik-rozstaw);text-transform:uppercase;color:var(--mot3r-tekst-dim);white-space:nowrap}
/* kreska „the end ( if without mot3r plan )”: napis łamie się równo (bez sieroty „)”), wyśrodkowany; < 430 px kreska nad napisem (R6) */
.m3-koniec{display:flex;align-items:center;gap:var(--mot3r-krok-3);margin:var(--mot3r-odstep-sekcji) var(--mot3r-krok-1) var(--mot3r-krok-1);color:var(--mot3r-tekst-dim);
  font:var(--mot3r-t-znacznik);letter-spacing:var(--mot3r-t-znacznik-rozstaw);text-transform:uppercase;text-align:center;text-wrap:balance}
.m3-koniec::before,.m3-koniec::after{content:"";flex:1;min-width:var(--mot3r-krok-4);height:1px;background:var(--mot3r-linia)}
.m3-pole{display:flex;align-items:center;justify-content:space-between;gap:var(--mot3r-krok-3);min-height:var(--mot3r-dotyk);margin-top:var(--mot3r-krok-3);padding:var(--mot3r-krok-2) var(--mot3r-krok-4);
  border-radius:var(--mot3r-promien-wiersz);background:var(--mot3r-karta-2);color:var(--mot3r-tekst-dim);font:var(--mot3r-t-podtytul)}

/* ==========================================================================
   Mot3rListRow — wiersz listy: ikona · tekst · wartość · szewron albo przełącznik
   ========================================================================== */
.m3-grupa{display:flex;flex-direction:column;gap:2px;margin-top:var(--mot3r-krok-3)}
.m3-grupa:first-child{margin-top:0}
.m3-wiersz{display:flex;align-items:center;gap:var(--mot3r-krok-4);width:100%;min-height:var(--mot3r-wiersz-h);padding:var(--mot3r-krok-3) var(--mot3r-wnetrze-karty);border:0;border-radius:var(--mot3r-promien-wiersz);
  background:var(--mot3r-karta);color:var(--mot3r-tekst);text-align:left;font:var(--mot3r-t-akapit);transition:opacity var(--mot3r-ruch)}
.m3-grupa > .m3-wiersz:first-child{border-top-left-radius:var(--mot3r-promien-karta);border-top-right-radius:var(--mot3r-promien-karta)}
.m3-grupa > .m3-wiersz:last-child{border-bottom-left-radius:var(--mot3r-promien-karta);border-bottom-right-radius:var(--mot3r-promien-karta)}
/* wiersz sam (konto na Moja strona): pełne rogi karty i włos krawędzi */
.m3-wiersz--sam{margin-top:var(--mot3r-krok-2);border:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-karta)}
.m3-wiersz--duzy{min-height:var(--mot3r-wiersz-h-duzy)}
.m3-karta .m3-wiersz{background:var(--mot3r-karta-2)}
.m3-wiersz-tekst{flex:1;min-width:0;overflow-wrap:anywhere}
.m3-wiersz-tekst small{display:block;margin-top:2px;font:var(--mot3r-t-podtytul);color:var(--mot3r-tekst-dim)}
.m3-wiersz-wartosc{flex:none;font:var(--mot3r-t-wyswietlacz-s);letter-spacing:var(--mot3r-t-wyswietlacz-s-rozstaw);color:var(--mot3r-tekst-dim);white-space:nowrap}
.m3-szewron{width:var(--mot3r-ikona-s);height:var(--mot3r-ikona-s);color:var(--mot3r-tekst-dim)}
/* stan albo wartość słowem po prawej (kropka + „on” · kropka + nazwa) — nie ściska się */
.m3-wiersz > .m3-stan{flex:none}
.m3-wiersz > .m3-znacznik{flex:none}
.m3-wiersz-tekst > .m3-znacznik{min-height:0;margin-left:var(--mot3r-krok-2);vertical-align:1px}
/* R7: znacznik PRZYKŁAD przy wartości w dopisku wiersza (slot tabeli wypełniony przykładem: „alfa · A”, „5 GB”, „Claude”) */
.m3-wiersz-tekst small > .m3-znacznik{min-height:0;margin-left:var(--mot3r-krok-2);vertical-align:1px}
/* R7: dopisek ze stanem (kropka + słowo, np. „● kabel Claude” w pasku toru) */
.m3-wiersz-tekst small.m3-stan{display:flex;flex-wrap:wrap;white-space:normal}
/* wiersz dzielony (jak przełącznik z wejściem głębiej w systemie telefonu): lewa część = wejście (szewron, cała wysokość wiersza),
   za włosem przełącznik; cel dotyku każdej części ≥ 44 px. Wiersz dzielony NIE ma data-m3-przelacza */
.m3-wiersz-cel{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;gap:var(--mot3r-krok-4);
  margin:calc(-1 * var(--mot3r-krok-3)) 0 calc(-1 * var(--mot3r-krok-3)) calc(-1 * var(--mot3r-wnetrze-karty));
  padding:var(--mot3r-krok-3) var(--mot3r-krok-4) var(--mot3r-krok-3) var(--mot3r-wnetrze-karty);
  border:0;border-right:1px solid var(--mot3r-linia);border-radius:inherit;border-start-end-radius:0;border-end-end-radius:0;background:none;color:inherit;font:inherit;text-align:left}
/* R6: szew = prosty włos (rogi po stronie włosa zerowe — z border-radius:inherit włos wyginał się u góry i u dołu); wejście głębiej
   zawsze ze szewronem przed włosem (wzór: szewron | włos | przełącznik) */
.m3-wiersz-cel > [data-szewron]{margin-left:auto}
.m3-wiersz-cel:active{opacity:.7}
/* wiersz wyboru (lista radio: sekcje USB, szafa skorup): znak wyboru tylko przy wybranym, niewybrane tekst-dim (hierarchia barwą jak pigułki) */
.m3-wiersz[role="radio"]:not([aria-checked="true"]){color:var(--mot3r-tekst-dim)}
.m3-wiersz[role="radio"]:not([aria-checked="true"]) > .m3-wiersz-wybor{visibility:hidden}
.m3-wiersz[data-nowe] .m3-wiersz-tekst::before{content:"";display:inline-block;width:var(--mot3r-dioda);height:var(--mot3r-dioda);margin:0 var(--mot3r-krok-3) 2px 0;border-radius:var(--mot3r-promien-kolo);background:var(--mot3r-tekst)}
.m3-wiersz[data-odczytane]{color:var(--mot3r-tekst-dim)}
/* ładowanie / błąd grupy: Mot3rEmptyLoadingError w wierszu (m3-stany--wiersz) jako jedyny wiersz grupy */
.m3-grupa > .m3-stany--wiersz{min-height:var(--mot3r-wiersz-h);border-radius:var(--mot3r-promien-karta);background:var(--mot3r-karta)}
.m3-karta .m3-grupa > .m3-stany--wiersz{background:var(--mot3r-karta-2)}
/* przełącznik: cały wiersz przełącza (data-m3-przelacza); gałka = przel-h − 2 × krok-1, droga = przel-w − przel-h */
.m3-przel{position:relative;flex:none;width:var(--mot3r-przel-w);height:var(--mot3r-przel-h);border:0;padding:0;border-radius:var(--mot3r-promien-pigulka);background:var(--mot3r-wylaczony);
  transition:background-color var(--mot3r-ruch)}
.m3-przel::before{content:"";position:absolute;inset:-6px}
.m3-przel::after{content:"";position:absolute;top:var(--mot3r-krok-1);left:var(--mot3r-krok-1);width:calc(var(--mot3r-przel-h) - 2 * var(--mot3r-krok-1));height:calc(var(--mot3r-przel-h) - 2 * var(--mot3r-krok-1));
  border-radius:var(--mot3r-promien-kolo);background:var(--mot3r-tekst-dim);transition:transform var(--mot3r-ruch),background-color var(--mot3r-ruch)}
.m3-przel[aria-checked="true"]{background:var(--mot3r-tekst)}
.m3-przel[aria-checked="true"]::after{transform:translateX(calc(var(--mot3r-przel-w) - var(--mot3r-przel-h)));background:var(--mot3r-tlo)}
.m3-szukaj{display:flex;align-items:center;gap:var(--mot3r-krok-3);min-height:var(--mot3r-pigulka-h);padding:0 var(--mot3r-krok-4);border:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-pigulka);
  background:var(--mot3r-karta-2);color:var(--mot3r-tekst-dim);font:var(--mot3r-t-wpis)}
* + .m3-szukaj{margin-top:var(--mot3r-krok-3)}
.m3-szukaj input{flex:1;min-width:0;height:var(--mot3r-dotyk);border:0;background:none;color:var(--mot3r-tekst);font:inherit;outline:none}
.m3-szukaj input::placeholder{color:var(--mot3r-tekst-dim)}
.m3-szukaj:focus-within,.m3-szukaj.m3-pokaz-fokus{outline:2px solid var(--mot3r-fokus);outline-offset:3px}

/* ==========================================================================
   Mot3rStarSelector — gwiazda z kropek wprost na czerni: SHELL (soul · head · eyes · living · ledger) i kable ADD LINE
   (bez okręgu obrysu — to sylwetka dysku korektora ze wzoru, nie zasada)
   ========================================================================== */
.m3-gwiazda{display:block;width:100%;max-width:var(--mot3r-gwiazda);height:auto;margin:var(--mot3r-krok-3) auto 0;overflow:visible;touch-action:manipulation}
.m3-ekran--zadanie .m3-gwiazda{max-width:min(var(--mot3r-gwiazda),33dvh)}
.m3-gwiazda--maly{max-width:var(--mot3r-gwiazda-mala);margin:0}
.m3-gwiazda .promien{stroke:var(--mot3r-linia);stroke-width:1}
.m3-gwiazda .ramie.on .promien{stroke:var(--mot3r-tekst-dim)}
.m3-gwiazda .kr{fill:var(--mot3r-tekst-dim);transition:fill var(--mot3r-ruch)}
.m3-gwiazda .ramie.on .kr{fill:var(--mot3r-tekst)}
/* rozmiar napisów SVG liczy mot3r.js (≥ 12 px po wyrenderowaniu) — tu tylko krój */
.m3-gwiazda .etyk{fill:var(--mot3r-tekst-dim);font-family:var(--mot3r-font-tekst)}
.m3-gwiazda .ramie.on .etyk{fill:var(--mot3r-tekst)}
.m3-gwiazda .wezel{fill:var(--mot3r-karta);stroke:var(--mot3r-linia);stroke-width:1;transition:fill var(--mot3r-ruch)}
.m3-gwiazda .ramie.on .wezel{fill:var(--mot3r-tekst);stroke:transparent}
.m3-gwiazda .wezel-tekst{fill:var(--mot3r-tekst);font-family:var(--mot3r-font-kropka)}
.m3-gwiazda .ramie.on .wezel-tekst{fill:var(--mot3r-tlo)}
.m3-gwiazda .traf{fill:transparent}
.m3-gwiazda .ramie{cursor:pointer;outline:none;transition:opacity var(--mot3r-ruch)}
/* fokus węzła: obrys w SVG (outline na <g> nie rysuje się pewnie) */
.m3-gwiazda .ramie:focus-visible .traf,.m3-gwiazda .ramie.m3-pokaz-fokus .traf{stroke:var(--mot3r-fokus);stroke-width:2}
.m3-gwiazda .ramie.m3-pokaz-fokus{outline:none}
.m3-gwiazda .srodek{fill:var(--mot3r-tekst)}
.m3-gwiazda .srodek-tekst{fill:var(--mot3r-tlo);font-family:var(--mot3r-font-kropka)}
.m3-gwiazda.m3-szuka .ramie{opacity:0}
/* ładowanie / błąd listy kabli: gwiazda bez ramion, pod nią Mot3rEmptyLoadingError --wiersz */
.m3-gwiazda[aria-busy="true"] .ramie{opacity:0}

/* ==========================================================================
   Mot3rBankStepper — ‹ BANK 1 · 6 torów ›
   ========================================================================== */
.m3-bank{display:inline-flex;align-items:center;flex:none;height:var(--mot3r-bank-h);padding:0 2px;border:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-pigulka);
  background:var(--mot3r-karta);color:var(--mot3r-tekst)}
.m3-bank button{width:var(--mot3r-dotyk);height:var(--mot3r-dotyk);display:grid;place-items:center;border:0;padding:0;border-radius:var(--mot3r-promien-kolo);background:none}
.m3-bank-napis{padding:0 2px;font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);text-transform:uppercase;white-space:nowrap}

/* ==========================================================================
   Mot3rTrackStrip — tor miksera: kropka stanu · kolumna kropek (poziom) · numer DotGothic16 (R4: bez LED)
   ========================================================================== */
.m3-tory{display:grid;grid-template-columns:repeat(6,minmax(var(--mot3r-dotyk),1fr));gap:2px}
.m3-tory--mini{grid-template-columns:repeat(3,auto);gap:var(--mot3r-krok-3)}
.m3-tor{display:flex;flex-direction:column;align-items:center;gap:var(--mot3r-krok-3);min-width:var(--mot3r-dotyk);padding:var(--mot3r-krok-3) 0;border:0;
  border-radius:calc(var(--mot3r-promien-karta) - var(--mot3r-krok-2));background:none;color:var(--mot3r-tekst-dim);transition:background-color var(--mot3r-ruch)}
.m3-tor-diody{display:flex;flex-direction:column-reverse;align-items:center;gap:5px}
.m3-tor-diody i{width:var(--mot3r-dioda-s);height:var(--mot3r-dioda-s);border-radius:var(--mot3r-promien-kolo);background:var(--mot3r-wylaczony)}
.m3-tor-diody i.on{background:var(--mot3r-tekst)}
.m3-tor-nr{font:var(--mot3r-t-wyswietlacz-s);letter-spacing:var(--mot3r-t-wyswietlacz-s-rozstaw)}
.m3-tor[aria-checked="true"]{background:var(--mot3r-karta-2);color:var(--mot3r-tekst)}
.m3-tor--pusty .m3-tor-diody i{background:transparent;box-shadow:inset 0 0 0 1px var(--mot3r-wylaczony)}
/* wyciszony: poziom gaśnie (kropki = wyłączony), numer zostaje — tor dalej wybieralny */
.m3-tor[data-wyciszony] .m3-tor-diody i.on{background:var(--mot3r-wylaczony)}
.m3-tor[aria-current="true"]{background:var(--mot3r-karta-2);color:var(--mot3r-tekst)}
/* pusty tor — R7 (sędziowie: „+” sześć razy na ekranie, jedno „dodaj” to akcja główna): sam przygaszony pierścień (kropka off) i numer,
   bez „+”, nie jest celem dotyku; numer zawsze na dole toru (tory w siatce są równe). .m3-tor-plus = wariant R6 (tylko pokaz historii) */
.m3-tor > .m3-tor-nr{margin-top:auto}
.m3-tor-plus{flex:1 1 0;min-height:var(--mot3r-ikona-s);display:grid;place-items:center;color:var(--mot3r-tekst-dim)}
.m3-tor-plus .m3-ikona{width:var(--mot3r-ikona-s);height:var(--mot3r-ikona-s)}
/* R7: pasek wybranego toru pod taśmą (Mikser) — wiersz tożsamości (awatar-orb + kropka stanu, adres, kabel) i rząd Volume (LED) | PTT:
   to, co tor robi, o jedno dotknięcie z doku (było: #linia → dół strony → Volume → #glos) */
.m3-tor-pasek{display:flex;align-items:center;justify-content:space-between;gap:var(--mot3r-krok-4);margin-top:var(--mot3r-krok-4);padding:0 var(--mot3r-krok-1)}
.m3-tor-pasek > .m3-led-odczyt{flex-direction:column;align-items:flex-start;gap:var(--mot3r-krok-2)}
.m3-tor-pasek > .m3-led-odczyt > .m3-jedn{padding-bottom:0}
/* ładowanie / błąd banku: Mot3rEmptyLoadingError --wiersz w karcie torów zamiast sześciu torów */
.m3-karta--tory > .m3-stany--wiersz{min-height:var(--mot3r-karta-pol-h)}

/* ==========================================================================
   Mot3rPttButton — naciśnij i mów (sygnał tylko w czasie nadawania)
   R3: rząd wyrównany do góry, tarcze PING i Choose Voice na osi PTT (podpis dwuliniowy nie podnosi tarczy)
   ========================================================================== */
.m3-ptt-rzad{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--mot3r-krok-2);margin-top:var(--mot3r-wnetrze-karty)}
.m3-ptt-rzad > .m3-kolo{flex:1 1 0;min-width:var(--mot3r-dotyk);padding-top:calc((clamp(var(--mot3r-ptt-min),30vw,var(--mot3r-ptt)) - var(--mot3r-kolo-male)) / 2)}
.m3-ptt-rzad .m3-kolo-tarcza{background:var(--mot3r-kontrolka)}
/* R7 (sędzia telefonu: biały PTT obok białego MASTER czytał się jak WYBÓR): PTT = akcja główna ekranu #glos — SYGNAŁ w spoczynku
   (jedyny sygnał ekranu); trzymany = sygnał + 0,98 + obrys tekstu (widać, że nadaje). Długie przytrzymanie: bez menu systemu
   (-webkit-touch-callout, contextmenu w mot3r.js) */
.m3-ptt{width:clamp(var(--mot3r-ptt-min),30vw,var(--mot3r-ptt));height:auto;aspect-ratio:1;flex:none;display:grid;place-items:center;border:0;padding:0;border-radius:var(--mot3r-promien-kolo);
  background:var(--mot3r-sygnal);color:var(--mot3r-tekst-na-sygnale);font:var(--mot3r-t-etykieta-ptt);letter-spacing:var(--mot3r-t-etykieta-ptt-rozstaw);text-transform:uppercase;
  padding-left:var(--mot3r-t-etykieta-ptt-rozstaw);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:background-color var(--mot3r-ruch),color var(--mot3r-ruch),transform var(--mot3r-ruch),box-shadow var(--mot3r-ruch)}
/* R6: napis PTT = nadruk (słowo, nie liczba); bez poświaty (eter: dwa cienie i jedna poświata) */
.m3-ptt[aria-pressed="true"]{background:var(--mot3r-sygnal);color:var(--mot3r-tekst-na-sygnale);transform:scale(.98);box-shadow:none;outline:2px solid var(--mot3r-tekst);outline-offset:3px}
/* PTT w pasku toru Miksera (R7): akcja DRUGA ekranu (główna = ADD 2 LINE) — sam włos bez wypełnienia, sygnał tylko w czasie nadawania */
.m3-ptt--tor{width:var(--mot3r-ptt-tor);background:none;color:var(--mot3r-tekst);box-shadow:inset 0 0 0 1px var(--mot3r-linia)}
/* wyłączony PTT i wyłączony blok (plan za flagą, m3-karta--wylaczona) = powierzchnia kontrolki + napis przygaszony — nigdy przygaszony
   sygnał (krycie 0,4 na czerwieni = brąz spoza eter; ta sama reguła co .m3-pigulka--glowna:disabled) */
.m3-ptt[disabled],.m3-karta--wylaczona .m3-ptt{background:var(--mot3r-karta-2);color:var(--mot3r-tekst-dim);box-shadow:none}

/* ==========================================================================
   Mot3rTabPills — SETTINGS · WALLET · BILLING · KEYS: JEDEN rząd (R3; nigdy siatka 2 × 2 — R6 wycofał --siatka),
   przyciąganie do zakładki; przeciągnięcie panelu [data-m3-przesun] w bok zmienia zakładkę (swipe menu Króla, I10)
   ========================================================================== */
.m3-zakladki{display:flex;flex-wrap:nowrap;gap:var(--mot3r-krok-1);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:calc(var(--mot3r-krok-4) - var(--mot3r-krok-2)) calc(-1 * var(--mot3r-krok-2)) calc(-1 * var(--mot3r-krok-2));padding:var(--mot3r-krok-2);scroll-padding-inline:var(--mot3r-krok-2)}
.m3-zakladki::-webkit-scrollbar{display:none}
.m3-zakladka{flex:1 0 auto;scroll-snap-align:start;min-height:var(--mot3r-dotyk);min-width:var(--mot3r-dotyk);padding:0 var(--mot3r-krok-3);border:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-pigulka);
  background:var(--mot3r-karta);color:var(--mot3r-tekst-dim);font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);text-transform:uppercase;white-space:nowrap;
  transition:background-color var(--mot3r-ruch),color var(--mot3r-ruch)}
.m3-zakladka[aria-selected="true"]{background:var(--mot3r-tekst);color:var(--mot3r-tlo);border-color:transparent}
[data-m3-przesun]{touch-action:pan-y}
/* stały zestaw (SETTINGS · WALLET · BILLING · KEYS) = JEDEN rząd na każdej szerokości (R6, sędzia 1: siatka 2 × 2 łamała regułę
   komponentu i dawała inny wygląd na laptopie). W kolumnie węższej niż 350 px (telefon < 390, panel VAULT na laptopie) ciaśniejsze
   wnętrze i rozstrzelenie — cztery zakładki mieszczą się bez przewijania przy 288 px. Szerokość = kolumna: przodek m3-kontener */
.m3-kontener{container-type:inline-size}
@container (max-width:349px){.m3-zakladka{padding-inline:var(--mot3r-krok-2);letter-spacing:.06em}}

/* ==========================================================================
   Mot3rWalletMeter — portfel prepaid: c / dzień = suma suwaków (R3: suma i saldo na wyświetlaczu LED)
   ========================================================================== */
.m3-portfel-gora{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--mot3r-krok-3);margin-top:var(--mot3r-krok-4)}
.m3-portfel-wiersz{margin-top:var(--mot3r-krok-4)}
.m3-portfel-wiersz-glowa{display:flex;align-items:baseline;justify-content:space-between;gap:var(--mot3r-krok-3);font:var(--mot3r-t-akapit)}
/* jeden wyświetlacz LED na ekran (R6, sędzia 1): suma c / dzień ma dwie postaci — LED (telefon) i liczbę kropkową (kolumna VAULT
   zadokowana obok środka, który ma własny LED); M3.portfel pisze do obu [data-suma] */
.m3-portfel .m3-wysw[data-suma]{display:none}
[data-zadokowany] .m3-portfel .m3-led[data-suma]{display:none}
[data-zadokowany] .m3-portfel .m3-wysw[data-suma]{display:inline-flex}
.m3-portfel[data-pusty] .m3-wysw--xl{color:var(--mot3r-tekst-dim)}
.m3-portfel[data-pusty] .m3-led .wl{fill:var(--mot3r-tekst-dim)}
.m3-portfel[data-stan="ladowanie"] .m3-diody i,.m3-portfel[data-stan="blad"] .m3-diody i{background:var(--mot3r-wylaczony)}

/* ==========================================================================
   Mot3rThumbBar — nawigacja kciukiem (dok na dole ekranu)
   ========================================================================== */
.m3-kciuk{position:fixed;left:50%;bottom:calc(var(--mot3r-krok-3) + env(safe-area-inset-bottom,0px));z-index:20;transform:translateX(-50%);
  width:calc(100% - 2 * var(--mot3r-margines));max-width:calc(var(--mot3r-kolumna) - 2 * var(--mot3r-margines));height:var(--mot3r-kciuk);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  padding:0 var(--mot3r-krok-1);border:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-pigulka);background:var(--mot3r-karta)}
.m3-kciuk-cel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mot3r-krok-1);min-width:var(--mot3r-dotyk);
  border:0;padding:6px 0 0;border-radius:var(--mot3r-promien-pigulka);background:none;color:var(--mot3r-tekst-dim);font:var(--mot3r-t-podpis);
  white-space:nowrap;transition:color var(--mot3r-ruch)}
.m3-kciuk-cel[aria-current="page"]{color:var(--mot3r-tekst)}
.m3-kciuk-cel[aria-current="page"]::before{content:"";position:absolute;top:5px;width:var(--mot3r-dioda-xs);height:var(--mot3r-dioda-xs);border-radius:var(--mot3r-promien-kolo);background:currentColor}
.m3-kciuk--statyczny{position:relative;left:auto;bottom:auto;transform:none;margin:var(--mot3r-krok-3) auto 0;width:100%}
.m3-kciuk-zaslona{position:fixed;left:0;right:0;bottom:0;z-index:19;height:calc(var(--mot3r-kciuk) + var(--mot3r-zaslona-kciuka) + env(safe-area-inset-bottom,0px));pointer-events:none;
  background:linear-gradient(to top,var(--mot3r-tlo) 45%,transparent)}

/* ==========================================================================
   Mot3rSheet — arkusz: o jedno dotknięcie głębiej (z dołu) albo zasłona stanu (z góry); gest w dół / w górę zamyka
   ========================================================================== */
.m3-arkusz{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:flex-end;
  background:color-mix(in oklab,var(--mot3r-tlo) var(--mot3r-zaslona),transparent);opacity:0;visibility:hidden;
  transition:opacity var(--mot3r-ruch),visibility 0s linear var(--mot3r-ruch-czas)}
.m3-arkusz[data-otwarty]{opacity:1;visibility:visible;transition:opacity var(--mot3r-ruch)}
.m3-arkusz-panel{width:100%;max-width:var(--mot3r-kolumna);max-height:86vh;max-height:86dvh;margin:0 auto;overflow:auto;overscroll-behavior:contain;
  padding:var(--mot3r-krok-1) var(--mot3r-margines) calc(var(--mot3r-krok-5) + env(safe-area-inset-bottom,0px));
  border:1px solid var(--mot3r-linia);border-bottom:0;border-radius:var(--mot3r-promien-karta) var(--mot3r-promien-karta) 0 0;background:var(--mot3r-karta);
  transform:translateY(24px);transition:transform var(--mot3r-ruch)}
.m3-arkusz[data-otwarty] .m3-arkusz-panel{transform:none}
.m3-arkusz[data-ciagnie] .m3-arkusz-panel{transition:none}
.m3-arkusz-panel:focus{outline:none}
.m3-arkusz--gora{justify-content:flex-start}
.m3-arkusz--gora .m3-arkusz-panel{padding-top:calc(var(--mot3r-krok-1) + env(safe-area-inset-top,0px));padding-bottom:var(--mot3r-krok-1);
  border:1px solid var(--mot3r-linia);border-top:0;border-radius:0 0 var(--mot3r-promien-karta) var(--mot3r-promien-karta);transform:translateY(-24px)}
.m3-arkusz--gora .m3-arkusz-glowa{margin-top:var(--mot3r-krok-2)}
.m3-arkusz--pokaz{position:relative;inset:auto;z-index:auto;opacity:1;visibility:visible;background:none;transition:none}
.m3-arkusz--pokaz .m3-arkusz-panel{transform:none;max-height:none;padding-bottom:var(--mot3r-krok-5);border-bottom:1px solid var(--mot3r-linia);border-radius:var(--mot3r-promien-karta)}
/* uchwyt z pięciu kropek = obietnica gestu: przeciągnięcie zamyka (mot3r.js) */
.m3-uchwyt{display:flex;justify-content:center;gap:var(--mot3r-krok-1);padding:var(--mot3r-krok-3) 0;touch-action:none;cursor:grab}
.m3-uchwyt--dol{padding:var(--mot3r-krok-4) 0 var(--mot3r-krok-2)}
/* zasłona z góry (USB, VAULT): uchwyt zamknięcia przyklejony do dołu panelu — gest widać, zanim przewiniesz treść (R6, sędzia 3) */
.m3-arkusz--gora .m3-uchwyt--dol{position:sticky;bottom:calc(-1 * var(--mot3r-krok-1));z-index:1;margin:0 calc(-1 * var(--mot3r-margines));background:var(--mot3r-karta)}
.m3-uchwyt i{width:var(--mot3r-dioda-xs);height:var(--mot3r-dioda-xs);border-radius:var(--mot3r-promien-kolo);background:var(--mot3r-tekst-dim)}
.m3-arkusz-glowa{display:flex;align-items:center;justify-content:space-between;gap:var(--mot3r-krok-3);margin-bottom:var(--mot3r-krok-2)}
.m3-arkusz-tytul{margin:0;font:var(--mot3r-t-adres);letter-spacing:var(--mot3r-t-adres-rozstaw)}

/* ==========================================================================
   Mot3rEmptyLoadingError — pusto · ładowanie · błąd (zawsze kropka + słowo). R3: bez znaczników w komponencie —
   „propozycja” (słowa systemu) opisuje podpis ramki pokazu. --wiersz = w miejscu listy (awatary, wiersze, tory, kable).
   Start bez linii (#linie, ?linie=0) NIE używa tego znaku — tam stoi Mot3rLineOrb w stanie pusto (ta sama sylwetka co z linią).
   ========================================================================== */
.m3-stany{display:flex;flex-direction:column;align-items:center;gap:var(--mot3r-krok-3);padding:var(--mot3r-krok-5) var(--mot3r-krok-4);text-align:center}
.m3-stany-znak{width:var(--mot3r-kolo);height:var(--mot3r-kolo);color:var(--mot3r-tekst-dim)}
.m3-stany-znak .kr{fill:var(--mot3r-wylaczony)}
.m3-stany-znak .kr.on{fill:var(--mot3r-tekst)}
/* R6 (sędziowie 1 i 4): Pusto NIE rysuje pierścienia (czytał się jak spinner) — zostaje kropka zgaszona + słowo; pierścień tylko
   Ładowanie (kropka obiega) i Błąd. Opóźnienia kroków w CSS, nie w atrybucie style= */
.m3-stany[data-stan="pusto"] .m3-stany-znak{display:none}
.m3-stany[data-stan="ladowanie"] .m3-stany-znak .kr{animation:m3-krok 1.2s steps(1,end) infinite}
.m3-stany-znak .kr:nth-child(1){animation-delay:-1.2s}.m3-stany-znak .kr:nth-child(2){animation-delay:-1.05s}
.m3-stany-znak .kr:nth-child(3){animation-delay:-.9s}.m3-stany-znak .kr:nth-child(4){animation-delay:-.75s}
.m3-stany-znak .kr:nth-child(5){animation-delay:-.6s}.m3-stany-znak .kr:nth-child(6){animation-delay:-.45s}
.m3-stany-znak .kr:nth-child(7){animation-delay:-.3s}.m3-stany-znak .kr:nth-child(8){animation-delay:-.15s}
.m3-stany[data-stan="blad"] .m3-stany-znak .kr.on{fill:var(--mot3r-alarm)}
.m3-stany .m3-t-tytul{display:inline-flex;align-items:center;gap:var(--mot3r-krok-2)}
.m3-stany--wiersz{flex-direction:row;justify-content:flex-start;gap:var(--mot3r-krok-3);padding:var(--mot3r-krok-1) var(--mot3r-krok-4) var(--mot3r-krok-1) var(--mot3r-krok-2);text-align:left}
.m3-stany--wiersz .m3-stany-znak{width:var(--mot3r-awatar);height:var(--mot3r-awatar)}
.m3-stany--wiersz > .m3-pigulka{margin-left:auto}
@keyframes m3-krok{0%,8%{fill:var(--mot3r-tekst)}9%,100%{fill:var(--mot3r-wylaczony)}}

/* ==========================================================================
   Mot3rPanicSwipe — przeciągnij gałkę w prawo (≥ 85 %) — jedno dotknięcie nic nie robi
   ========================================================================== */
.m3-panika{--m3-postep:0;position:relative;display:block;width:100%;height:var(--mot3r-kciuk);margin-top:var(--mot3r-krok-5);border:1px solid var(--mot3r-linia);padding:0;overflow:hidden;
  border-radius:var(--mot3r-promien-pigulka);background:var(--mot3r-karta);color:var(--mot3r-tekst);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.m3-panika-galka{position:absolute;top:6px;left:6px;width:var(--mot3r-galka);height:var(--mot3r-galka);display:grid;place-items:center;border-radius:var(--mot3r-promien-kolo);
  background:var(--mot3r-tekst);color:var(--mot3r-tlo);touch-action:none;cursor:grab;
  transform:translateX(calc(var(--m3-postep) * var(--m3-droga,0px)));transition:transform var(--mot3r-ruch),background-color var(--mot3r-ruch),color var(--mot3r-ruch)}
.m3-panika-napis{position:absolute;inset:0;display:grid;place-items:center;padding-left:var(--mot3r-krok-6);pointer-events:none;
  font:var(--mot3r-t-etykieta);letter-spacing:var(--mot3r-t-etykieta-rozstaw);text-transform:uppercase;opacity:calc(1 - var(--m3-postep));transition:opacity var(--mot3r-ruch)}
.m3-panika[data-stan="ciagnie"] .m3-panika-galka,.m3-panika[data-stan="ciagnie"] .m3-panika-napis{transition:none;cursor:grabbing}
.m3-panika[data-stan="wykonany"] .m3-panika-galka{background:var(--mot3r-sygnal);color:var(--mot3r-tekst-na-sygnale)}
.m3-panika[data-stan="wykonany"] .m3-panika-napis{opacity:1;padding:0 var(--mot3r-krok-6) 0 0}

/* ---------- laptop = rozciągnięty telefon (na końcu pliku: wygrywa z regułami komponentów) ---------- */
@media (min-width:768px){
  .m3-ekran{max-width:var(--mot3r-kolumna-laptop)}
  /* 4 kolumny tylko dla rzędu z 3+ kartami; rząd dwóch kart zostaje w 2 kolumnach (sędziowie 1 linii 13.10: przy 1440 karty po 153 px, pół rzędu puste) */
  .m3-widgety:has(> :nth-child(3)){grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* od 1024 px: USB z lewej, VAULT z prawej — te same arkusze (Mot3rSheet --gora + .m3-arkusz--dok), zadokowane obok środka,
   bez zasłony i bez aria-modal (mot3r.js); panel = max(320 px, 25 % okna) (MOT3R-UIX-BEZ-SKORY/MAPA.md §2) */
@media (min-width:1024px){
  .m3-rama{--m3-panel:max(var(--mot3r-panel),25vw);--m3-srodek:min(var(--mot3r-kolumna-laptop),calc(100vw - 2 * var(--m3-panel) - 2 * var(--mot3r-krok-5)))}
  .m3-rama .m3-ekran{max-width:var(--m3-srodek)}
  /* środek między zadokowanym USB i VAULT = rozciągnięty telefon: widżety w 2 kolumnach */
  .m3-rama .m3-widgety{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m3-rama .m3-kciuk{max-width:calc(var(--m3-srodek) - 2 * var(--mot3r-margines))}
  .m3-rama .m3-kciuk-zaslona{left:var(--m3-panel);right:var(--m3-panel)}
  .m3-rama .m3-arkusz--dok{position:fixed;top:0;bottom:0;left:auto;right:auto;z-index:10;width:var(--m3-panel);opacity:1;visibility:visible;background:none;transition:none}
  .m3-rama .m3-arkusz--dok[data-dok="lewo"]{left:0}
  .m3-rama .m3-arkusz--dok[data-dok="prawo"]{right:0}
  .m3-rama .m3-arkusz--dok .m3-arkusz-panel{max-width:none;max-height:none;height:100%;transform:none;border-radius:0;border:0;background:var(--mot3r-tlo);
    padding:var(--mot3r-krok-2) var(--mot3r-margines) var(--mot3r-krok-5)}
  .m3-rama .m3-arkusz--dok[data-dok="lewo"] .m3-arkusz-panel{border-right:1px solid var(--mot3r-linia)}
  .m3-rama .m3-arkusz--dok[data-dok="prawo"] .m3-arkusz-panel{border-left:1px solid var(--mot3r-linia)}
  .m3-rama .m3-arkusz--dok .m3-arkusz-glowa [data-m3-zamknij],.m3-rama .m3-arkusz--dok .m3-uchwyt{display:none}
  /* USB i VAULT stoją obok — w pasku stanu zostaje tylko linia w ręku (bez powtórzeń) */
  .m3-rama .m3-system{justify-content:center}
  .m3-rama .m3-system-strona{display:none}
}

/* ---------- wąski telefon (< 360 px): nic nie wychodzi za ekran, cel nie spada poniżej 44 px ---------- */
@media (max-width:419px){
  .m3-gora > .m3-bank{order:2;flex:1 0 100%;justify-content:space-between}
}
@media (max-width:429px){
  /* „THE END ( IF WITHOUT MOT3R PLAN )” łamie się na 2 linie — boczne włosy kurczyły się do ułamków; kreska idzie nad napis (R6) */
  .m3-koniec{display:block;padding-top:var(--mot3r-krok-3);border-top:1px solid var(--mot3r-linia)}
  .m3-koniec::before,.m3-koniec::after{content:none}
}
@media (max-width:389px){
  .m3-pigulki--rowne .m3-pigulka{padding-inline:var(--mot3r-krok-2)}
}
@media (max-width:359px){
  .m3-segmenty:has(> :nth-child(4)){grid-auto-flow:row;grid-template-columns:1fr 1fr;border-radius:var(--mot3r-promien-karta)}
  .m3-widgety{grid-template-columns:minmax(0,1fr)}
  .m3-karta--pol{min-height:0}
  /* znacznik w pasku (gdyby stał) schodzi pod tytuł od lewej, nie osierocony po prawej (sędziowie DS r2, 320 px) */
  .m3-gora > .m3-znacznik{order:3;margin-left:0;margin-right:auto}
  /* karta z odczytem LED (MEMORY): odczyt schodzi pod tytuł, do prawej — „GB” nie wychodzi za kartę przy 320 */
  .m3-karta-glowa:has(> .m3-led-odczyt){flex-wrap:wrap;row-gap:var(--mot3r-krok-2)}
  .m3-karta-glowa > .m3-led-odczyt{margin-left:auto}
  /* pigułki strefy kciuka w jednej linii (CHOOSE SHELL / SET UP SHELL łamały się na 2 linie przez rozstrzelenie nadruku) */
  .m3-dol .m3-pigulka{letter-spacing:.06em;padding-inline:var(--mot3r-krok-2)}
}
/* niski telefon (≤ 700 px): ekran zadania mieści się w jednym widoku — mniejsza gwiazda, niższe pigułki, akcja główna zostaje 64 px;
   Mikser: PTT nad dokiem — tor ma 5 diod zamiast 8, odczyt LED (Volume) w ¾ podziałki (sędziowie DS r2, 320 × 640) */
@media (max-height:700px){
  .m3-ekran--zadanie{padding-bottom:calc(var(--mot3r-krok-4) + env(safe-area-inset-bottom,0px))}
  .m3-ekran--zadanie .m3-gora{min-height:var(--mot3r-awatar)}
  /* gwiazda ≥ 159 px przy 568 (rozstaw ramion 52 px > strefa 46 px — ramiona nie nachodzą; sędziowie 1 linii 13.10, było 23dvh = 131 px) */
  .m3-ekran--zadanie .m3-gwiazda{max-width:min(var(--mot3r-gwiazda),28dvh)}
  /* Linie w jednym widoku: bohater mniejszy, pasek tytułu 48, ciaśniej pod orbem, koła 56 — karta STATUS (koła) nad dokiem
     przy 360 × 640 i 320 × 568 (sędziowie 1 linii 13.10: koła stały pod dokiem, nad kciukiem był tylko orb) */
  .m3-bohater > .m3-orb:not(.m3-orb--maly){width:min(var(--mot3r-orb),26dvh)}
  .m3-gora{min-height:var(--mot3r-awatar)}
  .m3-bohater-adres{margin-top:var(--mot3r-krok-3)}
  .m3-odczyty{margin-top:var(--mot3r-krok-2)}
  .m3-kola{margin-top:var(--mot3r-krok-3);--mot3r-kolo:var(--mot3r-kolo-male)}
  .m3-ekran--zadanie .m3-dol{padding-top:var(--mot3r-krok-4);margin-bottom:calc(-1 * var(--mot3r-krok-4));padding-bottom:calc(var(--mot3r-krok-4) + env(safe-area-inset-bottom,0px))}
  .m3-ekran--zadanie .m3-pigulka:not(.m3-pigulka--glowna){min-height:var(--mot3r-dotyk)}
  .m3-tor-diody i:nth-child(n+6){display:none}
  .m3-tor{padding:var(--mot3r-krok-2) 0;gap:var(--mot3r-krok-2)}
  .m3-led{--m3-led-podzialka:calc(var(--mot3r-led-odczyt) * .75)}
  .m3-wysw--xl{font:var(--mot3r-t-wyswietlacz-l)}
  .m3-karta{padding:var(--mot3r-krok-4)}
  .m3-portfel-gora{margin-top:var(--mot3r-krok-3)}
  .m3-przypis--srodek{margin-top:var(--mot3r-krok-1)}
  .m3-przypis--srodek > .m3-znacznik{min-height:0}
  .m3-ptt-rzad{margin-top:var(--mot3r-krok-4)}
  /* R7: pasek toru Miksera na niskim telefonie — PTT toru = koło 64 (akcja główna ADD 2 LINE przyklejona nad dokiem) */
  .m3-ptt--tor{width:var(--mot3r-kolo)}
  .m3-tor-pasek{margin-top:var(--mot3r-krok-3)}
}

@media (max-height:600px){
  /* R7: 18dvh (było 22) — STATUS nad orbem i odczyt MOM · kabel w dwóch rzędach mieszczą się w 320 × 568 bez przewijania */
  .m3-bohater > .m3-orb:not(.m3-orb--maly){width:min(var(--mot3r-orb),18dvh)}
  /* R6: Linie przy 320 × 568 w jednym widoku (było 570 / 568 po odstępie paska tytułu) */
  .m3-bohater-adres{margin-top:var(--mot3r-krok-2)}
}

/* ---------- jeden ruch: gaśnie przy prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .m3 *,.m3 *::before,.m3 *::after{transition:none!important;animation:none!important}
  .m3-arkusz,.m3-arkusz-panel{transition:none!important}
}