/* METRYKA (dawniej Yellow Rental) — wygląd (08.10.2026). Czerń + sygnałowa żółć, owale, kafle, bez suwaków.
   Jeden plik na całą stronę; sekcje po kolei: tokeny · szkielet · owale · formularze · kafle · listy · moduły. */

@font-face { font-family: 'Italianno'; src: url('../fonts/Italianno-Regular.ttf') format('truetype'); font-display: swap; }

:root {
  /* Fala 1 premium (PROG-48, tokeny: PROG-47 fala1-tokeny) */
  /* kolor — powierzchnie i tekst */
  --tlo: #0b0b0c;
  --pow: #111113;
  --pow2: #1b1b1e;          /* tło pustego zdjęcia, szkielet */
  --pow3: #1f2024;
  --linia: rgba(255,255,255,.08);
  --linia2: rgba(255,255,255,.16);
  --tekst: #f3f1ea;
  --tekst2: #a3a19a;        /* cała treść drugorzędna */
  --tekst3: #6d6b66;        /* tylko dekoracja, nigdy treść */

  /* kolor — akcent i statusy (3 + neutralny) */
  --zolty: 227,181,59;
  --zolty-hex: #e3b53b;
  --zolty-hover: #eec456;
  --na-zlocie: #121212;
  --zielony: 47,199,111;    /* tylko kropka 8 px "ok" */
  --czerwony: 229,115,106;  /* #E5736A — uszkodzenie, błąd */
  --czerwony-hex: #e5736a;
  --szary: 163,161,154;     /* status neutralny */
  /* dawne kolory interfejsu — już nie osobne kolory, tylko aliasy palety (widoki mają je w style="--o:var(--…)", więc nazwy zostają) */
  --niebieski: var(--szary);
  --fiolet: var(--szary);
  --rozowy: var(--szary);
  --pomarancz: var(--zolty);

  /* skala pisma: 11 · 13 · 15 · 17 · 21 · 34 */
  --fs-1: 11px;   /* tylko WERSALIKI, letter-spacing .08em */
  --fs-2: 13px;   /* minimum dla treści */
  --fs-3: 15px;   /* treść podstawowa */
  --fs-4: 17px;
  --fs-5: 21px;
  --fs-6: 34px;   /* h1; na telefonie 28px */
  --w-tresc: 400; --w-etykieta: 500; --w-mocna: 600;   /* 700/800 nie używać */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Space Grotesk + Inter dopiero w Fali 2 */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* odstępy: 8 · 13 · 21 · 34 · 55 */
  --s1: 8px; --s2: 13px; --s3: 21px; --s4: 34px; --s5: 55px;

  /* promienie */
  --r: 24px;      /* kafel */
  --r2: 16px;     /* obraz wewnątrz kafla (24 − wcięcie 8) */
  --r-owal: 999px;

  /* cienie (bez poświat) */
  --cien: 0 20px 60px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --cien-maly: 0 6px 20px rgba(0,0,0,.4);

  /* ruch */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-krotki: 220ms;   /* kolor, tło, skala, obramowanie */
  --t-dlugi: 480ms;    /* zdjęcie, wejście treści */
  --t-kaskada: 55ms;   /* krok opóźnienia, maks. 6 elementów */

  /* wymiary */
  --pasek-h: 64px;
  --dol-h: 66px;
  --cel: 44px;         /* cel dotyku; na telefonie 48px */

  color-scheme: dark;
}
@media (max-width: 480px) { :root { --fs-6: 28px; --cel: 48px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

* { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--tlo); color: var(--tekst); font: var(--w-tresc) var(--fs-3)/1.5 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--zolty-hex); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--w-mocna); letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: var(--fs-6); letter-spacing: -.025em; line-height: 1.1; } h2 { font-size: var(--fs-5); } h3 { font-size: var(--fs-4); } h4 { font-size: var(--fs-1); color: var(--tekst2); text-transform: uppercase; letter-spacing: .08em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
code, .mono { font-family: var(--mono); font-size: .92em; }
small { color: var(--tekst2); }
hr { border: 0; border-top: 1px solid var(--linia); margin: 16px 0; }
[hidden] { display: none !important; }
.cichy { color: var(--tekst2); } .cichszy { color: var(--tekst2); font-size: var(--fs-2); }
.prawo { text-align: right; } .srodek { text-align: center; }
.rzad { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rzad--miedzy { justify-content: space-between; }
.kol { display: flex; flex-direction: column; gap: 8px; }
.gap { gap: 16px; }
.mt { margin-top: 16px; } .mt2 { margin-top: 28px; } .mb { margin-bottom: 16px; }

/* ── pasek górny ── */
.pasek { position: sticky; top: 0; z-index: 50; height: var(--pasek-h); display: flex; align-items: center; gap: 18px; padding: 0 22px;
  background: rgba(11,11,12,.72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--linia); }
.marka { flex-shrink: 0; display: inline-flex; align-items: center; gap: 11px; }
.marka-znak { width: 36px; height: 36px; border-radius: 11px; background: var(--zolty-hex); display: grid; place-items: center; box-shadow: var(--cien-maly); }
.marka-znak span { width: 16px; height: 16px; border: 3px solid var(--na-zlocie); border-radius: 50%; position: relative; }
.marka-znak span::after { content: ''; position: absolute; width: 6px; height: 6px; background: var(--na-zlocie); border-radius: 50%; left: 2px; top: 2px; }
.marka-tekst { display: flex; flex-direction: column; line-height: 1; }
.marka-tekst b { font-weight: var(--w-mocna); letter-spacing: .16em; font-size: var(--fs-3); }
.marka-tekst small { font-size: var(--fs-1); color: var(--tekst2); text-transform: uppercase; letter-spacing: .08em; margin-top: 3px; }
.marka-logo { height: 38px; width: auto; display: block; }
.marka--duza .marka-logo { height: 84px; }
.marka--duza .marka-znak { width: 64px; height: 64px; border-radius: 20px; } .marka--duza .marka-znak span { width: 28px; height: 28px; border-width: 5px; }
.marka--duza .marka-znak span::after { width: 10px; height: 10px; left: 4px; top: 4px; }
.marka--duza .marka-tekst b { font-size: var(--fs-5); } .marka--duza .marka-tekst small { font-size: var(--fs-2); }
.menu { display: flex; gap: 4px; flex: 1; justify-content: center; }
.menu-el { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; color: var(--tekst2); font-weight: var(--w-mocna); font-size: var(--fs-2); white-space: nowrap; transition: color var(--t-krotki) var(--ease), background-color var(--t-krotki) var(--ease); position: relative; }
.menu-el:hover { color: var(--tekst); background: rgba(255,255,255,.05); }
.menu-el.aktywny { color: var(--na-zlocie); background: var(--zolty-hex); }
.menu-ik { font-size: var(--fs-2); opacity: .8; }
.menu-el.aktywny .menu-ik { opacity: 1; }
.licznik { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--czerwony-hex); color: var(--na-zlocie); font-size: var(--fs-1); font-weight: var(--w-mocna); }
.pasek-prawo { display: flex; align-items: center; gap: 10px; }
.szukaj input { width: clamp(120px, 11vw, 240px); height: 38px; border-radius: 999px; border: 1px solid var(--linia2); background: rgba(255,255,255,.04); color: var(--tekst); padding: 0 16px; font: inherit; font-size: var(--fs-2); outline: 0; transition: border-color var(--t-krotki) var(--ease), background-color var(--t-krotki) var(--ease), width var(--t-krotki) var(--ease); }
.szukaj input:focus { border-color: rgba(var(--zolty), .7); background: rgba(255,255,255,.07); width: clamp(160px, 16vw, 300px); }
.konto { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--pow3); border: 1px solid var(--linia2); font-weight: var(--w-mocna); font-size: var(--fs-2); }
.ik-nfc { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; position: relative; }
.ik-nfc::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid currentColor; opacity: .55; }
.ik-nfc::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: currentColor; left: 4px; top: 4px; }

