/* =========================================================
   Konfigurator 3D: wyglad. Wszystkie kolory i fonty ze zmiennych marki (--k-*),
   ustawianych przez Workera z danych marki. Na bazie kp.css z wtyczki 0.2.1.
   ========================================================= */
:root {
  --k-cien: 0 8px 24px rgba(42, 42, 42, .12);
  --k-bialy: #ffffff;
  --k-panel-szer: 410px;
  --k-karta-szer: 380px;
  --k-naglowek-wys: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--k-tlo); color: var(--k-tekst); font-family: var(--k-font-tekst); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--k-akcent); outline-offset: 2px; }
[hidden] { display: none !important; }
.k3d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k3d-noscript { padding: 2rem; text-align: center; }

/* ---------- uklad aplikacji ---------- */
.k3d-body { overflow: hidden; }
.k3d-app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--k-tlo); }
.k3d-naglowek {
  flex: none; height: var(--k-naglowek-wys); display: flex; align-items: center; gap: 1rem;
  padding: 0 1.1rem; border-bottom: 1px solid var(--k-linia); background: var(--k-tlo);
}
.k3d-logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--k-tekst); text-decoration: none; font-family: var(--k-font-naglowki); font-weight: 600; font-size: 1.1rem; white-space: nowrap; }
.k3d-logo svg { width: 30px; height: 30px; flex: none; }
.k3d-naglowek-produkt { margin: 0; font-size: .9rem; color: var(--k-tekst2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.k3d-naglowek-prawo { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.k3d-plakietka-demo { font-size: .7rem; font-weight: 600; letter-spacing: .03em; color: var(--k-akcent2); background: var(--k-tlo3); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.k3d-marki select { font-size: .82rem; padding: 5px 8px; border: 1px solid var(--k-linia); border-radius: var(--k-promien); background: var(--k-bialy); color: var(--k-tekst); max-width: 290px; }
.k3d-jezyki { display: flex; gap: 2px; }
.k3d-jezyki a { font-size: .8rem; font-weight: 600; color: var(--k-tekst2); text-decoration: none; padding: 5px 7px; border-radius: var(--k-promien); }
.k3d-jezyki a[aria-current="true"] { color: var(--k-bialy); background: var(--k-tekst); }
html.k3d-embed .k3d-naglowek { display: none; }

.k3d-wnetrze { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--k-panel-szer); }
.k3d-scena { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--k-scena-tlo); }
.k3d-scena canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.k3d-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--k-linia); background: var(--k-tlo); }

/* ---------- ladowanie ---------- */
.k3d-ladowanie { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 1rem; padding: 1.5rem; text-align: center; background: var(--k-tlo2); }
.k3d-ladowanie p { margin: 0; max-width: 40ch; color: var(--k-tekst2); }
.k3d-spinner { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--k-linia); border-top-color: var(--k-akcent); animation: k3d-obrot .9s linear infinite; }
.k3d-ladowanie.k3d-blad .k3d-spinner { display: none; }
@keyframes k3d-obrot { to { transform: rotate(360deg); } }

/* ---------- nakladka na scenie ---------- */
.k3d-nakladka { position: absolute; inset: 0; pointer-events: none; }
.k3d-nakladka > * { pointer-events: auto; }
.k3d-hud { position: absolute; top: 14px; left: 14px; font-size: .8rem; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--k-tekst); box-shadow: var(--k-cien); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; pointer-events: none; }
.k3d-podpowiedz { position: absolute; top: 14px; right: 14px; margin: 0; font-size: .78rem; color: var(--k-tekst2); background: rgba(255, 255, 255, .85); padding: 6px 11px; border-radius: 999px; pointer-events: none; transition: opacity .4s ease; }
.k3d-podpowiedz.k3d-ukryta { opacity: 0; }
.k3d-widoki { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 2px; padding: 3px; background: rgba(255, 255, 255, .92); border-radius: 999px; box-shadow: var(--k-cien); }
.k3d-widoki button { font-size: .82rem; font-weight: 500; color: var(--k-tekst2); background: transparent; border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap; }
.k3d-widoki button[aria-pressed="true"] { background: var(--k-tekst); color: var(--k-bialy); }
.k3d-narzedzia { position: absolute; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 60%; }
.k3d-narzedzie { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 500; color: var(--k-tekst); background: var(--k-bialy); border: 1px solid var(--k-akcent); border-radius: 999px; padding: 8px 14px; box-shadow: var(--k-cien); cursor: pointer; white-space: nowrap; }
.k3d-narzedzie svg { width: 17px; height: 17px; color: var(--k-akcent2); }
.k3d-narzedzie[aria-pressed="true"] { background: var(--k-akcent); color: var(--k-bialy); }
.k3d-narzedzie[aria-pressed="true"] svg { color: var(--k-bialy); }

.k3d-etykiety, .k3d-punkty { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.k3d-etykieta { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: .76rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums lining-nums; color: var(--k-bialy); background: var(--k-tekst); padding: 5px 8px; border-radius: 3px; }
.k3d-etykieta-miekka { color: var(--k-tekst); background: rgba(255, 255, 255, .93); border: 1px solid var(--k-linia); }
.k3d-etykieta-uwaga { color: var(--k-bialy); background: var(--k-blad); }
.k3d-etykieta-ostrzezenie { color: #3a2a00; background: #ffd970; }
.k3d-punkt { position: absolute; left: 0; top: 0; pointer-events: auto; display: inline-grid; place-items: center; grid-auto-flow: column; gap: .35rem; min-width: 36px; height: 36px; padding: 0; border-radius: 999px; cursor: pointer; color: var(--k-bialy); background: var(--k-akcent); border: 2px solid var(--k-bialy); box-shadow: 0 4px 14px rgba(0, 0, 0, .28); transition: background-color .15s ease; }
.k3d-punkt svg { width: 18px; height: 18px; }
.k3d-punkt:hover { background: var(--k-akcent2); }
.k3d-punkt-pelny { background: var(--k-tekst); }
.k3d-punkt-wybrany { background: var(--k-bialy); color: var(--k-akcent2); border-color: var(--k-akcent); box-shadow: 0 0 0 4px rgba(0, 0, 0, .12), 0 4px 14px rgba(0, 0, 0, .28); }
.k3d-punkt-dodaj { padding: 0 14px 0 10px; font-size: .82rem; font-weight: 500; white-space: nowrap; }

/* pasek akcji nad meblem (pokoj) */
.k3d-pasek { position: absolute; left: 0; top: 0; z-index: 3; display: flex; gap: 2px; padding: 3px; background: var(--k-bialy); border-radius: 999px; box-shadow: var(--k-cien); }
.k3d-pasek button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--k-tekst); cursor: pointer; }
.k3d-pasek button:hover { background: var(--k-tlo2); }
.k3d-pasek svg { width: 18px; height: 18px; }

/* spacer */
.k3d-spacer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.k3d-spacer > * { pointer-events: auto; }
.k3d-spacer-koniec { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); }
.k3d-spacer-pomoc { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); margin: 0; font-size: .8rem; color: var(--k-tekst); background: rgba(255, 255, 255, .88); padding: 6px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.k3d-joystick { position: absolute; left: 24px; bottom: 24px; width: 96px; height: 96px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 2px solid rgba(255, 255, 255, .9); box-shadow: var(--k-cien); touch-action: none; display: none; }
.k3d-joystick span { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--k-tekst); opacity: .8; }
@media (pointer: coarse) { .k3d-joystick { display: block; } }

/* ---------- panel ---------- */
.k3d-panel-gora { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.3rem; border-bottom: 1px solid var(--k-linia); }
.k3d-panel-tytul { margin: 0; font-family: var(--k-font-naglowki); font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.k3d-plakietka { font-size: .68rem; font-weight: 600; letter-spacing: .03em; color: var(--k-akcent2); background: var(--k-tlo3); border-radius: 3px; padding: 2px 6px; }
.k3d-panel-tresc { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.3rem; overscroll-behavior: contain; }
.k3d-sekcja { padding-block: 1.15rem 1.35rem; border-bottom: 1px solid var(--k-linia); }
.k3d-sekcja:last-child { border-bottom: 0; padding-bottom: 2rem; }
.k3d-sekcja-tresc { display: grid; gap: .75rem; }
.k3d-krok { display: flex; align-items: center; gap: .6rem; margin: 0 0 .75rem; font-family: var(--k-font-naglowki); font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.k3d-krok span { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; font-family: var(--k-font-tekst); font-size: .75rem; font-weight: 600; color: var(--k-akcent2); border: 1px solid var(--k-akcent3); }
.k3d-etyk { display: flex; align-items: center; gap: .4rem; margin: .2rem 0 .1rem; font-size: .8rem; letter-spacing: .02em; color: var(--k-szary); }
.k3d-notka { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--k-szary); }
.k3d-notka:empty { display: none; }
.k3d-info { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--k-akcent3); background: var(--k-bialy); color: var(--k-akcent2); font-size: .68rem; font-weight: 700; font-style: italic; font-family: Georgia, serif; cursor: pointer; line-height: 1; }
.k3d-info[aria-expanded="true"] { background: var(--k-akcent); color: var(--k-bialy); border-color: var(--k-akcent); }
.k3d-opis { margin: .2rem 0 .3rem; font-size: .82rem; line-height: 1.5; color: var(--k-tekst2); padding: .55rem .7rem; background: var(--k-tlo2); border-radius: var(--k-promien); }
.k3d-pole { display: grid; gap: 4px; }
.k3d-pole-gora { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--k-tekst2); }
.k3d-pole-gora label { flex: 1; min-width: 0; }
.k3d-pole-liczba { display: inline-flex; align-items: baseline; gap: 3px; }
.k3d-pole-liczba input { width: 4.6em; text-align: right; font-size: .9rem; font-weight: 600; color: var(--k-tekst); background: var(--k-bialy); border: 1px solid var(--k-linia); border-radius: var(--k-promien); padding: 3px 6px; font-variant-numeric: tabular-nums lining-nums; }
.k3d-pole-liczba input:focus { border-color: var(--k-akcent); outline: none; }
.k3d-pole-liczba span { font-size: .8rem; color: var(--k-szary); }
.k3d-pole-komunikat { margin: 0; font-size: .76rem; color: var(--k-ostrzezenie); }
.k3d-app input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; }
.k3d-app input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: var(--k-linia); }
.k3d-app input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: var(--k-bialy); border: 2px solid var(--k-akcent); box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.k3d-app input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--k-linia); }
.k3d-app input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--k-bialy); border: 2px solid var(--k-akcent); }

.k3d-seg { display: flex; gap: 2px; padding: 3px; background: var(--k-tlo3); border-radius: calc(var(--k-promien) + 4px); min-width: 0; }
.k3d-seg button { flex: 1 1 auto; min-width: 0; font-size: .85rem; font-weight: 500; color: var(--k-tekst2); background: transparent; border: 0; border-radius: var(--k-promien); padding: 8px 6px; cursor: pointer; white-space: nowrap; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.k3d-seg button:hover { color: var(--k-tekst); }
.k3d-seg button[aria-pressed="true"] { background: var(--k-bialy); color: var(--k-tekst); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.k3d-seg button:disabled { opacity: .4; cursor: not-allowed; }
.k3d-seg-male button { font-size: .76rem; padding: 6px 2px; letter-spacing: -.01em; }

.k3d-chipy { display: flex; flex-wrap: wrap; gap: 6px; }
.k3d-chip { font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--k-tekst); background: var(--k-bialy); border: 1px solid var(--k-linia); border-radius: var(--k-promien); padding: 7px 11px; cursor: pointer; line-height: 1.1; }
.k3d-chip:hover { border-color: var(--k-akcent); }
.k3d-chip[aria-pressed="true"] { background: var(--k-tekst); border-color: var(--k-tekst); color: var(--k-bialy); }

.k3d-kolory { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.k3d-kolor { display: grid; justify-items: center; align-content: start; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--k-tekst2); }
.k3d-kolor i { display: block; width: 100%; aspect-ratio: 1; max-width: 46px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); background-size: cover; }
.k3d-kolor[aria-pressed="true"] i { outline: 2px solid var(--k-akcent); outline-offset: 3px; }
.k3d-kolor span { font-size: .7rem; line-height: 1.15; text-align: center; }
.k3d-kolor:disabled { opacity: .35; cursor: not-allowed; }

