/* Kreator ustawienia setu – przeniesiony 1:1 z design/kreator.css (Designer). Różnice: @page jest w kreator.html (inaczej
   nadpisywałby wydruk aplikacji); dopiski aplikacji na końcu pliku. */
/* Kreator setu na rzucie Kapsel Studio – makieta (Designer, 2026-10-25).
   Ciemna rama (jak moodboard i sety), a sam rzut na jasnym „papierze”, w stylu schematu z karty setu. */

body.kreator { overflow: hidden; }
.k-top {
  height: var(--top-h); display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--bg); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 20;
}
.k-top .back { white-space: nowrap; }
.k-top .t { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.k-top .t .l { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--muted); }
.k-top .t h1 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.k-top .t .src { font-size: 12px; color: var(--muted); white-space: nowrap; }
.k-top .sp { flex: 1; }
.k-top select.select { width: auto; height: 34px; padding-top: 0; padding-bottom: 0; }
.k-top .ur { display: flex; gap: 4px; }

.k-main { display: grid; grid-template-columns: 272px minmax(0, 1fr) 320px; height: calc(100vh - var(--top-h)); }
.k-main.preview { display: block; overflow-y: auto; background: var(--paper); }

/* paleta */
.pal { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.pal-head { padding: 12px 12px 8px; }
.pal-head .input { height: 34px; }
.pal-list { overflow-y: auto; padding: 0 8px 40px; flex: 1; }
.pal-sec { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 14px 6px 6px; display: flex; justify-content: space-between; align-items: center; }
.pal-sec button { border: 0; background: none; color: var(--text-2); font-size: 12px; letter-spacing: 0; text-transform: none; padding: 0; }
.pal-sec button:hover { color: var(--text); }
.pi { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; cursor: grab; user-select: none; -webkit-user-select: none; border: 1px solid transparent; }
.pi:hover { background: var(--bg-2); border-color: var(--line-soft); }
.pi .ico { width: 30px; height: 30px; flex: none; border-radius: 6px; background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.pi .ico img { width: 100%; height: 100%; object-fit: cover; }
.pi .ico svg { width: 24px; height: 24px; }
.pi .nm { font-size: 13px; line-height: 1.25; }
.pi .nm small { display: block; color: var(--muted); font-size: 11px; }
.pi .cnt { font-size: 11.5px; color: var(--muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.pi .cnt .dop { display: block; color: var(--amber); }
.pi .cnt.over { color: var(--red); font-weight: 700; }
.pi.moje .nm::after { content: "moje"; margin-left: 6px; font-size: 10px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--text-2); }
.pal-foot { font-size: 11.5px; color: var(--muted); padding: 10px 8px; }

/* płótno */
.cv { position: relative; background: #e9e5dc; min-width: 0; overflow: hidden; }
.cv svg.plan { width: 100%; height: 100%; display: block; touch-action: none; cursor: default; }
.cv svg.plan.panning { cursor: grabbing; }
.cv.drop { box-shadow: inset 0 0 0 3px var(--focus); }
.cv-tools { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.cv-tools .btn { background: rgba(255,255,255,.92); border-color: #d2ccbf; color: #1b1a17; height: 32px; font-size: 13px; }
.cv-tools .btn:hover { background: #fff; }
.cv-tools .btn.on { background: #1b1a17; color: #f5f2ec; border-color: #1b1a17; }
.cv-tools .sep { width: 8px; }
.cv-help { position: absolute; left: 12px; bottom: 10px; font-size: 12px; color: #6f695e; background: rgba(245,242,236,.85); padding: 4px 8px; border-radius: 6px; z-index: 2; }
.cv-help .kbd { color: #6f695e; border-color: #cfc8bb; }
.cv-warn { position: absolute; right: 12px; top: 12px; max-width: 340px; display: grid; gap: 6px; z-index: 2; }
.cv-warn div { background: #fde3dc; color: #8a2410; border: 1px solid #f4bfb1; border-radius: 8px; padding: 7px 10px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.cv-warn div.info { background: #fbeed3; color: #6a4708; border-color: #efd49b; }

/* elementy rysunku (jasny papier, styl schematu z karty setu) */
.pl-bg { fill: #f5f2ec; }
.pl-wall { fill: none; stroke: #8f897d; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pl-grid { stroke: #e6e1d6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl-win { stroke: #8fb6db; stroke-width: 5; vector-effect: non-scaling-stroke; }
.pl-win-tick { stroke: #f5f2ec; stroke-width: 2; vector-effect: non-scaling-stroke; }
.pl-col { fill: #ebe7de; stroke: #a8a195; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl-cyc { fill: #fbfaf7; stroke: #d6cfc2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl-cyc-arc { fill: none; stroke: #e2dccf; stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.pl-cut { fill: url(#hatch); stroke: #b9b2a5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl-ply { stroke: #d9a35a; stroke-width: 5; fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.pl-green { stroke: #5d8a68; stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.pl-light-curt { stroke: #d8cbb2; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-dasharray: 6 3; }
.pl-tiles { fill: url(#checker); opacity: .55; stroke: #d48a7a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl-mezz { fill: rgba(140,130,115,.08); stroke: #b9b2a5; stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.pl-stairs { fill: none; stroke: #b9b2a5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl-door { stroke: #f5f2ec; stroke-width: 4; vector-effect: non-scaling-stroke; }
.pl-lbl { fill: #9a9488; font-family: var(--sans); letter-spacing: .06em; }
.pl-lbl.win { fill: #5d87b3; }

.el { cursor: grab; }
.el.sel .hit { stroke: #2f6fd6; stroke-width: 2; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; fill: rgba(47,111,214,.06); }
.el .hit { fill: transparent; stroke: none; }
.e-model { fill: #1b1a17; }
.e-model-head { fill: #1b1a17; stroke: #f5f2ec; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.e-nose { fill: #f5f2ec; }
.e-cam { fill: #3d3a34; }
.e-fov { fill: rgba(47,111,214,.07); stroke: rgba(47,111,214,.55); stroke-width: 1; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.e-head { fill: #6b665c; }
.e-led { fill: #6b665c; }
.e-mod { fill: #f3d58a; stroke: #c88a10; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.e-beam { fill: rgba(240,180,60,.16); stroke: none; }
.e-ray { stroke: #c88a10; stroke-width: 1.5; vector-effect: non-scaling-stroke; marker-end: url(#arrow); }
.e-blenda { fill: #fff; stroke: #9a9488; stroke-width: 1; vector-effect: non-scaling-stroke; }
.e-panel { fill: #1b1a17; stroke: #1b1a17; stroke-width: 1; vector-effect: non-scaling-stroke; }
.e-panel-sil { fill: #c9c9c9; }
.e-rama { fill: rgba(255,255,255,.6); stroke: #9a9488; stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.e-tlo { fill: #9a9488; stroke: #7d776c; stroke-width: 1; vector-effect: non-scaling-stroke; }
.e-mebel { fill: #d7d0c3; stroke: #8a8478; stroke-width: 1; vector-effect: non-scaling-stroke; }
.e-statyw { fill: none; stroke: #6b665c; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.e-inne { fill: #e5e0d6; stroke: #6b665c; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.e-moje { stroke: #2f6fd6 !important; }
.e-dist { stroke: #8f897d; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.e-lbl { fill: #3d3a34; font-family: var(--sans); }
.e-lbl.b { font-weight: 700; fill: #1b1a17; }
.e-lbl.d { fill: #7b766c; }
.e-lbl-bg { fill: rgba(245,242,236,.85); }
.e-rot { fill: #fff; stroke: #2f6fd6; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.e-rot-line { stroke: #2f6fd6; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.e-num { fill: #1b1a17; } .e-num-t { fill: #f5f2ec; font-family: var(--sans); font-weight: 700; }

/* inspektor */
.insp { border-left: 1px solid var(--line-soft); overflow-y: auto; padding: 16px 16px 60px; background: var(--bg); display: flex; flex-direction: column; gap: 18px; }
.insp h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 0; line-height: 1.1; }
.insp h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.insp .sub { color: var(--text-2); font-size: 13px; margin-top: 4px; }
.insp .row { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.insp .row > span { color: var(--muted); }
.insp .row .select, .insp .row .input { padding: 6px 28px 6px 9px; font-size: 13px; }
.insp .row .input { padding-right: 9px; }
.insp .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.insp .card { border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px; background: var(--bg-2); }
.insp .lim { display: grid; gap: 6px; font-size: 13px; }
.insp .lim div { display: flex; justify-content: space-between; gap: 8px; }
.insp .lim .over { color: var(--red); font-weight: 600; }
.insp .lim .pay { color: var(--amber); }
.insp .lim .sum { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 600; }
.insp .places, .insp .schemes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.insp .places button, .insp .schemes button { text-align: left; padding: 8px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-size: 12.5px; line-height: 1.25; }
.insp .places button:hover, .insp .schemes button:hover { border-color: var(--text-2); }
.insp .places button small, .insp .schemes button small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.insp .ellist { display: grid; gap: 2px; }
.insp .ellist button { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 12.5px; color: var(--text-2); }
.insp .ellist button:hover { background: var(--surface); color: var(--text); }
.insp .ellist button small { color: var(--muted); white-space: nowrap; }
.insp .big-dist { font-family: var(--serif); font-size: 30px; line-height: 1; }
.rangew { display: flex; gap: 8px; align-items: center; }
.rangew input[type=range] { flex: 1; accent-color: var(--text); }
.rangew b { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }

/* podgląd „jak w scenariuszu” */
.pv { max-width: 1060px; margin: 0 auto; padding: 30px 40px 120px; color: var(--ink); }
.pv .eyebrow { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pv h1 { font-family: var(--serif); font-weight: 400; font-size: 46px; margin: 4px 0 6px; line-height: 1; }
.pv .note { color: var(--ink-3); font-size: 13px; margin: 0 0 18px; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; border-top: 1px solid var(--ink); padding-top: 16px; }
.pv-main svg { width: 100%; height: auto; display: block; background: #f5f2ec; border: 1px solid var(--paper-line); border-radius: 8px; }
.pv-mini h5, .pv-leg h5 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pv-mini svg { width: 100%; height: auto; display: block; border: 1px solid var(--paper-line); border-radius: 6px; background: #f5f2ec; }
.pv-leg ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.pv-leg li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--paper-line); font-size: 13px; align-items: baseline; }
.pv-leg li .n { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.pv-leg li small { color: var(--ink-3); white-space: nowrap; }
.pv-order { margin-top: 18px; border: 1px solid var(--ink); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; }
.pv-order h5 { margin: 0 0 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pv-order div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.pv .btns { display: flex; gap: 8px; margin: 14px 0 0; }
.pv .btn { background: #fff; border-color: var(--paper-line); color: var(--ink); }
.pv .btn.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pv .phone-note { display: none; }

.modal .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal .field { margin-bottom: 10px; }

@media screen and (max-width: 860px) {
  body.kreator { overflow: auto; }
  .k-top { gap: 8px; padding: 0 10px; }
  .k-top .t h1 { max-width: 46vw; font-size: 19px; }
  .k-top .t .src, .k-top .ur, .k-top .mode { display: none; }
  .k-main { display: block; height: auto; }
  .pv { padding: 18px 16px 80px; }
  .pv h1 { font-size: 34px; }
  .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .pv .phone-note { display: block; background: #fbeed3; color: #6a4708; border: 1px solid #efd49b; border-radius: 8px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 14px; }
  .pv .btns { display: none; }
}
@media print {
  body.kreator { overflow: visible; background: #fff; }
  .k-top, .toast, .pv .btns { display: none !important; }
  .k-main { display: block; height: auto; background: #fff; }
  .pv { padding: 0; max-width: none; }
  .pv-grid { grid-template-columns: minmax(0, 1fr) 62mm; }
  .pv-main svg, .pv-mini svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.insp .places button.on { border-color: var(--text); background: var(--surface); }

/* podpisy: ukryte, widoczne po najechaniu, przy zaznaczonym albo po „Pokaż wszystkie podpisy”; nigdy nie łapią kliknięć */
svg.plan .lab { display: none; pointer-events: none; }
svg.plan.all .lab, svg.plan .lab.on, svg.plan .lab.hov { display: inline; }
.pvsvg .lab, .minisvg .lab { pointer-events: none; }
.handles { pointer-events: auto; }
.e-rot { filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.modal .warnline { color: var(--amber); font-size: 13.5px; }

/* wybór lampy i modyfikatora ze zdjęć */
.pickcard { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.pickcard:hover { border-color: var(--text-2); }
.pickcard img, .pickcard .noimg { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #fff; display: grid; place-items: center; color: var(--muted); }
.pickcard .pc-t { font-size: 13.5px; line-height: 1.3; }
.pickcard .pc-t .label { margin-bottom: 2px; }
.pickcard small { display: block; color: var(--muted); font-size: 12px; }
.pickcard .chg { font-size: 12px; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ptile { position: relative; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 8px; border-radius: 10px; border: 1.5px solid var(--line-soft); background: var(--bg); color: var(--text); }
.ptile:hover { border-color: var(--text-2); }
.ptile.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--text) inset; }
.ptile img, .ptile .noimg { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px; display: grid; place-items: center; color: #7b766c; font-size: 13px; }
.ptile b { font-size: 13px; font-weight: 600; line-height: 1.25; margin-top: 4px; }
.ptile small { color: var(--muted); font-size: 11.5px; }
.ptile em { font-style: normal; color: var(--amber); font-size: 12px; font-weight: 600; }
.ptile .pog { position: absolute; top: 12px; left: 12px; font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; }
.pi .ico img { object-fit: contain; background: #fff; }

/* pomocnicze kształty (kliny, strzałki, plamy słońca, linie odległości, podpisy) nie łapią kliknięć – klikalne są tylko przedmioty i uchwyty */
svg.plan .e-fov, svg.plan .e-beam, svg.plan .e-ray, svg.plan .e-dist, svg.plan .sunpatch, svg.plan .sunray, svg.plan .lab, svg.plan .pl-lbl, svg.plan .e-rot-line { pointer-events: none; }

/* zaznaczanie wielu, spacja = rączka */
#marquee { position: absolute; display: none; z-index: 3; border: 1.5px dashed #2f6fd6; background: rgba(47,111,214,.08); pointer-events: none; border-radius: 2px; }
.cv.space svg.plan, .cv.space svg.plan * { cursor: grab !important; }
.cv svg.plan { cursor: crosshair; }
.cv svg.plan .el, .cv svg.plan .fix { cursor: grab; }
/* stałe umeblowanie studia: lekko, przerywaną linią, w stylu rzutu */
.fix > rect:not(.fix-hit), .fix > circle, .fix > line { fill: #ebe6dc; stroke: #a8a195; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.fix.niska rect, .fix.niska circle, .fix.niska line { stroke-dasharray: 4 3; fill: #efebe3; }
.fix line { fill: none; }
.fix-hit { fill: transparent; stroke: none; }
.fix:hover .fix-hit { fill: rgba(107,102,92,.08); stroke: #a8a195; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.fix.sel .fix-hit { stroke: #2f6fd6; stroke-width: 1.5; stroke-dasharray: 5 3; fill: rgba(47,111,214,.08); vector-effect: non-scaling-stroke; }
.fix .sy { opacity: .78; } /* stałe meble studia trochę lżej niż elementy setu */
.pl-grz { fill: #f1eee8; stroke: #b9b2a5; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.pl-grz-l { stroke: #cfc8bb; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.insp .schemes button.on { border-color: var(--text); background: var(--surface); }
.st-own { color: var(--amber); }

/* symbole rzeczy z góry (design/symbole.js) – cienki obrys, jasne wypełnienie, kolor tylko tam, gdzie pomaga rozpoznać */
.sy * { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sy-ln { stroke: #6b665c; stroke-width: 1; fill: none; }
.sy-metal { stroke: #3d3a34; stroke-width: 1.4; fill: none; } .sy-metal-w { stroke: #3d3a34; stroke-width: 2.6; fill: none; }
.sy-alu { fill: #e9e7e2; stroke: #8a857b; stroke-width: 1; } .sy-alu-l { stroke: #8a857b; stroke-width: 1.6; fill: none; }
.sy-blackf { fill: #3d3a34; } .sy-blackf2 { fill: #4a4742; stroke: #2b2a27; stroke-width: 1; }
.sy-seat-dark { fill: #5a5650; stroke: #2b2a27; stroke-width: 1; } .sy-hole { fill: #f5f2ec; stroke: #2b2a27; stroke-width: 1; }
.sy-wood { fill: #dcc39b; stroke: #9c7a4a; stroke-width: 1; } .sy-wood-l { stroke: #b08a58; stroke-width: 1.8; fill: none; } .sy-wood-ln { stroke: #b08a58; stroke-width: 1.4; }
.sy-dwood { fill: #8a6a4a; stroke: #5e4630; stroke-width: 1; } .sy-dwood-w { stroke: #6e5238; stroke-width: 3; fill: none; } .sy-dwood-l { stroke: #6e5238; stroke-width: 1.6; fill: none; }
.sy-bord { fill: #a8686b; stroke: #6e3c3e; stroke-width: 1; } .sy-bord-d { fill: #8d5254; stroke: #6e3c3e; stroke-width: 1; }
.sy-brown { fill: #9b8470; stroke: #6b5848; stroke-width: 1; } .sy-brown-d { fill: #7e6a58; stroke: #5c4b3e; stroke-width: 1; }
.sy-boucle { fill: #c2b4a2; stroke: #8a7c6a; stroke-width: 1; } .sy-boucle-w { fill: none; stroke: #9d8f7d; stroke-width: 5; }
.sy-copper { stroke: #c08a5a; stroke-width: 2.2; } .sy-tur { fill: #4f8f97; stroke: #2f6068; stroke-width: 1; } .sy-tur-d { fill: #3e7880; stroke: #2f6068; stroke-width: 1; }
.sy-mint { fill: #a6dccd; stroke: #4fa38f; stroke-width: 1; } .sy-mint-ln { stroke: #4fa38f; stroke-width: 1.8; } .sy-mint-d { fill: #7cc4b1; stroke: #4fa38f; stroke-width: 1; }
.sy-white { fill: #fbfaf7; stroke: #9a9488; stroke-width: 1; } .sy-white-in { fill: none; stroke: #d6d0c4; stroke-width: 1; } .sy-white-ln { stroke: #e9e5dd; stroke-width: 1; }
.sy-glass { fill: #eef2f2; stroke: #9a9488; stroke-width: 1; } .sy-glass-ln { stroke: #8fb6db; stroke-width: 2; }
.sy-txt { fill: #8a857b; font-family: var(--sans); }
.sy-fab { fill: #d8d3c9; stroke: #8a857b; stroke-width: 1; } .sy-fab-d { fill: #c4beb2; stroke: #8a857b; stroke-width: 1; }
.sy-frame { fill: none; stroke: #2b2a27; stroke-width: 1.8; } .sy-frame-ln { stroke: #2b2a27; stroke-width: 1; } .sy-frame-out { fill: none; stroke: #2b2a27; stroke-width: 1.4; }
.sy-yel { fill: #e8c95c; stroke: #b2922e; stroke-width: 1; } .sy-yel-w { fill: none; stroke: #c9a83a; stroke-width: 5; } .sy-yel-in { fill: #f0d985; }
.sy-mirror-w { fill: #fbfaf7; stroke: #9a9488; stroke-width: 1; } .sy-mirror-b { fill: #3d3a34; stroke: #2b2a27; stroke-width: 1; }
.sy-ring { fill: none; stroke: #3d3a34; stroke-width: 1.2; } .sy-wheel { fill: #2b2a27; }
.sy-shelf { fill: #5a5650; stroke: #2b2a27; stroke-width: 1; }
.sy-grille { fill: #ece9e3; stroke: #3d3a34; stroke-width: 1.4; } .sy-blade { fill: #6b665c; } .sy-air { stroke: #9a9488; stroke-width: 1.2; stroke-dasharray: 3 3; }
.sy-pot-dark { fill: #3d3a34; } .sy-pot { fill: #c9b8a0; stroke: #8a7a62; stroke-width: 1; }
.sy-green { fill: #8fae86; stroke: #5d7f55; stroke-width: 1; } .sy-green-d { fill: #5d8a5a; stroke: #3f6a3d; stroke-width: 1; }
.sy-leaf-ln { stroke: #6a9563; stroke-width: 2.4; fill: none; } .sy-leaf-vein { stroke: #eef3ec; stroke-width: .8; }
.sy-out { fill: #f5f2ec; stroke: #9a9488; stroke-width: 1; } .sy-roll { stroke: #6b665c; stroke-width: .6; }
.sy-tlo { stroke: #7d776c; stroke-width: 1; } .sy-fold { fill: none; stroke: #9a9488; stroke-width: 1; }
.sy-refl { fill: #f4f4f2; stroke: #9a9488; stroke-width: 1; } .sy-silver { fill: #cfd3d6; } .sy-diff { fill: rgba(255,255,255,.8); stroke: #9a9488; stroke-width: 1; stroke-dasharray: 3 2; }
.sy-smoke { fill: rgba(160,160,160,.22); } .sy-red { fill: #b5574a; stroke: #7e3a30; stroke-width: 1; }
.sy-sofa-b { fill: #6a665f; stroke: #2b2a27; stroke-width: 1; } .sy-sofa-b-d { fill: #4f4c46; stroke: #2b2a27; stroke-width: 1; }
.sy-orange { fill: #e6a978; stroke: #a8683a; stroke-width: 1; } .sy-orange-d { fill: #d48f5c; stroke: #a8683a; stroke-width: 1; }
.sy-seam { stroke: rgba(0,0,0,.25); stroke-width: 1; }
.sy-board { fill: #c8c3b9; stroke: #8a857b; stroke-width: 1; } .sy-hanger { stroke: #6b665c; stroke-width: 1.2; }
.sy-curtain { fill: rgba(160,155,145,.15); stroke: #8a857b; stroke-width: 1.4; } .sy-box { fill: #d3bb93; stroke: #8a6e44; stroke-width: 1; }
.sy-cognac { fill: #c98a58; stroke: #8a5a32; stroke-width: 1; } .sy-cognac-d { fill: #b77a4a; stroke: #8a5a32; stroke-width: 1; } .sy-tuft { fill: #8a5a32; }
/* schemat, który w miejscu standardu się nie mieści (powód w podpisie) */
.insp .schemes button.off { opacity: .5; cursor: not-allowed; border-style: dashed; }
.insp .schemes button.off:hover { border-color: var(--line); }
.insp .schemes button.off small { color: var(--amber); }
/* uwagi o kadrze pod nagłówkiem ustawienia (co widać w kadrze – podpowiedź, nie błąd) */
.insp .kadr-uwagi { margin: 8px 0 0; padding: 7px 9px 7px 24px; border: 1px solid var(--line); border-radius: 8px; color: var(--amber); font-size: 12px; line-height: 1.35; }
.insp .kadr-uwagi li + li { margin-top: 3px; }
/* karta zdjęcia: panel po prawej (każdy zaznaczony element), siatka przy wielu zaznaczonych, karta po najechaniu w palecie */
.fcard { margin: 0; flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.fcard .fc-img { position: relative; background: #fff; aspect-ratio: 3 / 2; max-height: 210px; min-height: 0; overflow: hidden; display: grid; place-items: center; } /* zdjęcie dowolnych proporcji mieści się w ramce (contain) */
.fcard .fc-img > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fcard .pog { position: absolute; top: 8px; left: 8px; font-style: normal; font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; }
.fcard .fc-head { position: absolute; right: 8px; bottom: 8px; width: 46px; height: 46px; object-fit: contain; background: #fff; border: 1px solid #e3ddd2; border-radius: 8px; padding: 2px; }
.fcard .fc-brak { aspect-ratio: 3 / 2; max-height: 210px; display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 4px; padding: 12px; background: repeating-linear-gradient(135deg, #f1eee8 0 8px, #ebe7de 8px 16px); color: #6b665c; font-size: 12px; text-align: center; }
.fcard .fc-brak svg { width: 64%; height: 100%; max-height: 120px; }
.fcard figcaption { padding: 9px 11px 10px; display: grid; gap: 3px; }
.fcard figcaption b { font-size: 13px; line-height: 1.3; color: var(--text); font-weight: 600; }
.fcard figcaption small { color: var(--muted); font-size: 11.5px; }
.fcard .fc-opis { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.fcard .fc-spec { margin: 4px 0 0; display: grid; gap: 1px; font-size: 11.5px; }
.fcard .fc-spec div { display: grid; grid-template-columns: minmax(80px, 40%) 1fr; gap: 8px; }
.fcard .fc-spec dt { color: var(--muted); } .fcard .fc-spec dd { margin: 0; color: var(--text-2); }
.fcard .fc-src { font-size: 11.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; margin-top: 3px; }
.fcard .fc-src:hover { color: var(--text); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.fgrid button { display: grid; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); text-align: left; }
.fgrid button:hover { border-color: var(--text-2); }
.fgrid img, .fgrid .fc-brak { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 5px; }
.fgrid .fc-brak { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f1eee8 0 6px, #ebe7de 6px 12px); }
.fgrid .fc-brak svg { width: 80%; } .fgrid .fc-brak span { display: none; }
.fgrid span { font-size: 10.5px; line-height: 1.2; color: var(--text-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* zwijane grupy palety (stan zapamiętany) */
.pal-sec .pal-tog { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 2px 0; text-align: left; flex: 1; }
.pal-sec .pal-tog:hover { color: var(--text); }
.pal-sec .pal-tog em { font-style: normal; letter-spacing: 0; color: var(--muted); opacity: .8; font-variant-numeric: tabular-nums; }
.pal-sec .chev { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s; }
.pal-sec.zw .chev { transform: rotate(-90deg); }
.pal-sec .pal-tog:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; border-radius: 4px; }
/* karta po najechaniu w palecie (nie łapie kliknięć, stoi obok palety) */
.pal-tip { position: fixed; z-index: 60; width: 300px; pointer-events: none; animation: pal-tip-in .14s ease-out; filter: drop-shadow(0 10px 28px rgba(0,0,0,.45)); }
.pal-tip[hidden] { display: none; }
.pal-tip .fcard { background: var(--surface, #1f1d1a); border-color: rgba(255,255,255,.12); }
@keyframes pal-tip-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pal-tip { animation: none; } }
/* dymek rzutu – w granicach rzutu, przy kursorze */
.cv-tip { position: fixed; z-index: 55; max-width: 260px; pointer-events: none; padding: 5px 8px; border-radius: 6px; background: rgba(27,26,23,.92); color: #f5f2ec; font-size: 12px; line-height: 1.35; }
.cv-tip[hidden] { display: none; }

/* ───────── dopiski aplikacji (Developer, 25.10) ───────── */
/* tło: drugie, małe zdjęcie „jak wisi” w studiu (plikCalosc) w rogu karty zdjęcia */
.fcard .fc-calosc { position: absolute; right: 8px; bottom: 8px; width: 31%; max-width: 92px; display: grid; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.fcard .fc-calosc img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.fcard .fc-calosc small { font-size: 9.5px; line-height: 1; padding: 3px 4px; text-align: center; color: #3d3a34; background: #fff; }
.kpick .k-calosc, .kel-foto .k-calosc { position: absolute; left: 6px; bottom: 6px; width: 34%; max-width: 110px; display: grid; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.kpick .k-calosc { bottom: auto; top: 6px; width: 46%; border: 2px solid #fff; } /* w lewym górnym rogu – w prawym jest znacznik wyboru */
.kpick .k-calosc img, .kel-foto .k-calosc img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0; outline: 0; display: block; }
.kpick .k-calosc small, .kel-foto .k-calosc small { font-size: 9.5px; line-height: 1; padding: 3px 2px 2px; text-align: center; color: #3d3a34; white-space: nowrap; }
.kel-foto .k-calosc { border: 2px solid #fff; }
.kel-foto { position: relative; }
.kel-foto .k-calosc { left: 10px; bottom: 10px; width: 22%; max-width: 150px; }
.costs .row.warn { color: #b1300f; }
/* wydruk A4: prawa kolumna mieści się w marginesach (legenda i „Do zamówienia” się zawijają), tło kartki białe na całej stronie */
@media print {
  .k-main.preview { background: #fff; }
  .pv-grid > * { min-width: 0; }
  .pv-leg li small { white-space: normal; text-align: right; }
  .pv-order div b { white-space: nowrap; }
}
/* telefon: lista setów u góry zwęża się do szerokości ekranu (długie nazwy setów rozpychały stronę w bok) */
@media screen and (max-width: 860px) {
  .k-top select.select { flex: 1 1 0; min-width: 0; width: 0; text-overflow: ellipsis; }
  .k-top .sp { display: none; }
}
/* sprzęt: prawdziwe zdjęcie ze studia (zdjecieStudio) obok ilustracji – wąskie, pionowe */
.fcard .fc-calosc.studio, .kel-foto .k-studio { width: 20%; max-width: 70px; }
.fcard .fc-calosc.studio img, .kel-foto .k-studio img { aspect-ratio: 1 / 2; object-position: center 40%; }
/* telefon: tytuł setu jest zaraz niżej jako nagłówek – w pasku zostaje lista setów z pełną nazwą */
@media screen and (max-width: 860px) { .k-top .t h1 { display: none; } }
/* schemat poglądowy setu (public/schemat.mjs): karta setu 520 px (style karty w app.css), scenariusz i „Jak w scenariuszu” 900 px, telefon 360 px, wydruk A4 */
.sp-fig { margin: 0; }
.sp-fig svg.sp, .pv-main svg.sp { width: 100%; height: auto; display: block; border-radius: 8px; }
.sp-fig figcaption { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.sp-duzy { max-width: 900px; margin: 18px 0 6px; }
.sp-duzy svg.sp { border: 1px solid var(--paper-line); }
.sp-duzy figcaption { color: var(--ink-3); }
.sp-v-tel, .sp-v-druk { display: none; }
.sp-leg { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 24px; font-size: 13.5px; }
.sp-leg li { display: grid; grid-template-columns: 22px 1fr; gap: 0 8px; padding: 6px 0; border-bottom: 1px solid var(--paper-line); }
.sp-leg .n { grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sp-leg small { color: var(--ink-3); font-size: 12px; }
.pv-leg .sp-leg { grid-template-columns: 1fr; margin-top: 0; }
@media screen and (max-width: 860px) {
  .sp-v-duzy { display: none; } .sp-v-tel { display: block; }
  .sp-leg { grid-template-columns: 1fr; }
}
@media print {
  .sp-v-duzy, .sp-v-tel { display: none !important; } .sp-v-druk { display: block !important; }
  .sp-fig svg.sp, .pv-main svg.sp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sp-duzy { max-width: none; margin-top: 4mm; }
  .sp-leg { grid-template-columns: 1fr 1fr; font-size: 10pt; } .sp-leg li { break-inside: avoid; }
  .pv-leg .sp-leg { grid-template-columns: 1fr; }
  .pv-leg .sp-leg li { min-width: 0; } .pv-leg .sp-leg li small { text-align: left; white-space: normal; }
}