/* ── dolny pasek (telefon) ── */
.dol { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--dol-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: rgba(11,11,12,.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--linia); grid-template-columns: repeat(5, 1fr); }
.dol a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--fs-1); font-weight: var(--w-mocna); text-transform: uppercase; letter-spacing: .08em; color: var(--tekst2); position: relative; }
.dol a span { font-size: 19px; line-height: 1; }
.dol a.aktywny { color: var(--zolty-hex); }
.dol .dol-skan { color: var(--tekst); }
.dol .dol-skan span { color: var(--na-zlocie); }
.dol .dol-skan span { width: 54px; height: 54px; border-radius: 50%; background: var(--zolty-hex); display: grid; place-items: center; margin-top: -26px; box-shadow: var(--cien-maly); border: 4px solid var(--tlo); }
.dol .dol-skan .ik-nfc { width: 22px; height: 22px; border-width: 3px; }
.dol .dol-skan .ik-nfc::after { width: 6px; height: 6px; left: 5px; top: 5px; }
.dol .kropka { position: absolute; top: 8px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--czerwony-hex); }

/* ── treść ── */
@keyframes wejscie { from { opacity: 0; transform: translateY(8px); } }
.tresc > :nth-child(-n+6) { animation: wejscie var(--t-dlugi) var(--ease) backwards;   /* backwards, nie both: po wejściu bez transform, inaczej position: fixed w treści (przycisk „Utwórz pozycję”) liczyłby się od kafla */ animation-delay: calc(var(--i, 0) * var(--t-kaskada)); }
.tresc > :nth-child(2) { --i: 1; } .tresc > :nth-child(3) { --i: 2; } .tresc > :nth-child(4) { --i: 3; } .tresc > :nth-child(5) { --i: 4; } .tresc > :nth-child(6) { --i: 5; }
.tresc { max-width: 1480px; margin: 0 auto; padding: 26px 24px 60px; }
.tresc--pelna { max-width: none; }
.naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.naglowek-tekst h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.naglowek-tekst p { color: var(--tekst2); font-size: var(--fs-3); margin-top: var(--s1); max-width: 56ch; }
.naglowek-akcje { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.okruchy { font-size: var(--fs-2); color: var(--tekst2); margin-bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.okruchy a:hover { color: var(--tekst); }
.pusto { padding: var(--s5) var(--s3); text-align: center; color: var(--tekst2); border: 1px dashed var(--linia2); border-radius: var(--r); }
.pusto h2 { color: var(--tekst); margin-bottom: 8px; }
.flash { padding: 12px 18px; border-radius: var(--r2); margin-bottom: 18px; border: 0; border-left: 2px solid var(--linia2); background: rgba(255,255,255,.04); font-weight: var(--w-etykieta); }
.flash--blad { border-left-color: var(--czerwony-hex); background: rgba(var(--czerwony), .06); }

/* ── stopka Sierściucha (kanon logo-siersciuch: 40 / 42, jeden wiersz) ── */
.stopka { padding: 30px 20px 40px; }
.hh-powered { display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; }
.hh-powered-znak { height: 40px; width: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.hh-powered-sig { font-family: 'Italianno', cursive; font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: 0; white-space: nowrap; color: #e5322d;
  background: linear-gradient(#ff6a5f, #e5322d 55%, #a8121a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding: .12em .06em 0; transform: translateY(-.04em); }

/* ── owale ── trzy rodzaje przycisków: złoty (jeden na widok), kontur (domyślny i .owal--kontur), tekstowy (.owal--tekst); czerwony tylko dla działań destrukcyjnych */
.owal { --o: 255,255,255; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--cel); padding: 0 var(--s3); border-radius: var(--r-owal); border: 1px solid rgba(var(--o), .3);
  background: rgba(var(--o), .07); color: var(--tekst); font-size: var(--fs-2); font-weight: var(--w-mocna); white-space: nowrap; line-height: 1.2;
  transition: background-color var(--t-krotki) var(--ease), border-color var(--t-krotki) var(--ease), color var(--t-krotki) var(--ease), transform var(--t-krotki) var(--ease); cursor: pointer; }
.owal:hover { background: rgba(var(--o), .16); border-color: rgba(var(--o), .6); }
.owal:active { transform: scale(.97); }
.owal:disabled { opacity: .45; cursor: not-allowed; }
.owal--mini, .owal--maly { min-height: 36px; padding: 0 var(--s2); }   /* plakietki filtrów i akcje w wierszach */
.owal--duzy { padding: 0 var(--s4); font-size: var(--fs-3); }
.owal--zolty { --o: var(--zolty); background: var(--zolty-hex); color: var(--na-zlocie); border-color: var(--zolty-hex); }
.owal--zolty:hover { background: var(--zolty-hover); border-color: var(--zolty-hover); }
.owal--kontur { background: transparent; }
.owal--tekst { background: transparent; border-color: transparent; color: var(--tekst2); padding: 0 var(--s1); }
.owal--tekst:hover { background: transparent; border-color: transparent; color: var(--tekst); }
.owal--zielony, .owal--niebieski, .owal--fiolet, .owal--pomarancz, .owal--szary { --o: 255,255,255; background: transparent; color: var(--tekst2); }
.owal--zielony:hover, .owal--niebieski:hover, .owal--fiolet:hover, .owal--pomarancz:hover, .owal--szary:hover { color: var(--tekst); }
.owal--czerwony { --o: var(--czerwony); background: transparent; color: var(--czerwony-hex); }
/* plakietki statusu (owal() / owal_status()): kropka 8 px w kolorze z --o + słowo, bez tła */
.owal--mini[style*="--o"] { min-height: 0; padding: 2px 0; background: transparent; border-color: transparent; color: var(--tekst2); font-weight: var(--w-etykieta); cursor: default; }
.owal--mini[style*="--o"]::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--o)); flex: none; }
a.owal--mini[style*="--o"], button.owal--mini[style*="--o"] { min-height: 36px; padding: 0 var(--s2); border-color: var(--linia2); cursor: pointer; }
/* kolory statusów z PHP (STANY, STATUSY_* w boot.php, style="--o:r,g,b") sprowadzone do palety 3 + neutralny — bez zmian w PHP */
[style*="--o:255,214,10"], [style*="--o:234,179,8"], [style*="--o:249,115,22"] { --o: var(--zolty) !important; }
[style*="--o:56,189,248"], [style*="--o:168,85,247"], [style*="--o:236,72,153"], [style*="--o:161,158,151"] { --o: var(--szary) !important; }
[style*="--o:239,68,68"] { --o: var(--czerwony) !important; }
.owal--skan { gap: 8px; }
.owal--pelny { --o: var(--zolty); background: rgba(var(--o), .9); color: var(--na-zlocie); }
.owal--duch { border-style: dashed; color: var(--tekst2); background: transparent; }
.owale { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.owal input[type=radio], .owal input[type=checkbox] { display: none; }
.owal.wybor { --o: 255,255,255; }
.owal.wybor:has(input:checked), .owal.wybor.on { --o: var(--zolty); background: rgba(var(--zolty), .14); border-color: var(--zolty-hex); color: var(--tekst); }   /* bez --o: filtry mają kolor w style="--o:…" */
/* filtry z kolorem kategorii / statusu w style="--o:…" — neutralny kontur, kolor nie wraca na przyciski */
.owale > .owal[style*="--o"]:not(.owal--zolty):not(.on) { background: transparent; border-color: var(--linia2); color: var(--tekst2); }
.owale > .owal[style*="--o"]:not(.owal--zolty):not(.on):hover { border-color: rgba(255,255,255,.4); color: var(--tekst); }
.stan { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: var(--w-mocna); font-size: var(--fs-2); background: rgba(var(--o), .2); color: rgb(var(--o)); border: 1.5px solid rgba(var(--o), .7); }
.stan--duzy { width: 44px; height: 44px; font-size: var(--fs-4); flex: none; }
.stan { flex: none; }
.kropka-stan { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--o)); }