.k3d-karty { display: grid; gap: 6px; }
.k3d-karty-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k3d-karta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px .7rem; text-align: left; background: var(--k-bialy); border: 1px solid var(--k-linia); border-radius: calc(var(--k-promien) + 2px); padding: .65rem .8rem; cursor: pointer; color: var(--k-tekst); }
.k3d-karta-z-ikona { grid-template-columns: auto minmax(0, 1fr) auto; }
.k3d-karta:hover { border-color: var(--k-akcent3); }
.k3d-karta[aria-pressed="true"] { border-color: var(--k-tekst); box-shadow: inset 0 0 0 1px var(--k-tekst); }
.k3d-karta:disabled { opacity: .5; cursor: not-allowed; }
.k3d-karta-ikona { grid-row: 1 / span 3; width: 40px; height: 40px; color: var(--k-akcent2); }
.k3d-karta-ikona svg { width: 100%; height: 100%; }
.k3d-karta-tekst { display: grid; gap: 2px; min-width: 0; }
.k3d-karta-nazwa { font-size: .92rem; font-weight: 600; }
.k3d-karta-opis { font-size: .79rem; line-height: 1.45; color: var(--k-tekst2); }
.k3d-karta-powod { font-size: .76rem; color: var(--k-ostrzezenie); }
.k3d-karta-cena { font-size: .82rem; font-weight: 600; color: var(--k-akcent2); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.k3d-karty-siatka .k3d-karta { grid-template-columns: minmax(0, 1fr); }
.k3d-karty-siatka .k3d-karta-ikona { grid-row: auto; width: 34px; height: 34px; }

.k3d-wiersz { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--k-tekst2); }
.k3d-wiersz > span { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .4rem; }
.k3d-wiersz small { display: block; width: 100%; font-size: .78rem; color: var(--k-akcent2); font-variant-numeric: tabular-nums lining-nums; }
.k3d-wiersz small:empty { display: none; }
.k3d-przel { position: relative; flex: none; width: 40px; height: 23px; padding: 0; border: 0; border-radius: 12px; background: var(--k-linia); cursor: pointer; transition: background-color .2s; }
.k3d-przel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--k-bialy); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.k3d-przel[aria-pressed="true"] { background: var(--k-akcent); }
.k3d-przel[aria-pressed="true"]::after { transform: translateX(17px); }

.k3d-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: .92rem; font-weight: 500; letter-spacing: .01em; border-radius: var(--k-promien-btn, var(--k-promien)); padding: .8rem 1.1rem; cursor: pointer; text-decoration: none; border: 1px solid var(--k-tekst); background: var(--k-bialy); color: var(--k-tekst); }
.k3d-btn-glowny { background: var(--k-przycisk-tlo, var(--k-przycisk)); border-color: var(--k-przycisk); color: var(--k-przycisk-tekst); box-shadow: 0 6px 20px color-mix(in srgb, var(--k-przycisk) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); }
.k3d-btn-glowny:hover { filter: brightness(1.08); }
.k3d-btn-drugi:hover { background: var(--k-tlo2); }
.k3d-btn-link { justify-self: start; border: 0; background: none; padding: 2px 0; color: var(--k-akcent2); text-decoration: underline; text-underline-offset: 3px; font-size: .84rem; }
.k3d-btn-zablokowany { opacity: .55; }
.k3d-btn:disabled { opacity: .6; cursor: progress; }

.k3d-status { display: grid; gap: .5rem; }
.k3d-status:empty { display: none; }
.k3d-komunikat { display: grid; gap: .2rem; padding: .6rem .75rem; border-radius: var(--k-promien); font-size: .84rem; line-height: 1.45; }
.k3d-komunikat p { margin: 0; }
.k3d-komunikat-blokada { background: #fbecea; border: 1px solid #e9b8b2; color: #6d1c14; }
.k3d-komunikat-ostrzezenie { background: #fff6dc; border: 1px solid #f0d58c; color: #5a4100; }
.k3d-komunikat-informacja { background: #eef3f7; border: 1px solid #c9d8e4; color: #23384a; }
.k3d-podpowiedz-reguly { font-size: .8rem; opacity: .9; }

.k3d-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.k3d-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--k-linia); font-size: .85rem; color: var(--k-tekst2); }
.k3d-lista li strong { font-weight: 600; color: var(--k-tekst); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.k3d-lista-rabat strong { color: var(--k-ok); }
.k3d-razem { display: flex; justify-content: space-between; align-items: baseline; padding: .35rem 0; }
.k3d-razem span { font-size: .9rem; color: var(--k-tekst2); }
.k3d-razem strong { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.k3d-akcje { display: grid; gap: 8px; margin-top: .4rem; }

.k3d-stopka { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem .8rem; align-items: center; padding: .85rem 1.3rem; padding-bottom: calc(.85rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--k-linia); background: var(--k-tlo2); }
.k3d-stopka-cena { min-width: 0; }
.k3d-cena-glowna { margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; }
.k3d-cena-glowna.k3d-cena-tekst { font-size: 1.05rem; }
.k3d-cena-info { margin: 2px 0 0; font-size: .74rem; line-height: 1.35; color: var(--k-tekst2); }

/* listy w panelu (moduly, sekcje, meble) */
.k3d-elementy { display: grid; gap: 4px; }
.k3d-element { display: flex; justify-content: space-between; align-items: center; gap: .8rem; text-align: left; font-size: .86rem; color: var(--k-tekst); background: var(--k-bialy); border: 1px solid var(--k-linia); border-radius: var(--k-promien); padding: .55rem .7rem; cursor: pointer; }
.k3d-element:hover { border-color: var(--k-akcent3); }
.k3d-element[aria-pressed="true"] { border-color: var(--k-akcent); box-shadow: inset 0 0 0 1px var(--k-akcent); }
.k3d-element small { margin-left: .4rem; font-size: .76rem; color: var(--k-szary); font-variant-numeric: tabular-nums lining-nums; }
.k3d-element em { font-style: normal; font-size: .8rem; color: var(--k-tekst2); text-align: right; }
.k3d-edytor { display: grid; gap: .65rem; padding: .85rem .9rem 1rem; border: 1px solid var(--k-akcent3); border-radius: calc(var(--k-promien) + 4px); background: var(--k-tlo2); }
.k3d-edytor-gora { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; align-items: start; }
.k3d-edytor-gora strong { font-size: .95rem; font-weight: 600; }
.k3d-edytor-gora span { grid-column: 1; font-size: .78rem; color: var(--k-szary); }
.k3d-zamknij { grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; color: var(--k-tekst2); background: var(--k-bialy); border: 1px solid var(--k-linia); border-radius: 50%; cursor: pointer; }
.k3d-sloty { display: grid; gap: 6px; }
.k3d-slot { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 6px; }
.k3d-slot > span { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; font-size: .72rem; font-weight: 600; color: var(--k-akcent2); border: 1px solid var(--k-akcent3); background: var(--k-bialy); }
.k3d-slot-opcje { display: flex; flex-wrap: wrap; gap: 3px; }
.k3d-slot-opcje button { font-size: .72rem; font-weight: 500; color: var(--k-tekst2); background: var(--k-bialy); border: 1px solid var(--k-linia); border-radius: 999px; padding: 4px 7px; cursor: pointer; white-space: nowrap; }
.k3d-slot-opcje button[aria-pressed="true"] { background: var(--k-tekst); border-color: var(--k-tekst); color: var(--k-bialy); }
.k3d-roza { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 260px; }
.k3d-roza button { font-size: .78rem; font-weight: 500; color: var(--k-tekst2); background: var(--k-bialy); border: 1px solid var(--k-linia); border-radius: var(--k-promien); padding: 8px 2px; cursor: pointer; }
.k3d-roza button[aria-pressed="true"] { background: var(--k-tekst); border-color: var(--k-tekst); color: var(--k-bialy); }
.k3d-roza-srodek { display: grid; place-items: center; color: var(--k-akcent2); }
.k3d-roza-srodek svg { width: 22px; height: 22px; }
.k3d-zestaw { display: flex; flex-wrap: wrap; gap: 6px; }
.k3d-zestaw-el { display: inline-flex; align-items: stretch; border: 1px solid var(--k-linia); border-radius: var(--k-promien); background: var(--k-bialy); overflow: hidden; }
.k3d-zestaw-el.k3d-akt { border-color: var(--k-tekst); }
.k3d-zestaw-wybierz { display: grid; text-align: left; font-size: .82rem; font-weight: 600; color: var(--k-tekst); background: none; border: 0; padding: 6px 10px; cursor: pointer; }
.k3d-zestaw-wybierz small { font-size: .74rem; font-weight: 400; color: var(--k-tekst2); }
.k3d-zestaw-usun { font-size: 1rem; color: var(--k-szary); background: var(--k-tlo2); border: 0; border-left: 1px solid var(--k-linia); padding: 0 9px; cursor: pointer; }
.k3d-tabela { width: 100%; border-collapse: collapse; font-size: .78rem; }
.k3d-tabela th, .k3d-tabela td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--k-linia); vertical-align: top; }
.k3d-tabela td.l, .k3d-tabela th.l { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.k3d-tabela-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--k-linia); border-radius: var(--k-promien); background: var(--k-bialy); }
.k3d-rozwin summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--k-akcent2); padding: .3rem 0; }

