/* ============================================================================
   STYLE PANELU RAPA. Wymaga tokens.css wczytanego WCZESNIEJ.
   Klasy z rodziny `card`, `field-row`, `data-table`, `toolbar`, `pager`,
   `row-actions`, `link-button`, `translation-grid`, `lang-tag`, `side-panel`,
   `declaration-validators`, `checkbox-grid`, `detail-list` sa NAZWAMI RAFALA
   z B2B Portalu — ten blok da sie wkleic do app.css bez ruszania jego HTML-a.
   Reszta klas jest nasza. Rodzina `lg-` obsluguje EKRAN LOGOWANIA i wymaga
   `wspolne/logowanie.js` — bez niego rysunek automatu w ogole sie nie pojawi.
   ========================================================================== */
/* ============================================================================
   FONT — pliki lokalne, zero internetu
   ========================================================================== */
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:300;font-display:swap;
  src:url("assets/fonts/TitilliumWeb-300-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Titillium Web";font-style:normal;font-weight:300;font-display:swap;
  src:url("assets/fonts/TitilliumWeb-300-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/TitilliumWeb-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/TitilliumWeb-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+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/fonts/TitilliumWeb-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;
  src:url("assets/fonts/TitilliumWeb-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* TITILLIUM TYLKO DO 600. Wagi 700 i 900 celowo NIE SĄ wczytane — decyzja
   z 12.08.2026: „Titillium bold i black nie dajemy wcale". Dzięki temu każde
   żądanie 700/900 dobiera realny krój 600 zamiast go pogrubiać sztucznie,
   i nie da się przypadkiem wrócić do ciężkiej wersji jedną liczbą w CSS. */

/* Open Sans w wersji ZMIENNEJ (sprawdzone: oś wagi 300–800 działa naprawdę,
   tekst przy 700 jest szerszy niż przy 400 mimo `font-synthesis:none`).
   Titillium zostaje do nagłówków i liczb, Open Sans niesie tekst czytany. */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("assets/fonts/OpenSans-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("assets/fonts/OpenSans-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+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============================================================================
   TOKENY PANELU
   Marka (--brand) przychodzi z urządzenia i jest ustawiana w czasie działania.
   Szkielet jest granatowy zawsze. Serwis i RAPA dostają granat także jako markę.
   ========================================================================== */


/* MOTYW JASNY — wartości zgodne z .motyw-jasny z pakietu kiosku. */


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);font-size:var(--fs-body);font-weight:var(--fw-reg);
  background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit;color:inherit}
/* Titillium tylko tam, gdzie ma charakter: nagłówki, liczby, wersaliki, szyldy.
   Cała reszta — Open Sans. */
h1,h2,h3,.pas h1,.kpi .v,.stan-widget .v,.big,.dev,.rail .marka .n,.top .tyt .n,
.lg-karta h1,.lg-oko,.lg-krok,.lg-kaseton,.lg-cyfry i,.lg-podpis,.lg-ekran-k,
.lg-wejdz,.chip,.pl,.tele .v,.sensor .v{
  font-family:var(--font-tyt);
  /* Zero sztucznego pogrubienia — 700 i 900 mają zejść do realnej 600,
     a nie zostać rozdmuchane przez przeglądarkę. */
  font-synthesis-weight:none;
}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================================
   PASEK PODGLĄDU — nie jest częścią produktu
   ========================================================================== */
.dev{
  position:sticky;top:0;z-index:60;background:#0B0B0C;border-bottom:1px solid #24252A;
  color:#8A8F98;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  font-weight:var(--fw-bold);
}
.dev-uchwyt{
  display:flex;align-items:center;gap:12px;width:100%;height:34px;padding:0 14px;
  background:none;border:0;cursor:pointer;color:#8A8F98;text-align:left;
  font:inherit;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  font-weight:var(--fw-bold);
}
.dev-uchwyt:hover{color:#E6E8EC}
.dev-uchwyt .strzalka{width:14px;height:14px;flex:none;transition:transform 220ms ease}
.dev[data-otwarty="true"] .dev-uchwyt .strzalka{transform:rotate(180deg)}
.dev-uchwyt b{color:#F2F3F5}
.dev-stan{color:var(--dev-akcent);letter-spacing:.08em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-info{margin-left:auto;text-transform:none;letter-spacing:0;color:#5A5F68;
  font-weight:var(--fw-reg);white-space:nowrap}
.dev-tresc{display:none}
.dev[data-otwarty="true"] .dev-tresc{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:2px 14px 11px;
}
@media (max-width:820px){ .dev-info{display:none} }
.dev b{color:#F2F3F5;font-weight:var(--fw-bold);margin-right:6px}
.dev .grp{display:flex;gap:4px;align-items:center}
.dev button{
  background:#17181C;border:1px solid #2C2E35;color:#9EA4AE;padding:5px 11px;
  border-radius:var(--r-pill);cursor:pointer;font-size:var(--fs-micro);
  letter-spacing:.06em;font-weight:var(--fw-bold);
  transition:background var(--t-press),color var(--t-press);
}
.dev button:hover{background:#22242A;color:#E6E8EC}
/* Pasek podglądu też idzie za kolorem wiodącym — inaczej po przełączeniu
   na zieleń połowa ekranu jest zielona, a przyciski zostają magentowe. */
.dev button[aria-pressed="true"]{background:var(--dev-akcent);border-color:var(--dev-akcent);color:#fff}
/* Stal — cienkie światło na górnej krawędzi powierzchni. Bez tego karta
   przy ostrych rogach czyta się jak płaska plama, a nie jak kawałek blachy. */
.karta,.kpi,.aut,.dzial-kafel,.front-obszar,.tab-obszar,.stan-widget{
  box-shadow:inset 0 1px 0 var(--stal);
}
.motyw-jasny .karta,.motyw-jasny .kpi,.motyw-jasny .aut,.motyw-jasny .dzial-kafel,
.motyw-jasny .front-obszar,.motyw-jasny .tab-obszar,.motyw-jasny .stan-widget{box-shadow:none}

.dev .prob{display:inline-flex;align-items:center;gap:6px;padding:5px 8px}
.dev .prob-i{width:13px;height:13px;display:block;border:1px solid rgba(255,255,255,.28)}
.dev .prob-auto{background:conic-gradient(#E5097F,#C8102E,#E87722,#F0B429,#00A886,#E5097F)}
.dev .prob[aria-pressed="true"]{background:#2B2D31;border-color:#4A4D53;color:#fff}
.dev .prob[aria-pressed="true"] .prob-i{border-color:#fff}

/* ============================================================================
   RAMA PODGLĄDU
   ========================================================================== */
.scena{padding:0;background:#0B0B0C;min-height:calc(100vh - 42px)}
.scena[data-w="tablet"],.scena[data-w="telefon"]{padding:28px 16px;display:flex;justify-content:center}
.app{
  background:var(--page);width:100%;min-height:calc(100vh - 42px);
  display:grid;grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:var(--topbar-h) 1fr;grid-template-areas:"rail top" "rail main";
}
.scena[data-w="tablet"] .app{width:834px;min-height:1100px;border-radius:2px;overflow:hidden;
  border:1px solid #24252A;box-shadow:0 24px 60px rgba(0,0,0,.5);position:relative}
.scena[data-w="telefon"] .app{width:412px;min-height:900px;border-radius:2px;overflow:hidden;
  border:10px solid #17181C;box-shadow:0 24px 60px rgba(0,0,0,.5);position:relative}

.scena[data-w="telefon"] .app,.scena[data-w="tablet"] .app{
  grid-template-columns:1fr;grid-template-areas:"top" "main"}
.scena[data-w="telefon"] .rail,.scena[data-w="tablet"] .rail{display:none}
.scena[data-w="telefon"] .tabbar,.scena[data-w="tablet"] .tabbar{display:flex}
.scena[data-w="telefon"] .main,.scena[data-w="tablet"] .main{padding-bottom:calc(var(--tabbar-h) + 12px)}
.scena[data-w="telefon"] .kpi-row{grid-template-columns:1fr 1fr}
.scena[data-w="telefon"] .flota-grid{grid-template-columns:1fr}
.scena[data-w="telefon"] .karty2{grid-template-columns:1fr}
.scena[data-w="telefon"] .sheet{width:100%;border-left:0}
/* Na telefonie wiersz staje się kartą: pierwsza komórka to tytuł, reszta to pary
   etykieta–wartość. Siatka dwukolumnowa sklejała podpisy w jeden ciąg. */
.scena[data-w="telefon"] .tabela--zwijana thead{display:none}
.scena[data-w="telefon"] .tabela--zwijana tr{display:block;padding:12px 14px;
  border-bottom:1px solid var(--line)}
.scena[data-w="telefon"] .tabela--zwijana td{border:0;height:auto;padding:3px 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;text-align:right}
.scena[data-w="telefon"] .tabela--zwijana td::before{content:attr(data-et);color:var(--ink-faint);
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;flex:none;text-align:left}
.scena[data-w="telefon"] .tabela--zwijana td:first-child{display:block;text-align:left;
  font-size:var(--fs-body);margin-bottom:5px}
.scena[data-w="telefon"] .tabela--zwijana td:first-child::before{display:none}
.scena[data-w="telefon"] .tabela--zwijana td .drobne{text-align:right}
.scena[data-w="telefon"] .tabela--zwijana td:first-child .drobne{text-align:left}

@media (max-width:900px){
  .scena[data-w="monitor"] .app{grid-template-columns:1fr;grid-template-areas:"top" "main";position:relative}
  .scena[data-w="monitor"] .rail{display:none}
  .scena[data-w="monitor"] .tabbar{display:flex}
  .scena[data-w="monitor"] .main{padding-bottom:calc(var(--tabbar-h) + 12px)}
  .scena[data-w="monitor"] .kpi-row{grid-template-columns:1fr 1fr}
}

/* ============================================================================
   PASEK BOCZNY
   ========================================================================== */
/* Pasek boczny NIE ROŚNIE ze stroną. Ekran „Automat" ma teraz siedem sekcji
   i strona bywa na trzy ekrany — pasek z menu jechał razem z nią i przy dolnej
   krawędzi menu było już dawno za plecami. Teraz stoi i przewija się sam,
   jeśli pozycji jest więcej niż mieści okno. */
.rail{grid-area:rail;background:var(--bar);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:10px 8px;gap:1px;
  position:sticky;top:var(--dev-h,37px);align-self:start;
  height:calc(100vh - var(--dev-h,37px));overflow-y:auto;overscroll-behavior:contain}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:var(--line-firm);border-radius:4px}
.rail::-webkit-scrollbar-track{background:transparent}
/* Pasek boczny ściśnięty — przy 18 pozycjach i grupach odstępy z pierwszej
   wersji robiły z menu kolumnę powietrza. */
.rail .marka{display:flex;align-items:center;gap:9px;padding:4px 8px 11px}
.rail .marka .sygnet{width:25px;height:25px;flex:none;color:var(--brand-ink)}
.rail .marka .txt{line-height:1.15;min-width:0}
.rail .marka .n{display:block;font-size:16px;font-weight:var(--fw-black);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .marka .s{display:block;font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:.12em;
  text-transform:uppercase;font-weight:var(--fw-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail .dzial{padding:15px 10px 6px;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-off);font-weight:var(--fw-bold);line-height:1.3}
/* IKONA MA BYĆ WIĘKSZA OD TEKSTU, nie równa mu. Tekst pozycji ma 13 px, więc
   ikona 19 px — przy 16 px obie rzeczy miały tę samą wagę optyczną i menu
   czytało się jak jednolita szara kolumna bez punktów zaczepienia. */
.nav-poz{display:flex;align-items:center;gap:11px;width:100%;min-height:36px;
  padding:0 11px;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink-muted);
  cursor:pointer;text-align:left;font-size:var(--fs-meta);font-weight:var(--fw-med);
  line-height:1.35;
  transition:background var(--t-press),color var(--t-press)}
.nav-poz svg{width:19px;height:19px;flex:none;opacity:.85}
.nav-poz:hover{background:var(--surface-3);color:var(--ink)}
.nav-poz[aria-current="page"]{background:var(--brand-bg);color:var(--brand-ink)}
.nav-poz[aria-current="page"] svg{opacity:1}
.nav-poz .licz{margin-left:auto;font-size:var(--fs-micro);font-weight:var(--fw-black);
  background:var(--crit);color:#fff;min-width:19px;height:19px;border-radius:var(--r-pill);
  display:grid;place-items:center;padding:0 5px}
/* „BY RAPA" — znak producenta. Był najbledszym elementem paska (--ink-faint
   z ikoną w --ink-soft) i ginął przy dolnej krawędzi. Damian: „logo RAPY
   na pewno wyraźniejsze". Idzie o dwa stopnie w górę: napis na --ink-soft,
   sygnet na --ink-muted i o dwa piksele większy. Nadal jest stopką, nie
   konkuruje z marką KLIENTA u góry — reguła „marka klienta u góry, producent
   u dołu, nigdy w jednym pasie" zostaje nienaruszona. */
.rail .stopka{margin-top:auto;padding:16px 12px 8px;display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--line);font-size:var(--fs-micro);color:var(--ink-soft);
  letter-spacing:.14em;text-transform:uppercase;font-weight:var(--fw-bold)}
.rail .stopka svg{width:21px;height:21px;flex:none;color:var(--ink-muted)}

/* ============================================================================
   BELKA GÓRNA
   ========================================================================== */
.top{grid-area:top;background:var(--bar);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 16px}
.top .tyt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.top .tyt .n{font-size:15px;font-weight:var(--fw-black);letter-spacing:.03em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .tyt .s{font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:.06em}
.top .marka-mob{display:none;width:26px;height:26px;color:var(--brand-ink);flex:none}
.scena[data-w="telefon"] .top .marka-mob,.scena[data-w="tablet"] .top .marka-mob{display:block}
@media (max-width:900px){.scena[data-w="monitor"] .top .marka-mob{display:block}}
.szukaj{margin-left:auto;display:flex;align-items:center;gap:8px;height:var(--ctl-h);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:0 11px;min-width:210px;color:var(--ink-faint)}
.szukaj svg{width:15px;height:15px;flex:none}
.szukaj input{background:none;border:0;outline:none;width:100%;font-size:var(--fs-meta);color:var(--ink)}
.szukaj input::placeholder{color:var(--ink-off)}
.scena[data-w="telefon"] .szukaj{display:none}

/* Pas ikon z podpisami — anatomia górnego paska kiosku (HOME · RODO · CON · TEMP):
   ikona u góry, mikro-podpis wersalikami pod spodem. */
.top-akcje{display:flex;align-items:stretch;gap:4px;margin-left:auto}
.top-akcja{position:relative;background:none;border:0;cursor:pointer;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:60px;padding:5px 8px;border-radius:var(--r-ctl);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:var(--fw-bold);
  transition:background var(--t-press),color var(--t-press)}
.top-akcja:hover{background:var(--surface);color:var(--ink)}
.top-akcja svg{width:21px;height:21px}
.top-akcja b{font-size:var(--fs-meta);font-weight:var(--fw-black);letter-spacing:.02em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.top-akcja--ok{color:var(--good-ink)}
.top-akcja--ok svg{color:var(--good-ink)}
.top-akcja .kropka{position:absolute;top:5px;right:12px;width:8px;height:8px;border-radius:50%;
  background:var(--crit);border:2px solid var(--bar)}
.top-akcja--konto{color:var(--brand-ink)}
.awatar{width:30px;height:30px;flex:none;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:var(--fs-meta);font-weight:var(--fw-black);letter-spacing:.04em}
.scena[data-w="telefon"] .top-akcja--rez,
.scena[data-w="telefon"] .top-akcja--temp,
.scena[data-w="telefon"] .top-akcja--wyloguj{display:none}
.scena[data-w="telefon"] .top-akcja{min-width:44px}

/* Widget stanu w pasku bocznym — z makiety VendingOS. */
.stan-widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:12px 13px;margin:0 2px 6px}
.stan-widget .g{display:flex;align-items:baseline;justify-content:space-between;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:var(--fw-bold)}
.stan-widget .g b{color:var(--good-ink);font-size:var(--fs-meta)}
.stan-widget .v{font-size:26px;font-weight:var(--fw-black);margin:3px 0 7px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stan-widget .pasek{height:4px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.stan-widget .pasek i{display:block;height:100%;background:var(--good);border-radius:var(--r-pill)}
.stan-widget .s{margin-top:8px;font-size:var(--fs-micro);color:var(--ink-faint);line-height:1.35}

/* ============================================================================
   TREŚĆ
   ========================================================================== */
.main{grid-area:main;overflow-y:auto;padding:0 0 32px}
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--gap-lg)}
.scena[data-w="telefon"] .wrap{padding:0 12px}

.okruszki{display:flex;align-items:center;gap:7px;padding:14px 0 4px;font-size:var(--fs-meta);
  color:var(--ink-faint);flex-wrap:wrap}
.okruszki button{background:none;border:0;color:var(--brand-ink);cursor:pointer;
  font-size:var(--fs-meta);font-weight:var(--fw-med);padding:2px 0}
.okruszki button:hover{text-decoration:underline}
.okruszki .sep{color:var(--ink-off)}

.pas{display:flex;align-items:center;gap:12px;background:var(--brand);color:#fff;
  border-radius:0 var(--r-pill) var(--r-pill) 0;margin:10px 0 20px;
  margin-left:calc(-1 * var(--gap-lg));padding:13px 26px 13px var(--gap-lg)}
.scena[data-w="telefon"] .pas{margin-left:-12px;padding-left:12px;padding-right:18px}
.pas h1{font-size:var(--fs-h2);font-weight:var(--fw-bold);letter-spacing:.01em}
.pas .p{margin-left:auto;font-size:var(--fs-meta);opacity:.92;font-weight:var(--fw-med)}
.scena[data-w="telefon"] .pas .p{display:none}

/* NAGŁÓWEK SEKCJI — kolor marki i ikona w kwadraciku. Ekran „Automat" niesie
   siedem sekcji jedna pod drugą; szary napis wersalikami gubił się w treści,
   a przy przewijaniu nie było widać, gdzie kończy się jedna rzecz, a zaczyna
   druga. Ikona daje zaczepienie dla oka przy szybkim scrollu. */
h2.sek{
  display:flex;align-items:center;gap:10px;
  font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-ink);font-weight:var(--fw-bold);margin:30px 0 12px;
}
h2.sek .ik{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  background:var(--brand-bg);border:1px solid var(--brand-strong);border-radius:var(--r-ctl);
}
h2.sek .ik svg{width:18px;height:18px;color:var(--brand-ink)}
h2.sek .muted{letter-spacing:.04em;text-transform:none;font-weight:var(--fw-reg)}
/* Kreska ciągnąca się do prawej krawędzi — bez niej nagłówek wisi w powietrzu. */
h2.sek::after{content:"";flex:1;height:1px;background:var(--line);min-width:20px}

/* ---- kafle liczb ---- */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
/* Rozmyta plama w rogu — efekt z Twojej makiety (blur-3xl + overflow-hidden).
   Kafel dostaje głębi bez dokładania ramek i cieni. */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 18px;display:flex;flex-direction:column;gap:3px;text-align:left;min-height:120px;
  position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  right:-72px;top:-84px;background:var(--brand);opacity:.16;filter:blur(48px);pointer-events:none}
.kpi > *{position:relative;z-index:1}
button.kpi{cursor:pointer;transition:border-color var(--t-press),background var(--t-press)}
button.kpi:hover{border-color:var(--line-firm);background:var(--surface-2)}
.kpi .et{font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:var(--fw-bold)}
.kpi .v{font-size:var(--fs-kpi);font-weight:var(--fw-black);line-height:1.05;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;margin-top:4px}
.kpi .v small{font-size:16px;font-weight:var(--fw-med);color:var(--ink-soft);margin-left:5px}
.kpi .p{font-size:var(--fs-meta);color:var(--ink-soft);margin-top:2px}
.kpi .p.dobrze{color:var(--good-ink);font-weight:var(--fw-med)}
.kpi .p.uwaga{color:var(--warn-ink);font-weight:var(--fw-med)}
.kpi.akcent .v{color:var(--brand-ink)}
.kpi .pasek{height:5px;border-radius:var(--r-pill);background:var(--surface-2);margin-top:9px;overflow:hidden}
.kpi .pasek i{display:block;height:100%;background:var(--brand);border-radius:var(--r-pill)}

/* ---- plakietki ---- */
.pl{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:var(--fw-black);letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap}
.pl--ok{background:var(--good-bg);color:var(--good-ink)}
.pl--uwaga{background:var(--warn-bg);color:var(--warn-ink)}
.pl--zle{background:var(--crit-bg);color:var(--crit-ink)}
.pl--marka{background:var(--brand-bg);color:var(--brand-ink)}
.pl--cicha{background:var(--surface-2);color:var(--ink-soft)}

/* ---- karty ---- */
.karta{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px}
.karta h3{font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:var(--fw-bold);margin-bottom:14px}
.karta p{color:var(--ink-muted);line-height:1.55;font-size:var(--fs-meta)}
/* `align-items:start` — bez tego karta z wykresem rozciągała się do wysokości
   sąsiadki (heatmapy) i zostawiała pod słupkami pół karty pustej czerni. */
.karty2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}

/* ---- kafle działów — element wprost z panelu obsługi kiosku ---- */
.dzialy{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:var(--gap)}
.dzial-kafel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:18px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:5px;
  transition:border-color var(--t-press),background var(--t-press)}
.dzial-kafel:hover{border-color:var(--brand);background:var(--surface-2)}
.dzial-kafel svg{width:26px;height:26px;color:var(--brand-ink);margin-bottom:8px}
.dzial-kafel .t{font-size:17px;font-weight:var(--fw-bold);letter-spacing:.01em}
.dzial-kafel .s{font-size:var(--fs-meta);color:var(--ink-soft)}

/* ---- przyciski ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:var(--ctl-h-lg);
  padding:0 20px;border-radius:var(--r-ctl);border:1px solid var(--line-firm);
  background:var(--surface);color:var(--ink);font-size:var(--fs-action);font-weight:var(--fw-bold);
  cursor:pointer;transition:background var(--t-press),border-color var(--t-press)}
.btn:hover{background:var(--surface-2);border-color:var(--brand)}
.btn:active{background:var(--surface-press)}
.btn svg{width:17px;height:17px}
/* Akcja główna wersalikami — tak jak KUP TERAZ i OTWÓRZ SKRYTKĘ na kiosku.
   To jedyne miejsce w panelu, gdzie przycisk krzyczy. */
.btn--glowny{background:var(--brand);border-color:var(--brand);color:#fff;
  text-transform:uppercase;letter-spacing:.06em}
.btn--glowny:hover{background:var(--brand-strong);border-color:var(--brand-strong)}
.btn--zle{color:var(--crit-ink);border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.btn--zle:hover{background:var(--crit-bg);border-color:var(--crit)}
.btn--maly{height:var(--ctl-h);padding:0 14px;font-size:var(--fs-meta)}
.akcje{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}

/* ---- pas narzędzi ---- */
.narzedzia{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:12px}

/* Filtry stanu skrytek stoją PO LEWEJ rysunku, jeden pod drugim (Damian, 13.08).
   W rzędzie nad maszyną czytały się jak zakładki i uciekały przy przewijaniu;
   w kolumnie obok widać naraz wybrany filtr i to, co on przygasza na rysunku.
   Kolumna jest lepka, więc przy 48 skrytkach filtr zostaje pod ręką. */
.filtr-uklad{display:grid;grid-template-columns:196px minmax(0,1fr);gap:var(--gap);
  align-items:start;margin-bottom:var(--gap)}
.narzedzia--pion{flex-direction:column;align-items:stretch;gap:6px;margin:0;
  position:sticky;top:calc(var(--dev-h,37px) + var(--topbar-h) + 10px)}
.narzedzia--pion .chip{width:100%;display:flex;align-items:center;justify-content:space-between}
/* Poniżej ~1100 px kolumna filtrów zjadałaby szerokość rysunku — wracają w rząd. */
@media (max-width:1100px){
  .filtr-uklad{grid-template-columns:1fr}
  .narzedzia--pion{flex-direction:row;flex-wrap:wrap;position:static}
  .narzedzia--pion .chip{width:auto}
}
.scena[data-w="telefon"] .filtr-uklad,.scena[data-w="tablet"] .filtr-uklad{grid-template-columns:1fr}
.scena[data-w="telefon"] .narzedzia--pion,.scena[data-w="tablet"] .narzedzia--pion{
  flex-direction:row;flex-wrap:wrap;position:static}
.scena[data-w="telefon"] .narzedzia--pion .chip,.scena[data-w="tablet"] .narzedzia--pion .chip{width:auto}
.chip{height:var(--ctl-h);padding:0 14px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-muted);
  font-size:var(--fs-meta);font-weight:var(--fw-med);display:inline-flex;align-items:center;gap:7px;
  transition:background var(--t-press),color var(--t-press),border-color var(--t-press)}
.chip:hover{background:var(--surface-2);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--brand-bg);border-color:var(--brand);color:var(--brand-ink)}
.chip .n{font-variant-numeric:tabular-nums;color:var(--ink-faint);font-weight:var(--fw-bold)}

/* ---- tabele ---- */
.tab-obszar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:var(--fs-meta)}
thead th{position:sticky;top:0;background:var(--surface-3);z-index:1;text-align:left;padding:11px 16px;
  font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:var(--fw-bold);border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:0 16px;height:var(--row-h);border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t-press)}
tbody tr[data-klik]{cursor:pointer}
tbody tr[data-klik]:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.moc{font-weight:var(--fw-bold);color:var(--ink)}
/* Podpis pod wartością idzie CAŁY do następnej linii i nie łamie się w środku.
   W wąskim kaflu pulpitu „Bukiet okolicznościowy XL" rozjeżdżał się na trzy
   wersy w połowie słowa — a to jest podpis, nie akapit. */
td .drobne{color:var(--ink-faint);font-size:var(--fs-micro);display:block;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* KOD ODBIORU JEST UTAJNIONY. Pulpit bywa otwarty na ladzie przy kliencie, więc
   kod do cudzej przesyłki nie ma prawa wisieć na ekranie — odsłania się
   naciśnięciem i chowa drugim. */
.kod-tajny{
  display:flex;align-items:center;gap:7px;margin-top:3px;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;font-family:ui-monospace,Consolas,monospace;
  font-size:var(--fs-micro);letter-spacing:.16em;color:var(--ink-faint);
  transition:color var(--t-press);
}
.kod-tajny:hover{color:var(--brand-ink)}
.kod-tajny svg{width:14px;height:14px;flex:none;opacity:.8}
.kod-tajny[data-jawny]{color:var(--ink);letter-spacing:.1em}
.kod-tajny[data-jawny] svg{color:var(--brand-ink);opacity:1}
/* W kolumnie liczbowej kod wyrównuje się do prawej razem z kwotą nad nim. */
td.num .kod-tajny{margin-left:auto}
/* Oko przekreślone, dopóki kod jest zakryty. */
.kod-tajny[data-jawny] .kreska-oko{display:none}

/* ============================================================================
   RYSUNEK FRONTU AUTOMATU — sterownik, nie ilustracja
   ========================================================================== */
.front-obszar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;overflow-x:auto}
.front-marka{text-align:center;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;
  font-weight:var(--fw-black);color:var(--brand-ink);background:var(--surface-3);
  border:1px solid var(--line);border-radius:var(--r-ctl);padding:9px;margin-bottom:12px}
/* Rzut techniczny — anatomia przeniesiona z konfiguratora personalizacji:
   kaseton, korpus, szklana tafla, klamka w kolorze marki, drzwiczki skrytek
   za taflą, kratka wentylacyjna, stopki. */
/* Scena trzyma proporcje rzutu (aspect-ratio z viewBox), więc rysunek nie pływa
   w pustej karcie z letterboxem po bokach. */
/* Rysunek bierze całą szerokość karty, chyba że byłby wtedy wyższy niż 52% okna —
   wtedy to wysokość rozstrzyga i szerokość liczy się z proporcji. Dzięki temu
   maszyna dopasowuje się do MIEJSCA, a nie do liczby wpisanej w kod.
   52 vh, a nie 76 — przy 76 urządzenie górowało nad resztą ekranu i było wyższe
   niż wszystko wokół (Damian: „za wysokie względem reszty, o jakieś 30 procent
   mniej"). Odstępy zostały bez zmian, zmieniła się wyłącznie skala rysunku. */
.mf-scena{margin:0 auto;width:min(100%, calc(52vh * var(--mf-ar,2)))}
.mf{width:100%;height:100%;display:block}
.mf-korpus{fill:var(--surface-2);stroke:var(--line-firm);stroke-width:1.4}
.mf-kaseton{fill:var(--brand-ink);font-family:var(--font);font-weight:900;
  font-size:15px;letter-spacing:.16em}
.mf-tafla{fill:var(--surface-3);stroke:var(--line);stroke-width:1}
.mf-tablet{fill:var(--surface);stroke:var(--line-firm);stroke-width:1}
.mf-szczelina{fill:var(--line-firm)}
.mf-klamka{fill:var(--brand)}
.mf-kratka{stroke:var(--line-firm);stroke-width:.8;opacity:.55}
.mf-stopka{fill:var(--line-firm)}
.mf-podpis{fill:var(--ink-off);font-family:var(--font);font-weight:700;font-size:7px;letter-spacing:.18em}
.mf-hatch-bg{fill:var(--surface-2)}
.mf-hatch-l{stroke:var(--line-firm);stroke-width:1.6}

.mf .sk{cursor:pointer;transition:opacity 240ms ease}
.mf .sk[data-bez]{cursor:default;pointer-events:none}
/* FILTR PRZYGASZA, NIE UKRYWA. Skrytka z awarią ma się rzucić w oczy, ale
   rysunek musi zostać całą maszyną — wycięcie reszty odbiera mu sens, bo
   przestaje być widać, GDZIE ta awaria siedzi. */
.mf .sk[data-przygaszony]{opacity:.13}
.mf .sk[data-przygaszony] rect{pointer-events:none}
tr[data-przygaszony]{opacity:.34;transition:opacity 240ms ease}
.mf .sk rect{fill:transparent;stroke:var(--line-firm);stroke-width:.9;transition:fill var(--t-press)}
.mf .sk text{fill:var(--ink-empty);font-family:var(--font);font-weight:700;pointer-events:none;
  font-variant-numeric:tabular-nums}
.mf .sk[data-stan="zajeta"] rect{fill:var(--brand);stroke:var(--brand)}
.mf .sk[data-stan="zajeta"] text{fill:#fff}
/* Rezerwacja to nadal towar, więc zostaje kolor marki — ale musi się dać odróżnić
   z drugiego końca ekranu, stąd jasny obrys I kropka w rogu. Sam obrys czytał się
   jak „zaznaczona”, a nie jak stan danych. */
.mf .sk[data-stan="rezerwacja"] rect{fill:var(--brand);stroke:var(--brand-ink);stroke-width:1.8}
.mf .sk[data-stan="rezerwacja"] text{fill:#fff}
.mf .sk .kropka{fill:#fff}
.mf .sk[data-stan="awaria"] rect{fill:var(--crit-bg);stroke:var(--crit);stroke-width:1.8}
.mf .sk[data-stan="awaria"] text{fill:var(--crit-ink)}
.mf .sk .ostrzezenie{fill:var(--crit-ink)}
.mf .sk[data-stan="blokada"] rect{fill:url(#szrafura);stroke:var(--line-firm)}
.mf .sk[data-stan="blokada"] text{fill:var(--ink-off)}
.mf .sk:hover rect{filter:brightness(1.25)}
.mf .sk[data-wybrana] rect{stroke:var(--focus);stroke-width:2.6}

.legenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line-soft);font-size:var(--fs-meta);color:var(--ink-muted)}
.legenda span{display:inline-flex;align-items:center;gap:7px}
.legenda i{width:15px;height:15px;border-radius:2px;border:1px solid var(--line-firm);
  display:block;flex:none;position:relative}
.legenda .z{background:var(--brand);border-color:var(--brand)}
.legenda .r{background:var(--brand);border-color:var(--brand-ink);box-shadow:inset 0 0 0 2px var(--brand-ink)}
.legenda .r::after{content:"";position:absolute;top:1px;right:1px;width:5px;height:5px;
  border-radius:50%;background:#fff}
.legenda .a{background:var(--crit-bg);border-color:var(--crit)}
.legenda .a::after{content:"";position:absolute;top:2px;left:2.5px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:6px solid var(--crit-ink)}
.legenda .b{background:repeating-linear-gradient(45deg,var(--surface-2) 0 4px,transparent 4px 8px)}

/* ============================================================================
   WYKRESY — czysty CSS, bez biblioteki
   ========================================================================== */
/* Wysokość MUSI być określona: słupki mają wysokość w procentach, a procent
   liczony od `flex:1 1 auto` daje zero i wykres znika. Stąd `clamp` zamiast
   rozciągania — rośnie z oknem, ale zawsze jest liczbą.
   Pustkę pod wykresem (karta rozciągała się do wysokości heatmapy obok) usuwa
   `align-items:start` na siatce kart, nie rozciąganie samego wykresu. */
.slupki{display:flex;align-items:flex-end;gap:10px;padding-top:8px;
  height:clamp(200px, 30vh, 360px)}
.slupki .kol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;
  justify-content:flex-end}
.slupki .s{width:100%;max-width:52px;background:var(--brand-strong);border-radius:2px;
  transition:background var(--t-press)}
.slupki .kol:hover .s{background:var(--brand)}
.slupki .kol.dzis .s{background:var(--brand)}
.slupki .e{font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:.06em;
  text-transform:uppercase;font-weight:var(--fw-bold)}
.slupki .w{font-size:var(--fs-micro);color:var(--ink-soft);font-variant-numeric:tabular-nums}

.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.heat .c{aspect-ratio:1;border-radius:2px;background:var(--surface-2);border:1px solid var(--line-soft)}
.heat .c[data-p="1"]{background:color-mix(in srgb,var(--brand) 25%,var(--surface));border-color:transparent}
.heat .c[data-p="2"]{background:color-mix(in srgb,var(--brand) 55%,var(--surface));border-color:transparent}
.heat .c[data-p="3"]{background:var(--brand);border-color:transparent}
.heat-legenda{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:var(--fs-micro);
  color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase}
.heat-legenda i{width:13px;height:13px;border-radius:2px;display:block}

/* ---- telemetria: odczyty z realnej maszyny, wspólne dla obsługi i serwisu ---- */
.tele-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:12px}
.tele{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:13px 14px;position:relative;overflow:hidden}
.tele .e{display:flex;align-items:center;gap:7px;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);font-weight:var(--fw-bold)}
.tele .e i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--good)}
.tele[data-s="uw"] .e i{background:var(--warn)}
.tele[data-s="zl"] .e i{background:var(--crit)}
.tele .v{font-size:21px;font-weight:var(--fw-black);margin:6px 0 2px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.tele[data-s="uw"] .v{color:var(--warn-ink)}
.tele[data-s="zl"] .v{color:var(--crit-ink)}
.tele .p{font-size:var(--fs-micro);color:var(--ink-faint);line-height:1.35}

.sensory{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sensor{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-ctl);padding:13px 14px}
.sensor .e{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:var(--fw-bold)}
.sensor .v{font-size:22px;font-weight:var(--fw-black);margin-top:5px;font-variant-numeric:tabular-nums}
.sensor .v.ok{color:var(--good-ink)} .sensor .v.uw{color:var(--warn-ink)} .sensor .v.zl{color:var(--crit-ink)}

/* ---- karty automatów z kwadracikami zajętości ---- */
.flota-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--gap)}
.aut{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;
  cursor:pointer;text-align:left;position:relative;overflow:hidden;
  transition:border-color var(--t-press),background var(--t-press)}
.aut:hover{border-color:var(--line-firm);background:var(--surface-2)}
.aut::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--aut-marka,var(--brand))}
.aut.zle::before{background:var(--crit)}
.aut .glowa{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px}
.aut .ikona{width:34px;height:34px;flex:none;border-radius:2px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--aut-marka,var(--brand)) 20%,transparent);
  color:var(--aut-marka,var(--brand-ink))}
.aut .ikona svg{width:19px;height:19px}
/* Nazwa i lokalizacja MUSZĄ być blokami. Jako domyślne `inline` sklejały się
   w jeden ciąg („KWIATOMAT #1PKiN — wejście od Marszałkowskiej") na każdej
   karcie floty — wyglądało to na literówkę w danych, a było brakiem `display`. */
.aut .nl{display:flex;flex-direction:column;gap:2px;min-width:0}
.aut .n{display:block;font-size:var(--fs-body);font-weight:var(--fw-bold);letter-spacing:.02em;
  text-transform:uppercase;line-height:1.15}
.aut .l{display:block;font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:.05em;
  line-height:1.35}
.aut .licznik{margin-left:auto;font-size:var(--fs-meta);font-variant-numeric:tabular-nums;
  color:var(--ink-muted);font-weight:var(--fw-bold);background:var(--surface-3);padding:3px 9px;
  border-radius:var(--r-pill);white-space:nowrap}
.kwadraciki{display:grid;gap:3px;margin-bottom:13px}
.kwadraciki i{height:9px;border-radius:2px;background:var(--surface-2);display:block}
.kwadraciki i[data-s="zajeta"]{background:var(--aut-marka,var(--brand))}
.kwadraciki i[data-s="rezerwacja"]{background:var(--aut-marka,var(--brand));opacity:.5}
.kwadraciki i[data-s="awaria"]{background:var(--crit)}
.kwadraciki i[data-s="blokada"]{background:var(--warn)}
.aut .stopa{display:flex;align-items:center;gap:10px;font-size:var(--fs-micro);color:var(--ink-faint);
  letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-bold)}
.aut .stopa b{color:var(--ink-muted)}
.aut .stopa .pl{margin-left:auto}

/* ---- baner ---- */
.baner{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-card);
  margin-bottom:16px;font-size:var(--fs-meta);line-height:1.45}