/* ── formularze ── */
.pole { width: 100%; height: 42px; border-radius: 12px; border: 1px solid var(--linia2); background: rgba(255,255,255,.04); color: var(--tekst); padding: 0 14px; font: inherit; outline: 0; transition: border-color var(--t-krotki) var(--ease), background-color var(--t-krotki) var(--ease), box-shadow var(--t-krotki) var(--ease); }
textarea.pole { height: auto; min-height: 90px; padding: 10px 14px; resize: vertical; line-height: 1.45; }
select.pole { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tekst2) 50%), linear-gradient(135deg, var(--tekst2) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
select.pole option { background: #17181b; }
.pole:focus { border-color: rgba(var(--zolty), .75); background: rgba(255,255,255,.07); box-shadow: 0 0 0 3px rgba(var(--zolty), .12); }
.pole--mono { font-family: var(--mono); }
.pole-et { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-2); color: var(--tekst2); font-weight: var(--w-etykieta); }
.pole-et .pole { color: var(--tekst); font-weight: 500; }
.pole-haslo { position: relative; display: block; }
.pole-haslo .pole { padding-right: 46px; }
.oczko { position: absolute; right: 10px; top: 9px; color: var(--zolty-hex); }
.oczko.on { color: var(--zolty-hover); }
.formularz { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.formularz .szer2 { grid-column: span 2; } .formularz .szer3 { grid-column: 1 / -1; }
.formularz .sekcja { grid-column: 1 / -1; margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.formularz .sekcja::after { content: ''; flex: 1; border-top: 1px solid var(--linia); }
.przelacznik { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--fs-2); }
.przelacznik input { display: none; }
.przelacznik i { width: 42px; height: 24px; border-radius: 999px; background: var(--pow3); border: 1px solid var(--linia2); position: relative; transition: background-color var(--t-krotki) var(--ease), border-color var(--t-krotki) var(--ease); }
.przelacznik i::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--tekst2); top: 2px; left: 2px; transition: left var(--t-krotki) var(--ease), background-color var(--t-krotki) var(--ease); }
.przelacznik input:checked + i { background: rgba(var(--zolty), .35); border-color: var(--zolty-hex); }
.przelacznik input:checked + i::after { left: 20px; background: var(--zolty-hex); }
.przelacznik input:disabled + i { opacity: .35; }   /* PROG-34: np. „hasło startowe” niedostępne dla roli magazyn / klient */
.pomoc { font-size: var(--fs-2); color: var(--tekst2); }
.jedn { display: flex; align-items: center; gap: 8px; }
.jedn .pole { flex: 1; } .jedn span { color: var(--tekst2); font-size: var(--fs-2); white-space: nowrap; }