/* ---------- okno zapytania ---------- */
.k3d-modal-tlo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(20, 20, 20, .45); }
.k3d-modal { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; background: var(--k-tlo); border-radius: calc(var(--k-promien) + 6px); padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.k3d-modal h2 { margin: 0 2rem .8rem 0; font-family: var(--k-font-naglowki); font-weight: 500; font-size: 1.4rem; }
.k3d-modal-zamknij { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--k-linia); background: var(--k-bialy); font-size: 1.2rem; cursor: pointer; }
.k3d-form-podglad { display: grid; grid-template-columns: 140px 1fr; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.k3d-form-podglad img { width: 140px; height: 88px; object-fit: cover; border-radius: var(--k-promien); background: var(--k-tlo2); }
.k3d-form-cena { margin: 0; font-size: 1.15rem; font-weight: 600; }
.k3d-form-ostrzezenia { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .8rem; color: var(--k-ostrzezenie); }
.k3d-form-ostrzezenia:empty { display: none; }
.k3d-modal form { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.k3d-modal label { display: grid; gap: 3px; font-size: .82rem; color: var(--k-tekst2); }
.k3d-modal input, .k3d-modal textarea { width: 100%; font-size: .95rem; padding: .55rem .6rem; border: 1px solid var(--k-linia); border-radius: var(--k-promien); background: var(--k-bialy); color: var(--k-tekst); }
.k3d-modal input:focus, .k3d-modal textarea:focus { border-color: var(--k-akcent); outline: none; }
.k3d-form-szeroki { grid-column: 1 / -1; }
.k3d-zgoda { display: flex !important; grid-template-columns: none; align-items: flex-start; gap: .5rem; }
.k3d-zgoda input { width: auto; margin-top: 3px; }
.k3d-pulapka { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.k3d-form-blad { margin: 0; color: var(--k-blad); font-size: .85rem; }

/* ---------- strona startowa i strony serwera ---------- */
.k3d-strona { min-height: 100%; }
.k3d-strona-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 20px; border-bottom: 1px solid var(--k-linia); }
.k3d-strona-tresc { max-width: 1120px; margin: 0 auto; padding: 40px 16px 64px; }
.k3d-strona-tresc h1 { font-family: var(--k-font-naglowki); font-weight: 500; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 .6rem; }
.k3d-wstep { max-width: 62ch; color: var(--k-tekst2); font-size: 1.05rem; margin: 0 0 2rem; }
.k3d-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.k3d-kafel { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 22px; background: var(--k-bialy); border: 1px solid var(--k-linia); border-radius: calc(var(--k-promien) + 6px); }
.k3d-kafel-ikona { align-self: stretch; color: var(--k-akcent2); background: var(--k-tlo2); border-radius: var(--k-promien); padding: 14px; }
.k3d-kafel-ikona svg { width: 100%; height: 120px; }
.k3d-kafel h2 { margin: .3rem 0 0; font-family: var(--k-font-naglowki); font-weight: 500; font-size: 1.35rem; }
.k3d-kafel p { margin: 0; color: var(--k-tekst2); }
.k3d-kafel-dla { font-size: .85rem; color: var(--k-szary) !important; }
.k3d-kafel .k3d-btn { margin-top: auto; }
.k3d-kafel-dla { margin-bottom: .6rem !important; }
.k3d-notka-strona, .k3d-strona .k3d-notka { margin-top: 2rem; font-size: .85rem; }
.k3d-niedostepny { text-align: center; padding-top: 80px; }

/* ---------- druk ---------- */
.k3d-druk { display: none; }
html.k3d-drukowanie .k3d-druk { display: block; }
@media print {
  @page { size: A4 portrait; margin: 14mm; }
  html.k3d-drukowanie, html.k3d-drukowanie body { overflow: visible; height: auto; background: #fff; }
  html.k3d-drukowanie .k3d-app, html.k3d-drukowanie .k3d-modal-tlo { display: none !important; }
  .k3d-druk { display: block; color: #111; font-size: 10.5pt; }
}
.k3d-druk { color: #111; background: #fff; padding: 0; }
.k3d-druk h1 { font-family: var(--k-font-naglowki); font-weight: 500; font-size: 20pt; margin: 6mm 0 4mm; }
.k3d-druk h2 { font-size: 12pt; margin: 6mm 0 2mm; }
.k3d-druk-naglowek { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; border-bottom: 1px solid #ccc; padding-bottom: 4mm; }
.k3d-druk-logo { display: flex; align-items: center; gap: 3mm; font-size: 13pt; }
.k3d-druk-logo svg { width: 10mm; height: 10mm; }
.k3d-druk-meta { text-align: right; font-size: 9pt; color: #444; }
.k3d-druk-meta p { margin: 0; }
.k3d-druk-link { word-break: break-all; max-width: 90mm; }
.k3d-druk-obrazy { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
.k3d-druk-obrazy img { width: 100%; border-radius: 2mm; }
.k3d-druk-rysunek svg { width: 100%; height: auto; max-height: 120mm; }
.k3d-druk table { width: 100%; border-collapse: collapse; }
.k3d-druk td { padding: 1.6mm 2mm; border-bottom: 1px solid #ddd; vertical-align: top; }
.k3d-druk td.l { text-align: right; white-space: nowrap; }
.k3d-druk-razem td { font-weight: 700; font-size: 12pt; border-bottom: 0; }
.k3d-druk-nota, .k3d-druk-stopka { font-size: 8.5pt; color: #555; }
.k3d-druk-stopka { margin-top: 8mm; border-top: 1px solid #ccc; padding-top: 3mm; }
.k3d-druk section { break-inside: avoid; }

/* ---------- telefon ---------- */
@media (max-width: 900px) {
  :root { --k-naglowek-wys: 48px; }
  .k3d-wnetrze { grid-template-columns: 1fr; grid-template-rows: minmax(0, 44%) minmax(0, 1fr); }
  .k3d-panel { border-left: 0; border-top: 1px solid var(--k-linia); }
  .k3d-panel-gora { display: none; }
  .k3d-podpowiedz { display: none; }
  .k3d-naglowek { padding: 0 .7rem; gap: .6rem; }
  .k3d-naglowek-produkt { display: none; }
  .k3d-logo span { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; }
  .k3d-plakietka-demo { display: none; }
  .k3d-marki select { max-width: 130px; font-size: .75rem; }
  .k3d-hud { top: 10px; left: 10px; }
  .k3d-widoki { left: 10px; bottom: 10px; }
  .k3d-widoki button { padding: 6px 10px; font-size: .76rem; }
  .k3d-narzedzia { right: 10px; bottom: 54px; max-width: 70%; }
  .k3d-narzedzie { padding: 7px 10px; font-size: .74rem; }
  .k3d-narzedzie span { display: none; }
  .k3d-narzedzie svg { width: 18px; height: 18px; }
  .k3d-panel-tresc { padding: 0 1rem; }
  .k3d-stopka { padding: .6rem 1rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); }
  .k3d-cena-glowna { font-size: 1.15rem; }
  .k3d-stopka .k3d-btn-glowny { padding: .7rem .9rem; font-size: .88rem; white-space: nowrap; }
  .k3d-punkt { min-width: 32px; height: 32px; }
  .k3d-punkt-dodaj span { display: none; }
  .k3d-punkt-dodaj { padding: 0; width: 32px; }
  .k3d-modal form { grid-template-columns: 1fr; }
  .k3d-form-podglad { grid-template-columns: 96px 1fr; }
  .k3d-form-podglad img { width: 96px; height: 60px; }
}
@media (max-width: 480px) {
  .k3d-naglowek { gap: .45rem; }
  .k3d-naglowek-prawo { gap: .4rem; }
  .k3d-logo { gap: .4rem; font-size: 1rem; }
  .k3d-logo svg { width: 26px; height: 26px; }
  .k3d-logo span { max-width: 24vw; }
  .k3d-marki select { max-width: 108px; padding: 5px 4px; }
  .k3d-jezyki a { padding: 5px 5px; font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .k3d-spinner { animation-duration: 3s; }
  * { transition: none !important; }
}

/* mebel na wymiar: sekcje z bledem, lista formatek, etykiety czesci */
.k3d-element-blad { border-color: var(--k-blad); box-shadow: inset 3px 0 0 var(--k-blad); }
.k3d-formatki { border: 1px solid var(--k-linia); border-radius: var(--k-promien); background: var(--k-bialy); padding: .2rem .8rem .6rem; margin-top: .4rem; }
.k3d-formatki summary { cursor: pointer; font-size: .88rem; font-weight: 600; padding: .55rem 0; }
.k3d-formatki .k3d-notka { margin: .3rem 0 .5rem; }
.k3d-tabela-przewijana { overflow-x: auto; margin: 0 -.2rem; }
.k3d-formatki table { width: 100%; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums lining-nums; }
.k3d-formatki th { text-align: left; font-weight: 600; color: var(--k-tekst2); border-bottom: 1px solid var(--k-linia); padding: .3rem .25rem; white-space: nowrap; }
.k3d-formatki td { border-bottom: 1px solid var(--k-tlo3); padding: .35rem .25rem; vertical-align: top; }
.k3d-formatki td small { display: block; color: var(--k-szary); font-size: .72rem; }
.k3d-formatki .l { text-align: right; }
.k3d-formatki-sumy { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: var(--k-tekst2); }
.k3d-formatki-tytul { margin: .7rem 0 0; font-size: .82rem; font-weight: 600; }
.k3d-etykieta-czesc { font-size: .68rem; padding: 3px 6px; pointer-events: none; transition: opacity .35s ease; }
.k3d-etykieta-czesc.k3d-ukryta { opacity: 0; }
.k3d-kolor span::first-letter { text-transform: uppercase; }
.k3d-nowrap { white-space: nowrap; }

/* podsumowanie: grupy pozycji (mebel na wymiar w pokoju) */
.k3d-lista li.k3d-lista-grupa { display: block; padding: 0; }
.k3d-lista-grupa summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; cursor: pointer; list-style: none; }
.k3d-lista-grupa summary::-webkit-details-marker { display: none; }
.k3d-lista-grupa summary span::before { content: '\25B8\00A0'; color: var(--k-akcent); }
.k3d-lista-grupa details[open] summary span::before { content: '\25BE\00A0'; }
.k3d-lista-grupa ul { list-style: none; margin: 0 0 .4rem; padding: 0 0 0 1rem; }
.k3d-lista-grupa ul li { font-size: .78rem; padding: .3rem 0; border-bottom: 1px dashed var(--k-linia); }

/* planer pokoju */
.k3d-pasek-mebla { position: absolute; left: 0; top: 0; z-index: 4; display: flex; gap: 2px; padding: 3px; background: var(--k-bialy); border-radius: 999px; box-shadow: var(--k-cien); }
.k3d-pasek-mebla button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--k-tekst); cursor: pointer; }
.k3d-pasek-mebla button:hover { background: var(--k-tlo3); }
.k3d-pasek-mebla button[data-a="usun"]:hover { color: var(--k-blad); }
.k3d-pasek-mebla svg { width: 18px; height: 18px; }
.k3d-toast { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 6; max-width: min(90%, 460px); padding: 9px 14px; border-radius: 10px; background: var(--k-tekst); color: var(--k-bialy); font-size: .84rem; box-shadow: var(--k-cien); opacity: 0; pointer-events: none; transition: opacity .25s ease; text-align: center; }
.k3d-toast.k3d-widoczny { opacity: 1; }
.k3d-katalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.k3d-katalog button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 8px; align-items: center; text-align: left; padding: 8px; border: 1px solid var(--k-linia); border-radius: var(--k-promien); background: var(--k-bialy); color: var(--k-tekst); cursor: pointer; font: inherit; }
.k3d-katalog button:hover { border-color: var(--k-akcent); }
.k3d-katalog svg { grid-row: span 3; width: 34px; height: 34px; color: var(--k-akcent2); }
.k3d-katalog strong { font-size: .8rem; font-weight: 600; line-height: 1.2; }
.k3d-katalog small { font-size: .72rem; color: var(--k-szary); }
.k3d-katalog em { font-style: normal; font-size: .72rem; color: var(--k-akcent2); font-weight: 600; }
.k3d-kat-tytul { margin: .6rem 0 .3rem; font-size: .76rem; font-weight: 600; color: var(--k-tekst2); text-transform: uppercase; letter-spacing: .04em; }
.k3d-podsekcja { border-top: 1px solid var(--k-linia); padding-top: .4rem; }
.k3d-podsekcja > summary { cursor: pointer; font-size: .86rem; font-weight: 600; padding: .35rem 0; }
.k3d-podsekcja > div { display: grid; gap: .65rem; padding: .3rem 0 .6rem; }
.k3d-potwierdz { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .82rem; padding: .6rem .7rem; border-radius: var(--k-promien); background: var(--k-tlo3); }
.k3d-legenda { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .76rem; color: var(--k-tekst2); }
.k3d-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.k3d-liczby { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.k3d-liczby div { padding: .6rem .7rem; border: 1px solid var(--k-linia); border-radius: var(--k-promien); background: var(--k-bialy); }
.k3d-liczby strong { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums lining-nums; }
.k3d-liczby span { font-size: .74rem; color: var(--k-szary); }

/* =========================================================
   Uklady interfejsu z danych marki (pole ui). Atrybuty na #k3d-app:
   data-uklad, data-menu, data-karty, data-przyciski, data-gestosc, data-cena, data-naglowek.
   Ustawia je Worker w HTML i powloka.js przy zmianie marki.
   ========================================================= */
.k3d-sekcja-ukryta { display: none !important; }
.k3d-nawig { min-width: 0; }
.k3d-nawig ol { list-style: none; margin: 0; padding: 0; }
.k3d-nawig button { font: inherit; cursor: pointer; }
.k3d-nawig svg { width: 22px; height: 22px; flex: none; }
.k3d-nawig-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* naglowek ze znakiem marki na srodku */
.k3d-app[data-naglowek="srodek"] .k3d-naglowek { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.k3d-app[data-naglowek="srodek"] .k3d-logo { grid-column: 2; grid-row: 1; }
.k3d-app[data-naglowek="srodek"] .k3d-naglowek-produkt { grid-column: 1; grid-row: 1; }
.k3d-app[data-naglowek="srodek"] .k3d-naglowek-prawo { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }

/* panel z lewej */
.k3d-app[data-uklad="panel-lewy"] .k3d-wnetrze { grid-template-columns: var(--k-panel-szer) minmax(0, 1fr); }
.k3d-app[data-uklad="panel-lewy"] .k3d-panel { order: -1; border-left: 0; border-right: 1px solid var(--k-linia); }

/* zakladki w panelu */
.k3d-nawig-zakladki ol { display: flex; gap: .15rem; padding: 0 1.3rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--k-linia); }
.k3d-nawig-zakladki ol::-webkit-scrollbar { display: none; }
.k3d-nawig-zakladki button { display: inline-flex; align-items: center; gap: .4rem; padding: .8rem .55rem .7rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--k-tekst2); font-size: .86rem; font-weight: 500; white-space: nowrap; }
.k3d-nawig-zakladki button:hover { color: var(--k-tekst); }
.k3d-nawig-zakladki button[aria-current] { color: var(--k-tekst); border-bottom-color: var(--k-akcent); font-weight: 600; }
.k3d-nawig-zakladki .k3d-nawig-nr { display: none; }
.k3d-nawig-zakladki .k3d-nawig-tekst { overflow: visible; }

/* kreator: kroki nad scena i panelem */
.k3d-app[data-uklad="kreator"] .k3d-wnetrze { grid-template-rows: auto minmax(0, 1fr); }
.k3d-app[data-uklad="kreator"] .k3d-nawig-kroki { grid-column: 1 / -1; }
.k3d-nawig-kroki { border-bottom: 1px solid var(--k-linia); background: var(--k-tlo); }
.k3d-nawig-kroki ol { display: flex; align-items: center; padding: .55rem 1.1rem; overflow-x: auto; scrollbar-width: none; }
.k3d-nawig-kroki ol::-webkit-scrollbar { display: none; }
.k3d-nawig-kroki li { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.k3d-nawig-kroki li:first-child { flex: 0 1 auto; }
.k3d-nawig-kroki li + li::before { content: ""; flex: 1 1 24px; min-width: 14px; height: 1px; margin: 0 .45rem; background: var(--k-linia); }
.k3d-nawig-kroki li.k3d-zrobiony + li::before { background: var(--k-akcent); }
.k3d-nawig-kroki button { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; padding: .35rem .4rem; border: 0; border-radius: var(--k-promien); background: none; color: var(--k-tekst2); font-size: .86rem; font-weight: 500; white-space: nowrap; }
.k3d-nawig-kroki button:hover { color: var(--k-tekst); background: var(--k-tlo2); }
.k3d-nawig-nr { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--k-linia-kontrolki, #8a8f94); background: var(--k-bialy); font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.k3d-nawig-kroki .k3d-zrobiony .k3d-nawig-nr { border-color: var(--k-akcent); color: var(--k-akcent2); }
.k3d-nawig-kroki button[aria-current] { flex: none; color: var(--k-tekst); font-weight: 600; }
.k3d-nawig-kroki button[aria-current] .k3d-nawig-tekst { overflow: visible; }
.k3d-nawig-kroki button[aria-current] .k3d-nawig-nr { background: var(--k-przycisk-tlo, var(--k-przycisk)); border-color: var(--k-przycisk); color: var(--k-przycisk-tekst); }

/* Wstecz, licznik krokow, Dalej */
.k3d-kroki-nawig { display: flex; align-items: center; gap: .6rem; padding: .65rem 1.3rem; border-top: 1px solid var(--k-linia); background: var(--k-tlo); }
.k3d-kroki-nawig .k3d-btn { padding: .55rem .85rem; font-size: .88rem; }
.k3d-kroki-nawig .k3d-btn svg { width: 18px; height: 18px; }
.k3d-kroki-nawig .k3d-btn:disabled { opacity: .4; cursor: default; }
.k3d-kroki-licznik { flex: 1; text-align: center; font-size: .8rem; color: var(--k-tekst2); font-variant-numeric: tabular-nums lining-nums; }

/* pelny ekran: scena na calej powierzchni, opcje w karcie otwieranej ikonami */
.k3d-app[data-uklad^="pelny"] .k3d-wnetrze { display: block; }
.k3d-app[data-uklad^="pelny"] .k3d-scena { position: absolute; inset: 0; }
.k3d-app[data-uklad^="pelny"] .k3d-panel {
  position: absolute; z-index: 6; width: var(--k-karta-szer); max-height: calc(100% - 28px);
  border: 1px solid var(--k-linia); border-radius: calc(var(--k-promien) + 8px); box-shadow: 0 14px 44px rgba(0, 0, 0, .18); overflow: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.k3d-app[data-uklad^="pelny"] .k3d-panel-gora { display: none; }
.k3d-app[data-uklad^="pelny"] .k3d-panel-tresc { padding-top: .2rem; }
.k3d-app[data-uklad^="pelny"] .k3d-panel-tresc .k3d-krok { padding-right: 44px; }
.k3d-app[data-uklad^="pelny"]:not([data-karta="otwarta"]) .k3d-panel { visibility: hidden; opacity: 0; pointer-events: none; }
.k3d-karta-zamknij { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--k-linia); border-radius: 50%; background: var(--k-bialy); color: var(--k-tekst); cursor: pointer; }
.k3d-karta-zamknij:hover { background: var(--k-tlo2); }
.k3d-karta-zamknij svg { width: 18px; height: 18px; }

.k3d-nawig-dok { position: absolute; z-index: 6; padding: 6px; background: var(--k-bialy); border: 1px solid var(--k-linia); border-radius: calc(var(--k-promien) + 10px); box-shadow: var(--k-cien); }
.k3d-nawig-dok ol { display: flex; gap: 4px; }
.k3d-nawig-dok button { display: grid; justify-items: center; align-content: start; gap: 4px; width: 90px; height: 100%; padding: 9px 4px 7px; border: 0; border-radius: calc(var(--k-promien) + 4px); background: transparent; color: var(--k-tekst2); font-size: .7rem; font-weight: 500; line-height: 1.15; }
.k3d-nawig-dok button:hover { background: var(--k-tlo2); color: var(--k-tekst); }
.k3d-nawig-dok button[aria-pressed="true"] { background: var(--k-przycisk-tlo, var(--k-przycisk)); color: var(--k-przycisk-tekst); }
.k3d-nawig-dok .k3d-nawig-tekst { max-width: 100%; white-space: normal; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.k3d-app[data-uklad="pelny-ekran-lewo"] .k3d-nawig-dok button { height: auto; }

/* cena jako plakietka nad scena (zawsze w pelnym ekranie, w innych ukladach gdy marka tak chce) */
.k3d-scena > .k3d-stopka { position: absolute; z-index: 3; top: 14px; right: 14px; max-width: min(470px, calc(100% - 28px)); padding: .55rem .55rem .55rem 1rem; border: 1px solid var(--k-linia); border-radius: calc(var(--k-promien) + 10px); background: var(--k-bialy); box-shadow: var(--k-cien); }
.k3d-scena > .k3d-stopka .k3d-cena-glowna { font-size: 1.12rem; }
.k3d-scena > .k3d-stopka .k3d-btn-glowny { padding: .6rem .95rem; white-space: nowrap; }
.k3d-app[data-cena-nad-scena="1"] .k3d-podpowiedz { display: none; }

/* pelny ekran z ikonami na dole: karta z prawej pod cena */
.k3d-app[data-uklad="pelny-ekran-dol"] .k3d-nawig-dok { bottom: 14px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 28px); overflow-x: auto; scrollbar-width: none; }
.k3d-app[data-uklad="pelny-ekran-dol"][data-karta="otwarta"] .k3d-nawig-dok { left: calc((100% - var(--k-karta-szer) - 24px) / 2); max-width: calc(100% - var(--k-karta-szer) - 52px); }
.k3d-app[data-uklad="pelny-ekran-dol"] .k3d-panel { right: 14px; top: calc(var(--k-stopka-wys, 60px) + 26px); max-height: calc(100% - var(--k-stopka-wys, 60px) - 40px); }
.k3d-app[data-uklad="pelny-ekran-dol"]:not([data-karta="otwarta"]) .k3d-panel { transform: translateX(14px); }
.k3d-app[data-uklad="pelny-ekran-dol"] .k3d-widoki { top: 14px; bottom: auto; }
.k3d-app[data-uklad="pelny-ekran-dol"] .k3d-hud { top: 64px; }
.k3d-app[data-uklad="pelny-ekran-dol"] .k3d-narzedzia { left: 14px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; align-items: flex-start; max-width: none; }
.k3d-app[data-uklad="pelny-ekran-dol"] .k3d-toast { bottom: calc(var(--k-dok-wys, 72px) + 30px); }

/* pelny ekran z ikonami z lewej: pionowy pasek ikon, karta obok niego */
.k3d-app[data-uklad="pelny-ekran-lewo"] .k3d-nawig-dok { left: 14px; top: 50%; transform: translateY(-50%); max-height: calc(100% - 28px); overflow-y: auto; scrollbar-width: none; }
.k3d-app[data-uklad="pelny-ekran-lewo"] .k3d-nawig-dok ol { flex-direction: column; }
.k3d-app[data-uklad="pelny-ekran-lewo"] .k3d-panel { left: calc(24px + var(--k-dok-szer, 90px)); top: 14px; }
.k3d-app[data-uklad="pelny-ekran-lewo"]:not([data-karta="otwarta"]) .k3d-panel { transform: translateX(-14px); }
.k3d-app[data-uklad="pelny-ekran-lewo"] .k3d-widoki { left: auto; right: 14px; }
.k3d-app[data-uklad="pelny-ekran-lewo"] .k3d-hud { left: 50%; transform: translateX(-50%); }
.k3d-app[data-uklad="pelny-ekran-lewo"] .k3d-narzedzia { top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; align-items: flex-end; max-width: none; }
.k3d-app[data-uklad^="pelny"] .k3d-narzedzie { padding: 9px; }
.k3d-app[data-uklad^="pelny"] .k3d-narzedzie span { display: none; }

/* w spacerze chowamy powloke nad scena */
.k3d-app[data-spacer="1"] .k3d-nawig-dok,
.k3d-app[data-spacer="1"][data-uklad^="pelny"] .k3d-panel,
.k3d-app[data-spacer="1"] .k3d-scena > .k3d-stopka,
.k3d-app[data-spacer="1"][data-uklad^="pelny"] .k3d-hud { display: none !important; }

/* gestosc */
.k3d-app[data-gestosc="zwarta"] { --k-panel-szer: 380px; --k-karta-szer: 360px; }
.k3d-app[data-gestosc="zwarta"] .k3d-sekcja { padding-block: .8rem 1rem; }
.k3d-app[data-gestosc="zwarta"] .k3d-sekcja-tresc { gap: .55rem; }
.k3d-app[data-gestosc="zwarta"] .k3d-krok { font-size: 1.08rem; margin-bottom: .5rem; }
.k3d-app[data-gestosc="zwarta"] .k3d-panel-tresc { padding-inline: 1rem; }
.k3d-app[data-gestosc="zwarta"] .k3d-karta { padding: .5rem .65rem; }
.k3d-app[data-gestosc="przestronna"] { --k-panel-szer: 440px; --k-karta-szer: 410px; }
.k3d-app[data-gestosc="przestronna"] .k3d-sekcja { padding-block: 1.5rem 1.8rem; }
.k3d-app[data-gestosc="przestronna"] .k3d-sekcja-tresc { gap: 1rem; }
.k3d-app[data-gestosc="przestronna"] .k3d-krok { font-size: 1.45rem; margin-bottom: 1rem; }
.k3d-app[data-gestosc="przestronna"] .k3d-panel-tresc { padding-inline: 1.6rem; }
.k3d-app[data-gestosc="przestronna"] .k3d-karta { padding: .85rem 1rem; }

/* przyciski */
[data-przyciski="pigulki"] { --k-promien-btn: 999px; }
[data-przyciski="kwadratowe"] { --k-promien-btn: 0px; }
[data-przyciski="obrysowane"] .k3d-btn-glowny { background: transparent; color: var(--k-przycisk); border: 2px solid var(--k-przycisk); box-shadow: none; }
[data-przyciski="obrysowane"] .k3d-btn-glowny:hover { background: var(--k-przycisk); color: var(--k-przycisk-tekst); filter: none; }

/* karty opcji */
.k3d-app[data-karty="siatka"] .k3d-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k3d-app[data-karty="siatka"] .k3d-karta { grid-template-columns: minmax(0, 1fr); }
.k3d-app[data-karty="siatka"] .k3d-karta-ikona { grid-row: auto; width: 34px; height: 34px; }
.k3d-app[data-karty="kafle"] .k3d-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.k3d-app[data-karty="kafle"] .k3d-karta { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: .9rem .7rem; background: var(--k-tlo2); border-color: transparent; }
.k3d-app[data-karty="kafle"] .k3d-karta:hover { border-color: var(--k-akcent3); }
.k3d-app[data-karty="kafle"] .k3d-karta[aria-pressed="true"] { background: var(--k-bialy); border-color: var(--k-przycisk); box-shadow: inset 0 0 0 1px var(--k-przycisk); }
.k3d-app[data-karty="kafle"] .k3d-karta-ikona { grid-row: auto; width: 46px; height: 46px; }
.k3d-app[data-karty="kafle"] .k3d-karta-tekst { justify-items: center; }

/* cena jako karta na dole panelu */
.k3d-app[data-cena="karta"] .k3d-panel > .k3d-stopka { margin: .5rem .9rem .9rem; margin-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); padding: .85rem 1rem; border: 1px solid var(--k-linia); border-radius: calc(var(--k-promien) + 8px); background: var(--k-bialy); box-shadow: var(--k-cien); }
.k3d-app[data-cena="karta"] .k3d-panel > .k3d-stopka .k3d-cena-glowna { font-size: 1.5rem; }

@media (max-width: 900px) {
  .k3d-app .k3d-wnetrze, .k3d-app[data-uklad="panel-lewy"] .k3d-wnetrze { grid-template-columns: minmax(0, 1fr); }
  .k3d-app[data-uklad="panel-lewy"] .k3d-panel { order: 0; border-right: 0; border-top: 1px solid var(--k-linia); }
  .k3d-app[data-uklad="kreator"] .k3d-wnetrze { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 40%) minmax(0, 1fr); }
  .k3d-nawig-kroki ol { padding: .4rem .7rem; }
  .k3d-nawig-kroki li:not(:has(> [aria-current])) .k3d-nawig-tekst { display: none; }
  .k3d-nawig-kroki .k3d-nawig-nr { width: 24px; height: 24px; }
  .k3d-kroki-nawig { padding: .45rem 1rem; }
  .k3d-kroki-nawig .k3d-btn { padding: .5rem .7rem; }
  .k3d-nawig-zakladki ol { padding: 0 1rem; }

  /* pelny ekran na telefonie: cena na dole, nad nia ikony, karta jako arkusz nad ikonami */
  .k3d-app[data-uklad^="pelny"] .k3d-scena > .k3d-stopka { top: auto; right: 0; left: 0; bottom: 0; max-width: none; padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom, 0px)); border-width: 1px 0 0; border-radius: 0; box-shadow: none; background: var(--k-tlo2); }
  .k3d-app[data-uklad^="pelny"] .k3d-nawig-dok,
  .k3d-app[data-uklad^="pelny"][data-karta="otwarta"] .k3d-nawig-dok { left: 8px; right: 8px; top: auto; bottom: calc(var(--k-stopka-wys, 60px) + 8px); transform: none; max-width: none; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 4px; }
  .k3d-app[data-uklad^="pelny"] .k3d-nawig-dok ol { flex-direction: row; }
  .k3d-app[data-uklad^="pelny"] .k3d-nawig-dok button { flex: none; width: 74px; padding: 7px 2px 6px; font-size: .64rem; }
  .k3d-app[data-uklad^="pelny"] .k3d-panel { left: 8px; right: 8px; top: auto; width: auto; height: 52%; max-height: none; bottom: calc(var(--k-stopka-wys, 60px) + var(--k-dok-wys, 66px) + 14px); }
  .k3d-app[data-uklad^="pelny"]:not([data-karta="otwarta"]) .k3d-panel { transform: translateY(14px); }
  .k3d-app[data-uklad^="pelny"] .k3d-widoki { top: 10px; bottom: auto; left: 10px; right: auto; }
  .k3d-app[data-uklad^="pelny"] .k3d-narzedzia { top: 56px; bottom: auto; right: 10px; left: auto; transform: none; flex-direction: column; align-items: flex-end; }
  .k3d-app[data-uklad^="pelny"] .k3d-hud { display: none; }
  .k3d-app[data-uklad^="pelny"] .k3d-toast { bottom: calc(var(--k-stopka-wys, 60px) + var(--k-dok-wys, 66px) + 24px); }
  .k3d-scena > .k3d-stopka { top: 10px; right: 10px; padding: .4rem .4rem .4rem .75rem; }
  .k3d-scena > .k3d-stopka .k3d-cena-info { display: none; }
  .k3d-scena > .k3d-stopka .k3d-cena-glowna { font-size: 1rem; }
  .k3d-app[data-uklad^="pelny"] .k3d-scena > .k3d-stopka .k3d-cena-info { display: block; }
}

/* ---------- mieszkanie: lista lokali, filtry, etykiety pomieszczen ---------- */
.k3d-filtry { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.k3d-filtr { display: grid; gap: 3px; font-size: .76rem; color: var(--k-tekst2); }
.k3d-filtr select { font: inherit; font-size: .86rem; color: var(--k-tekst); padding: 6px 8px; min-height: 36px; border: 1px solid var(--k-linia-kontrolki, #8a8f94); border-radius: var(--k-promien); background: var(--k-bialy); }
.k3d-filtr-check { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--k-tekst); align-self: end; min-height: 36px; }
.k3d-filtr-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--k-akcent); }
.k3d-lokale { display: grid; gap: 5px; max-height: 420px; overflow-y: auto; padding: 2px; }
.k3d-lokal { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; text-align: left; padding: .55rem .7rem; border: 1px solid var(--k-linia); border-radius: calc(var(--k-promien) + 2px); background: var(--k-bialy); color: var(--k-tekst); font: inherit; cursor: pointer; }
.k3d-lokal:hover { border-color: var(--k-akcent3); }
.k3d-lokal[aria-pressed="true"] { border-color: var(--k-tekst); box-shadow: inset 0 0 0 1px var(--k-tekst); }
.k3d-lokal[aria-busy="true"] { opacity: .6; cursor: progress; }
.k3d-lokal-nr { display: grid; place-items: center; min-width: 44px; height: 36px; padding: 0 6px; border-radius: var(--k-promien); background: var(--k-tlo3); font-weight: 650; font-size: .86rem; font-variant-numeric: tabular-nums lining-nums; }
.k3d-lokal-opis { display: grid; gap: 1px; min-width: 0; }
.k3d-lokal-opis strong { font-size: .86rem; font-weight: 600; }
.k3d-lokal-opis small { font-size: .75rem; color: var(--k-tekst2); }
.k3d-lokal-prawo { display: grid; justify-items: end; gap: 2px; }
.k3d-lokal-status { display: inline-block; font-size: .7rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #e6f2ea; color: #1f6b3d; white-space: nowrap; }
.k3d-lokal-rezerwacja .k3d-lokal-status, .k3d-lokal-status.k3d-lokal-rezerwacja { background: #fbf1dd; color: #7a5200; }
.k3d-lokal-sprzedany .k3d-lokal-status, .k3d-lokal-status.k3d-lokal-sprzedany { background: #ececec; color: #4d4d4d; }
.k3d-lokal-sprzedany .k3d-lokal-nr, .k3d-lokal-sprzedany .k3d-lokal-opis { opacity: .6; }
.k3d-lokal-cena { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.k3d-lokal-karta { display: grid; gap: .3rem; padding: .8rem .9rem; border: 1px solid var(--k-linia); border-radius: calc(var(--k-promien) + 4px); background: var(--k-tlo2); }
.k3d-lokal-tytul { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-family: var(--k-font-naglowki); font-size: 1.1rem; font-weight: 600; }
.k3d-lokal-cena-duza { margin: .2rem 0 0; font-size: 1.3rem; font-weight: 650; font-variant-numeric: tabular-nums lining-nums; }
.k3d-zastrzezenie { padding: .55rem .7rem; border-radius: var(--k-promien); background: var(--k-tlo2); }
.k3d-etykieta-pom { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 1px; padding: 4px 9px; border-radius: 8px; background: rgba(255, 255, 255, .9); color: var(--k-tekst); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); pointer-events: none; white-space: nowrap; line-height: 1.15; }
.k3d-etykieta-pom strong { font-size: .74rem; font-weight: 600; }
.k3d-etykieta-pom span { font-size: .72rem; color: var(--k-tekst2); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 900px) {
  .k3d-etykieta-pom { padding: 3px 6px; }
  .k3d-etykieta-pom strong { font-size: .66rem; }
  .k3d-etykieta-pom span { font-size: .64rem; }
  .k3d-lokale { max-height: none; }
}

/* mieszkanie: materialy pakietu */
.k3d-materialy { display: grid; gap: 6px; margin: 4px 0 10px; font-size: .84rem; }
.k3d-materialy > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--k-linia); }
.k3d-materialy dt { color: var(--k-tekst2, #5d6166); }
.k3d-materialy dd { margin: 0; font-weight: 500; text-align: right; }
.k3d-zapisane-lista { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; gap: 4px; font-size: .86rem; }
.k3d-zapisane-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--k-linia); }
.k3d-zapisane-lista a { color: var(--k-akcent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k3d-zapisane-lista small { color: var(--k-tekst2); }
.k3d-zapisane-lista .k3d-btn-tekst { background: none; border: 0; font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--k-tekst2); padding: 2px 6px; }
.k3d-link-mail { margin-top: 12px; display: grid; gap: 6px; }
.k3d-link-mail input { flex: 1 1 12rem; min-width: 0; }

/* =========================================================
   0.3.0: opis kroku, przewijanie, roznica ceny, podsumowanie z "Zmien", przewodnik,
   podpisy bokow i scian, logo z nazwa, font do wymiarow, ciemna strona startowa.
   Kolory tylko ze zmiennych marki (--k-*, --kc-*).
   ========================================================= */

/* wymiary i parametry fontem marki do liczb (jesli marka go ma) */
.k3d-etykieta, .k3d-pole-liczba input, .k3d-element small, .k3d-litera-sciany, .k3d-cena-roznica { font-family: var(--k-font-mono, inherit); }
.k3d-pole-liczba input { font-size: .86rem; }

/* logo, ktore zawiera juz nazwe (szeroki znak z napisem) */
.k3d-logo.k3d-logo-pelne svg { width: auto; height: 22px; }
.k3d-druk-logo.k3d-druk-logo-pelne svg { width: auto; height: 7mm; }
@media (max-width: 480px) { .k3d-logo.k3d-logo-pelne svg { height: 17px; } }

/* zdanie pod naglowkiem kroku */
.k3d-krok-opis { margin: -.3rem 0 .95rem; max-width: 52ch; font-size: .88rem; line-height: 1.45; color: var(--k-tekst2); }
.k3d-app[data-uklad^="pelny"] .k3d-krok-opis { padding-right: 40px; }
.k3d-app[data-gestosc="zwarta"] .k3d-krok-opis { margin-bottom: .7rem; font-size: .84rem; }
/* w karcie pelnoekranowej przycisk zamkniecia karty jest w prawym gornym rogu: edytor robi mu miejsce */
.k3d-app[data-uklad^="pelny"] .k3d-edytor-gora { padding-right: 36px; }
/* na ostatnim kroku pasek krokow pokazuje postep, licznik nie musi */
.k3d-app[data-ostatni="1"] .k3d-kroki-licznik { visibility: hidden; }
.k3d-kroki-licznik { white-space: nowrap; }

/* jest wiecej tresci ponizej: cien na dole i strzalka */
.k3d-panel-tresc { position: relative; }
.k3d-panel-wiecej { position: sticky; bottom: 0; z-index: 2; height: 0; pointer-events: none; }
.k3d-panel-wiecej::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; background: linear-gradient(to bottom, transparent, var(--k-tlo) 85%); }
.k3d-panel-wiecej button { position: absolute; left: 50%; bottom: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; margin-left: -16px; border: 1px solid var(--k-linia); border-radius: 50%; background: var(--k-bialy); color: var(--k-akcent2); box-shadow: var(--k-cien); cursor: pointer; pointer-events: auto; animation: k3d-wiecej 2.2s ease-in-out infinite; }
.k3d-panel-wiecej svg { width: 16px; height: 16px; }
@keyframes k3d-wiecej { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(3px); } }

/* roznica ceny po zmianie, przez chwile obok ceny */
.k3d-stopka-cena { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
.k3d-stopka-cena .k3d-cena-info { flex-basis: 100%; }
.k3d-cena-roznica { align-self: center; font-size: .74rem; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--k-akcent3); color: var(--k-akcent2); opacity: 0; transform: translateY(3px); transition: opacity .25s ease, transform .25s ease; }
.k3d-cena-roznica:empty { display: none; }
.k3d-cena-roznica.k3d-widoczna { opacity: 1; transform: none; }
.k3d-cena-roznica.k3d-taniej { background: #e3f1e7; color: #1f6b3d; }

/* podsumowanie: twoje wybory z olowkiem, rozbicie ceny zwiniete */
.k3d-wybory { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--k-linia); }
.k3d-wybory li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 28px; gap: .6rem; align-items: center; padding: .42rem 0; border-bottom: 1px solid var(--k-linia); font-size: .84rem; line-height: 1.35; }
.k3d-wybory-nazwa { color: var(--k-tekst2); }
.k3d-wybory-wartosc { color: var(--k-tekst); font-weight: 500; overflow-wrap: anywhere; }
.k3d-wybory-zmien { grid-column: 3; justify-self: end; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--k-akcent2); cursor: pointer; }
.k3d-wybory-zmien:hover { background: var(--k-tlo3); }
.k3d-wybory-zmien svg { width: 15px; height: 15px; }
.k3d-rozbicie > summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--k-akcent2); padding: .35rem 0; }
.k3d-rozbicie[open] > summary { margin-bottom: .2rem; }
/* w ukladach z krokami "Zapytaj o wycene" jest na pasku krokow */
.k3d-app[data-uklad="kreator"] .k3d-pod-zapytaj, .k3d-app[data-uklad^="pelny"] .k3d-pod-zapytaj { display: none; }
.k3d-app[data-uklad="kreator"][data-ostatni="1"] .k3d-panel > .k3d-stopka [data-el="zapytaj"] { display: none; }

/* podpisy bokow pergoli przy plusach */
.k3d-punkt.k3d-punkt-bok { padding: 0 12px 0 8px; font-size: .78rem; font-weight: 600; }
.k3d-punkt-tekst { white-space: nowrap; }
@media (max-width: 900px) { .k3d-punkt.k3d-punkt-bok { padding: 0 9px 0 6px; font-size: .7rem; } }
/* na waskim telefonie scena jest mala: zostaje sam plus, nazwy bokow sa na liscie w panelu */
@media (max-width: 600px) { .k3d-punkt-tekst { display: none; } .k3d-punkt.k3d-punkt-bok { padding: 0; } }

/* planer pokoju: litery scian, opis otworu, wymiar od naroznika */
.k3d-litera-sciany { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--k-tekst); background: rgba(255, 255, 255, .92); color: var(--k-tekst); font-size: .8rem; font-weight: 600; line-height: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); pointer-events: none; }
.k3d-element.k3d-element-otwor { flex-direction: column; align-items: stretch; gap: 2px; }
.k3d-element-otwor > span { font-weight: 600; }
.k3d-element-otwor em { text-align: left; font-size: .78rem; line-height: 1.35; }
.k3d-etykieta.k3d-etykieta-otwor { background: var(--k-akcent2); color: var(--k-bialy); }