.baner svg{width:19px;height:19px;flex:none;margin-top:1px}
.baner--uwaga{background:var(--warn-bg);color:var(--warn-ink)}
.baner--zle{background:var(--crit-bg);color:var(--crit-ink)}
.baner b{display:block;font-size:var(--fs-body);margin-bottom:2px}

/* ---- panel boczny: karta skrytki ---- */
.zaslona{position:fixed;inset:0;background:rgba(0,10,20,.6);z-index:70;opacity:0;
  pointer-events:none;transition:opacity var(--t-move)}
.zaslona.jest{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100%;z-index:80;
  background:var(--bar);border-left:1px solid var(--line);transform:translateX(100%);
  transition:transform var(--t-move);display:flex;flex-direction:column}
.sheet.jest{transform:none}
.sheet .glowa{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.sheet .glowa .n{font-size:var(--fs-h2);font-weight:var(--fw-black);letter-spacing:.02em}
.sheet .glowa .x{margin-left:auto;width:34px;height:34px;border-radius:var(--r-ctl);
  background:var(--surface);border:1px solid var(--line);color:var(--ink-muted);cursor:pointer;
  display:grid;place-items:center}
.sheet .glowa .x:hover{background:var(--surface-2);color:var(--ink)}
.sheet .tresc{overflow-y:auto;padding:6px 18px 18px;flex:1}
.wiersz{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.wiersz .e{font-size:var(--fs-body);font-weight:var(--fw-bold)}
.wiersz .e small{display:block;font-size:var(--fs-micro);color:var(--ink-faint);
  font-weight:var(--fw-reg);letter-spacing:.02em;margin-top:1px}
.wiersz .v{margin-left:auto;text-align:right;font-size:var(--fs-body);color:var(--ink-muted);
  font-variant-numeric:tabular-nums}
.wiersz .v b{color:var(--ink);font-weight:var(--fw-bold)}
.sheet .akcje{flex-direction:column;margin:18px 0 0}
.sheet .akcje .btn{width:100%}

.pusto{text-align:center;padding:56px 20px;color:var(--ink-faint)}
.pusto svg{width:42px;height:42px;margin-bottom:14px;opacity:.5}
.pusto b{display:block;font-size:var(--fs-h2);color:var(--ink-muted);margin-bottom:6px}

/* ---- dolna nawigacja (aplikacja mobilna) ---- */
.tabbar{display:none;position:absolute;bottom:0;left:0;right:0;height:var(--tabbar-h);
  background:var(--bar);border-top:1px solid var(--line);z-index:20}
.tabbar button{flex:1;background:none;border:0;cursor:pointer;color:var(--ink-faint);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:var(--fw-bold);position:relative}
.tabbar button svg{width:21px;height:21px}
.tabbar button[aria-current="page"]{color:var(--brand-ink)}
.tabbar button[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;
  height:2px;background:var(--brand);border-radius:2px}
.tabbar .kropka{position:absolute;top:9px;right:50%;margin-right:-16px;width:7px;height:7px;
  border-radius:50%;background:var(--crit)}
/* ============================================================================
   KATALOG — klasy WPROST z aplikacji programisty (B2B Portal, Razor Pages).
   Nazwy są jego: card, field-row, translation-grid, lang-tag, data-table,
   toolbar, pager, row-actions, link-button, hint, side-panel, checkbox-grid,
   detail-list, declaration-validators. Dzięki temu ten blok da się wkleić
   do jego app.css bez ruszania HTML-a.
   ========================================================================== */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 22px;margin-bottom:var(--gap);box-shadow:inset 0 1px 0 var(--stal);
}
.card > h2:first-child,.card > h3:first-child{margin-top:0}
.card h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);margin:0 0 4px;letter-spacing:-.01em}
.card h3{
  font-size:var(--fs-label);font-weight:var(--fw-bold);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);margin:22px 0 10px;
  padding-bottom:7px;border-bottom:1px solid var(--line-soft);
}
.hint{font-size:var(--fs-meta);color:var(--ink-soft);margin:4px 0 0;max-width:78ch}
.muted{color:var(--ink-faint)}

