/* Planer załadunku — style. Osobny plik, bo arkusz jest za duży na <style> w HTML,
   a CSP dopuszcza style-src 'self'. Kolory i kroje przepisane z podstron strony
   (careway-www): tam siedzą na sztywno przy każdym elemencie, tutaj są raz,
   w zmiennych — nowa podstrona nie powiela tamtego rozsypania. */

:root {
  --tlo: #04101E;
  --tlo-karta: rgba(140, 180, 220, .05);
  --tlo-pole: rgba(4, 16, 30, .68);
  --tekst: #E8F0F8;
  --tekst-2: #8FA8C0;
  --tekst-3: #7C94AC;
  --akcent: #FF7A2F;
  --akcent-jasny: #FFA269;
  --sukces: #5FE0A8;
  --blad: #FF9B8A;
  --ramka: rgba(140, 180, 220, .16);
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --naglowek: 'Space Grotesk', system-ui, sans-serif;
}

.planer {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* ≤900 px: scena idzie NA GÓRĘ, panel pod spód. Kolejność w HTML jest odwrotna
   (panel pierwszy), więc na wąskim ekranie przestawia ją `order` — dzięki temu
   czytnik ekranu na szerokim układzie dostaje najpierw formularz, czyli to,
   czym się faktycznie steruje. */
@media (max-width: 900px) {
  .planer { grid-template-columns: 1fr; }
  .planer__panel { order: 2; }
  .planer__scena { order: 1; }
}

/* ---------------- panel ---------------- */

.karta {
  background: linear-gradient(160deg, rgba(140, 180, 220, .07), rgba(140, 180, 220, .02));
  border: 1px solid var(--ramka);
  border-radius: 16px;
  padding: 18px;
}
.karta + .karta { margin-top: 14px; }

.etykieta {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9FB6CC;
  margin: 0 0 7px;
}

.sekcja-tytul {
  font-family: var(--naglowek);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin: 0 0 14px;
}

.pole, select.pole {
  width: 100%;
  border: 1px solid var(--ramka);
  background: var(--tlo-pole);
  border-radius: 10px;
  padding: 11px 12px;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
select.pole { appearance: none; cursor: pointer; padding-right: 30px; }
.pole:focus-visible, select.pole:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.pole--zle { border-color: var(--blad); }

.siatka2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.siatka4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.btn {
  border: none;
  cursor: pointer;
  border-radius: 11px;
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 18px;
  background: linear-gradient(135deg, #FF8A3D, #F05A00);
  color: #04101E;
}
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.btn--cichy {
  background: transparent;
  border: 1px solid var(--ramka);
  color: var(--tekst);
  font-weight: 600;
}
.btn--cichy:hover { background: rgba(140, 180, 220, .1); filter: none; }
.btn--maly { padding: 9px 12px; font-size: 13.5px; }

.pozycja {
  border: 1px solid var(--ramka);
  border-left: 3px solid var(--kolor, var(--akcent));
  border-radius: 12px;
  padding: 12px;
  background: var(--tlo-karta);
}
.pozycja + .pozycja { margin-top: 10px; }
.pozycja__gora { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pozycja__gora select { flex: 1 1 auto; }

.kosz {
  border: 1px solid var(--ramka);
  background: transparent;
  color: var(--tekst-2);
  border-radius: 9px;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}
.kosz:hover { color: var(--blad); border-color: var(--blad); }

.ptaszek {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--tekst-2);
  margin-top: 10px;
  cursor: pointer;
}
.ptaszek input { width: 17px; height: 17px; accent-color: var(--akcent); cursor: pointer; }

/* ---------------- wynik ---------------- */

.wyniki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wynik {
  border: 1px solid var(--ramka);
  border-radius: 12px;
  padding: 11px 12px;
  background: rgba(4, 16, 30, .45);
}
.wynik__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3); }
.wynik__v { font-family: var(--naglowek); font-weight: 700; font-size: 22px; color: #fff; margin-top: 3px; }
.wynik__v--zle { color: var(--blad); }
.wynik__v--ok { color: var(--sukces); }

.pasek { height: 9px; border-radius: 999px; background: rgba(140, 180, 220, .14); overflow: hidden; margin-top: 9px; }
.pasek__w { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #5FE0A8, #3FBF8B); transition: width .35s ease; }
.pasek__w--zle { background: linear-gradient(90deg, #FF9B8A, #E8503A); }

.lista-brakow {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 155, 138, .45);
  border-radius: 10px;
  background: rgba(255, 155, 138, .08);
  color: var(--blad);
  font-size: 13.5px;
  line-height: 1.55;
  list-style: none;
}
.lista-brakow li + li { margin-top: 3px; }

.komunikat { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--blad); line-height: 1.5; }
.komunikat:empty { display: none; }
.podpis { margin: 9px 0 0; font-size: 12.5px; color: var(--tekst-3); line-height: 1.5; }

/* ---------------- scena ---------------- */

.planer__scena { position: sticky; top: 92px; }
@media (max-width: 900px) { .planer__scena { position: static; } }

.scena-ramka {
  position: relative;
  border: 1px solid var(--ramka);
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(120% 110% at 50% 0%, #0A1F36 0%, #04101E 68%);
  min-height: 420px;
}
.scena-ramka canvas { display: block; width: 100%; height: 100%; }

.widoki {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  background: rgba(4, 16, 30, .72);
  border: 1px solid var(--ramka);
  border-radius: 999px;
  padding: 4px;
}
.widoki button {
  border: none;
  background: transparent;
  color: #9FB6CC;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.widoki button[aria-pressed="true"] { background: linear-gradient(135deg, #FF8A3D, #F05A00); color: #04101E; font-weight: 700; }

.scena-info {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--tekst-3);
  background: rgba(4, 16, 30, .6);
  border-radius: 8px;
  padding: 5px 9px;
}

.legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: var(--tekst-2); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Zastępnik dla przeglądarek bez WebGL — te same dane, tylko tabelą. */
.brak-webgl { padding: 22px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--ramka); }
.tabela th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-3); font-weight: 500; }
.tabela td { color: var(--tekst); }

/* ---------------- okno wyceny ---------------- */

.okno {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 16, .72);
}
.okno[hidden] { display: none; }
.okno__panel {
  width: min(680px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: #071726;
  border: 1px solid var(--ramka);
  border-radius: 16px;
  padding: 22px;
}
.okno__tekst {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre;
}
.okno__stopka { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; }

/* Pasek „to jest podgląd" — ma być widać od pierwszej sekundy, że to nie jest
   podstrona produkcyjna i że przycisk wyceny niczego nie wysyła. */
.plakietka-podgladu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFC79B;
  border: 1px solid rgba(255, 122, 47, .45);
  background: rgba(255, 122, 47, .1);
  border-radius: 999px;
  padding: 6px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .pasek__w { transition: none; }
}

