/* Tablica: cztery widoki na tych samych danych. Motyw ustawia html[data-widok]; reszta arkusza korzysta tylko ze zmiennych.
   Nazwy przycisków z pierwszej wersji zostały: solar = główna akcja, guma = mocna, alert = praca, safety = gotowe, caution = wstrzymane, fire = niebezpieczne. */
@font-face { font-family: Barlow; src: url(/fonts/barlow-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Barlow; src: url(/fonts/barlow-400-latin-ext.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02FF; }
@font-face { font-family: Barlow; src: url(/fonts/barlow-500-latin.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Barlow; src: url(/fonts/barlow-500-latin-ext.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0100-02FF; }
@font-face { font-family: Barlow; src: url(/fonts/barlow-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Barlow; src: url(/fonts/barlow-600-latin-ext.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0100-02FF; }
@font-face { font-family: Barlow; src: url(/fonts/barlow-700-latin.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Barlow; src: url(/fonts/barlow-700-latin-ext.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0100-02FF; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/barlow-condensed-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0100-02FF; }
@font-face { font-family: Overpass; src: url(/fonts/overpass-400-800-latin.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Overpass; src: url(/fonts/overpass-400-800-latin-ext.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02FF; }
@font-face { font-family: Chivo; src: url(/fonts/chivo-400-800-latin.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: Chivo; src: url(/fonts/chivo-400-800-latin-ext.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02FF; }

/* Taśma: jasno, niebieski marki */
:root {
  color-scheme: light;
  --tlo: #F2F4F7; --tlo2: #E6EBF2; --tlo3: #DCE3EC; --pow: #FFFFFF; --pow2: #F7F9FB;
  --tekst: #172233; --tekst2: #4A5870; --tekst3: #6B7890; --linia: #D8DEE7; --linia-m: #AEB9C8;
  --akcent: #1F5FA8; --akcent-t: #FFFFFF; --mocny: #172233; --mocny-t: #FFFFFF;
  --st-plac: #FFE7D6; --st-plac-t: #8A2E06; --st-praca: #1F5FA8; --st-praca-t: #FFFFFF;
  --st-wstrz: #5B6B82; --st-wstrz-t: #FFFFFF; --st-gotowe: #157A4C; --st-gotowe-t: #FFFFFF;
  --st-wydane: #E6EBF2; --st-wydane-t: #4A5870;
  --niebezp: #C2410C; --niebezp-t: #FFFFFF; --ostrzezenie: #A33609; --zaznaczenie: #FFF6D6; --zaznaczenie-t: #172233;
  --teraz: #C2410C; --pas: #1F5FA8;
  --wyk1: #E8590C; --wyk2: #1F5FA8;
  --font: Barlow, system-ui, sans-serif; --font-nr: 'Barlow Condensed', Barlow, sans-serif;
  --nr-waga: 600; --rej-tlo: transparent; --rej-t: inherit; --rej-ramka: none; --rej-pad: 0;
  --promien: 6px; --promien-d: 8px;
}
/* Hala: granat roboczego ubrania, pomarańcz ostrzegawczy */
:root[data-widok='hala'] {
  color-scheme: dark;
  --tlo: #10304F; --tlo2: #173D63; --tlo3: #1E4A75; --pow: #173D63; --pow2: #1E4A75;
  --tekst: #F3F7FB; --tekst2: #B9CADB; --tekst3: #94AEC8; --linia: #2F5579; --linia-m: #5A81A8;
  --akcent: #FF9233; --akcent-t: #10304F; --mocny: #F3F7FB; --mocny-t: #10304F;
  --st-plac: #F2C230; --st-plac-t: #10304F; --st-praca: #FF9233; --st-praca-t: #10304F;
  --st-wstrz: #8FB3DB; --st-wstrz-t: #0B2238; --st-gotowe: #4CC38A; --st-gotowe-t: #0B2238;
  --st-wydane: #1E4A75; --st-wydane-t: #B9CADB;
  --niebezp: #FF8F6B; --niebezp-t: #10304F; --ostrzezenie: #FFB070; --zaznaczenie: #1E4A75; --zaznaczenie-t: #F3F7FB;
  --teraz: #FF9233; --pas: #F2C230;
  --wyk1: #E56A0C; --wyk2: #3F8CDA;
  --font: Overpass, system-ui, sans-serif; --font-nr: Overpass, system-ui, sans-serif;
  --nr-waga: 800; --rej-tlo: #FFFFFF; --rej-t: #10304F; --rej-ramka: none; --rej-pad: .16em .36em .04em;
  --promien: 4px; --promien-d: 4px;
}
/* Lista spraw: biel i żółty marker */
:root[data-widok='lista'] {
  color-scheme: light;
  --tlo: #FFFFFF; --tlo2: #EEF1F5; --tlo3: #E2E7EE; --pow: #FFFFFF; --pow2: #F7F8FA;
  --tekst: #1A2231; --tekst2: #4C5566; --tekst3: #6A7484; --linia: #D6DBE3; --linia-m: #1A2231;
  --akcent: #FFDD33; --akcent-t: #1A2231; --mocny: #1A2231; --mocny-t: #FFFFFF;
  --st-plac: #FFDD33; --st-plac-t: #1A2231; --st-praca: #1A2231; --st-praca-t: #FFFFFF;
  --st-wstrz: #5A6475; --st-wstrz-t: #FFFFFF; --st-gotowe: #157A4C; --st-gotowe-t: #FFFFFF;
  --st-wydane: #EEF1F5; --st-wydane-t: #4C5566;
  --niebezp: #C62F1C; --niebezp-t: #FFFFFF; --ostrzezenie: #A82718; --zaznaczenie: #FFF3B0; --zaznaczenie-t: #1A2231;
  --teraz: #C62F1C; --pas: #1A2231;
  --wyk1: #B98300; --wyk2: #24508F;
  --font: Chivo, system-ui, sans-serif; --font-nr: Chivo, system-ui, sans-serif;
  --nr-waga: 800; --rej-tlo: transparent; --rej-t: inherit; --rej-ramka: inset 0 0 0 2px currentColor; --rej-pad: .2em .42em .16em;
  --promien: 6px; --promien-d: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 400 16px/1.38 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 700; line-height: 1.12; }
h1 { font-size: 30px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; font-weight: 700; }
a { color: inherit; }
small { font-size: 14px; }
.ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cichy { color: var(--tekst2); }
.liczby { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2.5px solid var(--tekst); outline-offset: 2px; }
.ladowanie { padding: 40px 24px; color: var(--tekst2); }
.pusto { padding: 28px 16px; color: var(--tekst2); display: grid; gap: 12px; justify-items: start; }

/* Numer rejestracyjny */
.rej { display: inline-block; font-family: var(--font-nr); font-weight: var(--nr-waga); background: var(--rej-tlo); color: var(--rej-t); box-shadow: var(--rej-ramka); padding: var(--rej-pad); border-radius: 4px; line-height: 1; white-space: nowrap; flex: none; vertical-align: middle; }
.rej-s { font-size: 17px; } .rej-m { font-size: 21px; } .rej-l { font-size: 30px; } .rej-xl { font-size: 54px; }
.rej-pole { display: block; }
.rej-pole input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--linia-m); border-radius: var(--promien); background: var(--pow); color: var(--tekst); font-family: var(--font-nr); font-weight: var(--nr-waga); font-size: 19px; }
.rej-pole.duze input { height: 58px; font-size: 32px; }
.rej-pole input::placeholder { color: var(--tekst3); font-family: var(--font); font-weight: 400; font-size: 16px; }

/* Przyciski */
.guzik { appearance: none; border: 0; border-radius: var(--promien); background: var(--pow); color: var(--tekst); padding: 0 16px; min-height: 44px; font-weight: 700; cursor: pointer; line-height: 1.15; box-shadow: inset 0 0 0 1.5px var(--linia-m); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; justify-content: center; text-align: center; }
.guzik:hover { filter: brightness(.97); }
.guzik:active { transform: translateY(1px); }
.guzik:disabled { opacity: .55; cursor: not-allowed; }
.guzik.solar { background: var(--akcent); color: var(--akcent-t); box-shadow: none; }
.guzik.guma { background: var(--mocny); color: var(--mocny-t); box-shadow: none; }
.guzik.alert { background: var(--st-praca); color: var(--st-praca-t); box-shadow: none; }
.guzik.safety { background: var(--st-gotowe); color: var(--st-gotowe-t); box-shadow: none; }
.guzik.caution { background: var(--st-wstrz); color: var(--st-wstrz-t); box-shadow: none; }
.guzik.fire { background: var(--niebezp); color: var(--niebezp-t); box-shadow: none; }
.guzik.plaski { background: transparent; box-shadow: none; padding: 0 6px; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.guzik.duzy { font-size: 20px; min-height: 64px; width: 100%; }

/* Belka górna */
.belka { position: sticky; top: 0; z-index: 30; background: var(--pow); border-bottom: 1px solid var(--linia); display: flex; gap: 10px 14px; align-items: center; padding: 10px 24px; min-height: 64px; flex-wrap: wrap; }
.znak { font-weight: 700; font-size: 24px; text-decoration: none; color: var(--akcent); }
.nawi { display: flex; gap: 2px 16px; flex: 1; min-width: 0; flex-wrap: wrap; }
.nawi a { text-decoration: none; padding: 6px 0; font-weight: 500; white-space: nowrap; box-shadow: 0 3px 0 transparent; }
.nawi a:hover { box-shadow: 0 3px 0 var(--linia-m); }
.nawi a[aria-current='page'] { font-weight: 700; color: var(--akcent); box-shadow: 0 3px 0 var(--akcent); }
.nawi .licznik { background: var(--niebezp); color: var(--niebezp-t); border-radius: 9px; font-size: 13px; padding: 0 6px; margin-left: 5px; font-weight: 700; display: inline-block; line-height: 18px; }
.szukaj { position: relative; width: 150px; flex: none; }
.szukaj-lista { position: absolute; top: calc(100% + 6px); right: 0; width: 380px; max-width: calc(100vw - 32px); background: var(--pow); border: 1px solid var(--linia-m); border-radius: var(--promien); z-index: 40; max-height: 70vh; overflow: auto; }
.szukaj-lista button { all: unset; box-sizing: border-box; display: flex; gap: 10px; align-items: center; padding: 8px 10px; width: 100%; cursor: pointer; }
.szukaj-lista button:hover, .szukaj-lista button.akt { background: var(--tlo2); }
.szukaj-lista small { display: block; color: var(--tekst2); }
.kto { display: flex; gap: 10px; align-items: center; white-space: nowrap; flex-wrap: wrap; }
.jezyki { display: inline-flex; border: 1px solid var(--linia-m); border-radius: var(--promien); overflow: hidden; flex: none; }
.jezyki button { appearance: none; border: 0; background: transparent; color: inherit; font-size: 14px; font-weight: 700; min-height: 32px; padding: 0 9px; cursor: pointer; line-height: 1.2; }
.jezyki button[aria-pressed='true'] { background: var(--mocny); color: var(--mocny-t); }
.pole-cena input { width: 110px; padding: 3px 6px; text-align: right; }

.strona { padding: 20px 24px 48px; max-width: 1640px; margin: 0 auto; }
.naglowek { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; margin-bottom: 16px; }
.naglowek h1::first-letter { text-transform: uppercase; }
.naglowek .zdanie { color: var(--tekst2); }
.dzien-nawi { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* Układ Listy: menu po lewej */
@media (min-width: 981px) {
  [data-widok='lista'] .belka { position: fixed; inset: 0 auto 0 0; width: 216px; padding: 20px 16px; background: var(--mocny); color: var(--mocny-t); border: 0; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 14px; overflow-y: auto; }
  [data-widok='lista'] .znak { color: inherit; }
  [data-widok='lista'] .belka .guzik.solar { order: 2; }
  [data-widok='lista'] .szukaj { width: 100%; order: 1; }
  [data-widok='lista'] .nawi { order: 3; flex: 0 0 auto; flex-direction: column; gap: 2px; }
  [data-widok='lista'] .nawi a { display: flex; align-items: center; min-height: 42px; padding: 0 10px; border-radius: var(--promien); box-shadow: none; color: inherit; }
  [data-widok='lista'] .nawi a[aria-current='page'] { background: var(--pow); color: var(--tekst); box-shadow: none; }
  [data-widok='lista'] .kto { order: 4; margin-top: auto; }
  [data-widok='lista'] .kto .guzik.plaski { color: inherit; }
  [data-widok='lista'] .jezyki { border-color: currentColor; }
  [data-widok='lista'] .jezyki button[aria-pressed='true'] { background: var(--pow); color: var(--tekst); }
  [data-widok='lista'] .strona, [data-widok='lista'] .demo-pas { margin-left: 216px; }
  [data-widok='lista'] .strona { max-width: none; }
}
[data-widok='lista'] .naglowek.dzien h1 { font-size: 17px; font-weight: 400; color: var(--tekst2); }

/* Taśma: dzień w poziomie */
.tasma { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); overflow-x: auto; }
.tasma-wew { min-width: 1120px; display: grid; grid-template-columns: 96px minmax(0, 1fr); }
.tasma-os { position: relative; height: 34px; display: grid; grid-template-columns: repeat(var(--godzin), minmax(0, 1fr)); align-items: center; font-size: 14px; color: var(--tekst2); border-bottom: 1px solid var(--linia); }
.tasma-os span { padding-left: 6px; }
.tasma-teraz { position: absolute; top: 5px; transform: translateX(-50%); padding: 1px 8px; border-radius: 4px; background: var(--teraz); color: var(--niebezp-t); font-weight: 700; z-index: 3; }
.tasma-rog { border-bottom: 1px solid var(--linia); }
.tasma-et { display: flex; flex-direction: column; justify-content: center; padding: 0 12px; border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.tasma-et b { font-size: 17px; }
.tasma-et small { color: var(--tekst2); }
.tasma-tor { position: relative; height: 150px; border-bottom: 1px solid var(--linia); background-image: repeating-linear-gradient(to right, var(--linia) 0 1px, transparent 1px calc(100% / var(--godzin))); }
.tasma-tor:last-child, .tasma-et:nth-last-child(2) { border-bottom: 0; }
.tasma-tor.cel { background-color: var(--tlo2); }
.b { position: absolute; top: 30px; height: 110px; border: 0; border-radius: 5px; padding: 6px 8px; text-align: left; overflow: hidden; cursor: pointer; touch-action: none; z-index: 1; }
.b.waski { padding: 6px 4px; }
.b-nr { display: block; font-family: var(--font-nr); font-weight: var(--nr-waga); font-size: 19px; line-height: 1.05; }
.b.waski .b-nr { font-size: 15px; line-height: 1.12; }
.b-op { display: block; margin-top: 4px; font-size: 14px; line-height: 1.2; }
.b-uwaga { display: block; margin-top: 4px; font-size: 13px; line-height: 1.15; font-weight: 700; color: var(--ostrzezenie); }
.b.s-umowione { background: var(--pow); box-shadow: inset 0 0 0 1.5px var(--akcent); }
.b.s-na_placu { background: var(--st-plac); color: var(--st-plac-t); box-shadow: inset 0 0 0 2px var(--st-plac-t); }
.b.s-na_placu .b-uwaga { color: inherit; }
.b.s-w_pracy { top: 8px; height: 132px; background: var(--st-praca); color: var(--st-praca-t); }
.b.s-gotowe { background: var(--st-gotowe); color: var(--st-gotowe-t); }
.b.s-wydane { background: var(--st-wydane); color: var(--st-wydane-t); }
.tasma-ogon { position: absolute; top: 8px; height: 20px; padding: 0 8px; background-color: var(--st-praca); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .18) 0 6px, transparent 6px 12px); color: var(--st-praca-t); font-size: 14px; font-weight: 700; line-height: 20px; white-space: nowrap; overflow: hidden; z-index: 1; }
.tasma-linia { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--teraz); }
.t-duch { position: fixed; z-index: 60; pointer-events: none; padding: 6px 10px; border-radius: 5px; background: var(--mocny); color: var(--mocny-t); font-family: var(--font-nr); font-weight: var(--nr-waga); font-size: 19px; transform: translate(-30px, -14px); }
.t-cel { position: absolute; top: 30px; height: 110px; z-index: 2; border: 2px dashed var(--tekst); border-radius: 5px; background: var(--pow2); pointer-events: none; font-size: 14px; font-weight: 700; padding: 2px 5px; overflow: hidden; }
.t-cel.nie { border-color: var(--niebezp); color: var(--niebezp); }
.dzien-kol { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px 40px; margin-top: 22px; }
.dzien-kol h2 { margin-bottom: 8px; }
.wiersz { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 10px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--linia); background: none; color: inherit; text-align: left; cursor: pointer; align-items: start; }
.wiersz:hover b { color: var(--akcent); }
[data-widok='lista'] .wiersz:hover b { color: inherit; text-decoration: underline; }
.wiersz .rej { font-size: 19px; }
.wiersz small { display: block; color: var(--tekst2); font-size: 15px; }
.teraz-nr { font-size: 44px; }
.postepy { display: grid; grid-template-columns: repeat(var(--krokow), minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.postepy i { height: 8px; border-radius: 2px; background: var(--linia); }
.postepy i.z { background: var(--st-praca); }
.stanowisko-teraz { width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; display: block; }
.stanowisko-teraz + .stanowisko-teraz { margin-top: 18px; }
.ponad { color: var(--ostrzezenie); font-weight: 700; }
.plan-uwaga { margin-top: 14px; padding: 10px 12px; background: var(--zaznaczenie); color: var(--zaznaczenie-t); border-radius: var(--promien); font-weight: 600; }
.plan-uwaga.ok { background: var(--tlo2); color: var(--tekst2); font-weight: 400; }

/* Hala: auto jedzie przez ekran tak jak przez warsztat */
.hala { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }
.strefa { flex: 1 1 240px; min-width: 0; }
.strefa.srodek { flex: 3 1 520px; display: flex; flex-direction: column; }
.strefa.wyjazd { flex: 1 1 190px; }
.strefa h2 { margin-bottom: 8px; font-weight: 800; }
.przyjazd { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 0 8px; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--linia-m); background: none; color: inherit; text-align: left; cursor: pointer; }
.przyjazd small { display: block; color: var(--tekst2); font-size: 15px; }
.przyjazd .b-uwaga { font-size: 15px; }
.stos { display: grid; gap: 10px; }
.miejsce-placu { display: block; width: 100%; padding: 12px; border: 2px dashed var(--linia-m); border-radius: var(--promien); background: none; color: inherit; text-align: left; cursor: pointer; }
.miejsce-placu .g { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; color: var(--tekst2); }
.miejsce-placu .rej { display: block; width: max-content; margin-top: 8px; font-size: 25px; background: none; color: inherit; padding: 0; box-shadow: none; }
.miejsce-placu small { display: block; margin-top: 4px; color: var(--tekst2); font-size: 15px; }
.miejsce-placu.pilne { background: var(--akcent); color: var(--akcent-t); border-color: var(--akcent); }
.miejsce-placu.pilne .g, .miejsce-placu.pilne small { color: inherit; }
.stanowiska { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 16px; }
.bay { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 16px; border: 2px dashed var(--pas); border-radius: var(--promien); background: none; color: inherit; text-align: left; font: inherit; }
button.bay { cursor: pointer; background: var(--pow); }
.bay .g { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.bay svg.auto { display: block; width: 100%; height: auto; margin: 6px 0; color: var(--st-praca); }
.bay .rej { font-size: 38px; align-self: flex-start; }
.bay ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bay li { display: flex; gap: 8px; align-items: center; color: var(--tekst2); }
.bay li.dalej { color: inherit; font-weight: 800; }
.bay li svg { flex: none; }
.pas-wjazdu { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--pas); }
.pas-wjazdu i { flex: 1; border-top: 2px dashed currentColor; }
.pas-wjazdu svg { margin-left: -10px; fill: currentColor; }
.wydane-lista { list-style: none; margin: 0; padding: 0; color: var(--tekst2); display: grid; gap: 4px; }
.wydane-lista button { all: unset; cursor: pointer; }
.pusto-bok { color: var(--tekst2); padding: 12px 0; border-top: 1px solid var(--linia-m); }

/* Lista spraw */
.lista-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: 32px; align-items: start; }
.sprawy-tytul { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.08; margin-bottom: 8px; }
.sprawy-plan { margin-bottom: 16px; }
.sprawa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px; border-bottom: 2px solid var(--linia-m); }
.sprawa:last-child { border-bottom: 0; }
.sprawa.pilna { background: var(--akcent); color: var(--akcent-t); border-radius: var(--promien-d); border-bottom: 0; }
.sprawa.pilna .rej { background: #fff; color: #1A2231; }
.sprawa-otw { all: unset; flex: 1 1 320px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; cursor: pointer; }
.sprawa-otw:focus-visible { outline: 2.5px solid currentColor; outline-offset: 3px; }
.sprawa h3 { font-size: 21px; line-height: 1.15; }
.sprawa p { margin-top: 3px; color: var(--tekst2); }
.sprawa.pilna p { color: inherit; }
.sprawa-tekst { flex: 1 1 240px; min-width: 0; }
.sprawa .rej { font-size: 21px; }
.dzien-poKolei { background: var(--tlo2); padding: 20px 20px 16px; border-radius: var(--promien-d); }
.dzien-poKolei h2 { margin-bottom: 8px; font-weight: 800; }
.dzien-poKolei ol { list-style: none; margin: 0; padding: 0; }
.kolejny { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; min-height: 40px; padding: 0 8px; margin: 0 -8px; border: 0; border-radius: var(--promien); background: none; color: inherit; text-align: left; cursor: pointer; width: calc(100% + 16px); }
.kolejny:hover { background: var(--tlo3); }
.kolejny.s-wydane { color: var(--tekst2); }
.kolejny.s-w_pracy { background: var(--st-praca); color: var(--st-praca-t); font-weight: 700; }
.kolejny.s-na_placu { background: var(--st-plac); color: var(--st-plac-t); font-weight: 700; }
.kolejny.s-gotowe { background: var(--st-gotowe); color: var(--st-gotowe-t); font-weight: 700; }

/* Panel boczny */
.panel-tlo { position: fixed; inset: 0; background: rgba(10, 18, 30, .5); z-index: 50; display: flex; justify-content: flex-end; }
.panel { width: 600px; max-width: 100vw; height: 100%; background: var(--pow); overflow-y: auto; outline: 0; animation: wjazd .16s ease-out; }
.panel.szeroki { width: 800px; }
@keyframes wjazd { from { transform: translateX(26px); opacity: .6; } }
.p-glowa { padding: 14px 18px 12px; position: sticky; top: 0; z-index: 5; background: var(--tlo2); }
.p-glowa.s-umowione { background: var(--pow); border-bottom: 1px solid var(--linia-m); }
.p-glowa.s-na_placu { background: var(--st-plac); color: var(--st-plac-t); }
.p-glowa.s-w_pracy { background: var(--st-praca); color: var(--st-praca-t); }
.p-glowa.s-wstrzymane { background: var(--st-wstrz); color: var(--st-wstrz-t); }
.p-glowa.s-gotowe { background: var(--st-gotowe); color: var(--st-gotowe-t); }
.p-glowa.s-wydane, .p-glowa.s-anulowane, .p-glowa.s-nie_przyjechal { background: var(--st-wydane); color: var(--st-wydane-t); }
.p-glowa .rzad { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.p-glowa .stan { font-weight: 700; }
.p-glowa h2 { font-size: 17px; margin-top: 7px; }
.p-glowa .x { background: rgba(127, 127, 127, .22); color: inherit; border: 0; border-radius: 4px; width: 36px; height: 36px; font-size: 20px; cursor: pointer; line-height: 1; }
.p-glowa .rej { background: none; color: inherit; padding: 0; box-shadow: none; }
.p-tresc { padding: 16px 18px 30px; display: grid; gap: 20px; }
.p-sek { display: grid; gap: 8px; }
.p-sek > h3 { border-bottom: 1px solid var(--linia-m); padding-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; }
.akcje { display: flex; gap: 8px; flex-wrap: wrap; }
.kontakt { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: 14px; font-weight: 500; color: var(--tekst2); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--linia-m); }
.tabela td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--linia); vertical-align: middle; }
.tabela .kw, .tabela th.kw { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 0; }
.tabela tr.podsuma td { border-bottom: 0; font-weight: 700; font-size: 18px; padding-top: 10px; }
.tabela tr.klik { cursor: pointer; }
.tabela tr.klik:hover td { background: var(--tlo2); }
.znacznik { font-size: 13px; font-weight: 700; padding: 1px 6px; border-radius: 3px; background: var(--mocny); color: var(--mocny-t); white-space: nowrap; }
.znacznik.solar { background: var(--st-plac); color: var(--st-plac-t); }
.znacznik.caution { background: var(--st-wstrz); color: var(--st-wstrz-t); }
.znacznik.safety { background: var(--st-gotowe); color: var(--st-gotowe-t); }
.znacznik.fire { background: var(--niebezp); color: var(--niebezp-t); }
.znacznik.jasny { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1px var(--linia-m); }
.decyzja { background: var(--pow2); border: 1px solid var(--linia-m); border-radius: var(--promien); padding: 10px 12px; display: grid; gap: 8px; }
.pole { display: grid; gap: 3px; font-size: 14px; font-weight: 500; color: var(--tekst2); min-width: 0; }
.pole input, .pole select, .pole textarea { font-size: 16px; font-weight: 400; color: var(--tekst); padding: 9px 10px; border: 1px solid var(--linia-m); background: var(--pow); border-radius: var(--promien); width: 100%; }
.siatka-pol { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.wybor { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { appearance: none; border: 0; background: var(--pow); box-shadow: inset 0 0 0 1px var(--linia-m); border-radius: var(--promien); padding: 7px 11px; cursor: pointer; font-weight: 500; font-size: 15px; text-align: left; line-height: 1.2; }
.chip small { display: block; font-weight: 400; color: var(--tekst2); font-size: 13px; }
.chip[aria-pressed='true'] { background: var(--mocny); color: var(--mocny-t); box-shadow: none; }
.chip[aria-pressed='true'] small { color: inherit; }
.dziennik { list-style: none; margin: 0; padding: 0; font-size: 15px; display: grid; gap: 3px; }
.dziennik time { color: var(--tekst2); margin-right: 6px; font-variant-numeric: tabular-nums; }
.zdjecia { display: flex; gap: 8px; flex-wrap: wrap; }
.zdjecia img { width: 112px; height: 84px; object-fit: cover; display: block; border-radius: 4px; }
.kola-mm { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 2px 4px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kolo-mm { background: var(--tlo2); padding: 1px 6px; min-width: 60px; display: flex; gap: 5px; justify-content: space-between; border-radius: 3px; }
.kolo-mm small { font-size: 12px; font-weight: 500; color: var(--tekst2); }
.kolo-mm.slabo { background: var(--st-plac); color: var(--st-plac-t); } .kolo-mm.slabo small { color: inherit; }
.kolo-mm.zle { background: var(--niebezp); color: var(--niebezp-t); } .kolo-mm.zle small { color: inherit; }
.komplet { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linia); flex-wrap: wrap; }
.komplet b { display: block; }
.t { display: block; background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; }

/* Regał */
.regal-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.regaly { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.regal { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); padding: 8px 10px 10px; }
.regal h3 { font-weight: 700; font-size: 17px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: baseline; }
.regal h3 small { font-weight: 400; color: var(--tekst2); }
.polki { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0; }
.miejsce { appearance: none; background: none; border: 0; border-bottom: 2px solid var(--linia-m); padding: 3px 2.5px 0; cursor: pointer; height: 44px; display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5px; position: relative; min-width: 0; }
.miejsce i { display: block; height: 7px; border-radius: 2.5px; background: var(--akcent); flex: none; }
.miejsce.lato i { background: var(--tekst3); }
.miejsce.pusty { cursor: default; }
.miejsce.pusty::after { content: ''; position: absolute; left: 50%; bottom: 13px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--tekst3); opacity: .55; }
.miejsce.jutro { background: var(--st-plac); }
.miejsce.zalegle i { background: var(--niebezp); }
.miejsce.szukane { background: var(--pow2); box-shadow: inset 0 0 0 2px var(--niebezp); }
.miejsce.wybrane { background: var(--pow2); box-shadow: inset 0 0 0 2px var(--tekst); }
.miejsce:not(.pusty):hover { background: var(--tlo2); }
.legenda { display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: 14px; margin: 0 0 10px; align-items: center; }
.legenda span { display: inline-flex; gap: 6px; align-items: center; }
.legenda i { display: inline-block; width: 16px; height: 9px; border-radius: 2px; background: var(--akcent); }
.legenda i.lato { background: var(--tekst3); } .legenda i.zalegle { background: var(--niebezp); } .legenda i.jutro { background: var(--st-plac); }
.lista-prosta { display: grid; }
.lista-prosta > * { display: flex; gap: 9px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linia); }
.kod-miejsca { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zawieszka { background: var(--pow); border: 1px solid var(--linia-m); border-radius: var(--promien); padding: 12px; display: grid; gap: 8px; }
.zakladki { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.zakladki button { appearance: none; border: 0; background: transparent; padding: 7px 11px; cursor: pointer; font-weight: 500; box-shadow: 0 3px 0 transparent; }
.zakladki button[aria-pressed='true'] { box-shadow: 0 3px 0 var(--akcent); font-weight: 700; }

/* Kasa */
.kasa-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.do-kasy { background: var(--pow); padding: 12px 14px; border: 1px solid var(--linia); border-radius: var(--promien-d); display: grid; gap: 9px; }
.do-kasy .rzad { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.do-kasy .kwota { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kasa-suma { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); padding: 14px; display: grid; gap: 8px; }
.kasa-suma .kwota { font-size: 34px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tlo-focal { background: var(--tlo2); padding: 12px 14px; border-radius: var(--promien); }

/* Pulpit szefa */
.szef-zdanie { font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; line-height: 1.1; max-width: 24ch; }
.szef-podzdanie { font-size: 18px; max-width: 72ch; margin-top: 10px; }
.szef-gora { margin-bottom: 20px; }
.rok { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); padding: 14px 16px 12px; margin: 16px 0 16px; }
.rok-glowa { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.rok-glowa b { font-size: 19px; font-variant-numeric: tabular-nums; }
.rok svg { display: block; width: 100%; height: auto; }
.rok-legenda { display: flex; gap: 16px; font-size: 14px; flex-wrap: wrap; margin-top: 6px; color: var(--tekst2); }
.rok-legenda span { display: inline-flex; gap: 6px; align-items: center; }
.rok-legenda i { width: 14px; height: 14px; border-radius: 2px; background: var(--wyk1); display: inline-block; }
.rok-legenda i.w { background: var(--wyk2); } .rok-legenda i.r { background: none; box-shadow: inset 0 0 0 1.5px var(--tekst3); }
.szef-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.szef-szeroka { grid-column: 1 / -1; }
.szef-dwa { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 36px; }
.szef-karta { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); padding: 12px 14px 14px; display: grid; gap: 8px; align-content: start; }
.stanowisko-wiersz { display: grid; grid-template-columns: 82px auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--linia); width: 100%; }
.postep { height: 7px; background: var(--tlo3); position: relative; margin-top: 4px; }
.postep b { position: absolute; inset: 0 auto 0 0; background: var(--st-praca); }
.postep b.spoznione { background: var(--niebezp); }
.pasek-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; font-size: 15px; }
.pasek-wiersz .pasek { grid-column: 1 / -1; height: 7px; background: var(--tlo3); border-radius: 0 3px 3px 0; overflow: hidden; }
.pasek-wiersz .pasek b { display: block; height: 100%; background: var(--wyk1); border-radius: 0 3px 3px 0; }
.pasek-wiersz .pasek b.w { background: var(--wyk2); }
.duzo { font-size: 34px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }

/* Telefon mechanika */
.m { max-width: 520px; margin: 0 auto; padding: 14px 16px 96px; min-height: 100dvh; }
.m .guzik { font-weight: 700; }
.m-gora { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.m-gora b { font-weight: 700; font-size: 20px; }
.m h2 { font-size: 17px; color: var(--tekst2); margin: 20px 0 8px; font-weight: 700; }
.m h1 { font-size: 26px; }
.m-karta { width: 100%; text-align: left; background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); color: inherit; padding: 12px; display: grid; gap: 6px; cursor: pointer; }
.m-karta + .m-karta { margin-top: 8px; }
.m-karta.wstrz { border-color: var(--st-wstrz); border-width: 2px; }
.m-karta .rzad { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.m-karta .opis { font-size: 16px; line-height: 1.25; }
.m-tag { font-size: 14px; font-weight: 700; background: var(--st-plac); color: var(--st-plac-t); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.m-tag.nieb { background: var(--st-wstrz); color: var(--st-wstrz-t); }
.m-tag.ciemny { background: var(--tlo3); color: var(--tekst); }
.m-dol { position: fixed; bottom: 0; left: 0; right: 0; background: var(--pow); border-top: 1px solid var(--linia); display: flex; justify-content: center; z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.m-dol a { flex: 1; max-width: 200px; text-align: center; padding: 20px 4px 18px; font-weight: 700; text-decoration: none; }
.m-dol a[aria-current='page'] { color: var(--akcent); box-shadow: inset 0 3px 0 var(--akcent); }
[data-widok='lista'] .m-dol a[aria-current='page'] { background: var(--mocny); color: var(--mocny-t); box-shadow: none; }
.m-naglowek { text-align: center; padding: 4px 0 2px; display: grid; gap: 7px; justify-items: center; }
.m-naglowek .auto { font-size: 18px; }
.m-pasek-stanu { margin: 0 -16px 12px; padding: 10px 16px; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.m-kroki { display: grid; gap: 7px; margin-top: 12px; }
.krok { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); overflow: hidden; }
.krok.zrobiony { background: transparent; }
.krok-przycisk { appearance: none; width: 100%; background: none; border: 0; color: inherit; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center; text-align: left; padding: 12px; cursor: pointer; min-height: 68px; }
.krok-przycisk:disabled { cursor: default; }
.krok-przycisk .pole-z { width: 42px; height: 42px; border-radius: var(--promien); border: 2px solid var(--linia-m); display: grid; place-items: center; }
.krok.zrobiony .pole-z { background: var(--st-gotowe); border-color: var(--st-gotowe); }
.krok-przycisk svg { width: 26px; height: 26px; fill: none; stroke: var(--st-gotowe-t); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.krok-nazwa { font-size: 18px; font-weight: 700; line-height: 1.15; display: block; }
.krok-sz { color: var(--tekst2); display: block; margin-top: 3px; }
.krok-sz.wielki { font-size: 34px; font-weight: 700; color: var(--tekst); line-height: 1.05; }
.krok.zrobiony .krok-nazwa { opacity: .75; }
.pomiar { padding: 0 12px 14px; display: grid; gap: 10px; }
.auto-gora { display: grid; grid-template-columns: 1fr 86px 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
.auto-gora .kadlub { grid-column: 2; grid-row: 1 / 3; background: var(--tlo3); border-radius: 30px 30px 12px 12px; position: relative; }
.auto-gora .kadlub::after { content: attr(data-przod); position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--tekst2); }
.opona-p { appearance: none; border: 1px solid var(--linia-m); background: var(--tlo2); color: var(--tekst); border-radius: var(--promien-d); min-height: 86px; cursor: pointer; display: grid; place-items: center; padding: 4px; }
.opona-p.akt { box-shadow: 0 0 0 3px var(--akcent); }
.opona-p .kreda { font-size: 15px; font-weight: 700; color: var(--tekst2); }
.opona-p .wart { font-size: 32px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.opona-p.slabo .wart { color: var(--ostrzezenie); } .opona-p.zle .wart { color: var(--niebezp); }
.klawiatura { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.klawiatura button { appearance: none; border: 1px solid var(--linia-m); border-radius: var(--promien); background: var(--pow); color: var(--tekst); font-size: 26px; font-weight: 700; min-height: 54px; cursor: pointer; }
.klawiatura button:active { background: var(--tlo2); }
.m-koniec { display: grid; gap: 8px; margin-top: 14px; }
.m-rzad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-arkusz { position: fixed; inset: auto 0 0 0; background: var(--pow); padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); z-index: 40; border-top: 3px solid var(--akcent); display: grid; gap: 10px; max-height: 88dvh; overflow: auto; }
.m-arkusz-tlo { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 39; }
.m-arkusz h3 { font-size: 20px; }
.m-kod { font-size: 58px; font-weight: 700; color: var(--akcent); line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
[data-widok='lista'] .m-kod { color: var(--tekst); }
.m-info { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); padding: 12px; display: grid; gap: 4px; }
.m-info.zle { border: 2px solid var(--niebezp); } .m-info.slabo, .m-info.wstrz { border: 2px solid var(--st-wstrz); }
.m-licz { color: var(--tekst2); }

/* Bieżąca praca na telefonie: te same dane, trzy układy */
.praca { display: grid; gap: 12px; }
.praca-glowa { display: block; width: 100%; border: 0; border-radius: var(--promien-d); background: var(--st-praca); color: var(--st-praca-t); padding: 14px 16px 16px; text-align: left; cursor: pointer; }
.praca-glowa .rej { font-size: 56px; background: none; color: inherit; padding: 0; box-shadow: none; display: block; width: max-content; max-width: 100%; }
.praca-glowa b { display: block; margin-top: 6px; }
.praca-czas { display: block; margin-top: 8px; font-size: 15px; }
.praca-kroki { list-style: none; margin: 0; padding: 0; background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); overflow: hidden; }
.praca-kroki li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px; border-bottom: 1px solid var(--linia); color: var(--tekst2); }
.praca-kroki li:last-child { border-bottom: 0; }
.praca-kroki li.dalej { background: var(--zaznaczenie); color: var(--zaznaczenie-t); padding: 12px 14px; }
.praca-kroki li.dalej b { display: block; font-size: 20px; }
.praca-dalej { display: block; padding: 12px 14px; border: 2px solid var(--ostrzezenie); border-radius: var(--promien-d); background: none; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.praca-auto { display: none; }
[data-widok='hala'] .praca .guzik, [data-widok='lista'] .praca .guzik { background: var(--akcent); color: var(--akcent-t); }
[data-widok='hala'] .praca-glowa { background: var(--pow); color: var(--tekst); border: 2px dashed var(--pas); border-radius: var(--promien); }
[data-widok='hala'] .praca-glowa .rej { font-size: 42px; background: var(--rej-tlo); color: var(--rej-t); padding: var(--rej-pad); }
[data-widok='hala'] .praca-auto { display: block; width: 100%; height: auto; margin-bottom: 10px; color: var(--st-praca); }
[data-widok='hala'] .praca-czas { color: var(--ostrzezenie); font-weight: 700; }
[data-widok='hala'] .praca-kroki { background: none; border: 0; }
[data-widok='hala'] .praca-kroki li:not(.dalej) { display: none; }
[data-widok='hala'] .praca-kroki li.dalej { background: none; color: inherit; padding: 0; }
[data-widok='hala'] .praca-kroki li.dalej b { font-size: 30px; font-weight: 800; }
[data-widok='hala'] .praca-kroki li.dalej svg { display: none; }
[data-widok='lista'] .praca-glowa { background: none; color: inherit; padding: 0; }
[data-widok='lista'] .praca-glowa .rej { font-size: 23px; padding: var(--rej-pad); box-shadow: var(--rej-ramka); }
[data-widok='lista'] .praca-glowa b { font-weight: 400; color: var(--tekst2); }
[data-widok='lista'] .praca-kroki { background: none; border: 0; padding: 26px 0; }
[data-widok='lista'] .praca-kroki li:not(.dalej) { display: none; }
[data-widok='lista'] .praca-kroki li.dalej { background: none; padding: 0; }
[data-widok='lista'] .praca-kroki li.dalej b { font-size: 56px; line-height: 1.03; font-weight: 800; }
[data-widok='lista'] .praca-kroki li.dalej span span { font-size: 26px; font-weight: 600; }
[data-widok='lista'] .praca-kroki li.dalej svg { display: none; }
[data-widok='lista'] .praca-dalej { background: var(--mocny); color: var(--mocny-t); border: 0; }

/* Warsztat na telefonie kierownika */
.przeglad { display: grid; gap: 14px; }
.przeglad h2 { margin: 0 0 2px; color: var(--tekst); }
.mini-tasma { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); padding: 10px 12px 12px; }
.mini-os { display: flex; justify-content: space-between; font-size: 13px; color: var(--tekst2); }
.mini-tor { position: relative; height: 62px; margin-top: 4px; }
.mini-tor i { position: absolute; height: 24px; border-radius: 2px; background: var(--st-wydane); }
.mini-tor i.r1 { top: 4px; } .mini-tor i.r2 { top: 34px; }
.mini-tor i.s-umowione { background: var(--pow); box-shadow: inset 0 0 0 1.5px var(--akcent); }
.mini-tor i.s-na_placu { background: var(--st-plac); box-shadow: inset 0 0 0 2px var(--st-plac-t); }
.mini-tor i.s-w_pracy { background: var(--st-praca); }
.mini-tor i.s-gotowe { background: var(--st-gotowe); }
.mini-tor u { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--teraz); }
.mini-stanowiska { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini-bay { display: block; width: 100%; padding: 12px; border: 2px dashed var(--pas); border-radius: var(--promien); background: none; color: inherit; text-align: left; cursor: pointer; }
.mini-bay.zajety { background: var(--st-praca); color: var(--st-praca-t); border-color: var(--st-praca); }
.mini-bay small { display: block; font-size: 14px; font-weight: 700; }
.mini-bay b { display: block; margin-top: 8px; font-size: 22px; line-height: 1; font-weight: 800; white-space: nowrap; }
.mini-bay span { display: block; margin-top: 6px; font-size: 15px; }
.kwota-duza { font-size: 40px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.poz-tel { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linia); }
.poz-tel .kw { text-align: right; white-space: nowrap; flex: none; }
.poz-tel small { display: block; color: var(--tekst2); }
.przeglad-liczby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.przeglad-liczby div { padding: 10px 12px; background: var(--pow); border: 1px solid var(--linia); border-radius: var(--promien-d); }
.przeglad-liczby b { display: block; font-size: 22px; }
.przeglad-liczby span { color: var(--tekst2); }
.spr-tel { display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 2px solid var(--linia-m); background: none; color: inherit; text-align: left; cursor: pointer; }
.spr-tel b { display: block; font-size: 18px; }
.spr-tel span { color: var(--tekst2); }
.spr-tel.pilna { background: var(--akcent); color: var(--akcent-t); border-radius: var(--promien-d); border: 0; }
.spr-tel.pilna span { color: inherit; }
.m-widoki { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* Logowanie */
.wejscie { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); }
.wejscie-lewa { padding: clamp(24px, 6vw, 72px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; background: var(--tlo2); }
.wejscie-znak { font-weight: 700; font-size: clamp(46px, 6.6vw, 96px); line-height: .96; color: var(--akcent); }
[data-widok='lista'] .wejscie-znak { color: var(--tekst); }
.wejscie-lewa p { max-width: 42ch; font-size: 20px; margin-top: 14px; }
.wejscie-lewa p.wejscie-firma { font-size: 16px; margin-top: 0; }
.wejscie-rzad { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wejscie-prawa { background: var(--pow); padding: clamp(24px, 5vw, 56px); display: grid; align-content: center; gap: 16px; }
.wejscie-prawa form { display: grid; gap: 12px; }
.blad-pola { color: var(--niebezp); font-weight: 700; }
.konta { display: grid; gap: 6px; }
.konta button { appearance: none; border: 0; background: var(--pow); box-shadow: inset 0 0 0 1px var(--linia-m); border-radius: var(--promien); display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 48px; padding: 0 12px; cursor: pointer; text-align: left; }
.konta button:hover { background: var(--tlo2); }

.demo-pas { background: var(--st-wydane); color: var(--st-wydane-t); font-size: 14px; text-align: center; padding: 3px 12px; }
.komunikat { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--mocny); color: var(--mocny-t); padding: 10px 16px; border-radius: var(--promien); font-weight: 700; z-index: 70; max-width: calc(100vw - 32px); }
.komunikat.blad { background: var(--niebezp); color: var(--niebezp-t); }
.tel .komunikat { bottom: 74px; }

#druk { display: none; }
@media print {
  body { background: #fff; color: #000; }
  #app { display: none; }
  #druk { display: block; color: #000; font-size: 13px; }
  .druk-strona { break-after: page; padding: 8mm; }
  .druk-zawieszki { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
  .druk-zawieszka { border: 1.5px dashed #000; padding: 6mm; break-inside: avoid; }
  .druk-zawieszka .kolo { font-size: 44px; font-weight: 800; }
  .druk-zawieszka .kod { font-size: 26px; font-weight: 800; }
}

@media (max-width: 1520px) { .kto-imie { display: none; } }
@media (max-width: 1180px) {
  .kasa-uklad, .regal-uklad, .lista-uklad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) { .regaly { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .belka { position: static; padding: 8px 12px; }
  .znak { margin-right: auto; }
  .nawi { order: 4; flex-basis: 100%; }
  .szukaj { order: 3; flex: 1 0 100%; width: auto; min-width: 0; }
  .szukaj-lista { left: 0; right: auto; width: 100%; }
  .kto-imie { display: none; }
  .strona { padding: 14px 12px 40px; }
  .wejscie { grid-template-columns: minmax(0, 1fr); }
  .panel, .panel.szeroki { width: 100vw; }
  .szef-siatka { grid-template-columns: minmax(0, 1fr); }
  .dzien-nawi { margin-left: 0; }
}
@media (max-width: 420px) {
  .rej-xl { font-size: 46px; }
  .praca-glowa .rej { font-size: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Zielony: pierwszy wygląd. Zieleń maszynowa, kolory bezpieczeństwa, kartki T, tablice z plombami i kreda. */
@font-face { font-family: Archivo; src: url(/fonts/archivo-latin-wdth-normal.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+20AC; }
@font-face { font-family: Archivo; src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-024F; }
@font-face { font-family: 'Sofia Sans Condensed'; src: url(/fonts/sofia-sans-condensed-latin-wght-normal.woff2) format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0000-00FF; }
@font-face { font-family: 'Sofia Sans Condensed'; src: url(/fonts/sofia-sans-condensed-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 1 1000; font-display: swap; unicode-range: U+0100-024F; }
@font-face { font-family: Kreda; src: url(/fonts/just-another-hand-latin-400-normal.woff2) format('woff2'); font-display: swap; }

:root[data-widok='zielen'] {
  color-scheme: light;
  --tlo: #B5CABC; --tlo2: #9DB6A7; --tlo3: #CBDACF; --pow: #F1F4EC; --pow2: #FCFDFA;
  --tekst: #1E2522; --tekst2: #47544D; --tekst3: #5A6A62; --linia: rgba(30, 37, 34, .18); --linia-m: rgba(30, 37, 34, .32);
  --akcent: #F4C20D; --akcent-t: #1E2522; --mocny: #1E2522; --mocny-t: #FFFFFF;
  --st-plac: #F4C20D; --st-plac-t: #1E2522; --st-praca: #E9611A; --st-praca-t: #1E2522;
  --st-wstrz: #2A62AE; --st-wstrz-t: #FFFFFF; --st-gotowe: #1B7F4B; --st-gotowe-t: #FFFFFF;
  --st-wydane: #B5CABC; --st-wydane-t: #47544D;
  --niebezp: #C6281F; --niebezp-t: #FFFFFF; --ostrzezenie: #8A3A00; --zaznaczenie: #F4C20D; --zaznaczenie-t: #1E2522;
  --teraz: #C6281F; --pas: #1E2522;
  --wyk1: #1E2522; --wyk2: #37705A;
  --font: Archivo, system-ui, sans-serif; --font-nr: 'Sofia Sans Condensed', Archivo, sans-serif;
  --nr-waga: 800; --promien: 3px; --promien-d: 4px;
}
/* Telefon: ciemna zieleń hali */
[data-widok='zielen'] body.tel {
  --tlo: #22392F; --tlo2: #2E4A3D; --tlo3: #3C5C4D; --pow: #2E4A3D; --pow2: #3C5C4D;
  --tekst: #FFFFFF; --tekst2: #D6E2DB; --tekst3: #B9C6BF; --linia: #3C5C4D; --linia-m: #5B7F6D;
  --mocny: #F1F4EC; --mocny-t: #1E2522; --zaznaczenie: #3C5C4D; --zaznaczenie-t: #FFFFFF; --ostrzezenie: #F4C20D; --st-wydane: #3C5C4D; --st-wydane-t: #D6E2DB;
}
[data-widok='zielen'] body { font-size: 15px; line-height: 1.42; }
[data-widok='zielen'] h1, [data-widok='zielen'] h2 { font-stretch: 125%; font-weight: 800; letter-spacing: -.014em; line-height: 1.08; }
[data-widok='zielen'] h1 { font-size: 26px; }
[data-widok='zielen'] .guzik { border-bottom: 3px solid rgba(0, 0, 0, .34); border-radius: 5px; min-height: 38px; padding: 0 14px; }
[data-widok='zielen'] .guzik:active { transform: translateY(2px); border-bottom-width: 1px; margin-bottom: 2px; }
[data-widok='zielen'] .guzik.plaski { border-bottom-color: transparent; padding: 0 6px; }
[data-widok='zielen'] .guzik.duzy { min-height: 58px; border-bottom-width: 4px; font-stretch: 108%; }
[data-widok='zielen'] .belka { background: var(--tlo2); border-bottom: 2px solid var(--tekst); }
[data-widok='zielen'] .szukaj { width: 178px; }
[data-widok='zielen'] .znak, [data-widok='zielen'] .wejscie-znak { color: var(--tekst); font-stretch: 125%; font-weight: 800; letter-spacing: -.03em; }
[data-widok='zielen'] .nawi a[aria-current='page'] { color: var(--tekst); font-weight: 800; box-shadow: 0 3px 0 var(--tekst); }
[data-widok='zielen'] .jezyki { border: 1.5px solid var(--tekst); border-radius: 4px; }
[data-widok='zielen'] .demo-pas { background: var(--tekst); color: #E8EFE9; }

/* Tablica rejestracyjna z pasem UE i plombami */
.rej-ue, .rej-pole .rej-ue { display: none; }
.rej-plomby { font-style: normal; }
[data-widok='zielen'] .rej, [data-widok='zielen'] .praca-glowa .rej, [data-widok='zielen'] .p-glowa .rej, [data-widok='zielen'] .rej-pole { display: inline-flex; align-items: stretch; background: #FCFDFA; color: #0B0D0C; border: 1.5px solid #1E2522; border-radius: 4px; box-shadow: none; padding: 0; overflow: hidden; line-height: 1; vertical-align: middle; flex: none; }
[data-widok='zielen'] .rej-ue { background: #0A3AA8; color: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-style: normal; flex: none; }
[data-widok='zielen'] .rej-ue svg { fill: #FFD500; display: block; }
[data-widok='zielen'] .rej-ue b { font: 700 9px/1 Archivo; }
[data-widok='zielen'] .rej-plomby { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; width: .34em; height: .78em; margin: 0 .16em; flex: none; }
[data-widok='zielen'] .rej-plomby::before, [data-widok='zielen'] .rej-plomby::after { content: ''; width: .3em; height: .3em; border-radius: 50%; background: #C98AA0; box-shadow: inset 0 0 0 .02em rgba(0, 0, 0, .3); }
[data-widok='zielen'] .rej-plomby::after { background: #D9DCD8; }
[data-widok='zielen'] .rej-nr { font-family: var(--font-nr); font-weight: 800; letter-spacing: .045em; white-space: nowrap; display: flex; align-items: center; }
[data-widok='zielen'] .rej-s { height: 21px; border-width: 1px; border-radius: 3px; }
[data-widok='zielen'] .rej-s .rej-ue { width: 10px; } [data-widok='zielen'] .rej-s .rej-ue svg, [data-widok='zielen'] .rej-s .rej-ue b { display: none; }
[data-widok='zielen'] .rej-s .rej-nr { font-size: 15px; padding: 0 5px 0 4px; }
[data-widok='zielen'] .rej-s .rej-plomby { width: .18em; margin: 0 .1em; } [data-widok='zielen'] .rej-s .rej-plomby::before, [data-widok='zielen'] .rej-s .rej-plomby::after { display: none; }
[data-widok='zielen'] .rej-m { height: 30px; } [data-widok='zielen'] .rej-m .rej-ue { width: 15px; padding-bottom: 2px; } [data-widok='zielen'] .rej-m .rej-ue svg { width: 13px; margin-bottom: 1px; } [data-widok='zielen'] .rej-m .rej-ue b { font-size: 7.5px; }
[data-widok='zielen'] .rej-m .rej-nr { font-size: 21px; padding: 0 8px; }
[data-widok='zielen'] .rej-l { height: 46px; border-width: 2px; } [data-widok='zielen'] .rej-l .rej-ue { width: 22px; padding-bottom: 3px; } [data-widok='zielen'] .rej-l .rej-ue svg { width: 18px; margin-bottom: 3px; }
[data-widok='zielen'] .rej-l .rej-nr { font-size: 33px; padding: 0 12px; }
[data-widok='zielen'] .rej-xl { height: 72px; border-width: 2.5px; border-radius: 6px; } [data-widok='zielen'] .rej-xl .rej-ue { width: 33px; padding-bottom: 6px; } [data-widok='zielen'] .rej-xl .rej-ue svg { width: 27px; margin-bottom: 5px; } [data-widok='zielen'] .rej-xl .rej-ue b { font-size: 13px; }
[data-widok='zielen'] .rej-xl .rej-nr { font-size: 54px; padding: 0 16px; }
[data-widok='zielen'] .rej-pole { display: flex; height: 30px; width: 100%; }
[data-widok='zielen'] .rej-pole .rej-ue { width: 15px; padding-bottom: 2px; } [data-widok='zielen'] .rej-pole .rej-ue svg { width: 13px; margin-bottom: 1px; } [data-widok='zielen'] .rej-pole .rej-ue b { font-size: 7.5px; }
[data-widok='zielen'] .rej-pole input { border: 0; border-radius: 0; height: 100%; background: transparent; color: #0B0D0C; padding: 0 10px; font-size: 19px; letter-spacing: .045em; min-width: 0; }
[data-widok='zielen'] .rej-pole input::placeholder { color: #8A958E; font-family: var(--font-nr); font-weight: 700; font-size: 19px; }
[data-widok='zielen'] .rej-pole.duze { height: 46px; border-width: 2px; } [data-widok='zielen'] .rej-pole.duze .rej-ue { width: 22px; padding-bottom: 3px; } [data-widok='zielen'] .rej-pole.duze .rej-ue svg { width: 18px; margin-bottom: 3px; }
[data-widok='zielen'] .rej-pole.duze input { font-size: 33px; }
[data-widok='zielen'] .rej-pole:focus-within { outline: 2.5px solid #1E2522; outline-offset: 2px; }

/* Plan w kolumnach */
.plansza-uklad { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 14px; align-items: start; }
.plansza-przewin { overflow-x: auto; background: var(--tlo2); border: 2px solid var(--tekst); }
.plansza { display: grid; grid-template-columns: 46px repeat(var(--kolumny), minmax(158px, 1fr)); min-width: min-content; position: relative; }
.kol-glowa { position: sticky; top: 0; z-index: 4; background: var(--tekst); color: #FFF; padding: 6px 8px; min-height: 48px; border-left: 1px solid var(--tekst2); }
.kol-glowa b { font-stretch: 112%; display: block; line-height: 1.2; }
.kol-glowa small { color: #C7D3CC; font-stretch: 92%; }
.kol-glowa.pierwsza { border-left: 0; }
.os { position: relative; border-right: 1px solid var(--linia-m); background: var(--tlo2); }
.os span { position: absolute; right: 5px; font-size: 13px; font-weight: 600; font-stretch: 88%; transform: translateY(-1px); }
.kol { position: relative; border-left: 1px solid var(--linia-m); background-image: repeating-linear-gradient(to bottom, var(--linia-m) 0 1px, transparent 1px 51px, var(--linia) 51px 52px, transparent 52px 102px); }
.kol.cel { background-color: var(--tlo3); }
.linia-teraz { position: absolute; left: 0; right: 0; height: 2px; background: var(--niebezp); z-index: 3; pointer-events: none; }
.os .teraz-etykieta { position: absolute; right: 2px; transform: translateY(-50%); background: var(--niebezp); color: #FFF; font-size: 12px; font-weight: 700; padding: 0 4px; line-height: 19px; border-radius: 2px; z-index: 5; }
.bok .t { width: 100%; }
.t-gl { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 6px; min-height: 25px; font-weight: 700; font-size: 13px; font-stretch: 90%; }
.t-kor { display: block; margin: 0 7px; background: var(--pow); padding: 3px 7px 4px; font-size: 13px; line-height: 1.22; font-stretch: 90%; overflow: hidden; }
.t-kor .linia { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-kor .uwaga { font-weight: 700; color: var(--niebezp); }
.t-kor .uwaga.slabo { color: var(--ostrzezenie); }
.t-kol { position: absolute; left: 3px; right: 3px; z-index: 2; overflow: hidden; }
.t-kol .t { height: 100%; width: 100%; display: flex; flex-direction: column; touch-action: none; }
.t-kol .t-kor { flex: 1; min-height: 0; }
.s-umowione > .t > .t-gl { background: var(--pow2); box-shadow: inset 0 0 0 1px var(--linia-m); }
.s-na_placu > .t > .t-gl { background: var(--st-plac); }
.s-w_pracy > .t > .t-gl { background: var(--st-praca); }
.s-wstrzymane > .t > .t-gl { background: var(--st-wstrz); color: var(--st-wstrz-t); }
.s-gotowe > .t > .t-gl { background: var(--st-gotowe); color: var(--st-gotowe-t); }
.s-wydane > .t > .t-gl { background: var(--tlo); color: var(--tekst2); box-shadow: inset 0 0 0 1px var(--linia); }
.s-wydane > .t > .t-kor { background: var(--tlo2); color: var(--tekst2); padding-top: 1px; }
.s-wydane.t-kol .rej { opacity: .72; }
.t:hover > .t-kor { background: var(--pow2); }
.flaga { background: var(--tekst); color: #FFF; font-size: 12px; padding: 0 5px; border-radius: 2px; font-weight: 700; white-space: nowrap; }
.t-cel.kolumna { left: 3px; right: 3px; }
.bok { display: grid; gap: 14px; }
.bok-sekcja h2 { font-size: 16px; margin-bottom: 7px; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bok-sekcja h2 small { font-stretch: 100%; font-weight: 500; letter-spacing: 0; color: var(--tekst2); }
.bok .stos { gap: 6px; }
.bok .pusto-bok { font-size: 14px; border: 1px dashed var(--linia-m); padding: 9px 10px; }

/* Pozostałe ekrany w Zielonym */
[data-widok='zielen'] .p-sek > h3, [data-widok='zielen'] .tabela th { border-bottom: 1.5px solid var(--tekst); }
[data-widok='zielen'] .p-glowa { background: var(--tlo2); }
[data-widok='zielen'] .p-glowa.s-na_placu { background: var(--st-plac); } [data-widok='zielen'] .p-glowa.s-w_pracy { background: var(--st-praca); } [data-widok='zielen'] .p-glowa.s-wstrzymane { background: var(--st-wstrz); } [data-widok='zielen'] .p-glowa.s-gotowe { background: var(--st-gotowe); }
[data-widok='zielen'] .p-glowa.s-wydane, [data-widok='zielen'] .p-glowa.s-anulowane, [data-widok='zielen'] .p-glowa.s-nie_przyjechal { background: var(--tlo); }
[data-widok='zielen'] .p-glowa.s-umowione { background: var(--pow2); border-bottom: 1.5px solid var(--tekst); }
[data-widok='zielen'] .panel { border-left: 2px solid var(--tekst); }
[data-widok='zielen'] .regal { background: var(--tlo2); border: 2px solid var(--tekst); border-radius: 0; }
[data-widok='zielen'] .regal h3 { font-stretch: 125%; font-weight: 800; }
[data-widok='zielen'] .miejsce i, [data-widok='zielen'] .legenda i { background: var(--tekst); }
[data-widok='zielen'] .miejsce.lato i, [data-widok='zielen'] .legenda i.lato { background: var(--tekst3); }
[data-widok='zielen'] .miejsce.zalegle i, [data-widok='zielen'] .legenda i.zalegle { background: var(--niebezp); }
[data-widok='zielen'] .legenda i.jutro { background: var(--st-plac); }
[data-widok='zielen'] .do-kasy { border: 0; border-top: 6px solid var(--st-gotowe); border-radius: 0; }
[data-widok='zielen'] .kasa-suma, [data-widok='zielen'] .tlo-focal { border: 0; border-radius: 0; background: var(--pow); }
[data-widok='zielen'] .szef-karta { border: 0; border-top: 2px solid var(--tekst); border-radius: 0; }
[data-widok='zielen'] .wejscie-prawa { background: var(--pow); border-left: 2px solid var(--tekst); }
[data-widok='zielen'] .wejscie-lewa { background: none; }

/* Koło roku u szefa */
.szef-gora.z-kolem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 560px); gap: 24px; align-items: center; margin-bottom: 18px; }
[data-widok='zielen'] .szef-zdanie { font-stretch: 118%; font-weight: 800; letter-spacing: -.02em; }
.kolo-roku { position: relative; width: 100%; max-width: 560px; justify-self: end; }
.kolo-roku svg { display: block; width: 100%; height: auto; overflow: visible; }
.kolo-roku .obrot { transform-origin: 320px 320px; animation: toczy 1s cubic-bezier(.2, .7, .2, 1); }
@keyframes toczy { from { transform: rotate(-52deg); } to { transform: rotate(0); } }
.bieznik-k { cursor: pointer; }
.napis-boku { font: 800 21px Archivo; font-stretch: 125%; letter-spacing: .12em; fill: #3B4842; }
.napis-mies { font: 700 13px Archivo; font-stretch: 112%; letter-spacing: .08em; fill: #8FA097; }
.kolo-legenda { display: flex; gap: 16px; justify-content: center; font-size: 14px; margin-top: 6px; flex-wrap: wrap; }
.kolo-legenda span { display: inline-flex; gap: 6px; align-items: center; }
.kolo-legenda i { width: 14px; height: 14px; border-radius: 2px; background: var(--wyk1); display: inline-block; }
.kolo-legenda i.w { background: var(--wyk2); } .kolo-legenda i.r { background: none; box-shadow: inset 0 0 0 1.5px var(--tekst2); }

/* Telefon w Zielonym: pomiar kredą na oponie */
[data-widok='zielen'] .m-karta { border: 0; border-radius: 8px; }
[data-widok='zielen'] .m-dol { background: #1E2522; border: 0; }
[data-widok='zielen'] .m-dol a { color: #D6E2DB; }
[data-widok='zielen'] .m-dol a[aria-current='page'] { color: #FFF; box-shadow: inset 0 4px 0 #F4C20D; }
[data-widok='zielen'] .opona-p { border: 0; background-color: #1E2522; background-image: repeating-linear-gradient(115deg, transparent 0 9px, #2C3531 9px 12px); color: #FFF; }
[data-widok='zielen'] .opona-p.akt { box-shadow: 0 0 0 3px #F4C20D; }
[data-widok='zielen'] .opona-p .kreda { font: 400 25px/1 Kreda, cursive; color: #F4C20D; letter-spacing: .03em; }
[data-widok='zielen'] .opona-p .wart { font: 400 38px/1 Kreda, cursive; color: #FFF; }
[data-widok='zielen'] .opona-p.slabo .wart { color: #F4C20D; } [data-widok='zielen'] .opona-p.zle .wart { color: #FF8D84; }
[data-widok='zielen'] .krok-sz.wielki { color: #F4C20D; font-stretch: 118%; font-weight: 800; }
[data-widok='zielen'] .praca-glowa { color: #1E2522; }

@media (max-width: 1180px) {
  .plansza-uklad, .szef-gora.z-kolem { grid-template-columns: minmax(0, 1fr); }
  .bok { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .kolo-roku { justify-self: center; }
}
@media (max-width: 420px) {
  [data-widok='zielen'] .rej-xl { height: 62px; } [data-widok='zielen'] .rej-xl .rej-nr { font-size: 45px; padding: 0 12px; }
}