.field-row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px 18px;
  align-items:start;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.field-row:last-child{border-bottom:0}
.field-row > label{
  font-size:var(--fs-meta);color:var(--ink-muted);font-weight:var(--fw-med);
  padding-top:9px;line-height:1.3;
}
.field-row .hint{grid-column:2}
/* Pola formularza. Reguła obejmuje ORAZ `.card` (klasy programisty), ORAZ `.karta`
   (nasze), bo `polePola()` jest używane w obu — a pole „Adres odbiorcy" jest typu
   `email` i siedziało w `.karta`, więc nie łapał go żaden z tych selektorów i
   zostawała biała ramka przeglądarki na czarnym panelu. Typy wypisane jawnie
   zamiast samego `input`, żeby nie przemalować checkboxów, radiów i suwaków. */
.card input[type=text],.card input[type=number],.card input[type=email],
.card input[type=tel],.card input[type=search],.card input[type=password],
.card input[type=date],.card input[type=time],.card input[type=datetime-local],
.card input:not([type]),.card select,.card textarea,
.karta input[type=text],.karta input[type=number],.karta input[type=email],
.karta input[type=tel],.karta input[type=search],.karta input[type=password],
.karta input[type=date],.karta input[type=time],.karta input[type=datetime-local],
.karta input:not([type]),.karta select,.karta textarea{
  width:100%;background:var(--surface-3);color:var(--ink);
  border:1px solid var(--line-firm);border-radius:var(--r-ctl);
  padding:0 11px;height:var(--ctl-h);font:inherit;font-size:var(--fs-body);
}
.card textarea,.karta textarea{height:auto;min-height:84px;padding:9px 11px;line-height:1.45;resize:vertical}
.card input:hover,.card select:hover,.card textarea:hover,
.karta input:hover,.karta select:hover,.karta textarea:hover{border-color:var(--ink-off)}
.card input:focus,.card select:focus,.card textarea:focus,
.karta input:focus,.karta select:focus,.karta textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-bg);
}
.card input[readonly],.karta input[readonly]{color:var(--ink-faint);background:var(--surface-2)}
/* Pole nastawy ma własny, ciasny układ w pastylce `.setpoint` — nie może dziedziczyć
   szerokości 100% i wysokości kontrolki z reguły wyżej. */