/* ── karty i kafle ── */
.karta { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--r); padding: 20px; }
.karta--cicha { background: transparent; border-style: dashed; }
.karta-tytul { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.karta-tytul h3 { display: flex; align-items: center; gap: 10px; }
.siatka { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.siatka--szeroka { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.siatka--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.siatka--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.uklad-2 { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.uklad-2 > * { min-width: 0; }
.kpi { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi-el { --o: var(--zolty); background: var(--pow); border: 1px solid var(--linia); border-radius: var(--r); padding: var(--s3); position: relative; overflow: hidden;
  transition: border-color var(--t-krotki) var(--ease), transform var(--t-krotki) var(--ease), box-shadow var(--t-krotki) var(--ease); }
a.kpi-el:hover { border-color: var(--linia2); transform: translateY(-2px); box-shadow: var(--cien-maly); }
.kpi-el b { display: block; font-size: var(--fs-6); font-weight: var(--w-mocna); letter-spacing: -.03em; line-height: 1; color: var(--tekst); }
.kpi-el--uwaga b { color: var(--zolty-hex); }   /* jedyny złoty kafel: coś wymaga uwagi (np. „w serwisie” > 0) */
.kpi-el span { display: block; margin-top: var(--s1); font-size: var(--fs-2); color: var(--tekst2); font-weight: var(--w-etykieta); }
.kpi-el small { display: block; margin-top: 4px; font-size: var(--fs-2); color: var(--tekst2); }

.kafel { background: var(--pow); border: 1px solid var(--linia); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: border-color var(--t-krotki) var(--ease), transform var(--t-krotki) var(--ease), box-shadow var(--t-krotki) var(--ease); }
.kafel:hover { border-color: rgba(var(--zolty), .5); transform: translateY(-2px); box-shadow: var(--cien); }
/* zdjęcie wcięte 8 px w kafel: promień 24 − 8 = 16 */
.kafel-foto { aspect-ratio: 4 / 3; margin: var(--s1) var(--s1) 0; border-radius: var(--r2); background: var(--pow2); display: grid; place-items: center; overflow: hidden; position: relative; }
.kafel-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-dlugi) var(--ease); }
.kafel:hover .kafel-foto img { transform: scale(1.035); }
/* brak zdjęcia = monogram (pierwsza litera nazwy), bez ramki i napisu */
.kafel-foto .brak { font-size: var(--s5); line-height: 1; font-weight: var(--w-mocna); color: rgba(255,255,255,.10); user-select: none; }
.kafel-kod { position: absolute; top: 10px; left: 10px; font-family: var(--mono); font-size: var(--fs-1); background: rgba(0,0,0,.6); backdrop-filter: blur(6px); padding: 3px 8px; border-radius: 999px; color: #fff; }
.kafel-3d { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 8px; background: rgba(var(--zolty), .95); color: var(--na-zlocie); display: grid; place-items: center; font-size: var(--fs-1); font-weight: var(--w-mocna); }
.kafel-tresc { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kafel-nazwa { font-weight: var(--w-mocna); font-size: var(--fs-4); letter-spacing: -.01em; line-height: 1.25; }
.kafel-info { font-size: var(--fs-2); color: var(--tekst2); display: flex; gap: 10px; flex-wrap: wrap; }
.kafel-dol { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; align-items: center; }
/* kolor kategorii i statusów w style="color:…" na kaflu — wyciszony do --tekst2 (Fala 1: mniej kolorów; kolor zostaje w pasku stanu) */
.kafel-info span[style*="color"], .kafel-dol .chip[style*="color"] { color: var(--tekst2) !important; }
.kafel-pasek { display: flex; height: 5px; border-radius: 999px; overflow: hidden; background: var(--pow3); margin-top: 6px; }
.kafel-pasek i { display: block; height: 100%; }
.kafel--kat { padding: 18px; gap: 6px; cursor: pointer; }
.kafel--kat b { font-size: var(--fs-4); } .kafel--kat span { color: var(--tekst2); font-size: var(--fs-2); }

.postep { height: 8px; border-radius: 999px; background: var(--pow3); overflow: hidden; }
.postep i { display: block; height: 100%; background: var(--zolty-hex); border-radius: 999px; transition: width var(--t-dlugi) var(--ease); }
.postep--zielony i { background: rgb(var(--zielony)); }
.postep-tekst { display: flex; justify-content: space-between; font-size: var(--fs-2); color: var(--tekst2); margin-top: 6px; }

/* ── listy i tabele ── */
.lista { display: flex; flex-direction: column; gap: 6px; }
.wiersz { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--r2); background: var(--pow); border: 1px solid var(--linia); transition: border-color var(--t-krotki) var(--ease), background-color var(--t-krotki) var(--ease); }
.wiersz:hover { border-color: var(--linia2); background: var(--pow2); }
.wiersz--klik { cursor: pointer; }
.wiersz-mini { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: var(--pow3); flex: none; }
.wiersz-tekst { flex: 1; min-width: 0; }
.wiersz-tekst b { display: block; font-weight: var(--w-mocna); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiersz-tekst small { display: block; font-size: var(--fs-2); }
.wiersz-tekst small b { display: inline; white-space: normal; }
.wiersz-prawo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.tabela th { text-align: left; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; color: var(--tekst2); padding: 8px 10px; border-bottom: 1px solid var(--linia2); font-weight: var(--w-mocna); }
.tabela td { padding: 10px; border-bottom: 1px solid var(--linia); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: rgba(255,255,255,.025); }
.tabela .l { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-wrap { overflow-x: auto; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: var(--fs-2); }
.kv dt { color: var(--tekst2); } .kv dd { margin: 0; font-weight: 600; }
.kv dd.brak { color: var(--tekst2); font-weight: var(--w-tresc); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--pow3); font-size: var(--fs-2); font-weight: 600; color: var(--tekst2); }
.chip b { color: var(--tekst); }
.os { position: relative; padding-left: 22px; }
.os::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; border-left: 2px solid var(--linia2); }
.os-el { position: relative; padding: 6px 0 10px; font-size: var(--fs-2); }
.os-el::before { content: ''; position: absolute; left: -19px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--pow3); border: 2px solid var(--tekst3); }
.os-el b { display: block; } .os-el small { color: var(--tekst2); }

/* ── galeria kątów (8 pól) ── */
.katy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slot { aspect-ratio: 1; border-radius: var(--r2); border: 1px dashed var(--linia2); background: var(--pow2); position: relative; overflow: hidden; display: grid; place-items: center; cursor: pointer; transition: border-color var(--t-krotki) var(--ease); }
.slot:hover { border-color: rgba(var(--zolty), .7); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot--jest { border-style: solid; border-color: var(--linia); }
.slot-et { position: absolute; left: 8px; bottom: 8px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-mocna); padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.65); backdrop-filter: blur(6px); color: #fff; }
.slot--jest .slot-et { background: rgba(var(--zolty), .95); color: var(--na-zlocie); }
.slot-pusty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--tekst2); font-size: var(--fs-2); text-align: center; padding: 8px; }
.slot-pusty i { font-size: var(--fs-5); font-style: normal; opacity: .7; }
.slot-usun { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; display: grid; place-items: center; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; opacity: 0; transition: opacity var(--t-krotki) var(--ease); }
.slot:hover .slot-usun { opacity: 1; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.galeria .slot { aspect-ratio: 1; }

/* ── mapa uszkodzeń (szpilki na zdjęciu) ── */
.mapa { position: relative; border-radius: var(--r2); overflow: hidden; background: var(--pow2); cursor: crosshair; width: fit-content; max-width: 100%; margin: 0 auto; }
.mapa img { max-height: 62vh; width: auto; max-width: 100%; height: auto; display: block; }
.szpilka { --o: var(--czerwony); position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(var(--o), .9); color: #fff; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-mocna); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.6); cursor: pointer; }
.szpilka::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(var(--o), .55); animation: puls 1.8s infinite; }
@keyframes puls { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.mapa-pod { font-size: var(--fs-2); color: var(--tekst2); margin-top: 6px; }

/* ── oznaczenie: QR ── */
.qr-ramka { background: #fff; border-radius: 12px; padding: 8px; display: grid; place-items: center; }
.qr-ramka svg { width: 100%; height: auto; display: block; }
.szpilka--stara { opacity: .55; } .szpilka--stara::after { animation: none; }
.os-el[style*="--o"]::before { border-color: rgb(var(--o)); }
.wiersz.plan small { white-space: normal; }

/* ── skaner ── */
.skan-ekran { display: grid; place-items: center; text-align: center; padding: 30px 10px; gap: 18px; }
.nfc-pierscien { width: 180px; height: 180px; border-radius: 50%; display: grid; place-items: center; position: relative; color: var(--zolty-hex); }
.nfc-pierscien::before, .nfc-pierscien::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(var(--zolty), .5); animation: fala 2.4s infinite; }
.nfc-pierscien::after { animation-delay: 1.2s; }
.nfc-pierscien .ik-nfc { width: 86px; height: 86px; border-width: 6px; }
.nfc-pierscien .ik-nfc::before { inset: 12px; border-width: 4px; } .nfc-pierscien .ik-nfc::after { width: 14px; height: 14px; left: 18px; top: 18px; }
.nfc-pierscien.ok { color: rgb(var(--zielony)); } .nfc-pierscien.ok::before, .nfc-pierscien.ok::after { border-color: rgba(var(--zielony), .6); }
.nfc-pierscien.blad { color: rgb(var(--czerwony)); animation: none; }
@keyframes fala { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.skan-stan { font-size: var(--fs-3); color: var(--tekst2); max-width: 440px; }
.skan-stan b { color: var(--tekst); }
.skan-wideo { width: min(100%, 520px); border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 4/3; position: relative; }
.skan-wideo video { width: 100%; height: 100%; object-fit: cover; }
.skan-wideo .ramka { position: absolute; inset: 14% 18%; border: 2px solid rgba(var(--zolty), .9); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.skan-wynik { width: min(100%, 560px); }

/* ── kroki (inwentaryzacja) ── */
.kroki { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 4px; }
.krok { flex: 1; min-width: 86px; padding: 8px 10px; border-radius: 12px; background: var(--pow); border: 1px solid var(--linia); font-size: var(--fs-2); color: var(--tekst2); display: flex; flex-direction: column; gap: 3px; cursor: pointer; white-space: nowrap; }
.krok b { color: var(--tekst); font-size: var(--fs-2); display: flex; align-items: center; gap: 6px; }
.krok.ok { border-color: rgba(var(--zielony), .5); } .krok.ok b::before { content: '✓'; color: rgb(var(--zielony)); }
.krok.teraz { border-color: var(--zolty-hex); background: rgba(var(--zolty), .1); }
.krok-tresc { display: none; }
.krok-tresc.teraz { display: block; }
.wybor-duzy { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wybor-duzy button { --o: var(--szary); padding: 16px 14px; border-radius: var(--r2); background: var(--pow); border: 1.5px solid var(--linia2); text-align: left; display: flex; gap: 12px; align-items: center; transition: border-color var(--t-krotki) var(--ease), background-color var(--t-krotki) var(--ease), box-shadow var(--t-krotki) var(--ease); }
.wybor-duzy button b { font-size: var(--fs-3); display: block; } .wybor-duzy button small { font-size: var(--fs-2); color: var(--tekst2); display: block; line-height: 1.3; }
.wybor-duzy button:hover { border-color: rgba(var(--o), .7); }
.wybor-duzy button.on { border-color: rgb(var(--o)); background: rgba(var(--o), .14); box-shadow: 0 0 0 3px rgba(var(--o), .15); }
.krok-stopka { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.szybkie { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── aparat / wgrywanie ── */
.wgraj { display: inline-flex; }
.wgraj input { display: none; }
.podglad-foto { width: 100%; max-height: 50vh; object-fit: contain; border-radius: var(--r2); background: #000; }

/* ── scena 3D ── */
.scena-uklad { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.scena-plotno { position: relative; aspect-ratio: 16 / 10; min-height: 420px; background: #0d0e11; border-radius: var(--r); overflow: hidden; border: 1px solid var(--linia); }
.scena-plotno canvas { display: block; width: 100% !important; height: 100% !important; }
.scena-hud { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.scena-hud2 { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.scena-dymek { position: absolute; left: 12px; bottom: 12px; background: rgba(10,10,10,.82); backdrop-filter: blur(10px); border: 1px solid var(--linia2); border-radius: var(--r2); padding: 10px 14px; font-size: var(--fs-2); max-width: 320px; }
.scena-lista .wiersz { padding: 8px 10px; }
.model-plotno { aspect-ratio: 4 / 3; background: radial-gradient(circle at 50% 40%, #1b1c20, #0b0c0e); border-radius: var(--r2); overflow: hidden; position: relative; border: 1px solid var(--linia); }
.model-plotno canvas { width: 100% !important; height: 100% !important; display: block; }
.model-plotno .brak { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tekst2); text-align: center; padding: 20px; }

/* ── oś czasu zleceń ── */
.os-czasu { display: grid; grid-template-columns: 220px 1fr; font-size: var(--fs-2); }
.os-czasu-glowa { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--linia2); }
.os-czasu-glowa span { text-align: center; padding: 6px 0; color: var(--tekst2); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; border-left: 1px solid var(--linia); }
.os-czasu-glowa span.dzis { color: var(--zolty-hex); font-weight: var(--w-mocna); }
.os-czasu-rzad { display: contents; }
.os-czasu-naz { padding: 8px 10px; border-bottom: 1px solid var(--linia); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-czasu-tor { position: relative; border-bottom: 1px solid var(--linia); min-height: 36px; background-image: linear-gradient(90deg, var(--linia) 1px, transparent 1px); }
.os-czasu-pas { --o: var(--niebieski); position: absolute; top: 7px; height: 22px; border-radius: 999px; background: rgba(var(--o), .3); border: 1px solid rgba(var(--o), .8); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; padding: 0 8px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; color: #fff; }

/* ── kalendarz miesiąca ── */
.kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-d { min-height: 56px; border-radius: 10px; background: var(--pow); border: 1px solid var(--linia); padding: 5px 7px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; color: var(--tekst2); }
.kal-d.dzis { border-color: var(--zolty-hex); }
.kal-d.zaj { background: rgba(var(--niebieski), .12); border-color: rgba(var(--niebieski), .4); color: var(--tekst); }
.kal-d b { display: block; font-size: var(--fs-2); }

/* ── login ── */
.strona-login { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login { width: min(100%, 400px); display: flex; flex-direction: column; align-items: center; gap: 30px; }
.login-form { width: 100%; display: flex; flex-direction: column; gap: 14px; background: var(--pow); border: 1px solid var(--linia); border-radius: var(--r); padding: 26px; }
.login-form .owal { margin-top: 6px; }
.login-blad { color: var(--czerwony-hex); font-weight: 600; font-size: var(--fs-2); }

/* ── toasty ── */
.toasty { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; }
.toast { padding: 10px 18px; border-radius: 999px; background: var(--pow3); border: 1px solid var(--linia2); font-weight: 600; font-size: var(--fs-2); box-shadow: var(--cien); animation: toast var(--t-krotki) var(--ease); }
.toast--blad { border-color: var(--czerwony-hex); }
@keyframes toast { from { opacity: 0; transform: translateY(10px); } }

/* ── okno (modal) ── */
.okno-tlo { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); z-index: 90; display: grid; place-items: center; padding: 16px; }
.okno { width: min(100%, 560px); max-height: 90vh; overflow-y: auto; background: var(--pow); border: 1px solid var(--linia2); border-radius: var(--r); padding: 22px; box-shadow: var(--cien); }
.okno--szerokie { width: min(100%, 920px); }
.okno-glowa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* ── druk / podgląd (reszta w widoku protokołu) ── */
/* PROG-14: zakładki główne + Wyloguj, pasek postępu wgrywania, usuwanie zdjęć na dotyk */
.menu-rozdz { width: 1px; background: var(--linia2); margin: 6px 6px; }
.menu-el--glowne { font-weight: var(--w-mocna); }
.menu-el--dod { font-size: var(--fs-2); padding: 8px 10px; }
.wyloguj { white-space: nowrap; }
/* PROG-34: „Moje konto” obok Wyloguj — inicjał + podpis; na telefonie sam inicjał */
.konto-link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 600; font-size: var(--fs-2); color: var(--tekst2); }
.konto-link:hover, .konto-link.aktywny { color: var(--tekst); }
.konto-link.aktywny .konto { border-color: var(--zolty-hex); }
.wiecej { display: none; position: relative; }
.wiecej summary { list-style: none; cursor: pointer; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linia2); display: flex; align-items: center; gap: 6px; font-weight: var(--w-mocna); font-size: var(--fs-2); }
.wiecej summary::-webkit-details-marker { display: none; }
.wiecej-lista { position: absolute; right: 0; top: 46px; min-width: 210px; background: var(--pow); border: 1px solid var(--linia2); border-radius: var(--r); padding: 8px; box-shadow: var(--cien); display: flex; flex-direction: column; z-index: 60; }
.wiecej-lista a { display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 10px; font-weight: 600; }
.wiecej-lista a:hover { background: rgba(255,255,255,.06); }
.dol { grid-auto-flow: column; grid-auto-columns: 1fr; }
.dol .dol-wyloguj { color: var(--tekst2); }
.postep-tlo { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 20px; }
/* okno postępu wgrywania (R.postep) — tylko w .postep-tlo; bez zawężenia nadpisywało pasek .postep (kompletność karty była pustą ramką — F5, PROG-48) */
.postep-tlo .postep { height: auto; overflow: visible; width: min(420px, 100%); background: var(--pow); border: 1px solid var(--linia2); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.postep-tlo .postep small { color: var(--tekst2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.postep-pasek { height: 10px; border-radius: 999px; background: var(--pow3); overflow: hidden; margin-top: 6px; }
.postep-pasek i { display: block; height: 100%; width: 0; background: var(--zolty-hex); transition: width var(--t-krotki) var(--ease); }
.slot-glowne { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; opacity: 0; transition: opacity var(--t-krotki) var(--ease); }
.slot:hover .slot-glowne { opacity: 1; }
@media (hover: none) { .slot-usun, .slot-glowne { opacity: 1; } }
@media print { .pasek, .dol, .stopka, .naglowek-akcje, .toasty { display: none !important; } body { background: #fff; color: #000; } }

/* ── telefon ── */
@media (max-width: 1100px) {
  .scena-uklad { grid-template-columns: 1fr; }
  .uklad-2 { grid-template-columns: 1fr; }
  .szukaj input { width: 170px; }
  .menu-el { padding: 8px 10px; font-size: var(--fs-2); }
}
@media (max-width: 900px) {
  :root { --pasek-h: 58px; }
  .menu, .szukaj { display: none; }
  .dol { display: grid; }
  .pasek .wyloguj { display: none; }
  .konto-et { display: none; }   /* na telefonie sam inicjał; Wyloguj w „Moje konto” (PROG-48: dolny pasek ma Skanuj zamiast Wyloguj) */
  .wiecej { display: block; } .wiecej summary span { display: none; }
  .tresc { padding: 16px 14px calc(var(--dol-h) + 40px); }
  .stopka { padding-bottom: calc(var(--dol-h) + 20px); }
  .pasek { padding: 0 14px; gap: 10px; }
  .pasek-prawo { margin-left: auto; }
  .katy { grid-template-columns: repeat(3, 1fr); }
  .os-czasu { grid-template-columns: 120px 1fr; }
  .owal--skan { display: none; }
  .formularz .szer2 { grid-column: auto; }
  .siatka--2 { grid-template-columns: minmax(0, 1fr); }   /* minmax(360px) był szerszy niż telefon 390 px (Moje konto) */
  .hh-powered-znak { height: 40px; } .hh-powered-sig { font-size: 42px; }
}
@media (max-width: 480px) { .katy { grid-template-columns: repeat(2, 1fr); } .siatka { grid-template-columns: repeat(2, 1fr); gap: 10px; } .siatka--2, .siatka--3, .siatka--szeroka { grid-template-columns: minmax(0, 1fr); } /* PROG-45: panele (konto, ustawienia, skan…) jedną kolumną */ .wiersz--sesja { flex-wrap: wrap; } .wiersz--sesja .wiersz-tekst { flex-basis: calc(100% - 60px); } .kafel-nazwa { font-size: var(--fs-2); } .wybor-duzy { grid-template-columns: 1fr; } .wybor-duzy button { padding: 12px 14px; } .kroki .krok { min-width: 74px; } .naglowek-akcje .owal { padding: 7px 12px; font-size: var(--fs-2); } }

/* ── PROG-17: stoiska z OPS — karta stoiska, spis elementów, karta elementu ──
   Klasy .sel-* jak w OPS (opis-karty-elementu-OPS.md): dziewięć kafli w stałej sekwencji kolorów, CAŁY kafel w swoim kolorze, tło ciemne + tekst jasny w tonacji kafla. */
.hh-stoisko { display: flex; flex-direction: column; gap: 14px; max-width: 1500px; margin: 0 auto; }
.okruchy { font-size: var(--fs-2); color: var(--tekst2); } .okruchy a { color: var(--tekst2); text-decoration: underline; text-underline-offset: 3px; } .okruchy a:hover { color: var(--tekst); }
.sel-naglowek { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.sel-ow { display: inline-flex; align-items: center; justify-content: center; padding: 6px 20px; border-radius: 999px; font-weight: var(--w-mocna); font-size: var(--fs-5); line-height: 1.2; border: 2px solid #ec4899; background: #fbcfe8; color: #831843; text-align: center; }
.sel-ow--duzy { font-size: var(--fs-5); padding: 8px 26px; }
.sel-ow--rozowy { background: #fbcfe8; border-color: #ec4899; color: #831843; }
.sel-ow--ghost { background: rgba(255,255,255,.04); border: 1px solid var(--linia2); color: var(--tekst); font-size: var(--fs-2); font-weight: var(--w-mocna); padding: 8px 18px; }
.sel-ow--ghost:hover { border-color: rgba(var(--zolty), .6); }
button.sel-ow { cursor: pointer; font-family: inherit; }
.sel-ow--mini { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; padding: 2px 10px; }
.sel-ow--nazwa { font-size: var(--fs-2); padding: 3px 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: var(--tekst); }
.sel-ow--gab { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: 2px 11px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #f4d6e6; }

/* owale „Czy to mamy na magazynie”: wybrany nasycony, reszta blada, jeden odcień na stan */
.sel-przyj { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sel-przyj > * { --c: 255,255,255; padding: 4px 14px; border-radius: 999px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-mocna); border: 1px solid rgba(var(--c), .35); background: rgba(var(--c), .06); color: rgba(var(--c), .75); }
.sel-przyj > .on { background: rgba(var(--c), .9); color: #0b0b0b; border-color: rgb(var(--c)); }
.sel-przyj-jest { --c: 47,199,111; } .sel-przyj-nie-dotarlo { --c: 239,68,68; } .sel-przyj-wypozyczone { --c: 129,140,248; } .sel-przyj-do-sprawdzenia { --c: 234,179,8; }
.sel-przyj > .on.sel-przyj-jest { background: #2f6f4a; color: #d2ffe3; border-color: #2fc76f; }
button.sel-przyj-jest, button.sel-przyj-nie-dotarlo, button.sel-przyj-wypozyczone, button.sel-przyj-do-sprawdzenia { cursor: pointer; font-family: inherit; }

/* pasek informacyjny (owale) */
.hh-info { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.hh-ow { --c: 255,255,255; display: inline-flex; align-items: center; padding: 3px 14px; border-radius: 999px; font-size: var(--fs-2); font-weight: var(--w-mocna); border: 1px solid rgba(var(--c), .35); background: rgba(var(--c), .07); color: rgba(var(--c), .92); }
a.hh-ow:hover { background: rgba(var(--c), .2); }
.hh-ow--zielony { --c: 47,199,111; } .hh-ow--czerwony { --c: 239,68,68; background: #d6354a; color: #fff; border-color: #ef4444; } .hh-ow--niebieski { --c: 129,140,248; } .hh-ow--zolty { --c: 234,179,8; }
.hh-skroty { font-size: var(--fs-2); }

/* kafel — jedna reguła koloruje całość; zmienne ustawia .sel-k-<kolor> */
.sel-kafel { --k-bg1: #3a1230; --k-bg2: #240a1f; --k-ob: #ec4899; --k-txt: #ffd4e6; --k-tyt: #f9a8d4; --k-rgb: 236,72,153;
  position: relative; border-radius: 18px; padding: 16px 16px 18px; background: linear-gradient(160deg, var(--k-bg1), var(--k-bg2)); border: 1px solid var(--k-ob); color: var(--k-txt); min-width: 0; }
.sel-kafel:hover { box-shadow: 0 0 0 1px var(--k-ob) inset; }
.sel-k-blekit { --k-bg1: #0f3a73; --k-bg2: #0a2147; --k-ob: #60a5fa; --k-txt: #d6e7ff; --k-tyt: #93c5fd; --k-rgb: 96,165,250; }
.sel-k-fiolet { --k-bg1: #3b2377; --k-bg2: #231446; --k-ob: #a78bfa; --k-txt: #e6dcff; --k-tyt: #c4b5fd; --k-rgb: 167,139,250; }
.sel-k-zloto { --k-bg1: #5a4410; --k-bg2: #382a08; --k-ob: #d9ab5c; --k-txt: #ffe9bf; --k-tyt: #f0c978; --k-rgb: 217,171,92; }
.sel-k-turkus { --k-bg1: #0c524b; --k-bg2: #07312e; --k-ob: #2dd4bf; --k-txt: #c9fff7; --k-tyt: #5eead4; --k-rgb: 45,212,191; }
.sel-k-roz { --k-bg1: #6b1243; --k-bg2: #430a2a; --k-ob: #ec4899; --k-txt: #ffd4e6; --k-tyt: #f9a8d4; --k-rgb: 236,72,153; }
.sel-k-zielen { --k-bg1: #0f5a32; --k-bg2: #093820; --k-ob: #2fc76f; --k-txt: #d2ffe3; --k-tyt: #6ee7a0; --k-rgb: 47,199,111; }
.sel-k-bursztyn { --k-bg1: #6a430a; --k-bg2: #432806; --k-ob: #f59e0b; --k-txt: #ffe8c2; --k-tyt: #fbbf24; --k-rgb: 245,158,11; }
.sel-k-czerwien { --k-bg1: #6a1616; --k-bg2: #420c0c; --k-ob: #ef4444; --k-txt: #ffd6d6; --k-tyt: #fca5a5; --k-rgb: 239,68,68; }
.sel-k-pomarancz { --k-bg1: #7a3a10; --k-bg2: #4a2208; --k-ob: #fb923c; --k-txt: #ffe1cc; --k-tyt: #fdba74; --k-rgb: 251,146,60; }
.sel-kafel--alarm { box-shadow: 0 0 22px rgba(239,68,68,.35); }
.sel-tyt-wrap { text-align: center; margin-bottom: 8px; }
.sel-tyt { display: inline-block; padding: 4px 18px; border-radius: 999px; font-weight: var(--w-mocna); font-size: var(--fs-3); background: rgba(var(--k-rgb), .22); border: 1px solid var(--k-ob); color: var(--k-tyt); }
.sel-sub { text-align: center; font-size: var(--fs-2); color: var(--k-txt); opacity: .85; margin: 4px 0 8px; }
.sel-opis { font-size: var(--fs-2); color: var(--k-txt); line-height: 1.5; margin: 6px 0; }
.sel-link { color: var(--k-tyt); text-decoration: underline; }
.sel-owale { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 10px; } .sel-owale--srodek { justify-content: center; gap: 10px; }
.sel-kafel .sel-ow--gab { background: rgba(var(--k-rgb), .18); border-color: var(--k-ob); color: var(--k-txt); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; }
.sel-owal { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-mocna); background: rgba(var(--k-rgb), .2); border: 1px solid rgba(var(--k-rgb), .8); color: var(--k-tyt); vertical-align: middle; }
.sel-owal--duzy { font-size: var(--fs-2); padding: 4px 16px; }
.sel-wpisy { display: flex; flex-direction: column; }
.sel-w { font-size: var(--fs-2); padding: 8px 0; border-bottom: 1px solid rgba(var(--k-rgb), .3); } .sel-w:last-child { border-bottom: 0; }
.sel-d { font-weight: var(--w-mocna); } .sel-kto { color: var(--k-tyt); }
.sel-x { color: var(--k-tyt); background: rgba(var(--k-rgb), .2); border: 1px solid rgba(var(--k-rgb), .6); border-radius: 999px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; width: 20px; height: 20px; line-height: 1; padding: 0; text-align: center; }
.sel-x--tekst { width: auto; padding: 1px 9px; height: auto; font-weight: var(--w-mocna); }
.sel-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .sel-form--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sel-form .szer2 { grid-column: 1 / -1; }
.sel-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-2); color: var(--k-txt); }
.sel-form input, .sel-form textarea, .sel-form select { width: 100%; font: inherit; font-size: var(--fs-2); padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.28); color: var(--k-txt); border: 1px solid rgba(var(--k-rgb), .55); }
.sel-form textarea { resize: vertical; } .sel-form select option { background: #1a1a1a; color: #fff; }
.sel-form input:focus, .sel-form textarea:focus, .sel-form select:focus { outline: 0; border-color: var(--k-ob); box-shadow: 0 0 0 2px rgba(var(--k-rgb), .3); }
.sel-przycisk { align-self: flex-end; padding: 7px 18px; border-radius: 999px; font-weight: var(--w-mocna); font-size: var(--fs-2); background: rgba(var(--k-rgb), .25); border: 1px solid var(--k-ob); color: var(--k-txt); font-family: inherit; } .sel-przycisk:hover { background: rgba(var(--k-rgb), .45); }
.sel-przycisk.szer2 { justify-self: end; }
.sel-siatka { display: grid; gap: 14px; grid-template-columns: 1fr; } .sel-siatka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sel-siatka--2 { grid-template-columns: 1fr 1fr; }
.sel-siatka--4:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sel-minis { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sel-mini { position: relative; display: block; width: 110px; height: 110px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(var(--k-rgb), .6); background: rgba(0,0,0,.35); }
.sel-mini img { width: 100%; height: 100%; object-fit: cover; } .sel-mini--72 { width: 72px; height: 96px; } .sel-mini--duze { width: 190px; height: 190px; }
.sel-mini--brak, .sel-mini--wiecej { display: flex; align-items: center; justify-content: center; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; color: var(--k-txt); opacity: .7; text-align: center; border-style: dashed; }
.sel-plikilista, .sel-kafel .sel-minis { align-items: flex-start; }
.sel-plik { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 14px 5px 6px; border-radius: 999px; font-size: var(--fs-2); font-weight: var(--w-mocna); text-align: left; background: rgba(var(--k-rgb), .2); border: 1px solid var(--k-ob); color: var(--k-txt); cursor: pointer; font-family: inherit; }
.sel-plik b { flex: none; padding: 1px 8px; border-radius: 999px; background: #e11d48; color: #fff; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; }
.sel-plik:hover { background: rgba(var(--k-rgb), .38); } .sel-plik--brak { opacity: .55; cursor: default; }
.sel-plikilista { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hh-kat { margin-top: 10px; } .hh-kat summary { cursor: pointer; font-weight: var(--w-mocna); color: var(--k-tyt); padding: 6px 2px; list-style: none; } .hh-kat summary::-webkit-details-marker { display: none; }
.hh-kat summary::before { content: '▸ '; } .hh-kat[open] summary::before { content: '▾ '; } .hh-kat .sel-minis { margin: 8px 0 4px; }
.hh-glb { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(var(--k-rgb), .5); display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.hh-glb canvas { width: 100% !important; height: 100% !important; display: block; }
.hh-ramka { width: 100%; height: 520px; border: 1px solid rgba(var(--k-rgb), .5); border-radius: 12px; background: #fff; }
.hh-dwa { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hh-nawig { margin-top: 4px; }

/* karta stoiska: kafelki spisu — jak w OPS, bordowy róż; Tri.hee granatowe (hh-w-granat) */
.hh-kafel--roz { --k-bg1: #4c1239; --k-bg2: #2c0a22; }
.hh-w-granat .hh-kafel--roz, .hh-w-granat .hh-el, .hh-w-granat .hh-karta { --g1: #14264f; --g2: #0b1632; --gob: #3b6fd8; }
.hh-w-granat .hh-kafel--roz { --k-bg1: #112a5c; --k-bg2: #0a1a3d; --k-ob: #5b8ef0; --k-txt: #dbe6ff; --k-tyt: #93b4ff; --k-rgb: 91,142,240; }
.hh-spis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 10px; }
.hh-el { --g1: #5d1747; --g2: #380d2b; --gob: #b02a7a; position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 8px 12px; border-radius: 16px; text-align: center; background: linear-gradient(160deg, var(--g1), var(--g2)); border: 1px solid var(--gob); color: #ffd9ec; }
.hh-el:hover { box-shadow: 0 0 0 1px var(--gob) inset, 0 8px 24px rgba(0,0,0,.4); }
.hh-el-foto { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.35); } .hh-el-foto img { width: 100%; height: 100%; object-fit: cover; } .hh-el-foto i { display: flex; height: 100%; align-items: center; justify-content: center; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
.hh-el-nr { position: absolute; top: 14px; left: 14px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.4); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-mocna); display: flex; align-items: center; justify-content: center; z-index: 1; }
.hh-el-st { position: absolute; top: 14px; right: 14px; z-index: 1; padding: 1px 9px; border-radius: 999px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-mocna); background: rgba(0,0,0,.65); border: 1px solid #eab308; color: #fde68a; }
.hh-el-st--jest { border-color: #2fc76f; color: #bbf7d0; } .hh-el-st--nie-dotarlo { border-color: #ef4444; color: #fecaca; } .hh-el-st--wypozyczone { border-color: #818cf8; color: #c7d2fe; }
.hh-el-nazwa { font-size: var(--fs-2); } .hh-el-il { font-size: var(--fs-2); opacity: .75; }
.hh-el-gab { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .hh-el-gab .sel-ow--gab { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; padding: 1px 8px; }
.hh-el-pdf { font-size: var(--fs-2); padding: 2px 10px; border-radius: 999px; border: 1px solid #ec4899; background: rgba(236,72,153,.2); } .hh-el-pdf b { background: #e11d48; color: #fff; border-radius: 999px; padding: 0 6px; margin-right: 3px; }
.hh-el-opis { font-size: var(--fs-2); opacity: .6; line-height: 1.35; }

/* spis pełny: karty elementów */
.hh-spis-pelny { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hh-karta { --g1: #5d1747; --g2: #380d2b; --gob: #b02a7a; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: linear-gradient(160deg, var(--g1), var(--g2)); border: 1px solid var(--gob); color: #ffd9ec; min-width: 0; }
.hh-karta-gora { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; font-weight: var(--w-mocna); }
.hh-karta-gab { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.hh-karta-foto .sel-mini { width: 64px; height: 84px; --k-rgb: 255,255,255; }
.hh-karta .sel-przyj > * { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; }
.hh-karta-opis { font-size: var(--fs-2); margin: 0; } .hh-karta-ost { font-size: var(--fs-2); margin: 0; opacity: .85; line-height: 1.5; } .hh-ost-ust { color: #f9a8d4; font-weight: var(--w-mocna); }
.hh-karta .sel-minis, .hh-el { --k-rgb: 255,255,255; }

/* podgląd plików: lightbox zdjęć, PDF, GLB */
.hh-lb { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.hh-lb-tresc { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.hh-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.hh-lb iframe { width: min(1100px, 100%); height: 100%; border: 0; background: #fff; border-radius: 8px; }
.hh-lb .hh-glb { width: min(1000px, 100%); height: 100%; aspect-ratio: auto; }
.hh-lb-opis { color: #ddd; font-size: var(--fs-2); padding: 10px 0 0; text-align: center; }
.hh-lb-btn { position: absolute; top: 12px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: var(--fs-5); }
.hh-lb-nast, .hh-lb-poprz { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 64px; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; font-size: var(--fs-5); }
.hh-lb-nast { right: 10px; } .hh-lb-poprz { left: 10px; }

@media (max-width: 1100px) { .sel-siatka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* telefon = jedna kolumna, kafel pod kaflem */
@media (max-width: 760px) {
  .sel-siatka--4, .sel-siatka--2, .hh-dwa { grid-template-columns: 1fr; }
  .sel-ow { font-size: var(--fs-4); padding: 5px 14px; } .sel-ow--duzy { font-size: var(--fs-4); }
  .hh-spis { grid-template-columns: 1fr 1fr; gap: 8px; } .hh-spis-pelny { grid-template-columns: 1fr; }
  .sel-mini--duze { width: calc(50% - 6px); height: auto; aspect-ratio: 1; } .hh-ramka { height: 380px; }
}
/* pasek górny: 12 pozycji menu + szukajka nie mieści się w 1500 px — działy dodatkowe idą do „Więcej” już poniżej 1750 px (zrzuty PROG-17 wykazały poziomy przewijak) */
@media (max-width: 1750px) and (min-width: 901px) { .menu-el--dod, .menu-rozdz { display: none; } .wiecej { display: block; } }
.sel-form--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sel-form label { min-width: 0; }

/* PROG-30/31/32: góra formularza pozycji — Nazwa, potem sekcje Zdjęcia / Filmy / Pliki jako siatka kwadratowych kafli
   (miniatury z ✕ + zawsze na końcu pusty kafel z „Dodaj …” i owalem „Zrób …”), na końcu notatka. Telefon: 3 kafle w rzędzie */
.kafle-gora { display: flex; flex-direction: column; gap: 14px; }
.kafle-gora > small { font-size: var(--fs-2); }
.kafle-gora .pole[name=nazwa] { font-size: var(--fs-4); }
.kafle-sekcja { display: flex; flex-direction: column; gap: 8px; }
.kafle-tyt { font-size: var(--fs-2); color: var(--tekst2); font-weight: 600; }
.kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-width: 760px; }
.kafel-min, .kafel-dodaj { position: relative; aspect-ratio: 1; min-width: 0; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--linia); background: var(--pow2); }
.kafel-min img, .kafel-min video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kafel-min--glowne { border-color: var(--zolty-hex); box-shadow: 0 0 0 1px var(--zolty-hex); }
.kafel-ik { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-6); }
.kafel-czas { position: absolute; left: 4px; bottom: 4px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-mocna); padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.72); color: #fff; }
.kafel-min--plik { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; }
.kafel-typ { font-family: var(--mono); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-mocna); padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(var(--zolty), .5); color: var(--zolty-hex); }
.kafel-naz { font-size: var(--fs-2); line-height: 1.25; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; }
.kafel-min--plik small { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; color: var(--tekst2); }
.kafel-dodaj { border: 1px dashed var(--linia2); background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 4px; padding: 4px; overflow: visible; }
.kafel-dodaj-glowny { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 10px;
  background: transparent; color: var(--tekst); font: inherit; font-size: var(--fs-5); line-height: 1; cursor: pointer; padding: 4px; }
.kafel-dodaj-glowny span { font-size: var(--fs-2); font-weight: var(--w-mocna); line-height: 1.2; }
.kafel-dodaj-glowny:hover { background: rgba(var(--zolty), .08); color: var(--zolty-hex); }
.kafel-dodaj-owal { min-height: 44px; padding: 6px 8px; font-size: var(--fs-2); white-space: nowrap; }
.foto-min-glowne { position: absolute; left: 4px; bottom: 4px; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-mocna); padding: 1px 6px; border-radius: 999px; background: var(--zolty-hex); color: var(--na-zlocie); }
.foto-min-usun { position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.72); color: #fff; font-size: var(--fs-2); line-height: 28px; padding: 0; cursor: pointer; z-index: 1; }
.kafle-notatka { align-self: flex-start; min-height: 44px; }
.notatka-pole textarea { min-height: 110px; }
.notatka-pole[hidden] { display: none; }
@media (max-width: 900px) {
  .kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; }
  .kafle-notatka { align-self: stretch; }
}
@media (max-width: 360px) { .kafel-dodaj-owal { font-size: var(--fs-2); padding: 6px 4px; } }

/* PROG-33: szybkie dodanie — Nazwa + Liczba sztuk w jednym bloku, duży „Utwórz pozycję” (telefon: przyklejony nad dolnym paskiem),
   reszta pól w zwijanej sekcji „Szczegóły”; na liście Magazynu znacznik „do uzupełnienia” */
.szybkie { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 6px 14px; align-items: end; max-width: 760px; }
.szybkie > .pole-et:only-child { grid-column: 1 / -1; }
.sztuki { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 6px; }
.sztuki .pole { height: 42px; text-align: center; font-size: var(--fs-4); font-weight: var(--w-mocna); padding: 0 30px 0 6px; -moz-appearance: textfield; appearance: textfield; }
.sztuki .pole::-webkit-inner-spin-button, .sztuki .pole::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sztuki-btn { min-height: 42px; border-radius: 999px; border: 1px solid var(--linia2); background: var(--pow2); color: var(--tekst); font: inherit; font-size: var(--fs-5); font-weight: var(--w-mocna); line-height: 1; cursor: pointer; }
.sztuki-btn:hover { border-color: var(--zolty-hex); color: var(--zolty-hex); }
.szybkie-zapisz { max-width: 760px; }
.szybkie-zapisz .owal { width: 100%; justify-content: center; min-height: 54px; font-size: var(--fs-4); }
.szczegoly { border: 1px solid var(--linia); border-radius: var(--r2); padding: 0 14px; }
.szczegoly > summary { cursor: pointer; padding: 14px 0; font-weight: var(--w-mocna); font-size: var(--fs-3); list-style-position: inside; }
.szczegoly[open] > summary { border-bottom: 1px solid var(--linia); margin-bottom: 10px; }
.szczegoly > .formularz { padding-bottom: 16px; }
.chip--uzup { background: transparent; border: 1px dashed var(--linia2); color: var(--tekst2); font-weight: 600; }
/* PROG-35: Liczba sztuk zawsze obok Nazwy (klasy .sztuki*, bo .licznik to czerwony znaczek w nawigacji — PROG-33 na nim się rozjeżdżał), ta sama wysokość co Nazwa (42 px), jednostka „szt.” w polu; podpis pod całym wierszem;
   telefon: wąskie pole ~90 px bez −/+ (klawiatura numeryczna) */
.szybkie-ile { min-width: 0; }
.sztuki-pole { position: relative; display: block; }
.sztuki-jedn { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--tekst2); font-size: var(--fs-2); pointer-events: none; }
.szybkie-podpis { grid-column: 1 / -1; font-weight: 400; font-size: var(--fs-2); }
.szybkie-podpis.blad { color: var(--czerwony-hex); font-weight: 600; }
@media (max-width: 900px) {
  .szybkie { grid-template-columns: minmax(0, 1fr) 90px; gap: 6px 10px; }
  .szybkie .sztuki { grid-template-columns: minmax(0, 1fr); }
  .szybkie .sztuki-btn { display: none; }
  .szybkie-zapisz { position: fixed; left: 0; right: 0; bottom: calc(var(--dol-h) + env(safe-area-inset-bottom)); z-index: 45; padding: 10px 14px; background: linear-gradient(to top, var(--tlo, #0a0a0a) 70%, transparent); max-width: none; }
  form[data-api="przedmiot_zapisz"] { padding-bottom: 80px; }
}

/* PROG-35: karta pozycji — „Dołóż sztuki”: pole liczby + przycisk zamiast prompt() */
.dodaj-egz { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; }
.dodaj-egz .pole-et { width: 150px; }
.dodaj-egz .owal { min-height: 42px; }
.dodaj-egz .szer-pelna { flex-basis: 100%; }

/* PROG-40: warstwy zdjęć pozycji — zakładki, pasek „5/8 stron”, znaczki na miniaturach, szachownica pod PNG bez tła */
.warstwy-zakl { margin-bottom: 12px; }
.warstwa-glowa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.warstwa-glowa > p { flex: 1 1 260px; margin: 0; }
.strony-pasek { flex: 1 1 220px; max-width: 360px; }
.strony-pasek b { font-size: var(--fs-2); }
.slot-znaki { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; }
.slot-znaki i { font-style: normal; font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .08em; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.7); color: var(--zolty-hex); }
.slot--wybrane { outline: 3px solid var(--zolty-hex); outline-offset: -3px; }
.slot--alfa, .okno-foto.slot--alfa { background: repeating-conic-gradient(#2a2a2a 0 25%, #3a3a3a 0 50%) 0 0 / 20px 20px; }
.slot--alfa img { object-fit: contain; }
.okno-foto img { width: 100%; border-radius: 12px; display: block; }