/* Dopisane po ułożeniu panelu: trzy pola w rzędzie (ilość / wysokość / waga)
   i stała wysokość sceny — canvas nie ma wymiaru własnego, więc bez tego
   ramka miałaby 0 px i scena byłaby niewidoczna. */
.siatka3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.scena-ramka { height: clamp(420px, 62vh, 720px); }
.pozycja__gora select { min-width: 0; }
.przyciski { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.przyciski .btn { flex: 1 1 auto; }

/* --- v22 --- Kolor należy do POZYCJI, nie do typu ładunku. Kropka przy wyborze
   rodzaju i grubszy pasek na lewej krawędzi karty to jedyne miejsca, po których
   widać, która karta w panelu odpowiada której bryle na scenie. */
.pozycja { border-left-width: 4px; }
.kropka-koloru {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(4, 16, 30, .8), 0 0 0 2px rgba(140, 180, 220, .28);
}
.legenda i { box-shadow: 0 0 0 1px rgba(4, 16, 30, .8), 0 0 0 2px rgba(140, 180, 220, .22); }

/* ================= v24 — ręczne układanie ================= */

/* Bez tego jeden palec na scenie przewija stronę zamiast przeciągać paletę.
   Obsługa wskaźnika idzie przez Pointer Events, więc przeglądarka nie ma tu
   nic do roboty samodzielnie. */
.scena-ramka canvas { touch-action: none; cursor: grab; }
.scena-ramka canvas:active { cursor: grabbing; }

.wynik--szeroki { grid-column: 1 / -1; }

/* Pływający pasek przy zaznaczonej sztuce. Kotwiczony w punkcie NAD sztuką,
   stąd przesunięcie o własną wysokość i połowę szerokości. */
.pasek-sztuki {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(4, 16, 30, .92);
  border: 1px solid var(--ramka);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  white-space: nowrap;
  z-index: 5;
}
.pasek-sztuki[hidden] { display: none; }
.pasek-sztuki button {
  border: none;
  background: transparent;
  color: var(--tekst);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.pasek-sztuki button:hover { background: rgba(255, 122, 47, .18); color: #fff; }

.plakietka-reczny {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FFC79B;
  border: 1px solid rgba(255, 122, 47, .45);
  background: rgba(255, 122, 47, .12);
  border-radius: 999px;
  padding: 4px 10px;
  margin-left: 8px;
  vertical-align: middle;
}
.plakietka-reczny[hidden] { display: none; }

/* Ostrzeżenia są ŻÓŁTE, nie czerwone: nie blokują niczego, mają tylko zwrócić uwagę.
   Czerwień w tym panelu znaczy „nie mieści się" albo „przekroczona ładowność". */
.lista-ostrzezen {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 209, 102, .45);
  border-radius: 10px;
  background: rgba(255, 209, 102, .08);
  color: #FFD166;
  font-size: 13.5px;
  line-height: 1.55;
  list-style: none;
}
.lista-ostrzezen li + li { margin-top: 4px; }
.lista-ostrzezen[hidden] { display: none; }

.podpowiedz {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--tekst-3);
}

.btn:disabled { opacity: .4; cursor: default; filter: none; }
.przyciski--historia { gap: 6px; }
.przyciski--historia .btn { flex: 0 0 auto; }

/* ================= v25 ================= */
/* Pasek akcji przeniesiony z „nad sztuką" w stały lewy górny róg sceny.
   Pływając nad ładunkiem przechwytywał wciśnięcie myszy i blokował przeciąganie. */
.pasek-sztuki {
  position: absolute;
  left: 12px;
  top: 12px;
  transform: none;
  flex-wrap: wrap;
  max-width: calc(100% - 24px);
  align-items: center;
  gap: 4px;
}
.pasek-sztuki button:disabled { opacity: .35; cursor: default; }
.pasek-sztuki button:disabled:hover { background: transparent; color: var(--tekst); }
.pasek-sztuki__wybor {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tekst-3);
  padding: 0 8px 0 4px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================= v26 — ściągawka skrótów ================= */
.skroty { list-style: none; margin: 0; padding: 0; }
.skroty li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(140, 180, 220, .1);
  font-size: 14px;
  color: var(--tekst-2);
}
.skroty li:last-child { border-bottom: none; }
.skroty kbd {
  flex: 0 0 auto;
  min-width: 108px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(140, 180, 220, .1);
  border: 1px solid var(--ramka);
  border-bottom-width: 2px;
  border-radius: 7px;
  padding: 4px 8px;
  text-align: center;
  white-space: nowrap;
}
.skroty__uwaga { margin: 14px 0 0; font-size: 12.5px; color: var(--tekst-3); line-height: 1.55; }
@media (max-width: 560px) {
  .skroty li { flex-direction: column; gap: 3px; }
  .skroty kbd { min-width: 0; align-self: flex-start; }
}