.karta .setpoint input[type=number]{width:72px;height:auto;border:0;background:none;
  padding:0 18px 0 0}

/* Siedem języków. Polski to pole główne, reszta stoi pod nim w siatce —
   inaczej ekran produktu jest kolumną 40 identycznych pól. */
.translation-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:7px;margin-top:8px}
.translation-cell{display:grid;grid-template-columns:54px minmax(0,1fr);gap:7px;align-items:center}
.lang-tag{
  font-size:var(--fs-micro);font-weight:var(--fw-bold);
  letter-spacing:.06em;color:var(--ink-faint);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-ctl);
  height:var(--ctl-h);display:flex;align-items:center;justify-content:center;gap:5px;
  transition:color var(--t-press),border-color var(--t-press);
}
.lang-tag i{font-style:normal}
.flaga{width:16px;height:11px;flex:none;display:block;border-radius:1.5px}
.translation-cell.wypelniony .lang-tag{color:var(--brand-ink);border-color:var(--brand-strong)}
/* Pole główne — polskie. Ta sama flaga, ten sam rytm, żeby było widać, że to
   jeden komplet, a nie polskie pole i osobno „jakieś tłumaczenia". */
/* Czynność w kolejce uzupełniania — ikona niesie różnicę, której samo zdanie
   nie niosło: wstawić od zera czy wymienić to, co już tam stoi. */