/* przewodnik przy pierwszym wejsciu */
.k3d-przewodnik { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.k3d-przewodnik-ramka { position: fixed; border-radius: calc(var(--k-promien) + 6px); box-shadow: 0 0 0 9999px rgba(15, 17, 21, .5); outline: 2px solid var(--k-akcent); outline-offset: 0; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.k3d-przewodnik-dymek { position: fixed; width: min(320px, calc(100vw - 24px)); padding: 1rem 1.1rem .9rem; border-radius: calc(var(--k-promien) + 6px); background: var(--k-bialy); color: var(--k-tekst); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); pointer-events: auto; }
.k3d-przewodnik-licznik { margin: 0 0 .35rem; font-family: var(--k-font-mono, inherit); font-size: .74rem; color: var(--k-szary); }
.k3d-przewodnik-tekst { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.5; }
.k3d-przewodnik-akcje { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; }
.k3d-przewodnik-akcje .k3d-btn { padding: .55rem 1rem; font-size: .86rem; }
@media (prefers-reduced-motion: reduce) { .k3d-panel-wiecej button { animation: none; } }

/* ---------- strona startowa: ciemna, gdy marka ma ciemna palete (pole ciemne) ---------- */
.k3d-tekst-akcent { display: block; color: var(--k-akcent2); }
.k3d-strona-ciemna {
  --k-tlo: var(--kc-tlo); --k-tlo2: var(--kc-powierzchnia); --k-tlo3: var(--kc-powierzchnia2); --k-bialy: var(--kc-powierzchnia);
  --k-tekst: var(--kc-tekst); --k-tekst2: var(--kc-tekst2); --k-szary: var(--kc-szary); --k-linia: var(--kc-linia);
  --k-akcent: var(--kc-akcent); --k-akcent2: var(--kc-akcent); --k-akcent3: var(--kc-powierzchnia2);
  min-height: 100vh; color: var(--kc-tekst);
  background:
    radial-gradient(ellipse 45% 55% at 70% 12%, color-mix(in srgb, var(--kc-akcent) 30%, transparent) 0%, color-mix(in srgb, var(--kc-akcent2) 14%, transparent) 34%, transparent 80%),
    radial-gradient(ellipse 65% 35% at 50% 108%, color-mix(in srgb, var(--kc-akcent2) 18%, transparent), transparent 75%),
    radial-gradient(ellipse 35% 45% at -5% -10%, color-mix(in srgb, var(--kc-tekst2) 16%, transparent), transparent 80%),
    linear-gradient(118deg, var(--kc-tlo) 0%, color-mix(in srgb, var(--kc-tlo) 92%, var(--kc-akcent2)) 42%, color-mix(in srgb, var(--kc-tlo) 74%, var(--kc-akcent2)) 72%, var(--kc-tlo) 100%);
  background-color: var(--kc-tlo); background-repeat: no-repeat;
}
/* tlo liczone dla calej strony, nie tylko pierwszego ekranu */
html:has(> body.k3d-strona-ciemna) { height: auto; min-height: 100%; }
html:has(> body.k3d-strona-ciemna) body { height: auto; }
.k3d-strona-ciemna .k3d-strona-naglowek { border-bottom-color: var(--kc-linia); }
.k3d-strona-ciemna .k3d-logo.k3d-logo-pelne svg { height: 26px; }
.k3d-strona-ciemna .k3d-jezyki a { color: var(--kc-tekst2); }
.k3d-strona-ciemna .k3d-jezyki a[aria-current="true"] { color: var(--kc-tlo); background: var(--kc-tekst); }
.k3d-strona-ciemna .k3d-strona-tresc { padding-top: clamp(40px, 8vw, 96px); }
.k3d-strona-ciemna .k3d-strona-tresc h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 1.1rem; }
.k3d-strona-ciemna .k3d-tekst-akcent {
  background: linear-gradient(100deg, color-mix(in srgb, var(--kc-akcent) 55%, #fff) 0%, var(--kc-akcent) 45%, color-mix(in srgb, var(--kc-akcent2) 65%, var(--kc-akcent)) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--kc-akcent);
}
.k3d-strona-ciemna .k3d-wstep { color: var(--kc-tekst2); font-size: 1.08rem; margin-bottom: 2.6rem; }
.k3d-strona-ciemna .k3d-kafel { background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), var(--kc-powierzchnia); border-color: var(--kc-linia); transition: border-color .2s ease, transform .2s ease; }
.k3d-strona-ciemna .k3d-kafel:hover { border-color: color-mix(in srgb, var(--kc-akcent) 45%, transparent); transform: translateY(-2px); }
.k3d-strona-ciemna .k3d-kafel-ikona { color: var(--kc-akcent); background: radial-gradient(ellipse 70% 90% at 50% 100%, color-mix(in srgb, var(--kc-akcent2) 30%, transparent), transparent 72%), var(--kc-tlo); border: 1px solid var(--kc-linia); }
.k3d-strona-ciemna .k3d-kafel p { color: var(--kc-tekst2); }
.k3d-strona-ciemna .k3d-kafel-dla { color: var(--kc-szary) !important; }
.k3d-strona-ciemna .k3d-notka { color: var(--kc-szary); }

/* planer pokoju: strony swiata scian w kroku okien */
.k3d-strony { display: grid; gap: .3rem; padding-top: .4rem; border-top: 1px solid var(--k-linia); }
.k3d-strony ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .8rem; font-size: .84rem; color: var(--k-tekst2); }
.k3d-strony li { display: flex; align-items: center; gap: .45rem; }
.k3d-strony b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--k-tekst); font-family: var(--k-font-mono, inherit); font-size: .72rem; font-weight: 600; color: var(--k-tekst); }