/* ================= v28 ================= */

/* Scena niższa, żeby razem z paskiem wyniku mieściła się na jednym ekranie. */
.scena-ramka { height: clamp(280px, calc(100vh - 340px), 620px); }

/* Pasek wyniku — duże liczby, zawsze obok sceny. */
.pasek-wyniku {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ramka);
  border-radius: 14px;
  background: rgba(4, 16, 30, .92);
}
.pasek-wyniku__k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tekst-3);
  white-space: nowrap;
}
.pasek-wyniku__v {
  font-family: var(--naglowek);
  font-weight: 700;
  font-size: 21px;
  color: #fff;
  margin-top: 2px;
  white-space: nowrap;
}
.pasek-wyniku__v--zle { color: var(--blad); }
.pasek-wyniku .pasek { margin-top: 6px; }

@media (max-width: 900px) {
  /* Na telefonie przyklejony do dołu okna — inaczej znika pod ładunkiem. */
  .pasek-wyniku {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    margin: 0;
    border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 10px;
    backdrop-filter: blur(12px);
  }
  .pasek-wyniku__v { font-size: 17px; }
  body { padding-bottom: 130px; }
}

/* Dymek z powodem odmowy — przy kursorze, nie przechwytuje kliknięć. */
.powod-duszka {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  background: rgba(255, 155, 138, .95);
  color: #2A0D08;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.powod-duszka[hidden] { display: none; }

.pasek-powod {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #FFC2B5;
  padding: 0 6px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#btn-zezwol { background: rgba(95, 224, 168, .16); color: #5FE0A8; }
#btn-zezwol[hidden] { display: none; }

/* Napis nad płytą poczekalni. */
.etykieta-poczekalni {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9FB6CC;
  background: rgba(4, 16, 30, .7);
  border: 1px solid var(--ramka);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.etykieta-poczekalni[hidden] { display: none; }

/* Pasek akcji urósł o „Dopasuj widok" i „Zezwól…" — bez ograniczenia szerokości
   wchodzi pod przyciski widoku w prawym górnym rogu i przechwytuje ich kliknięcia
   (dokładnie ten sam błąd, który w v25 blokował przeciąganie). Zostawiamy po prawej
   miejsce na przełącznik widoku i pozwalamy paskowi zawijać się do drugiego wiersza. */
.pasek-sztuki { max-width: calc(100% - 290px); }
@media (max-width: 700px) { .pasek-sztuki { max-width: calc(100% - 24px); } }

/* ================= v31 ================= */
/* Ekranowy pas „Upuść tutaj" zamiast ruszania kamerą w trakcie gestu. */
.pas-poczekalni {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  z-index: 7;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px dashed rgba(140, 180, 220, .5);
  background: linear-gradient(to top, rgba(140, 180, 220, .22), rgba(140, 180, 220, .04));
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #CFE0F0;
}
.pas-poczekalni[hidden] { display: none; }

.wynik--masa { grid-column: 1 / -1; }
.wynik__v--masa { font-size: 17px; line-height: 1.35; white-space: normal; }
.wynik__uwaga { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tekst-2); }
.wynik__uwaga[hidden] { display: none; }

/* ================= v33 — zwarta karta pozycji + trzy stany poczekalni ================= */
.pozycja { padding: 10px 12px; }
.pozycja + .pozycja { margin-top: 8px; }
.pozycja__gora { margin-bottom: 8px; }
.pozycja__gora select.pole { padding: 6px 30px 6px 12px; font-size: 16px; line-height: 1.25; }
.pozycja .kosz { padding: 5px 11px; }
.pozycja .etykieta { font-size: 10.5px; margin: 0 0 5px; }
.pozycja__blok + .pozycja__blok { margin-top: 8px; }
.pozycja .siatka2 { gap: 8px; }
.pozycja .ptaszek { margin-top: 7px; }
.pozycja .ptaszek input { width: 16px; height: 16px; }

/* Pola liczbowe: wyrównane do prawej, 16 px (iPhone nie powiększa strony przy fokusie),
   bez strzałek góra/dół w Chrome/Safari i w Firefoksie. */
.pole--liczba { text-align: right; font-size: 16px; line-height: 1.25; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.pole--liczba::-webkit-outer-spin-button,
.pole--liczba::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pole--liczba[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Jednostka jako szary dopisek wewnątrz pola. */
.pole-jedn { position: relative; display: block; min-width: 0; }
.pole-jedn--z-jedn .pole { padding-right: 38px; }
.pole-jedn--z-przedr .pole { padding-left: 54px; }
.pole-jedn__p {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9FB6CC;
  pointer-events: none;
  white-space: nowrap;
}
.pole-jedn__j {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--tekst-2);
  pointer-events: none;
}

/* Rząd wymiarów: trzy wąskie pola i „×" między nimi — także na 390 px. */
.wymiary { display: flex; align-items: center; gap: 6px; }
.wymiary .pole-jedn { flex: 1 1 0; min-width: 64px; }
.wymiary__razy { flex: 0 0 auto; color: var(--tekst-2); font-size: 15px; }
.wymiary__stale { flex: 0 0 auto; font-size: 16px; color: var(--tekst); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wymiary--paleta .pole-jedn { flex: 0 1 96px; }

/* Napis poczekalni w trzech stanach (+ „Upuść tutaj" nad płytą w trakcie gestu). */
.etykieta-poczekalni[data-stan="pusta"] { opacity: .35; background: transparent; border-style: dashed; }
.etykieta-poczekalni[data-stan="gest"] { color: #FF7A2F; border-color: rgba(255, 122, 47, .7); }
.etykieta-poczekalni[data-stan="nad"] { color: #5FE0A8; border-color: rgba(95, 224, 168, .8); background: rgba(95, 224, 168, .12); }
.etykieta-poczekalni[data-stan="pelna"] { color: #FF9B8A; border-color: rgba(255, 155, 138, .7); }

/* ================= v34 — kosmetyka: etykiety nad polami, łagodna poczekalnia, pasek w jednej linii ================= */
.kolumna-pola { display: flex; flex-direction: column; min-width: 0; }
.kolumna-pola .etykieta { margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wymiary { align-items: flex-end; }
.wymiary .kolumna-pola { flex: 1 1 0; min-width: 64px; }
.wymiary .pole-jedn { flex: none; min-width: 0; }
/* „×" na wysokości pól, nie etykiet: ta sama wysokość co pole i środek w pionie. */
.wymiary__razy { align-self: flex-end; height: 34px; display: flex; align-items: center; }
.pole-jedn--z-jedn .pole { padding-right: 32px; }
.pole-jedn__j { right: 9px; font-size: 12.5px; }
.pole--liczba:disabled { opacity: .55; cursor: not-allowed; background: rgba(140, 180, 220, .04); color: var(--tekst-2); -webkit-text-fill-color: var(--tekst-2); }

/* Napis poczekalni: nieprzezroczyste ciemne tło (jak karty panelu), czytelny tekst. */
.etykieta-poczekalni { background: #0B1826; }
.etykieta-poczekalni[data-stan="pusta"] { background: #0B1826; }
.etykieta-poczekalni[data-stan="pelna"] { color: #F2C4BC; border-color: rgba(255, 155, 138, .4); }
.etykieta-poczekalni[data-stan="nad"] { background: #0F2A24; }

/* Pasek akcji: ikony z podpowiedzią, JEDNA linia; gdy brak miejsca — przewijanie w poziomie. */
.pasek-sztuki {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 180, 220, .3) transparent;
  border-radius: 14px;
}
.pasek-sztuki::-webkit-scrollbar { height: 4px; }
.pasek-sztuki::-webkit-scrollbar-thumb { background: rgba(140, 180, 220, .3); border-radius: 4px; }
.pasek-sztuki button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; }
.pasek-sztuki .ik { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pasek-sztuki__wybor, .pasek-powod { flex: 0 0 auto; }
/* Wąski ekran: pasek na całą szerokość u góry, przełącznik widoku rząd niżej — nic na siebie nie nachodzi. */
@media (max-width: 700px) {
  .pasek-sztuki { left: 12px; right: 12px; max-width: none; }
  .widoki { top: 60px; }
}
.pole-jedn--dluga-jedn .pole { padding-right: 42px; }
/* Palety: zablokowane dł./szer. węższe, wysokość szersza — mieści pełne „Wysokość z paletą". */
.wymiary--paleta .kolumna-pola { flex: 0.85 1 0; }
.wymiary--paleta .kolumna-pola:last-child { flex: 1.5 1 0; }
.pozycja .wymiary .kolumna-pola .etykieta { letter-spacing: .02em; }
@media (max-width: 420px) { .pozycja .wymiary .kolumna-pola .etykieta { letter-spacing: 0; } }
/* Ostatnia kolumna: napis może wyjść w prawy margines karty zamiast ucinać się wielokropkiem. */
.wymiary .kolumna-pola:last-child .etykieta { overflow: visible; text-overflow: clip; }

/* ================= v34 (3c) — planer rośnie na dużych ekranach ================= */
/* Sekcja planera wychodzi poza 1280 px strony: min(95vw, 2200px), wyśrodkowana względem
   .wrap. max(100%, …) trzyma dotychczasową szerokość tam, gdzie 95vw byłoby węższe
   (1280 px i mniej) — wygląd zatwierdzony w v33 się nie zmienia. Bez transform, bo ten
   zepsułby position:fixed paska wyniku na telefonie. */
.planer {
  --szer-planera: max(100%, min(95vw, 2200px));
  width: var(--szer-planera);
  margin-left: calc((100% - var(--szer-planera)) / 2);
}
@media (min-width: 1600px) {   /* 1440×900: przy 1400 dół sceny wypadał pod krawędź okna przed przewinięciem */
  /* Scena + pasek wyniku mieszczą się w oknie (po przewinięciu do planera). */
  .scena-ramka { height: clamp(480px, calc(100vh - 210px), 1100px); }
}

/* Uchwyt zmiany wysokości sceny — pasek pod jej dolną krawędzią. */
.uchwyt-sceny {
  height: 12px;
  margin: -6px auto -6px;   /* netto 0 px: przy 1280 px nic się nie przesuwa */
  width: 90px;
  border-radius: 999px;
  cursor: ns-resize;
  touch-action: none;
  position: relative;
}
.uchwyt-sceny::before {
  content: "";
  position: absolute;
  left: 22px; right: 22px; top: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(140, 180, 220, .35);
}
.uchwyt-sceny:hover::before, .uchwyt-sceny.uchwyt-sceny--ciagnie::before { background: #FF7A2F; }
.uchwyt-sceny:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
@media (max-width: 900px) { .uchwyt-sceny { display: none; } }
.scena-ramka--reczna { min-height: 400px; }   /* ręczna wysokość: dół 400 px, nie 420 z v24 */

/* ================= v35 — chłodnia, nadkola, moje pojazdy ================= */
.pojazd-opcje { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; }
.pojazd-opcje .ptaszek { margin-top: 0; }
.pojazd-opcje .ptaszek[hidden] { display: none; }
.nadkola { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--ramka); border-radius: 12px; background: var(--tlo-karta); }
.nadkola[hidden] { display: none; }
.nadkola .etykieta { font-size: 10.5px; letter-spacing: .06em; margin: 0 0 4px; }
.nadkola .pole--liczba { padding-right: 34px; }
@media (max-width: 480px) { .nadkola .siatka4 { grid-template-columns: 1fr 1fr; } }
.nadkola__miedzy { margin: 8px 0 0; }
.moje { margin-top: 10px; }
.moje[hidden], .moje__nazwa[hidden], .moje__dopisek[hidden] { display: none; }
.moje__akcje { display: flex; flex-wrap: wrap; gap: 6px; }
.moje__akcje .btn[hidden] { display: none; }
.moje__nazwa { display: flex; gap: 6px; margin-top: 8px; }
.moje__nazwa .pole { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 8px 10px; }
.moje__dopisek { margin: 6px 0 0; font-size: 12px; }
.wynik-pojazd { margin: -6px 0 10px; font-size: 13px; color: var(--tekst-2); }

/* ================= v37 — limit warstw obok „Można piętrować" ================= */
.pietrowanie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 7px; }
.pietrowanie .ptaszek { margin-top: 0; }
.pietrowanie__limit { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tekst-2); white-space: nowrap; }
.pietrowanie__limit[hidden] { display: none; }
.pole--maly { width: auto; min-width: 0; padding: 5px 28px 5px 10px; font-size: 16px; line-height: 1.2; }
.pietrowanie__limit .pole--maly { width: 118px; }

/* ================= v38 — przeładowanie + podpowiedź pojazdu ================= */
.pasek-uwagi {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 0 10px; padding: 10px 14px;
  border: 1px solid rgba(255, 209, 102, .45); border-radius: 12px;
  background: rgba(255, 209, 102, .08); color: #FFD166;
  font-size: 14px; line-height: 1.4;
}
.pasek-uwagi[hidden] { display: none; }
.pasek-uwagi--blad { border-color: rgba(255, 155, 138, .7); background: rgba(255, 90, 60, .16); color: #FFB4A8; }
.pasek-uwagi__tekst { font-weight: 700; }
.pasek-uwagi__wynik { color: var(--tekst); }
.pasek-uwagi__btn[hidden] { display: none; }
.btn--liczy { position: relative; padding-left: 34px; opacity: .8; }
.btn--liczy::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: krec .8s linear infinite;
}
@keyframes krec { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn--liczy::before { animation: none; } }
.wynik-orientacyjny .wynik__v, .wynik-orientacyjny .pasek-wyniku__v { color: var(--tekst-3); }
.wynik-orientacyjny #w-waga, .wynik-orientacyjny #pw-waga { color: var(--blad); }
.orientacyjny { grid-column: 1 / -1; margin: 0 0 6px; font-size: 12px; color: var(--tekst-3); font-style: italic; }
.orientacyjny[hidden] { display: none; }

/* ================= v39 — zapas, prześwit, przód ================= */
.zapas-pole { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.zapas-pole .etykieta { margin: 0; }
.zapas-pole .pole-jedn { width: 96px; flex: none; }
.zapas-pole .pole--liczba { padding: 6px 30px 6px 10px; }
.wynik__v--przeswit { font-size: 16px; line-height: 1.35; white-space: normal; }
.wynik__v--ciasno { color: #FFD166; }
.wynik__uwaga--prawie { color: #CFE0F0; }
.etykieta-przod {
  position: absolute; z-index: 4; transform: translate(-50%, -50%); pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: rgba(207, 224, 240, .7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6); white-space: nowrap;
}
.etykieta-przod[hidden] { display: none; }
.dymek-stos {
  position: absolute; z-index: 8; pointer-events: none;
  font-family: var(--mono); font-size: 11.5px; color: #FFE08A;
  background: #0B1826; border: 1px solid rgba(255, 224, 138, .45); border-radius: 8px; padding: 4px 8px; white-space: nowrap;
}
.dymek-stos[hidden] { display: none; }

/* ================= v40 — docisk, podpowiedzi ruchu ================= */
.pasek-sztuki .btn-przelacznik[aria-pressed="true"] { color: #5FE0A8; background: rgba(95, 224, 168, .14); }
.pasek-sztuki .btn-przelacznik[aria-pressed="false"] { color: var(--tekst-3); }
.etykieta-odl {
  position: absolute; z-index: 8; transform: translate(-50%, -50%); pointer-events: none;
  font-family: var(--mono); font-size: 11px; color: #04101E; background: #5FE0A8;
  border-radius: 6px; padding: 2px 6px; white-space: nowrap;
}
.etykieta-odl[hidden] { display: none; }

/* v41: „Wysokość ładunkowa (drzwi) m" łamie się na dwie linie — pola w siatce własnych wymiarów wyrównane do dołu,
   żeby wiersz pól trzymał jedną linię. */
#pojazd-wlasny .siatka2 { align-items: end; }

/* ---------------------------------------------------------------- v42: kolejność załadunku */
.kolejnosc { margin: 0 0 12px; }
.kolejnosc .etykieta { display: block; margin: 0 0 6px; }
.przelacznik { display: flex; gap: 0; border: 1px solid var(--ramka); border-radius: 10px; overflow: hidden; }
.przelacznik__opcja { flex: 1 1 0; position: relative; cursor: pointer; }
.przelacznik__opcja input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.przelacznik__opcja span { display: block; text-align: center; padding: 8px 10px; font-size: 14px; color: var(--tekst-2); }
.przelacznik__opcja + .przelacznik__opcja span { border-left: 1px solid var(--ramka); }
.przelacznik__opcja input:checked + span { background: rgba(255, 122, 47, .16); color: var(--tekst); font-weight: 700; }
.przelacznik__opcja input:focus-visible + span { outline: 2px solid #FF7A2F; outline-offset: -2px; }
.kolejnosc__dopisek { margin: 6px 0 0; font-size: 12.5px; }

.pozycja__uchwyt { flex: 0 0 auto; cursor: grab; touch-action: none; user-select: none; color: var(--tekst-2);
  font-size: 15px; letter-spacing: -1px; padding: 4px 4px 4px 0; line-height: 1; }
.pozycja__uchwyt:active { cursor: grabbing; }
.pozycja__nr { flex: 0 0 auto; min-width: 1.6em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tekst-2); }
.pozycje--lista .pozycja__nr { color: #FF7A2F; }
.pozycja__strz { flex: 0 0 auto; border: 1px solid var(--ramka); background: transparent; color: var(--tekst-2);
  border-radius: 9px; padding: 5px 8px; line-height: 1; cursor: pointer; }
.pozycja__strz:hover:not(:disabled) { color: var(--tekst); border-color: var(--tekst-2); }
.pozycja__strz:disabled { opacity: .3; cursor: default; }
.pozycja--ciagnieta { opacity: .85; outline: 2px dashed rgba(255, 122, 47, .7); outline-offset: 2px; }
@media (max-width: 420px) {
  .pozycja__gora { gap: 5px; }
  .pozycja__strz { padding: 5px 6px; }
}

/* ---------------------------------------------------------------- v43: komunikat pod paskiem akcji */
.pasek-komunikat { position: absolute; z-index: 6; top: 64px; left: 14px; max-width: min(560px, calc(100% - 28px));
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px 8px 12px; border-radius: 12px;
  background: rgba(4, 16, 30, .92); border: 1px solid rgba(255, 155, 138, .45); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.pasek-komunikat[hidden] { display: none; }
.pasek-komunikat .pasek-powod { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; padding: 2px 0;
  font-size: 12px; line-height: 1.45; flex: 1 1 auto; }
.pasek-komunikat__x { flex: 0 0 auto; border: 0; background: transparent; color: #FFC2B5; font-size: 16px; line-height: 1;
  cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.pasek-komunikat__x:hover { background: rgba(255, 155, 138, .15); }
@media (max-width: 700px) { .pasek-komunikat { top: 108px; left: 12px; right: 12px; max-width: none; } }

/* ---------------------------------------------------------------- v43 (B5): „Warstwy: 1 · 2 · 3 · 4 · maks." */
.warstwy .etykieta { display: block; margin: 0 0 5px; }
.warstwy__grupa { display: flex; border: 1px solid var(--ramka); border-radius: 10px; overflow: hidden; max-width: 320px; }
.warstwy__opcja { flex: 1 1 0; min-height: 36px; min-width: 36px; border: 0; background: transparent; color: var(--tekst-2);
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0 6px; }
.warstwy__opcja + .warstwy__opcja { border-left: 1px solid var(--ramka); }
.warstwy__opcja[aria-checked="true"] { background: rgba(255, 122, 47, .16); color: var(--tekst); font-weight: 700; }
.warstwy__opcja:focus-visible { outline: 2px solid #FF7A2F; outline-offset: -2px; }
.warstwy__podpowiedz { margin: 6px 0 0; font-size: 12px; }
.warstwy__podpowiedz[hidden] { display: none; }

/* ---------------------------------------------------------------- v44: widoczne przeciąganie kart */
.pozycja__uchwyt { touch-action: pan-y; -webkit-user-select: none; -webkit-touch-callout: none; padding: 6px 6px 6px 2px; margin: -2px 0 -2px -2px; }
.pozycja--miejsce { background: rgba(255, 122, 47, .05); border: 2px dashed rgba(255, 122, 47, .6); box-shadow: none; }
.pozycja--miejsce > * { visibility: hidden; }
.pozycja--kopia { position: fixed; z-index: 1000; margin: 0 !important; pointer-events: none; opacity: .9;
  background: #0d1f33; transform: scale(1.02); transform-origin: 50% 50%;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35); cursor: grabbing; }
.pozycja--kopia .pozycja__uchwyt { color: #FF7A2F; }
.pozycja--kopia-lista .pozycja__nr { color: #FF7A2F; }
.pozycja--kopia-laduje { transition: left 150ms ease, top 150ms ease, transform 150ms ease, box-shadow 150ms ease; transform: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.karta-gest { overflow-anchor: none; }   /* przestawianie ramki w DOM nie może przesuwać strony pod palcem */
.karta-gest, .karta-gest * { overflow-anchor: none; cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
@media (prefers-reduced-motion: reduce) { .pozycja--kopia-laduje { transition: none; } }

/* ---------------------------------------------------------------- v45 (W1): wycena i zgłoszenie problemu */
.formularz { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.formularz__pole { display: flex; flex-direction: column; min-width: 0; }
.formularz__pole .pole { width: 100%; }
.formularz__etykieta-opisu { margin-bottom: -6px; }
.formularz .okno__tekst { min-height: 150px; }
.formularz__opis { min-height: 120px; resize: vertical; font: inherit; }
.formularz__kategorie { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.formularz__radio { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 15px; }
.formularz__radio input { width: 18px; height: 18px; accent-color: var(--akcent); }
/* honeypot: poza ekranem, nie display:none (niektóre boty pomijają ukryte pola) */
.formularz__miodek { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formularz__wynik { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.45; }
.formularz__wynik[hidden] { display: none; }
.formularz__wynik[data-stan="ok"] { background: rgba(95, 224, 168, .12); border: 1px solid rgba(95, 224, 168, .45); color: #BFF5DD; }
.formularz__wynik[data-stan="blad"] { background: rgba(255, 155, 138, .1); border: 1px solid rgba(255, 155, 138, .45); color: #FFD3CB; }
.formularz__wynik a { color: #FFA269; text-decoration: underline; }
.okno__panel--waski { width: min(520px, 100%); }
.zglos-problem { display: flex; justify-content: flex-end; margin-top: 8px; }
.zglos-problem .btn { font-size: 13px; padding: 6px 12px; }
@media (max-width: 560px) { .formularz .siatka2 { grid-template-columns: 1fr; } }