/* Ikona w etykiecie kafla — „do wstawienia" i „do wymiany" to dwie różne
   czynności, a czytało się to jak dwie liczby obok siebie. */
.kpi .et{display:flex;align-items:center;gap:7px}
.kpi .et svg{width:14px;height:14px;flex:none;opacity:.85}

.czynnosc{display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-med)}
.czynnosc svg{width:16px;height:16px;flex:none;padding:3px;border-radius:var(--r-ctl);
  box-sizing:content-box}
.czynnosc--wstaw svg{color:var(--good-ink);background:var(--good-bg)}
.czynnosc--wymien svg{color:var(--warn-ink);background:var(--warn-bg)}

.tlum-glowa{display:flex;align-items:center;gap:9px;margin-top:10px;
  font-size:var(--fs-micro);color:var(--ink-faint)}
.tlum-glowa .lang-tag{height:24px;padding:0 7px;color:var(--ink);border-color:var(--line-firm);flex:none}

/* ============================================================================
   PRZEŁĄCZNIK I SUWAK — wprost z panelu obsługi na maszynie (`.sw`, `.slider`).
   Krawędzie ostre, nie zaokrąglone: panel ma czytać się jak przyrząd, a okrągły
   przełącznik z telefonu kłóci się z resztą.
   ========================================================================== */
.wiersz-ust{display:flex;align-items:center;gap:15px;padding:15px 0;
  border-bottom:1px solid var(--line-soft)}
.wiersz-ust:last-child{border-bottom:0}
.wiersz-ust > .ik{width:36px;height:36px;flex:none;display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-ctl)}
.wiersz-ust > .ik svg{width:20px;height:20px;color:var(--ink-faint)}
.wiersz-ust:has(.przel[aria-pressed="true"]) > .ik{background:var(--brand-bg);border-color:var(--brand-strong)}
.wiersz-ust:has(.przel[aria-pressed="true"]) > .ik svg{color:var(--brand-ink)}
.wiersz-ust .opis{min-width:0;flex:1}
/* Interlinia 1,45–1,5. Wcześniej wiersze dziedziczyły zbitą wysokość i podpis
   kleił się do tytułu, przez co dwuwierszowe opisy wyglądały jak jeden akapit. */
.wiersz-ust .t{display:block;font-size:var(--fs-body);color:var(--ink);line-height:1.45}
.wiersz-ust .s{display:block;font-size:var(--fs-meta);color:var(--ink-faint);margin-top:3px;
  line-height:1.5}
/* Przełącznik większy niż zwykły przełącznik w formularzu — to jest sterowanie
   maszyną, klika się je w biegu i czasem na tablecie stojącym przy automacie. */
.przel{
  position:relative;width:60px;height:34px;flex:none;border-radius:var(--r-ctl);
  background:var(--surface-press);border:1px solid var(--line-firm);cursor:pointer;padding:0;
  transition:background var(--t-press),border-color var(--t-press);
}
.przel::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;
  border-radius:1px;background:var(--ink-off);transition:transform var(--t-move),background var(--t-press)}
.przel[aria-pressed="true"]{background:var(--brand);border-color:var(--brand)}
.przel[aria-pressed="true"]::after{transform:translateX(26px);background:#fff}
.przel:hover{border-color:var(--brand)}
/* Pasek liczb — zwarty odpowiednik kafli. Liczba duża, kafel niski. */
.liczby{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2px;margin-bottom:var(--gap)}
.liczba{background:var(--surface);border:1px solid var(--line);padding:11px 14px 12px;
  box-shadow:inset 0 1px 0 var(--stal)}
.liczba .et{display:flex;align-items:center;gap:7px;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:var(--fw-bold)}
.liczba .et svg{width:13px;height:13px;flex:none;opacity:.85}
.liczba .v{display:block;font-family:var(--font-tyt);font-size:26px;font-weight:var(--fw-med);
  line-height:1.15;margin-top:5px;font-variant-numeric:tabular-nums}
.liczba .p{display:block;font-size:var(--fs-micro);color:var(--ink-faint);margin-top:2px}
.liczba.uwaga .v{color:var(--warn-ink)}
.liczba.uwaga .p{color:var(--warn-ink)}

/* Skróty PRZYPIĘTE. Ekran „Automat" ma pięć tysięcy pikseli, a „Zgłoś usterkę"
   wypadało na czwartym tysiącu — nie dało się tego znaleźć wzrokiem. Pasek
   jedzie razem ze stroną, więc każda sekcja jest jednym kliknięciem stąd. */
.skroty{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--gap);
  position:sticky;top:var(--dev-h,37px);z-index:20;
  padding:9px 0;background:var(--page);
  box-shadow:0 1px 0 var(--line), 0 10px 14px -10px rgba(0,0,0,.55)}
.motyw-jasny .skroty{box-shadow:0 1px 0 var(--line), 0 10px 14px -12px rgba(20,22,26,.18)}
.skrot{display:inline-flex;align-items:center;gap:8px;height:var(--ctl-h);padding:0 14px;
  background:var(--surface);border:1px solid var(--line-firm);border-radius:var(--r-ctl);
  color:var(--ink-muted);cursor:pointer;font:inherit;font-size:var(--fs-meta);font-weight:var(--fw-med);
  transition:background var(--t-press),color var(--t-press),border-color var(--t-press)}
.skrot svg{width:16px;height:16px;flex:none}
.skrot:hover{background:var(--surface-2);color:var(--ink);border-color:var(--brand)}

/* Godziny podświetlania i wybór koloru marki */
.godziny{display:flex;align-items:center;gap:8px;flex:none}
.godziny input{height:var(--ctl-h);padding:0 9px;background:var(--surface-3);color:var(--ink);
  border:1px solid var(--line-firm);border-radius:var(--r-ctl);font:inherit;
  font-size:var(--fs-body);font-variant-numeric:tabular-nums}
.godziny input:focus{outline:none;border-color:var(--brand)}
.godziny .do{color:var(--ink-faint)}
.kolor-pole{display:flex;align-items:center;gap:10px;flex:none}
.kolor-pole input[type=color]{width:56px;height:34px;padding:2px;cursor:pointer;
  background:var(--surface-3);border:1px solid var(--line-firm);border-radius:var(--r-ctl)}
.kolor-pole code{font-family:ui-monospace,Consolas,monospace;font-size:var(--fs-meta);
  color:var(--ink-muted);letter-spacing:.04em}
.probki{display:flex;gap:5px;flex:none}
.probki i{width:34px;height:34px;display:block;border-radius:var(--r-ctl);border:1px solid var(--line-firm)}
.btn--maly{height:var(--ctl-h);padding:0 12px;font-size:var(--fs-meta);flex:none}
/* Nastawa chłodzenia modułu — u Rafała „USTAW SETPOINTY”. Panel pokazywał
   temperaturę jako odczyt, ale nie dało się jej ustawić. */
.setpoint{display:flex;align-items:center;gap:6px;flex:none;
  background:var(--surface-3);border:1px solid var(--line-firm);border-radius:var(--r-ctl);
  padding:0 9px;height:var(--ctl-h)}
.setpoint svg{width:15px;height:15px;color:var(--ink-faint);flex:none}
/* Strzałki pola liczbowego rysują się NA zawartości po prawej stronie, więc przy
   wyrównaniu do prawej przykrywały wartość („5,5" pod strzałkami). Rezerwujemy
   im miejsce marginesem, zamiast je chować — technik ustawia nastawę co 0,5 °C
   i klikanie strzałką jest tu wygodniejsze niż wpisywanie. */
.setpoint input{width:72px;background:none;border:0;outline:none;color:var(--ink);
  font:inherit;font-size:var(--fs-body);font-variant-numeric:tabular-nums;text-align:right;
  padding-right:18px}
.setpoint input::-webkit-outer-spin-button,
.setpoint input::-webkit-inner-spin-button{opacity:1;margin-left:6px}
.setpoint .jedn{color:var(--ink-faint);font-size:var(--fs-meta)}
.setpoint:focus-within{border-color:var(--brand)}

/* Sterowanie modułami — układ z panelu Rafała („MODUŁ 1 / MODUŁ 2”), przeniesiony
   na kafle. Przycisk nastawy stoi w OSOBNYM wierszu POD polem temperatury: w jednym
   wierszu flex nachodził na wartość przy węższym oknie i uciekał za krawędź karty. */
/* `auto-fit` z górnym ograniczeniem szerokości plus `justify-content:center`:
   przy czterech modułach kafle wypełniają rząd, a przy dwóch albo trzech stoją
   POŚRODKU zamiast przyklejać się do lewej krawędzi z pustką po prawej. */
.moduly-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,320px));
  justify-content:center;gap:var(--gap);margin-bottom:4px}
.modul-karta{display:flex;flex-direction:column;gap:10px;padding:14px;
  background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-card)}
.modul-glowa{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.modul-glowa .nr{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--ink);flex:none}
.modul-glowa .zakres{font-size:var(--fs-micro);color:var(--ink-faint);letter-spacing:.04em;
  text-align:right}