/* ---------- panel diagnostyczny (?diag=1) ---------- */
.k3d-diag { position: fixed; z-index: 100; left: 8px; top: calc(8px + env(safe-area-inset-top, 0px)); max-width: calc(100vw - 16px); padding: 8px 10px; border-radius: 10px; background: rgba(18, 18, 24, .88); color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.k3d-diag pre { margin: 0 0 6px; font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.k3d-diag-akcje { display: flex; gap: 6px; }
.k3d-diag-akcje button { min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; }
.k3d-diag-zwiniety pre { display: none; }

/* =========================================================
   Telefon (0.3.4, PLAN-TELEFON): jeden uklad dla wszystkich marek. Scena na calym ekranie,
   karta na dole z trzema wysokosciami, kroki i cena w karcie, menu w naglowku. Poziomo karta z prawej.
   Obszary dotyku co najmniej 44 px, pola tekstowe 16 px (iPhone nie powieksza wtedy strony).
   ========================================================= */
.k3d-karta-uchwyt, .k3d-kroki-licznik-btn, .k3d-menu-btn { display: none; }
.k3d-body.k3d-body-telefon { overscroll-behavior: none; }

.k3d-app[data-uklad="telefon"] .k3d-wnetrze { display: block; }
.k3d-app[data-uklad="telefon"] .k3d-scena { position: absolute; inset: 0; }
.k3d-app[data-uklad="telefon"] .k3d-panel {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: var(--k-karta-h, 45%); max-height: calc(100% - 8px);
  padding-top: 22px; border: 0; border-radius: 20px 20px 0 0; background: var(--k-tlo);
  box-shadow: 0 -8px 28px rgba(20, 16, 40, .16); overflow: hidden;
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  transition: height .26s cubic-bezier(.2, .8, .2, 1);
}
.k3d-app[data-uklad="telefon"][data-ciagniecie="1"] .k3d-panel { transition: none; }
.k3d-app[data-uklad="telefon"] .k3d-panel-gora { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-panel-tresc { padding: 0 1rem; }
.k3d-app[data-uklad="telefon"] .k3d-sekcja { padding-block: .1rem 1rem; border-bottom: 0; }
.k3d-app[data-uklad="telefon"] .k3d-krok { margin-bottom: .55rem; font-size: 1.15rem; }
.k3d-app[data-uklad="telefon"][data-karta-wys="niska"] .k3d-panel-tresc { overflow: hidden; }
.k3d-app[data-uklad="telefon"][data-karta-wys="niska"] .k3d-panel-wiecej { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-krok-opis, .k3d-app[data-uklad="telefon"] .k3d-sekcja-tresc { transition: opacity .2s ease; }
.k3d-app[data-uklad="telefon"][data-karta-wys="niska"] .k3d-krok-opis, .k3d-app[data-uklad="telefon"][data-karta-wys="niska"] .k3d-sekcja-tresc { opacity: 0; pointer-events: none; }

/* uchwyt: pasek u gory karty; obszar dotyku 44 px zachodzi na tytul kroku (dotkniecie tytulu tez rozwija karte) */
.k3d-app[data-uklad="telefon"] .k3d-karta-uchwyt {
  display: block; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 44px; padding: 0; border: 0;
  background: transparent; cursor: grab; touch-action: none;
}
.k3d-app[data-uklad="telefon"] .k3d-karta-uchwyt::before { content: ""; position: absolute; top: 8px; left: 50%; width: 44px; height: 5px; margin-left: -22px; border-radius: 9px; background: var(--k-linia-kontrolki, #b9b6c4); }
.k3d-app[data-uklad="telefon"] .k3d-karta-uchwyt:focus-visible { outline-offset: -4px; }
.k3d-app[data-uklad="telefon"] .k3d-karta-zamknij { display: none; }
.k3d-app[data-uklad="telefon"][data-karta-wys="pelna"] .k3d-karta-zamknij { display: grid; top: 8px; right: 10px; z-index: 4; width: 44px; height: 44px; }

/* Wstecz, licznik z lista krokow, Dalej */
.k3d-app[data-uklad="telefon"] .k3d-kroki-nawig { padding: .4rem .75rem; gap: .4rem; }
.k3d-app[data-uklad="telefon"] .k3d-kroki-nawig .k3d-btn { min-height: 44px; padding: .5rem .8rem; }
.k3d-app[data-uklad="telefon"] .k3d-kroki-licznik { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-kroki-licznik-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: 1; min-width: 0; min-height: 44px; padding: 0 .4rem;
  border: 0; border-radius: var(--k-promien); background: transparent; color: var(--k-tekst2); font-size: .82rem; font-variant-numeric: tabular-nums lining-nums; cursor: pointer; white-space: nowrap;
}
.k3d-app[data-uklad="telefon"] .k3d-kroki-licznik-btn svg { width: 16px; height: 16px; flex: none; }
.k3d-app[data-uklad="telefon"] .k3d-kroki-licznik-btn[aria-expanded="true"] { color: var(--k-tekst); background: var(--k-tlo2); }
.k3d-app[data-uklad="telefon"][data-ostatni="1"] .k3d-kroki-licznik-btn { visibility: visible; }

/* lista krokow: podmienia tresc karty (nie druga karta) */
.k3d-app[data-uklad="telefon"] .k3d-nawig-kroki { display: none; border: 0; }
.k3d-app[data-uklad="telefon"][data-lista-krokow="1"] .k3d-nawig-kroki { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.k3d-app[data-uklad="telefon"][data-lista-krokow="1"] .k3d-panel-tresc { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-nawig-kroki ol { flex-direction: column; align-items: stretch; padding: .2rem .75rem; margin: 0; gap: 2px; overflow: visible; }
.k3d-app[data-uklad="telefon"] .k3d-nawig-kroki li { display: block; flex: none; }
.k3d-app[data-uklad="telefon"] .k3d-nawig-kroki li + li::before { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-nawig-kroki button { display: flex; width: 100%; min-height: 48px; padding: .4rem .5rem; font-size: .95rem; }
.k3d-app[data-uklad="telefon"] .k3d-nawig-kroki li .k3d-nawig-tekst { display: inline !important; }
.k3d-app[data-uklad="telefon"] .k3d-nawig-kroki button[aria-current] { background: var(--k-tlo2); }

/* cena i Zapytaj o wycene na dole karty */
.k3d-app[data-uklad="telefon"] .k3d-panel > .k3d-stopka { margin: 0; padding: .5rem .9rem calc(.55rem + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--k-linia); border-radius: 0; box-shadow: none; background: var(--k-tlo2); }
.k3d-app[data-uklad="telefon"] .k3d-panel > .k3d-stopka .k3d-cena-glowna { font-size: 1.15rem; }
.k3d-app[data-uklad="telefon"] .k3d-stopka .k3d-btn-glowny { min-height: 48px; }
.k3d-app[data-uklad="telefon"] .k3d-pod-zapytaj { display: none; }
.k3d-app[data-uklad="telefon"][data-ostatni="1"] .k3d-panel > .k3d-stopka [data-el="zapytaj"] { display: none; }

/* nakladki na scenie: widoki w lewym gornym rogu, narzedzia w prawym, informacja pod widokami */
.k3d-app[data-uklad="telefon"] .k3d-widoki { top: 10px; bottom: auto; left: calc(10px + env(safe-area-inset-left, 0px)); max-width: calc(100% - 96px); overflow-x: auto; scrollbar-width: none; }
.k3d-app[data-uklad="telefon"] .k3d-widoki button { min-height: 44px; padding: 0 10px; font-size: .78rem; white-space: nowrap; }
.k3d-app[data-uklad="telefon"] .k3d-narzedzia { top: 10px; bottom: auto; right: calc(10px + env(safe-area-inset-right, 0px)); left: auto; transform: none; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; max-width: none; gap: 8px; }
.k3d-app[data-uklad="telefon"] .k3d-narzedzie { width: 44px; height: 44px; padding: 0; justify-content: center; }
.k3d-app[data-uklad="telefon"] .k3d-narzedzie span { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-hud { top: 64px; left: calc(10px + env(safe-area-inset-left, 0px)); max-width: calc(100% - 84px); white-space: normal; border-radius: 14px; }
.k3d-app[data-uklad="telefon"] .k3d-toast { bottom: calc(var(--k-karta-wolne, 160px) + 12px); }
.k3d-app[data-uklad="telefon"] .k3d-podpowiedz { display: none; }

/* poziomo: scena z lewej, karta z prawej na cala wysokosc */
.k3d-app[data-uklad="telefon"][data-orientacja="poziom"] { --k-naglowek-wys: 40px; }
.k3d-app[data-uklad="telefon"][data-orientacja="poziom"] .k3d-panel {
  left: auto; top: 0; bottom: 0; right: 0; width: min(42%, 400px); height: auto; max-height: none; padding-top: .3rem;
  border-radius: 0; box-shadow: -6px 0 24px rgba(20, 16, 40, .12); transition: none;
}
.k3d-app[data-uklad="telefon"][data-orientacja="poziom"] .k3d-karta-uchwyt { display: none; }
.k3d-app[data-uklad="telefon"][data-orientacja="poziom"] .k3d-panel-tresc { overflow-y: auto; }
.k3d-app[data-uklad="telefon"][data-orientacja="poziom"] .k3d-narzedzia { right: calc(min(42%, 400px) + 10px); }
.k3d-app[data-uklad="telefon"][data-orientacja="poziom"] .k3d-toast { bottom: 12px; left: 30%; }

/* naglowek z menu */
.k3d-naglowek.k3d-naglowek-telefon { position: relative; z-index: 20; }
.k3d-naglowek.k3d-naglowek-telefon { padding-left: calc(.8rem + env(safe-area-inset-left, 0px)); padding-right: calc(.4rem + env(safe-area-inset-right, 0px)); }
.k3d-naglowek.k3d-naglowek-telefon .k3d-naglowek-prawo { display: none; }
.k3d-naglowek.k3d-naglowek-telefon .k3d-logo { min-height: 44px; }
.k3d-naglowek.k3d-naglowek-telefon .k3d-menu-btn { display: grid; place-items: center; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--k-linia); border-radius: 12px; background: var(--k-bialy); color: var(--k-tekst); cursor: pointer; }
.k3d-menu-btn svg { width: 20px; height: 20px; }
.k3d-menu { position: absolute; right: 8px; top: calc(100% + 4px); z-index: 30; display: grid; gap: 4px; min-width: 230px; padding: 8px; border: 1px solid var(--k-linia); border-radius: 14px; background: var(--k-bialy); box-shadow: 0 14px 40px rgba(20, 16, 40, .2); }
.k3d-menu .k3d-marki select { width: 100%; max-width: none; min-height: 44px; font-size: 16px; }
.k3d-menu .k3d-jezyki { justify-content: stretch; gap: 4px; }
.k3d-menu .k3d-jezyki a { flex: 1; display: grid; place-items: center; min-height: 44px; font-size: .9rem; }
.k3d-menu-pozycja { min-height: 44px; padding: 0 .8rem; border: 0; border-radius: var(--k-promien); background: var(--k-tlo2); color: var(--k-tekst); font-size: .9rem; font-weight: 500; text-align: left; cursor: pointer; }

/* obszary dotyku 44 px i pola 16 px w karcie i oknie zapytania */
.k3d-app[data-uklad="telefon"] .k3d-seg button,
.k3d-app[data-uklad="telefon"] .k3d-chip,
.k3d-app[data-uklad="telefon"] .k3d-karta,
.k3d-app[data-uklad="telefon"] .k3d-btn { min-height: 44px; }
.k3d-app[data-uklad="telefon"] .k3d-kolor { min-width: 44px; min-height: 44px; }
.k3d-app[data-uklad="telefon"] input[type="range"] { height: 44px; }
.k3d-app[data-uklad="telefon"] input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10.5px; }
.k3d-app[data-uklad="telefon"] input[type="range"]::-moz-range-thumb { width: 21px; height: 21px; }
.k3d-app[data-uklad="telefon"] .k3d-pole-liczba input { min-height: 44px; width: 5.2em; font-size: 16px; }
.k3d-app[data-uklad="telefon"] .k3d-info { width: 44px; height: 44px; margin: -13px -12px; border: 0; background: radial-gradient(circle, var(--k-bialy) 0 8.5px, var(--k-akcent3) 9px 10px, transparent 10.5px); }
.k3d-app[data-uklad="telefon"] .k3d-info[aria-expanded="true"] { background: radial-gradient(circle, var(--k-akcent) 0 10px, transparent 10.5px); }
.k3d-app[data-uklad="telefon"] .k3d-wybory-zmien { width: 44px; height: 44px; margin: -8px; }
.k3d-app[data-uklad="telefon"] .k3d-wybory li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 28px; }
.k3d-app[data-uklad="telefon"] .k3d-punkt { min-width: 44px; height: 44px; }
.k3d-app[data-uklad="telefon"] .k3d-pasek button { width: 44px; height: 44px; }
.k3d-app[data-uklad="telefon"] .k3d-rozbicie > summary { min-height: 44px; display: flex; align-items: center; }
.k3d-app[data-uklad="telefon"] .k3d-modal input:not([type="checkbox"]):not([type="radio"]), .k3d-app[data-uklad="telefon"] .k3d-modal select, .k3d-app[data-uklad="telefon"] .k3d-modal textarea { font-size: 16px; min-height: 44px; }
.k3d-app[data-uklad="telefon"] .k3d-modal-zamknij { width: 44px; height: 44px; }
.k3d-app[data-uklad="telefon"] .k3d-seg button { min-width: 44px; }
.k3d-app[data-uklad="telefon"] .k3d-element,
.k3d-app[data-uklad="telefon"] .k3d-roza button { min-height: 44px; }
.k3d-app[data-uklad="telefon"] .k3d-panel-wiecej button { width: 44px; height: 44px; margin-left: -22px; }
.k3d-app[data-uklad="telefon"] .k3d-zgoda { min-height: 44px; align-items: center; }
.k3d-app[data-uklad="telefon"] .k3d-zgoda input { flex: none; width: 22px; height: 22px; margin: 0; }
/* przelacznik: obszar dotyku 52 x 44 px, tor i kulka rysowane w srodku */
.k3d-app[data-uklad="telefon"] .k3d-przel,
.k3d-app[data-uklad="telefon"] .k3d-przel[aria-pressed="true"] { width: 52px; height: 44px; border-radius: 0; background: transparent; }
.k3d-app[data-uklad="telefon"] .k3d-przel::before { content: ""; position: absolute; top: 9px; left: 4px; width: 44px; height: 26px; border-radius: 13px; background: var(--k-linia); transition: background-color .2s; }
.k3d-app[data-uklad="telefon"] .k3d-przel[aria-pressed="true"]::before { background: var(--k-akcent); }
.k3d-app[data-uklad="telefon"] .k3d-przel::after { top: 12px; left: 7px; width: 20px; height: 20px; }
.k3d-app[data-uklad="telefon"] .k3d-przel[aria-pressed="true"]::after { transform: translateX(18px); }

/* spacer: pelny ekran, bez naglowka i karty */
.k3d-app[data-uklad="telefon"][data-spacer="1"] .k3d-naglowek,
.k3d-app[data-uklad="telefon"][data-spacer="1"] .k3d-panel,
.k3d-app[data-uklad="telefon"][data-spacer="1"] .k3d-widoki,
.k3d-app[data-uklad="telefon"][data-spacer="1"] .k3d-narzedzia,
.k3d-app[data-uklad="telefon"][data-spacer="1"] .k3d-hud,
.k3d-app[data-uklad="telefon"][data-spacer="1"] .k3d-etykiety,
.k3d-app[data-uklad="telefon"][data-spacer="1"] .k3d-punkty { display: none !important; }

/* podpisy wymiarow na telefonie: silnik rozmieszcza je wedlug priorytetu, kazdy na wlasnym tle */
.k3d-etykiety-telefon .k3d-etykieta { font-size: .8rem; padding: 5px 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); transition: background-color .3s ease, color .3s ease; }
.k3d-etykiety-telefon .k3d-etykieta-zmiana { color: var(--k-bialy); background: var(--k-akcent); border-color: var(--k-akcent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 2px 8px rgba(0, 0, 0, .25); }

/* pasek z liczbami: wymiary, ktore nie zmiescily sie na scenie */
.k3d-pasek-wymiarow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 .75rem; padding: 7px 10px; border-radius: var(--k-promien); background: var(--k-tlo2); color: var(--k-tekst); font-size: .8rem; line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.k3d-pasek-wymiarow svg { flex: none; width: 16px; height: 16px; color: var(--k-akcent2); }
.k3d-pasek-wymiarow-tytul { color: var(--k-tekst2); }
.k3d-pasek-wymiarow-poz { font-family: var(--k-font-mono, inherit); white-space: nowrap; }
.k3d-pasek-wymiarow-poz.k3d-zmiana { color: var(--k-akcent2); font-weight: 600; }

/* punkty na scenie (plusy zabudowy, dolaczanie pergoli): wyglad ok. 30 px, obszar dotyku 44 px */
.k3d-app[data-uklad="telefon"] .k3d-punkt,
.k3d-app[data-uklad="telefon"] .k3d-punkt:hover { isolation: isolate; background: transparent; border: 0; box-shadow: none; }
.k3d-app[data-uklad="telefon"] .k3d-punkt::before { content: ""; position: absolute; inset: 7px; z-index: -1; border-radius: 999px; background: var(--k-akcent); border: 2px solid var(--k-bialy); box-shadow: 0 3px 10px rgba(0, 0, 0, .28); }
.k3d-app[data-uklad="telefon"] .k3d-punkt.k3d-punkt-bok::before { inset: 7px 0; }
@media (max-width: 600px) { .k3d-app[data-uklad="telefon"] .k3d-punkt.k3d-punkt-bok::before { inset: 7px; } }
.k3d-app[data-uklad="telefon"] .k3d-punkt-pelny::before { background: var(--k-tekst); }
.k3d-app[data-uklad="telefon"] .k3d-punkt-wybrany { color: var(--k-akcent2); }
.k3d-app[data-uklad="telefon"] .k3d-punkt-wybrany::before { background: var(--k-bialy); border-color: var(--k-akcent); box-shadow: 0 0 0 3px rgba(0, 0, 0, .12), 0 3px 10px rgba(0, 0, 0, .28); }
.k3d-app[data-uklad="telefon"] .k3d-punkt svg { width: 16px; height: 16px; }

/* narzedzia na telefonie: jeden przycisk Narzedzia z napisem w prawym gornym rogu zamiast kolumny ikon (4b) */
.k3d-narzedzia-btn, .k3d-zoom { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-narzedzia { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-narzedzia-btn {
  position: absolute; z-index: 2; top: 8px; right: calc(10px + env(safe-area-inset-right, 0px));
  display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 58px; min-height: 50px; padding: 4px 6px;
  border: 0; border-radius: 14px; background: rgba(255, 255, 255, .95); color: var(--k-tekst); box-shadow: var(--k-cien);
  font: inherit; font-size: .66rem; font-weight: 600; line-height: 1.1; cursor: pointer;
}
.k3d-app[data-uklad="telefon"] .k3d-narzedzia-btn svg { width: 20px; height: 20px; color: var(--k-akcent2); }
.k3d-app[data-uklad="telefon"] .k3d-narzedzia-btn[aria-expanded="true"] { background: var(--k-tekst); color: var(--k-bialy); }
.k3d-app[data-uklad="telefon"] .k3d-narzedzia-btn[aria-expanded="true"] svg { color: var(--k-bialy); }
.k3d-app[data-uklad="telefon"][data-orientacja="poziom"] .k3d-narzedzia-btn { right: calc(min(42%, 400px) + 10px); }

/* plus i minus (zamiennik dwoch palcow): prawy dolny rog sceny, tylko przy schowanej karcie i poziomo; wyglad 36 px, dotyk 44 px */
.k3d-app[data-uklad="telefon"] .k3d-zoom { position: absolute; z-index: 2; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(var(--k-karta-h, 180px) + 8px); flex-direction: column; gap: 4px; transition: bottom .26s cubic-bezier(.2, .8, .2, 1); }
.k3d-app[data-uklad="telefon"][data-karta-wys="niska"]:not([data-lista-narzedzi="1"]) .k3d-zoom,
.k3d-app[data-uklad="telefon"][data-orientacja="poziom"] .k3d-zoom { display: flex; }
.k3d-app[data-uklad="telefon"][data-orientacja="poziom"] .k3d-zoom { right: calc(min(42%, 400px) + 10px); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.k3d-app[data-uklad="telefon"] .k3d-zoom button { position: relative; isolation: isolate; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--k-tekst); cursor: pointer; }
.k3d-app[data-uklad="telefon"] .k3d-zoom button::before { content: ""; position: absolute; inset: 4px; z-index: -1; border-radius: 50%; background: rgba(255, 255, 255, .95); box-shadow: var(--k-cien); }
.k3d-app[data-uklad="telefon"] .k3d-zoom svg { width: 18px; height: 18px; }

/* informacja na scenie: staly dymek w jednej linii (cien w pergoli), pelna informacja na 3 s po zmianie */
.k3d-app[data-uklad="telefon"] .k3d-hud { max-width: calc(100% - 20px); }
.k3d-app[data-uklad="telefon"] .k3d-hud[data-staly="1"]:not(.k3d-hud-dymek) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k3d-app[data-uklad="telefon"] .k3d-hud.k3d-hud-dymek { animation: k3d-dymek .25s ease; }
@keyframes k3d-dymek { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* lista narzedzi: podmienia tresc karty (nie druga karta), ikona, pelna nazwa i stan */
.k3d-lista-narzedzi { display: none; }
.k3d-app[data-uklad="telefon"][data-lista-narzedzi="1"] .k3d-lista-narzedzi { display: block; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .1rem 1rem .6rem; }
.k3d-app[data-uklad="telefon"][data-lista-narzedzi="1"] .k3d-panel-tresc,
.k3d-app[data-uklad="telefon"][data-lista-narzedzi="1"] .k3d-nawig-kroki { display: none; }
.k3d-lista-narzedzi-info { margin: 0 0 .5rem; font-size: .85rem; color: var(--k-tekst2); }
.k3d-lista-narzedzi ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.k3d-lista-narzedzi button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 8px; border: 0; border-radius: var(--k-promien); background: transparent; color: var(--k-tekst); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.k3d-lista-narzedzi button:hover, .k3d-lista-narzedzi button:focus-visible { background: var(--k-tlo2); }
.k3d-lista-narzedzi button > svg:first-child { flex: none; width: 22px; height: 22px; color: var(--k-akcent2); }
.k3d-lista-narzedzi-nazwa { flex: 1; min-width: 0; }
.k3d-lista-narzedzi button > svg:last-child:not(:first-child) { flex: none; width: 18px; height: 18px; color: var(--k-tekst2); }
.k3d-lista-narzedzi-przel { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--k-linia); transition: background-color .2s; }
.k3d-lista-narzedzi-przel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--k-bialy); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.k3d-lista-narzedzi button[aria-pressed="true"] .k3d-lista-narzedzi-przel { background: var(--k-akcent); }
.k3d-lista-narzedzi button[aria-pressed="true"] .k3d-lista-narzedzi-przel::after { transform: translateX(18px); }

/* podmiana tresci karty (lista krokow, lista narzedzi, powrot do kroku) widoczna jako krotki wjazd (4a pkt 3) */
@keyframes k3d-wjazd { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.k3d-app[data-uklad="telefon"][data-lista-krokow="1"] .k3d-nawig-kroki,
.k3d-app[data-uklad="telefon"][data-lista-narzedzi="1"] .k3d-lista-narzedzi,
.k3d-app[data-uklad="telefon"] .k3d-panel-tresc { animation: k3d-wjazd .22s ease; }

/* niskie panele narzedzi: strona swiata jako jeden rzad do przewijania (N, NE, E... zamiast siatki 3 x 3) */
.k3d-app[data-uklad="telefon"] .k3d-roza { display: flex; gap: 6px; max-width: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.k3d-app[data-uklad="telefon"] .k3d-roza::-webkit-scrollbar { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-roza button { flex: none; min-width: 64px; padding: 8px 12px; }
.k3d-app[data-uklad="telefon"] .k3d-roza-srodek { display: none; }
.k3d-app[data-uklad="telefon"] .k3d-roza [data-v="45"] { order: 1; }
.k3d-app[data-uklad="telefon"] .k3d-roza [data-v="90"] { order: 2; }
.k3d-app[data-uklad="telefon"] .k3d-roza [data-v="135"] { order: 3; }
.k3d-app[data-uklad="telefon"] .k3d-roza [data-v="180"] { order: 4; }
.k3d-app[data-uklad="telefon"] .k3d-roza [data-v="225"] { order: 5; }
.k3d-app[data-uklad="telefon"] .k3d-roza [data-v="270"] { order: 6; }
.k3d-app[data-uklad="telefon"] .k3d-roza [data-v="315"] { order: 7; }

/* spacer na telefonie: tylko Zakoncz u gory (z odstepem od wciecia) i galka; podpowiedz znika po 4 s */
.k3d-app[data-uklad="telefon"][data-spacer="1"] .k3d-narzedzia-btn,
.k3d-app[data-uklad="telefon"][data-spacer="1"] .k3d-zoom { display: none !important; }
.k3d-app[data-uklad="telefon"] .k3d-spacer-koniec { top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px)); transform: none; min-height: 44px; }
.k3d-app[data-uklad="telefon"] .k3d-spacer-pomoc { top: calc(64px + env(safe-area-inset-top, 0px)); max-width: calc(100% - 24px); white-space: normal; text-align: center; border-radius: 14px; }
.k3d-spacer-pomoc { transition: opacity .4s ease; }
.k3d-spacer-pomoc.k3d-ukryta { opacity: 0; pointer-events: none; }
.k3d-spacer-telefon .k3d-joystick { left: calc(24px + env(safe-area-inset-left, 0px)); bottom: calc(40px + env(safe-area-inset-bottom, 0px)); opacity: .5; transition: opacity .15s ease; }
.k3d-spacer-telefon .k3d-joystick.k3d-joystick-aktywny { opacity: 1; }

/* utrata obrazu 3D: komunikat na scenie do czasu odtworzenia */
.k3d-kontekst { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: .8rem; padding: 1.5rem; background: rgba(245, 244, 248, .94); color: var(--k-tekst); text-align: center; }
.k3d-kontekst p { margin: 0; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .k3d-app[data-uklad="telefon"] .k3d-panel { transition: none; }
  .k3d-etykiety-telefon .k3d-etykieta { transition: none; }
  .k3d-app[data-uklad="telefon"] .k3d-zoom { transition: none; }
  .k3d-app[data-uklad="telefon"] .k3d-hud.k3d-hud-dymek { animation: none; }
  .k3d-spacer-pomoc { transition: none; }
  .k3d-app[data-uklad="telefon"] .k3d-nawig-kroki, .k3d-app[data-uklad="telefon"] .k3d-lista-narzedzi, .k3d-app[data-uklad="telefon"] .k3d-panel-tresc { animation: none !important; }
}