/* Z650 (19.10.2026): panel i nawigacja planera kuchni (viewer/kuchnia.html) - projekt DOKUMENTY/Z650/PROJEKT-MENU.md.
   Skala: tekst 15 px, opisy 13 px, naglowki sekcji 15 px normalnym krojem (bez kapitalikow), cele dotyku >= 44 px, siatka 8.
   Kolory jak ALPCONF / identyfikacja czarnaszafa: czern #161616, miedz #B87333 (akcent), #A3662D (przycisk), ramka #e5e5e5. */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · komponent: panel narzedziowy (nie strona) · genre: utilitarian
   Tokeny (design-system: prymitywy -> semantyka): kolory, skala pisma, odstepy; reguly nizej uzywaja tylko var(). */
:root {
  --czern: #161616; --grafit: #404040; --szary-tekst: #6b6b6b; --szary-ikona: #9a948c; --linia: #e5e5e5; --jasne-tlo: #f5f5f5; --biel: #fff;
  --miedz: #B87333; --miedz-c: #a3662d; --miedz-h: #8a5024; --miedz-tlo: #fbf3ec; --miedz-jasna: #f3dcc6; --miedz-ramka: #ead9c6; --karta-tlo: #fbf8f4;
  --blad: #b91c1c; --blad-tlo: #fef2f2; --blad-ramka: #fecaca; --uwaga: #92400e; --uwaga-tlo: #fffbeb; --uwaga-ramka: #fde68a; --powod: #8a4a1c;
  --tekst: #171717; --szary: var(--szary-tekst); --ramka: var(--linia); --jasny: var(--jasne-tlo); --wybrane: var(--czern); --wybrane-tekst: var(--biel); --wybrane-cichy: #d4d4d4;
  --fs-tytul: 17px; --fs-tekst: 15px; --fs-kafel: 14px; --fs-opis: 13px; --fs-podpis: 12px; --fs-pasek: 11px; --krój: Inter, system-ui, sans-serif; --krój-tytul: Manrope, Inter, sans-serif;
  --ciemne: #1c1c1c; --ciemne-2: #2e2e2e; --ciemne-ramka: #3a3a3a; --ciemne-ramka-2: #555; --ciemne-tekst: #bbb; --ciemne-tekst-2: #eee; --ciemne-ikona: #aaa; --ok: #8fd18f; --miedz-na-ciemnym: #e7b98c; --placeholder: #9a9a9a; --blad-ciemny: #991b1b; --drzewo-hover: #f6f1ea; --drzewo-ikona: #efe9df; --karta-hover: #f0e6da; --linia-tabeli: #f0f0f0;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --cel: 44px; --promien: 6px; --ark-h: 50%; --panel-w: 440px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 15px/1.4 var(--krój); color: var(--tekst); background: var(--biel); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--miedz-c); outline-offset: 2px; }
button:disabled { cursor: default; }
input, select, textarea { font: inherit; color: inherit; }
#app { height: 100%; display: flex; flex-direction: column; position: relative; }

/* ------------------------------------------------------------ pasek sceny (naglowek): staly uklad, nic nie znika - niedostepne wyszarzone; podpis pod ikona na komputerze */
header { position: absolute; left: 0; right: 0; top: 0; z-index: 7; pointer-events: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 8px 12px 0; padding-top: max(8px, env(safe-area-inset-top)); }
header > div { display: flex; gap: 4px; align-items: flex-start; }
.okr { pointer-events: auto; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ramka); background: rgba(255,255,255,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--grafit); font: 500 11px/1 var(--krój); text-decoration: none; }
.okr svg { flex: none; }
.okr:disabled { opacity: .4; }
.okr.on { border-color: var(--miedz-c); color: var(--miedz-c); background: var(--miedz-tlo); }
.okr b { font: 700 14px/1 var(--krój); }
.okr span { white-space: nowrap; }
header h1 { margin: 0; font: 600 15px/1.2 var(--krój-tytul); white-space: nowrap; }
.okr.tytul { padding: 0 14px; flex-direction: row; }
@media (max-width: 899px) { .okr { min-width: 40px; height: 40px; padding: 0 6px; } .okr span { display: none; } .okr.tytul { display: none; } header > div { gap: 3px; } }