.modul-pole{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modul-pole .et{font-size:var(--fs-meta);color:var(--ink-soft)}
.modul-pole .dwa{display:flex;gap:6px;flex:none}
.modul-ustaw{width:100%;justify-content:center}
/* Wpisana wartość nie jest jeszcze wysłana do modułu. Bez tego pole pokazywało
   5,5, a stopka pod nim „Nastawa: 5,0 °C" — jedno i drugie prawdziwe, ale razem
   czytało się jak błąd. Przycisk zapala się, dopóki zmiana nie zostanie wysłana. */
.modul-karta[data-niezapisane] .modul-ustaw{border-color:var(--brand);color:var(--brand-ink)}
.modul-karta[data-niezapisane] .setpoint{border-color:var(--brand)}
.modul-karta[data-niezapisane] .modul-stopka b{color:var(--ink-off)}
.modul-stopka{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:var(--fs-micro);color:var(--ink-faint)}
.modul-stopka b{color:var(--ink-muted);font-variant-numeric:tabular-nums}
.modul-baner{margin-top:2px}
.scena[data-w="telefon"] .moduly-siatka{grid-template-columns:1fr}
.v-ust{flex:none;text-align:right;font-size:var(--fs-body);color:var(--ink)}

.suwak{display:flex;align-items:center;gap:11px;flex:none;min-width:190px}
.suwak input{flex:1;accent-color:var(--brand);height:4px;cursor:pointer}
.suwak .v{font-size:var(--fs-meta);color:var(--ink);min-width:46px;text-align:right;
  font-variant-numeric:tabular-nums;font-weight:var(--fw-med)}

/* Kategorie zgłoszenia — wybiera się jedną, więc zachowują się jak przyciski radiowe. */
.kat-usterki{display:grid;gap:2px;margin:4px 0 16px}
.kat-usterki button{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:12px 14px;
  background:var(--surface-3);border:1px solid transparent;border-left:2px solid var(--line-firm);
  color:var(--ink-muted);cursor:pointer;font:inherit;font-size:var(--fs-body);
  transition:background var(--t-press),border-color var(--t-press),color var(--t-press);
}
.kat-usterki button:hover{background:var(--surface-2);color:var(--ink)}
.kat-usterki button[aria-pressed="true"]{background:var(--brand-bg);border-left-color:var(--brand);color:var(--ink)}
.kat-usterki button svg{width:18px;height:18px;flex:none;color:var(--ink-faint)}
.kat-usterki button[aria-pressed="true"] svg{color:var(--brand-ink)}
.kat-usterki .s{display:block;font-size:var(--fs-meta);color:var(--ink-faint);margin-top:2px}
.kat-usterki .wykryte{margin-left:auto;flex:none}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--gap)}
.toolbar .pole{display:flex;flex-direction:column;gap:4px}
.toolbar label{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:var(--fw-bold)}
.rozpychacz{margin-left:auto}

/* Wartość odżywcza — osiem pól, które zawsze idą razem. Kolumna 8 osobnych
   wierszy była nie do objęcia wzrokiem. */
.pola-odzywcze{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px;margin-top:8px}
.odz{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:10px;align-items:center;
  padding:7px 10px;background:var(--surface-3);font-size:var(--fs-meta);color:var(--ink-muted)}
.odz input{text-align:right;font-variant-numeric:tabular-nums}

.upusc-plik{
  border:1.5px dashed var(--line-firm);background:var(--surface-3);padding:26px;text-align:center;
  color:var(--ink-soft);font-size:var(--fs-meta);margin:12px 0;cursor:pointer;
}
.upusc-plik:hover{border-color:var(--brand);color:var(--ink)}

.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.data-table th{
  text-align:left;font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:var(--fw-bold);padding:0 12px 9px;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.data-table td{padding:11px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--surface-2)}
/* Co drugi wiersz w innym odcieniu — przy dziesięciu skrytkach oko gubiło się
   między numerem a stanem po drugiej stronie ekranu. */
.tabela--zwijana tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even){background:var(--zebra)}
.tabela--zwijana tbody tr:nth-child(even):hover,
.data-table tbody tr:nth-child(even):hover{background:var(--surface-2)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table .moc{font-weight:var(--fw-med);color:var(--ink)}
.row-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.pager{display:flex;gap:10px;align-items:center;margin-top:12px;
  font-size:var(--fs-meta);color:var(--ink-faint)}

.link-button{
  background:none;border:0;padding:6px 8px;color:var(--brand-ink);cursor:pointer;
  font:inherit;font-size:var(--fs-meta);font-weight:var(--fw-med);border-radius:var(--r-ctl);
}
.link-button:hover{background:var(--surface-2);text-decoration:underline}
/* Zdjęcie produktu w skrytce — to samo, co klient widzi na ekranie automatu. */
.zdjecie-skrytki{display:flex;gap:14px;align-items:flex-end;margin-bottom:16px}
.zdjecie-skrytki .podglad{
  position:relative;width:104px;height:132px;flex:none;overflow:hidden;
  border:1px solid var(--line-firm);border-radius:var(--r-card);
  background:linear-gradient(150deg,var(--brand-bg),var(--surface-3));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px;
}
.zdjecie-skrytki .litera{font-family:var(--font-tyt);font-size:40px;font-weight:var(--fw-med);
  color:var(--brand-ink);line-height:1}
.zdjecie-skrytki .opis{font-size:var(--fs-micro);color:var(--ink-faint);text-align:center;
  line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zdjecie-skrytki .podglad[data-pusta="true"]{background:var(--surface-3)}
.zdjecie-skrytki .podglad[data-pusta="true"] .litera{color:var(--ink-empty)}

/* Wiersz do zmiany — szewron jak na maszynie, cały wiersz klikalny. */
.wiersz--edyt{width:100%;background:none;border:0;border-bottom:1px solid var(--line-soft);
  cursor:pointer;font:inherit;text-align:left;color:inherit;
  display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:12px;
  transition:background var(--t-press)}
.wiersz--edyt:hover{background:var(--surface-2)}
.wiersz--edyt .szewron{width:16px;height:16px;color:var(--ink-off)}
.wiersz--edyt:hover .szewron{color:var(--brand-ink)}

/* Nazwa jako wejście do edycji — to ona jest tym, czego szuka wzrok. */
.nazwa-klik{background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font:inherit;font-size:var(--fs-body);font-weight:var(--fw-med);color:var(--ink)}
.nazwa-klik:hover{color:var(--brand-ink);text-decoration:underline}

/* Pulpit w układzie kafli — jak metaboksy w kokpicie WordPressa: każdy blok ma
   swój pasek tytułu i swoje pudełko, a siatka rozkłada je na kolumny. */
.kokpit{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:var(--gap);align-items:start}
.kokpit .blok{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:inset 0 1px 0 var(--stal);overflow:hidden}
.kokpit .blok > h3{
  margin:0;padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:var(--fs-meta);font-weight:var(--fw-med);color:var(--ink);
  letter-spacing:.02em;text-transform:none;
}
.kokpit .blok > .tresc{padding:14px}
.kokpit .blok.szeroki{grid-column:1/-1}
.kokpit .blok .tab-obszar{border:0;border-radius:0;background:none}
.kokpit .blok > .tresc > .kpi-row{grid-template-columns:1fr 1fr;gap:2px}
.link-danger{color:var(--crit-ink)}
.button-danger{
  background:var(--crit-bg);border:1px solid var(--crit);color:var(--crit-ink);
  padding:0 14px;height:var(--ctl-h);border-radius:var(--r-ctl);cursor:pointer;
  font:inherit;font-size:var(--fs-meta);font-weight:var(--fw-med);
}
.button-danger:hover{background:var(--crit);color:#fff}

/* Walidatory żywnościowe — po prawej, zawsze widoczne, bo to one decydują,
   czy deklarację w ogóle da się opublikować. */
.uklad-2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap);align-items:start}
.side-panel{position:sticky;top:var(--gap)}
.declaration-validators{display:flex;flex-direction:column;gap:2px;margin:10px 0 0;padding:0;list-style:none}
.declaration-validators li{
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;
  padding:8px 10px;background:var(--surface-3);border-left:2px solid var(--line-firm);
  font-size:var(--fs-meta);color:var(--ink-muted);
}
.declaration-validators li.valid{border-left-color:var(--good);color:var(--ink-soft)}
.declaration-validators li.blokuje{border-left-color:var(--crit);color:var(--ink)}
.declaration-validators .znak{font-weight:var(--fw-bold);text-align:center;line-height:1.35}
.declaration-validators li.valid .znak{color:var(--good-ink)}
.declaration-validators li.blokuje .znak{color:var(--crit-ink)}

.checkbox-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px}
.checkbox-grid label{
  display:flex;gap:9px;align-items:center;padding:8px 10px;background:var(--surface-3);
  font-size:var(--fs-meta);color:var(--ink-muted);cursor:pointer;
}
.checkbox-grid label:hover{background:var(--surface-2);color:var(--ink)}
.checkbox-grid input{accent-color:var(--brand);width:16px;height:16px;flex:0 0 auto}
.checkbox-grid label:has(input:checked){color:var(--ink);background:var(--brand-bg)}

.detail-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;
  font-size:var(--fs-meta)}
.detail-list dt{color:var(--ink-faint)}
.detail-list dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

/* Nawigacja pogrupowana — jak w aplikacji programisty (side-nav-group). */
.side-nav-group + .side-nav-group{margin-top:7px}

@media (max-width:1200px){ .uklad-2{grid-template-columns:1fr} .side-panel{position:static} }
@media (max-width:900px){ .field-row{grid-template-columns:1fr} .field-row > label{padding-top:0} }

/* ============================================================================
   EKRAN LOGOWANIA
   Rysunek automatu NIE jest ozdobą obok formularza — jest wskaźnikiem postępu.
   Cztery komory to cztery kroki wejścia (adres · hasło · sprawdzenie · otwarte),
   a po zalogowaniu tafla się otwiera i światło wychodzi na zewnątrz. Logowanie
   do panelu wygląda tak, jak otwarcie skrytki, bo to jest ta sama czynność.

   Trzy rzeczy wzięte wprost z panelu kiosku (`Apka\dostawa\prototyp-pelny-kwiatomat.html`):
   1. obracające się sygnety w tle (`.attract .drift` + `.petal`) — ruch zamiast
      migotania; przed retencją obrazu chroni PRZESUWANIE pikseli, nie pulsowanie,
   2. klawiatura numeryczna i okienka na cyfry (`.keypad`, `.codebox`) — druga droga
      wejścia, kodem z ekranu automatu,
   3. marka klienta u góry, producent u dołu — NIGDY w jednym pasie poziomym
      (`.attract .atop` / `.abot`); dwa logotypy obok siebie czytają się jak podnajem.
   ========================================================================== */
/* Wysokość liczona od RZECZYWISTEJ wysokości paska podglądu (`--dev-h`, ustawiane
   w JS). Pasek zawija się do dwóch rzędów i sztywne „minus 42 px" wypychało
   stopkę „by RAPA" poniżej krawędzi okna. */
.logowanie{
  position:relative;min-height:calc(100vh - var(--dev-h,100px));overflow:hidden;
  background:var(--page);color:var(--ink);
  /* Kolumna, nie siatka z `place-items`. Stopka „by RAPA" wisiała bezwzględnie
     przy dolnej krawędzi i przy węższym oknie wchodziła na kartę logowania.
     `margin:auto 0` na planszy centruje ją w wolnym miejscu, a stopka zawsze
     zostaje pod spodem — kolizja przestaje być możliwa. */
  display:flex;flex-direction:column;align-items:center;padding:18px 24px 18px;
  /* Zapytania o KONTENER, nie o okno. Ekran logowania bywa oglądany w ramce
     tabletu i telefonu z paska podglądu — wtedy okno ma 1680 px, a miejsca jest
     412 px. Zapytanie medialne pokazywałoby wersję monitorową w telefonie. */
  container-type:inline-size;
}
/* ────────────────────────────────────────────────────────────────────────────
   EKRAN LOGOWANIA JEST ZAWSZE CIEMNY — decyzja Damiana, 13.08.2026.
   Motyw jasny dotyczy PANELU, nie wejścia. Powód nie jest estetyczny: na
   logowaniu cały sens niosą ZAPALONE KOMORY automatu, a światło na białym tle
   przestaje być światłem. Do tego motyw jest ustawieniem konta, a konta w tej
   chwili jeszcze nie znamy — nie ma czego respektować.
   Zamiast pilnować tego umową („podawajcie logowanie w ciemnym"), powierzchnie
   wracają tu do wartości z motywu ciemnego. Przełącznik motywu może sobie
   stać gdzie chce — ten ekran się nie zmieni.
   Nie dopisywać tu tokenów marki: `--brand` jest własnością AUTOMATU i wjeżdża
   z rozpoznanego konta. */
.motyw-jasny .logowanie{
  color-scheme:dark;
  --page:#08080A; --bar:#000000;
  --surface:#16171A; --surface-2:#1E2023; --surface-3:#0D0E10; --surface-press:#25272B;
  --stal:rgba(255,255,255,.05);
  --ink:#E7EAEF; --ink-muted:#C4C9D2; --ink-soft:#A6ACB7;
  --ink-faint:#8B929D; --ink-off:#70767F; --ink-empty:#52585F;
  --line:#2C2E31; --line-soft:#212325; --line-firm:#3D4045; --line-bar:#000000;
  --zebra:#1B1C1F;
}
/* Ramka urządzenia z paska podglądu. `#logowanie` stoi PRZED `.scena`, więc
   selektor rodzeństwa tu nie zadziała — stąd `:has()` na `body`. */
body:has(#scena[data-w="tablet"]) .logowanie{
  width:834px;min-height:1100px;margin:28px auto;padding:56px 20px 70px;
  border:1px solid #24252A;box-shadow:0 24px 60px rgba(0,0,0,.5);
}
body:has(#scena[data-w="telefon"]) .logowanie{
  width:412px;min-height:900px;margin:28px auto;padding:40px 14px 66px;
  border:10px solid #17181C;box-shadow:0 24px 60px rgba(0,0,0,.5);
}

/* --- tło: sygnety RAPA obracające się w miejscu, całość dryfuje --- */
.lg-petale{position:absolute;inset:-16%;z-index:0;pointer-events:none;
  animation:lg-drift 46s ease-in-out infinite alternate}
@keyframes lg-drift{0%{transform:translate(-2.5%,-2%)}100%{transform:translate(2.5%,2%)}}
.lg-petal{position:absolute;color:var(--brand)}
.lg-petal svg{width:100%;height:100%;display:block}
@keyframes lg-rot{to{transform:rotate(360deg)}}
@keyframes lg-rotr{to{transform:rotate(-360deg)}}
/* Winieta — bez niej sygnety wchodzą pod formularz i zabierają kontrast tekstowi. */
.logowanie::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,
    color-mix(in srgb,var(--page) 92%,transparent) 0%,
    color-mix(in srgb,var(--page) 55%,transparent) 55%, transparent 100%);
}

/* --- marka klienta u góry, RAPA u dołu ---
   Nazwa klienta stoi na kasetonie automatu i to wystarczy: w układzie pionowym
   osobny napis nad maszyną powtarzał to samo dwa razy z rzędu. */
.lg-abot{
  position:relative;z-index:3;flex:none;padding-top:14px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.lg-abot .znak{display:flex;align-items:center;gap:9px;
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-off)}
.lg-abot .znak svg{width:16px;height:16px;color:var(--ink-off)}
.lg-abot .drobne{font-size:var(--fs-micro);color:var(--ink-empty);letter-spacing:.02em;
  text-align:center;max-width:min(96vw,920px);line-height:1.6}
.lg-abot .drobne b{color:var(--ink-off);font-weight:var(--fw-med)}

/* --- kompozycja: automat jako ozdobnik u góry, formularz pod nim --- */
.lg-plansza{
  position:relative;z-index:2;display:grid;justify-items:center;
  grid-template-columns:minmax(0,396px);gap:18px;
  margin:auto 0;   /* centruje planszę w wolnym miejscu nad stopką */
}

/* ============================ RYSUNEK AUTOMATU ============================ */
.lg-automat{display:flex;flex-direction:column;align-items:center}
/* Ozdobnik, nie bohater ekranu: przy 178 px karta logowania uciekała pod dolną
   krawędź okna. Cały stos ma się zmieścić bez przewijania. */
.lg-mf{width:clamp(280px,32vw,372px);height:auto;display:block;color:var(--brand);overflow:visible}
.lg-korpus{fill:var(--surface);stroke:var(--line-firm);stroke-width:.8}
/* Kaseton to podświetlany szyld, nie czarna dziura — ta sama blacha co korpus,
   odrobinę jaśniejsza. Na czysto czarnym odklejał się od maszyny. */
.lg-kaseton-tlo{fill:var(--surface-2);stroke:var(--line-firm);stroke-width:.8}
/* Nazwa klienta bywa długa („Kwiaciarnia Kanton" to 18 znaków) — przy 11 px
   z rozstrzeleniem wychodziła poza kaseton. Stąd 9,5 px i węższy odstęp. */
.lg-kaseton{fill:var(--brand-ink);font-size:9.5px;font-weight:900;letter-spacing:.13em;
  transition:fill 420ms ease}
/* Konto nierozpoznane: kaseton nieoświetlony, cały ekran stalowy. Szyld zapala
   się dopiero wtedy, gdy z adresu wiadomo, czyj to automat. */
.logowanie[data-marka="nieznana"] .lg-kaseton{fill:var(--ink-off)}
.logowanie[data-marka="nieznana"] .lg-kaseton-tlo{fill:var(--surface-3)}
.lg-kaseton-tlo,.lg-klamka{transition:fill 420ms ease}
.lg-kratka{stroke:var(--line);stroke-width:.9}
.lg-stopka{fill:var(--surface-3);stroke:var(--line);stroke-width:.6}
.lg-szczelina{fill:var(--surface-3);stroke:var(--line-firm);stroke-width:.5}
.lg-podpis{fill:var(--ink-empty);font-size:5px;font-weight:700;letter-spacing:.22em}

/* pasek diodowy pod kasetonem — maszyna ma prąd, zanim ktokolwiek się zaloguje */
.lg-led{fill:var(--line-firm)}
.lg-led-dot{fill:var(--brand);animation:lg-led 4.6s linear infinite}
@keyframes lg-led{0%{transform:translateX(0);opacity:0}
  8%{opacity:1} 88%{opacity:1} 100%{transform:translateX(var(--lg-bieg,112px));opacity:0}}

/* ekranik na module sterowania — pokazuje kod dopiero w trybie kodu */
.lg-tablet{fill:var(--surface-3);stroke:var(--line-firm);stroke-width:.6;
  transition:fill 300ms ease,stroke 300ms ease}
.lg-ekran-t,.lg-ekran-k{opacity:0;transition:opacity 300ms ease;text-anchor:middle}
.lg-ekran-t{fill:var(--ink-faint);font-size:4.4px;font-weight:700;letter-spacing:.2em}
.lg-ekran-k{fill:var(--brand-ink);font-size:8px;font-weight:900;letter-spacing:.1em}
.logowanie[data-tryb="kod"] .lg-tablet{fill:#0C0D0F;stroke:var(--brand)}
/* Kaseton mięsomatu jest szeroki — nazwa klienta może iść większa. */
.lg-kaseton{font-size:13px}
.logowanie[data-tryb="kod"] .lg-ekran-t,
.logowanie[data-tryb="kod"] .lg-ekran-k{opacity:1}

/* MODUŁY — to jest wskaźnik postępu, nie dekoracja. Cztery moduły skrytek
   mięsomatu, po dwanaście skrytek każdy; zapalają się po kolei od lewej. */
.lg-modul .kom rect{fill:var(--surface-3);stroke:var(--line-firm);stroke-width:.7;
  transition:fill 420ms cubic-bezier(.4,0,.2,1),stroke 420ms}
.lg-modul[data-on] .kom rect{fill:var(--brand);stroke:var(--brand);
  animation:lg-blysk 420ms ease-out}
/* Moduł sterowania budzi się razem z pierwszym krokiem — ekranik zapala się. */
.lg-modul[data-panel][data-on] .lg-tablet{fill:#0C0D0F;stroke:var(--brand)}
/* Błysk przez `filter`, nie przez `fill`. Klatka kluczowa dochodząca do
   `var(--brand)` nie interpoluje się pewnie, a pół sekundy czystej bieli na
   module czyta się jak usterka, nie jak zapalenie światła. */
@keyframes lg-blysk{0%{filter:brightness(2.4)}100%{filter:brightness(1)}}
/* moduł sprawdzany — miga wolno, dopóki trwa weryfikacja */
.lg-modul[data-czeka] .iskra{animation:lg-czeka 1.1s ease-in-out infinite}
@keyframes lg-czeka{0%,100%{opacity:.05}50%{opacity:.40}}

/* SPOCZYNEK — światło przebiega po czterech skrytkach i wraca. To nie jest
   ozdoba dla ozdoby: automat po kolei sprawdza zamki, więc ruch mówi „maszyna
   pracuje, tylko czeka na Ciebie". Krycie zamiast wypełnienia, bo klatka
   kluczowa dochodząca do `var(--brand)` nie interpoluje się pewnie. */
.lg-modul .iskra{fill:currentColor;stroke:none;opacity:0;pointer-events:none}
.lg-automat[data-krok="0"] .lg-modul .iskra{animation:lg-iskra 5.4s ease-in-out infinite}
.lg-automat[data-krok="0"] .lg-modul[data-nr="2"] .iskra{animation-delay:.26s}
.lg-automat[data-krok="0"] .lg-modul[data-panel] .iskra{animation-delay:.52s}
.lg-automat[data-krok="0"] .lg-modul[data-nr="3"] .iskra{animation-delay:.78s}
.lg-automat[data-krok="0"] .lg-modul[data-nr="4"] .iskra{animation-delay:1.04s}
@keyframes lg-iskra{0%,66%,100%{opacity:0} 6%{opacity:.24} 18%{opacity:0}}

/* światło zza tafli — zapala się razem z modułem, mocniej po otwarciu */
.lg-swiatlo{fill:currentColor;opacity:0;filter:blur(7px);transition:opacity 700ms ease}
.lg-modul[data-on] .lg-swiatlo{opacity:.30}
.lg-automat[data-krok="4"] .lg-swiatlo{opacity:.46}

/* TAFLA — cała szyba jest jednymi drzwiami; otwiera się na zawiasie po lewej */
.lg-drzwi{transform-box:fill-box;transform-origin:0% 50%;
  transition:transform 1s cubic-bezier(.45,0,.15,1)}
/* Perspektywa łagodna i kąt mniejszy: przy 560 px / 34° bliższa krawędź tafli
   rosła tak, że otwarte drzwi nachodziły na kaseton i na kratkę. */
.lg-automat[data-krok="4"] .lg-drzwi{transform:perspective(860px) rotateY(-27deg)}
.lg-tafla{fill:rgba(255,255,255,.055);stroke:var(--line-firm);stroke-width:.8}
.motyw-jasny .lg-tafla{fill:rgba(20,22,26,.05)}
.lg-klamka{fill:var(--brand)}
/* przejaśnienie sunące po szybie — jedyny ruch na samej tafli */
.lg-odblask-g{transform-box:fill-box;transform-origin:center;transform:skewX(-16deg)}
.lg-odblask{fill:#fff;opacity:0;animation:lg-sweep 11s ease-in-out infinite}
@keyframes lg-sweep{
  0%{transform:translateX(-86px);opacity:0}
  5%{opacity:.10} 26%{opacity:.10}
  32%,100%{transform:translateX(86px);opacity:0}}

/* podpis pod automatem — narracja kroku */
.lg-krok{margin-top:12px;min-height:15px;text-align:center;
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);transition:color 300ms}
.lg-krok[data-otwarte]{color:var(--brand-ink)}

/* ============================== FORMULARZ ================================= */
.lg-karta{
  width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--stal), 0 28px 70px rgba(0,0,0,.55);
  padding:24px 30px 22px;position:relative;overflow:hidden;
}
.motyw-jasny .lg-karta{box-shadow:0 18px 46px rgba(20,22,26,.12)}
/* rozmyta plama marki w rogu — ten sam efekt, co na kaflach panelu */
.lg-karta::after{
  content:"";position:absolute;top:-70px;right:-70px;width:190px;height:190px;
  background:var(--brand);filter:blur(48px);opacity:.16;pointer-events:none;
}
.lg-karta > *{position:relative;z-index:1}
.lg-oko{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-ink)}
.lg-karta h1{font-size:20px;font-weight:var(--fw-med);letter-spacing:.015em;
  line-height:1.2;margin:5px 0 16px}