/* ------------------------------------------------------------ pasek zaznaczonej szafki na scenie (dosun, szerokosc, powiel, rodzaj, usun) */
#pasek { position: absolute; left: 50%; bottom: 46px; z-index: 5; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 12px; background: rgba(255,255,255,.97); box-shadow: 0 6px 20px rgba(0,0,0,.22); max-width: calc(100% - 16px); }
#pasek[hidden] { display: none; }
#pasek button { flex: none; min-width: 48px; height: 48px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--ramka); background: var(--biel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 600 12px/1 var(--krój); color: var(--grafit); }
#pasek button.duzy { font: 700 22px/1 var(--krój); }
#pasek button[hidden] { display: none; }
#pasek button.usun { color: var(--blad); border-color: var(--blad-ramka); }
#pasek #p-szer { min-width: 48px; text-align: center; font: 700 15px/1 var(--krój); color: var(--miedz-c); }
/* Z663: telefon - pasek na cala szerokosc, przyciski sciskaja sie rowno (usun nie wychodzi za krawedz), przy braku miejsca drugi rzad; napisy min. 12 px */
@media (max-width: 520px) { #pasek { width: calc(100% - 16px); box-sizing: border-box; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 4px; } #pasek button { flex: 1 1 40px; min-width: 40px; padding: 0 2px; } #pasek #p-szer { flex: 1 1 36px; min-width: 36px; } }

/* ------------------------------------------------------------ lista „+” w luce (typ i cena) */
#plus-menu { position: absolute; z-index: 8; width: 250px; max-height: 60%; overflow-y: auto; padding: 8px; border-radius: 10px; background: var(--biel); box-shadow: 0 8px 24px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 2px; }
#plus-menu[hidden] { display: none; }
#plus-menu .tyt { margin: 4px 8px 6px; }
#plus-menu button { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: 6px; font: 500 15px/1.2 var(--krój); text-align: left; }
#plus-menu button:hover { background: var(--jasny); }
#plus-menu button small { color: var(--szary); font-weight: 400; white-space: nowrap; font-size: 13px; }
#plus-menu button b { color: var(--miedz-c); font-weight: 600; white-space: nowrap; }
#plus-menu button.puste { color: var(--szary); }
#plus-menu button.wyp { font-weight: 600; }
/* Z648: wymiary wolnych luk w 3D / 2D (linia z kreskami + etykieta w cm, staly rozmiar na ekranie) - tokeny panelu */
#plusy svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#plusy svg line { stroke: var(--szary-ikona); stroke-width: 1; }
#plusy .wym { position: absolute; left: 0; top: 0; padding: 3px 6px; border-radius: var(--promien); background: rgba(255,255,255,.94); border: 1px dashed var(--szary-ikona); font: 600 var(--fs-podpis)/1 var(--krój); color: var(--grafit); white-space: nowrap; }
#plusy .wym[hidden] { display: none; }

/* ------------------------------------------------------------ drzewo szafek (Z635): komputer - panel na scenie z lewej; telefon - arkusz od dolu */
#drzewo { position: absolute; left: 12px; top: 64px; bottom: 64px; width: 300px; z-index: 8; overflow: auto; background: rgba(255,255,255,.97); border: 1px solid var(--ramka); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 8px; font: 500 14px/1.3 var(--krój); }
#drzewo[hidden] { display: none; }
#drzewo .d-tyt { display: flex; justify-content: space-between; align-items: center; font: 600 15px/1 var(--krój-tytul); padding: 6px 4px 10px; }
#drzewo .d-tyt button { width: 36px; height: 36px; border-radius: 6px; font-size: 18px; color: var(--szary-tekst); }
#drzewo .d-sc { font: 600 14px/1.2 var(--krój); color: var(--tekst); padding: 10px 4px 4px; border-top: 1px solid var(--ramka); }
#drzewo .d-sc:first-of-type { border-top: 0; }
#drzewo .d-poz { font: 500 13px/1.2 var(--krój); color: var(--szary); padding: 6px 4px 3px 12px; }
#drzewo .d-rz { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px 4px 8px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; user-select: none; }
#drzewo .d-rz:hover { background: var(--drzewo-hover); }
#drzewo .d-rz.on { background: var(--miedz-jasna); border-color: var(--miedz); }
#drzewo .d-rz .uch { cursor: grab; color: var(--szary-ikona); font-size: 18px; padding: 0 4px; touch-action: none; }
#drzewo .d-rz .ik { min-width: 26px; height: 22px; border-radius: 4px; background: var(--drzewo-ikona); color: var(--grafit); font: 700 11px/22px var(--krój); text-align: center; }
#drzewo .d-rz .nz { flex: 1; }
#drzewo .d-rz .nz small { font-size: 13px; color: var(--szary); }
#drzewo .d-rz .kon { color: var(--blad); font-weight: 800; }
#drzewo .d-rz.ciagniety { opacity: .45; }
#drzewo .cel-przed { box-shadow: 0 -2px 0 var(--miedz); }
#drzewo .cel-po { box-shadow: 0 2px 0 var(--miedz); }
#drzewo .d-poz.cel-po { background: var(--miedz-jasna); }
@media (max-width: 899px) { #drzewo { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62vh; border-radius: 14px 14px 0 0; z-index: 30; padding-bottom: max(12px, env(safe-area-inset-bottom)); } }

/* ------------------------------------------------------------ arkusz (panel): telefon od dolu, komputer z prawej */
#arkusz { flex: none; min-width: 0; overflow: hidden; height: var(--ark-h); background: var(--biel); border-top: 1px solid var(--ramka); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgba(0,0,0,.06); padding: 4px 16px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
#arkusz.zwiniety { height: auto; }
#arkusz.zwiniety > :not(#chwyt):not(#stopka) { display: none; }
#chwyt { display: flex; justify-content: center; touch-action: none; cursor: pointer; padding: 4px 0 0; }
#chwyt span { width: 44px; height: 5px; border-radius: 999px; background: var(--wybrane-cichy); }
/* kroki: 6 kolek z numerem, biezacy rozwiniety z nazwa - wszystkie widoczne na 400 px bez przewijania; pod spodem nazwa i opis kroku */
#kroki { display: flex; gap: 4px; align-items: center; flex: none; }
#kroki button { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0; border-radius: 22px; border: 1px solid var(--ramka); font: 600 15px/1 var(--krój); color: var(--grafit); background: var(--biel); }
#kroki button i { width: 28px; height: 28px; border-radius: 999px; background: var(--jasny); border: 1px solid var(--ramka); display: flex; align-items: center; justify-content: center; font: 700 14px/1 var(--krój); font-style: normal; }
#kroki button span { display: none; }
#kroki button.on { flex: 1; min-width: 0; background: var(--czern); color: var(--wybrane-tekst); border-color: var(--czern); padding: 0 14px 0 7px; justify-content: flex-start; }
#kroki button.on i { background: var(--miedz); border-color: var(--miedz); color: var(--wybrane-tekst); }
#kroki button.on span { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) { #kroki { gap: 3px; } #kroki button { height: 40px; min-width: 40px; font-size: 14px; } #kroki button i { width: 26px; height: 26px; font-size: 13px; } #kroki button.on { padding: 0 10px 0 6px; gap: 6px; } }
@media (max-width: 359px) { #kroki { gap: 2px; } #kroki button { min-width: 36px; } #kroki button.on { padding: 0 8px 0 5px; } }
#kroki button.zrob i { background: var(--biel); color: var(--miedz-c); border-color: var(--miedz-c); }
#krok-opis { margin: -2px 0 0; font: 400 13px/1.35 var(--krój); color: var(--szary); flex: none; }
#tresc { flex: 1; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
#stopka { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; flex: none; border-top: 1px solid var(--ramka); padding-top: 8px; }
#stopka .suma { min-width: 0; font: 700 17px/1.2 var(--krój-tytul); }
#stopka .suma small { display: block; font: 400 13px/1.3 var(--krój); color: var(--szary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dalej { flex: none; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 20px; border-radius: 8px; background: var(--miedz-c); color: var(--wybrane-tekst); font: 600 15px/1 var(--krój); }
#dalej:hover { background: var(--miedz-h); }

/* ------------------------------------------------------------ sekcje: naglowek 15 px normalnym krojem + opcjonalny opis, tresc w siatce 8 */
.ekran { display: flex; flex-direction: column; gap: 14px; }
.sek { display: flex; flex-direction: column; gap: 8px; }
.sek > h3 { margin: 0; font: 600 15px/1.3 var(--krój); color: var(--tekst); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sek > h3 small { font: 400 13px/1.3 var(--krój); color: var(--szary); }
.sek > h3 b { font-weight: 600; color: var(--miedz-c); }
.tyt { font: 600 15px/1.3 var(--krój); color: var(--tekst); }
.opis { font: 400 13px/1.45 var(--krój); color: var(--szary); margin: 0; }
.opis b { color: var(--tekst); font-weight: 600; }
.chipy { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { flex: none; max-width: 100%; min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ramka); background: var(--biel); font: 500 15px/1.2 var(--krój); color: var(--tekst); display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.chip.on { border-color: var(--czern); background: var(--czern); color: var(--wybrane-tekst); font-weight: 600; }
.chip.akcja { border-color: var(--miedz-c); color: var(--miedz-c); }
.chip.glowny { background: var(--miedz-c); border-color: var(--miedz-c); color: var(--wybrane-tekst); font-weight: 600; flex: 1; }
.chip.usun { color: var(--blad); border-color: var(--blad-ramka); }
.chip:disabled { opacity: .45; }
.chip small { font-weight: 400; color: var(--szary); font-size: 13px; }
.chip.on small { color: var(--wybrane-cichy); }
.chip .kropka { display: inline-block; width: 16px; height: 16px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); flex: none; }
.chip.uchw { padding-left: 6px; } .chip.uchw .pr { display: inline-block; width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--ramka); flex: none; }
/* kafle: ikona + nazwa + opis (rodzaje szafek, uklady frontow, AGD, ksztalt); niedostepne wyszarzone z powodem */
.kafle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.kafle.dwa { grid-template-columns: repeat(2, 1fr); }
.kafle button { min-height: 76px; padding: 8px 6px; border: 1px solid var(--ramka); border-radius: 6px; background: var(--biel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 14px/1.2 var(--krój); text-align: center; color: var(--tekst); }
.kafle button svg { flex: none; width: 44px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kafle button small { font: 400 12px/1.25 var(--krój); color: var(--szary); }
.kafle button.on { border-color: var(--czern); background: var(--czern); color: var(--wybrane-tekst); }
.kafle button.on small { color: var(--wybrane-cichy); }
/* scal73: kafle wariantow AGD (Z647, alpconf-kuchnia-agd.js) w tokenach panelu - cel dotyku 44, pismo 14, wybrane jak kafle */
#tresc .agd-war { gap: var(--sp-2); }
#tresc .agd-war .tyt { font: 500 var(--fs-tekst)/1.3 var(--krój); color: var(--tekst); margin-top: var(--sp-1); }
#tresc .agd-war .agd-rz { gap: var(--sp-2); }
#tresc .agd-kafel { min-height: var(--cel); border: 1px solid var(--ramka); border-radius: var(--promien); font: 600 var(--fs-kafel)/1.2 var(--krój); color: var(--tekst); }
#tresc .agd-kafel img { background: var(--biel); border-radius: 4px; }
#tresc .agd-kafel.on { border-color: var(--czern); background: var(--czern); color: var(--wybrane-tekst); box-shadow: none; }
.kafle button:disabled { opacity: .45; background: var(--jasny); }
.kafle button:disabled small { color: var(--powod); }
/* pola liczbowe */
.pola { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.pole { display: flex; flex-direction: column; gap: 4px; }
.pole label { font: 500 13px/1.2 var(--krój); color: var(--szary); }
.pole > div { display: flex; align-items: center; border: 1px solid var(--ramka); border-radius: 6px; background: var(--biel); height: 48px; padding: 0 0 0 12px; }
.pole input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 600 17px/1 var(--krój); outline: none; }
.pole input:focus { outline: none; }
.pole > div:focus-within { border-color: var(--czern); box-shadow: 0 0 0 1px var(--czern); }
.pole span { padding: 0 12px; color: var(--szary); font-size: 13px; }
.pole select { height: 48px; border: 1px solid var(--ramka); border-radius: 6px; background: var(--biel); padding: 0 10px; }
select.chip { padding: 0 12px; min-width: 0; max-width: 100%; }
/* wiersz listy (okna, drzwi, przylacza) */
.wiersz { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--ramka); border-radius: 6px; background: var(--biel); min-height: 56px; }
.wiersz.on { border-color: var(--miedz); box-shadow: 0 0 0 1px rgba(184,115,51,.3); }
.wiersz b { flex: 1; font: 600 15px/1.2 var(--krój); }
.wiersz b small { display: block; font: 400 13px/1.3 var(--krój); color: var(--szary); }
.wiersz input { width: 64px; height: 40px; border: 1px solid var(--ramka); border-radius: 6px; text-align: center; font: 600 15px/1 var(--krój); }
.wiersz select { height: 40px; border: 1px solid var(--ramka); border-radius: 6px; background: var(--biel); max-width: 120px; font-size: 14px; }
.wiersz .x { width: 40px; height: 40px; border-radius: 6px; color: var(--blad); display: flex; align-items: center; justify-content: center; font-size: 18px; }
/* karta zaznaczonego elementu (szafka, wyspa, okno, przylacze): naglowek z nazwa i miejscem, sekcje, dzialania */
#edytor { display: flex; flex-direction: column; gap: 14px; padding: 12px; border-radius: 10px; background: var(--karta-tlo); border: 1px solid var(--miedz-ramka); }
#edytor[hidden] { display: none; }
#edytor .naglowek { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
#edytor .naglowek b { display: block; font: 700 17px/1.25 var(--krój-tytul); color: var(--tekst); }
#edytor .naglowek small { display: block; font: 400 13px/1.35 var(--krój); color: var(--szary); margin-top: 2px; }
#edytor .naglowek button { flex: none; width: 40px; height: 40px; margin: -6px -6px 0 0; border-radius: 6px; font-size: 20px; color: var(--szary-tekst); }
#edytor .naglowek button:hover { background: var(--karta-hover); }
#edytor .zakres { font: 500 13px/1.35 var(--krój); color: var(--miedz-c); display: flex; align-items: center; gap: 6px; }
#edytor .zakres::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--miedz-c); flex: none; }
.caly-mebel { font: 500 13px/1.35 var(--krój); color: var(--szary); display: flex; align-items: center; gap: 6px; }
.caly-mebel::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--czern); flex: none; }
/* wymiary calej kuchni (details) */
#wymiary-kuchni { border: 1px solid var(--ramka); border-radius: 10px; background: var(--biel); padding: 0 12px 12px; }
#wymiary-kuchni summary { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 10px; cursor: pointer; list-style: none; min-height: 48px; }
#wymiary-kuchni summary::-webkit-details-marker { display: none; }
#wymiary-kuchni summary .tyt::after { content: 'rozwiń'; float: right; font: 500 13px/1.4 var(--krój); color: var(--miedz-c); }
#wymiary-kuchni[open] summary .tyt::after { content: 'zwiń'; }
#wymiary-kuchni summary small { font: 400 13px/1.35 var(--krój); color: var(--szary); }
.wym-grupa { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 4px; border-top: 1px solid var(--ramka); }
.wym-grupa > b { font: 600 15px/1.2 var(--krój); }
.wym-rzad { display: flex; flex-direction: column; gap: 6px; }
.wym-rzad label { font: 500 13px/1.2 var(--krój); color: var(--szary); }
.wym-rzad label b { color: var(--miedz-c); font-weight: 600; }
/* wyglad: kafle-zakladki z biezacym wyborem */
.zakladki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.zakladki button { min-height: 72px; padding: 8px 8px; border: 1px solid var(--ramka); border-radius: 6px; background: var(--biel); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; text-align: left; font: 600 14px/1.2 var(--krój); }
.zakladki button small { font: 400 12px/1.25 var(--krój); color: var(--szary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zakladki button i { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); flex: none; display: inline-block; background-size: cover; vertical-align: middle; margin-right: 4px; }
.zakladki button.on { border-color: var(--czern); box-shadow: inset 0 0 0 1px var(--czern); }
.zakladki button.on::after { content: ''; }
/* dekory z bazy (klasy jak ALPCONF sklep.html) */
.dekory { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; }
.dekory::-webkit-scrollbar { display: none; }
.dekor-kafel { flex: none; width: 104px; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 5px 5px 7px; background: var(--biel); border: 1px solid var(--ramka); border-radius: 6px; text-align: left; }
.dekor-kafel.on { border-color: var(--czern); box-shadow: 0 0 0 1.5px var(--czern); }
.dekor-kafel .pr { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--ramka); border-radius: 4px; background-size: cover !important; background-position: center !important; }
.dekor-kafel small { font: 500 13px/1.25 var(--krój); color: var(--tekst); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; }
.dekor-kafel em { font: 600 12px/1.2 var(--krój); font-style: normal; color: var(--miedz-c); }
.dek-lista { display: flex; flex-direction: column; gap: 8px; }
.dek-lista .pole input::placeholder { font: 400 15px var(--krój); color: var(--placeholder); }
.dek-lista .pole input { font-weight: 500; font-size: 15px; }
.chipy.rodziny .chip { min-height: 40px; padding: 0 10px; font-size: 14px; }
/* tabele podsumowania, uwagi */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { padding: 7px 4px; border-bottom: 1px solid var(--linia-tabeli); text-align: left; vertical-align: top; } td.l, th.l { text-align: right; white-space: nowrap; }
th { font-weight: 600; }
.uwaga { display: flex; gap: 8px; padding: 10px 12px; border-radius: 6px; background: var(--uwaga-tlo); border: 1px solid var(--uwaga-ramka); font: 500 14px/1.35 var(--krój); color: var(--uwaga); }
.uwaga.blad { background: var(--blad-tlo); border-color: var(--blad-ramka); color: var(--blad-ciemny); }
/* Pan Marcin */
#marcin { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px; background: var(--ciemne); color: var(--wybrane-tekst); }
#marcin[hidden] { display: none; }
#marcin .naglowek { display: flex; justify-content: space-between; align-items: center; font: 600 15px/1.2 var(--krój-tytul); }
#marcin .naglowek button { color: var(--ciemne-ikona); width: 36px; height: 36px; font-size: 18px; }
#marcin .opis { color: var(--ciemne-tekst); }
#marcin textarea { min-height: 84px; border: 1px solid var(--ciemne-ramka); border-radius: 6px; background: var(--tekst); color: var(--wybrane-tekst); padding: 10px; resize: vertical; font-size: 15px; }
#marcin .zdj { display: flex; gap: 6px; flex-wrap: wrap; }
#marcin .zdj img { width: 56px; height: 56px; object-fit: cover; border-radius: 5px; border: 1px solid var(--ciemne-ramka); }
#marcin label.plik { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border: 1px dashed var(--szary-tekst); border-radius: 6px; font: 500 14px/1 var(--krój); color: var(--wybrane-cichy); cursor: pointer; }
#marcin input[type=file] { display: none; }
#marcin-roz { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
#marcin-roz:empty { display: none; }
#marcin-roz .m-k { align-self: flex-end; max-width: 88%; padding: 8px 12px; border-radius: 10px 10px 2px 10px; background: var(--miedz-c); color: var(--wybrane-tekst); font: 400 15px/1.35 var(--krój); }
#marcin-roz .m-a { align-self: flex-start; max-width: 92%; padding: 8px 12px; border-radius: 10px 10px 10px 2px; background: var(--ciemne-2); color: var(--ciemne-tekst-2); font: 400 15px/1.4 var(--krój); white-space: pre-wrap; }
#marcin-kroki { display: flex; flex-direction: column; gap: 2px; font: 500 13px/1.3 var(--krój); color: var(--ciemne-tekst); }
#marcin-kroki div.ok { color: var(--ok); }
#marcin-kroki[hidden] { display: none; }
#marcin .zgoda { display: flex; gap: 8px; align-items: flex-start; font: 400 13px/1.35 var(--krój); color: var(--ciemne-tekst); }
#marcin .zgoda input { margin: 2px 0 0; width: 18px; height: 18px; }
#marcin .zgoda[hidden] { display: none; }
#marcin .chipy:empty { display: none; }
#marcin .chip { color: var(--wybrane-tekst); border-color: var(--ciemne-ramka-2); } #marcin .chip.akcja { border-color: var(--miedz); color: var(--miedz-na-ciemnym); }

/* komputer: panel z prawej, arkusz zawsze rozwiniety */
@media (min-width: 900px) {
  #app { flex-direction: row; }
  #arkusz { width: var(--panel-w); height: auto !important; border-top: 0; border-left: 1px solid var(--ramka); border-radius: 0; padding: 12px 16px 12px; }
  #arkusz.zwiniety > * { display: flex !important; }
  #chwyt { display: none; }
}