.lg-pola{display:grid;gap:16px}
.lg-pole{display:grid;gap:7px}
.lg-pole > .et{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.lg-wpis{
  display:flex;align-items:center;gap:11px;height:40px;padding:0 12px;
  background:var(--surface-3);border:1px solid var(--line-firm);border-radius:var(--r-ctl);
  transition:border-color var(--t-press),background var(--t-press);
}
.lg-wpis:focus-within{border-color:var(--brand);background:var(--surface-2)}
.lg-wpis > svg{width:17px;height:17px;flex:none;color:var(--ink-off);transition:color var(--t-press)}
.lg-wpis:focus-within > svg{color:var(--brand-ink)}

/* IKONY, KTÓRE COŚ ZNACZĄ — każda zmienia się od stanu pola, nie od najechania.
   1. koperta → rysowany ptaszek w chwili rozpoznania konta,
   2. pałąk kłódki unosi się, gdy hasło jest wpisane,
   3. strzałka w przycisku ustępuje ptaszkowi, gdy automat stoi otworem. */
.lg-ikona{position:relative;width:17px;height:17px;flex:none}
.lg-ikona svg{position:absolute;inset:0;width:17px;height:17px;
  transition:opacity 240ms ease,transform 260ms cubic-bezier(.34,1.56,.64,1)}
.lg-ikona .i-koperta{color:var(--ink-off);transition:color var(--t-press),opacity 240ms,transform 260ms}
.lg-wpis:focus-within .lg-ikona .i-koperta{color:var(--brand-ink)}
.lg-ikona .i-znany{opacity:0;transform:scale(.5);color:var(--brand-ink)}
.logowanie[data-marka="znana"] .lg-ikona .i-koperta{opacity:0;transform:scale(.5)}
.logowanie[data-marka="znana"] .lg-ikona .i-znany{opacity:1;transform:none}
.logowanie[data-marka="znana"] .lg-ikona .kreska{
  stroke-dasharray:24;animation:lg-rysuj 460ms cubic-bezier(.5,0,.2,1) forwards}
@keyframes lg-rysuj{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}

.i-klodka .palak{transition:transform 320ms cubic-bezier(.34,1.56,.64,1)}
.lg-wpis:has(input:not(:placeholder-shown)) .i-klodka .palak{transform:translateY(-2.6px)}
.lg-wpis input{flex:1;min-width:0;background:none;border:0;outline:none;
  font-size:13.5px;color:var(--ink)}
.lg-wpis input::placeholder{color:var(--ink-off)}
.lg-wpis input:-webkit-autofill{-webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px var(--surface-3) inset}
.lg-pokaz{background:none;border:0;cursor:pointer;flex:none;padding:4px;
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}
.lg-pokaz:hover{color:var(--brand-ink)}

.lg-drobne{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:14px 0 16px;font-size:var(--fs-meta)}
.lg-pamietaj{display:flex;align-items:center;gap:9px;color:var(--ink-soft);cursor:pointer}
.lg-pamietaj input{accent-color:var(--brand);width:16px;height:16px;flex:none}
.lg-link{background:none;border:0;padding:0;cursor:pointer;color:var(--brand-ink);
  font:inherit;font-size:var(--fs-meta)}
.lg-link:hover{text-decoration:underline}

.lg-wejdz{
  width:100%;height:42px;border:0;border-radius:var(--r-ctl);cursor:pointer;
  background:var(--brand);color:#fff;font-size:var(--fs-action);font-weight:var(--fw-bold);
  letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:11px;
  transition:filter var(--t-press);
}
.lg-wejdz:hover{filter:brightness(1.14)}
.lg-wejdz:hover:not([disabled]) #lg-wejdz-i{transform:translateX(4px)}
#lg-wejdz-i{transition:transform 220ms cubic-bezier(.4,0,.2,1)}
#lg-wejdz-ok .kreska{stroke-dasharray:24;animation:lg-rysuj 440ms cubic-bezier(.5,0,.2,1) forwards}
/* Przy nieznanym koncie przycisk jest jasny z ciemnym napisem, a nie szary na
   szarym — szare wypełnienie w kolorze stali czytało się jak przycisk wyłączony.
   W chwili rozpoznania konta wjeżdża pełny kolor marki. */
.logowanie[data-marka="nieznana"] .lg-wejdz{background:var(--ink-muted);color:#121316}
.logowanie[data-marka="nieznana"] .lg-wejdz .kolo{border-color:rgba(0,0,0,.28);border-top-color:#121316}
.lg-wejdz{transition:background 420ms ease,color 420ms ease,filter var(--t-press)}
.lg-wejdz svg{width:18px;height:18px}
.lg-wejdz[disabled]{opacity:.5;cursor:default;filter:none}
.lg-wejdz .kolo{width:16px;height:16px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:lg-spin 1s linear infinite}
@keyframes lg-spin{to{transform:rotate(360deg)}}

/* Druga droga wejścia jest cichym odnośnikiem pod kreską, nie drugim przyciskiem
   tej samej wagi. Dwa pełne przyciski jeden pod drugim kazały wybierać, zanim
   ktokolwiek zaczął pisać — i podnosiły kartę o kilkadziesiąt pikseli. */
.lg-inny{
  width:100%;margin-top:16px;padding-top:14px;border:0;border-top:1px solid var(--line);
  background:none;cursor:pointer;color:var(--ink-faint);
  font:inherit;font-size:var(--fs-meta);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:color var(--t-press);
}
.lg-inny:hover{color:var(--brand-ink)}
.lg-inny svg{width:16px;height:16px}

.lg-blad{display:none;gap:11px;align-items:flex-start;margin-bottom:18px;padding:11px 13px;
  background:var(--crit-bg);border-left:2px solid var(--crit);
  font-size:var(--fs-meta);color:var(--ink-muted);line-height:1.45}
.lg-blad[data-jest]{display:flex}
.lg-blad svg{width:16px;height:16px;flex:none;color:var(--crit-ink);margin-top:1px}
.lg-blad b{color:var(--ink);display:block}
.lg-blad .i-info{display:none}
.lg-blad[data-ton="info"]{background:var(--surface-2);border-left-color:var(--brand)}
.lg-blad[data-ton="info"] .i-uwaga{display:none}
.lg-blad[data-ton="info"] .i-info{display:block;color:var(--brand-ink)}

/* --- druga droga: kod z ekranu automatu (klawiatura z kiosku) --- */
.lg-kod{display:grid;gap:18px}
.lg-cyfry{display:flex;gap:8px;justify-content:center}
.lg-cyfry i{
  width:42px;height:52px;display:grid;place-items:center;font-style:normal;
  background:var(--surface-3);border:1px solid var(--line-firm);border-radius:var(--r-ctl);
  font-size:23px;font-weight:var(--fw-med);color:var(--ink);
  transition:border-color var(--t-press),background var(--t-press);
}
.lg-cyfry i:empty::after{content:"·";color:var(--ink-empty)}
.lg-cyfry i[data-kursor]{border-color:var(--brand);background:var(--surface-2)}
.lg-klaw{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lg-klaw button{
  height:46px;background:var(--surface-3);border:1px solid var(--line);
  border-radius:var(--r-ctl);color:var(--ink);cursor:pointer;
  font:inherit;font-size:17px;font-weight:var(--fw-med);
  transition:background var(--t-press);
}
.lg-klaw button:hover{background:var(--surface-2)}
.lg-klaw button:active{background:var(--surface-press)}
.lg-klaw button.cichy{font-size:var(--fs-meta);font-weight:var(--fw-med);color:var(--ink-faint);
  letter-spacing:.06em;text-transform:uppercase}
.lg-klaw button.cichy svg{width:19px;height:19px}

/* --- zamknięcie: cały ekran gaśnie i wpuszcza panel --- */
.logowanie[data-wychodzi]{animation:lg-wyjscie 620ms cubic-bezier(.5,0,.2,1) forwards}
@keyframes lg-wyjscie{to{opacity:0;transform:scale(1.035)}}

@container (max-width:470px){
  .lg-plansza{grid-template-columns:minmax(0,1fr);width:100%;gap:18px}
  .lg-karta{padding:24px 18px 22px}
  .lg-karta h1{font-size:26px;margin-bottom:18px}
  .lg-cyfry{gap:6px}
  .lg-cyfry i{width:100%;height:52px;font-size:22px}
  .lg-mf{width:132px}
  .lg-krok{margin-top:12px}
  .lg-abot .drobne{padding:0 12px;text-align:center;line-height:1.5}
}