:root{
  --pri:#574a7d; --pri-d:#463a68; --pri-soft:#ece9f4;
  --ink:#3a3a44; --ink-soft:#7a7a88;
  --bg:#f2f3f6; --panel:#fff; --line:#e4e5ea; --line-strong:#d0d1d9;
  --seledyn:#7ec9a8; --seledyn-d:#4f9e7f;
  --shadow:0 1px 2px rgba(45,40,64,.06),0 6px 20px rgba(45,40,64,.07);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px 22px;
  padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand img{height:38px;display:block}
.brand-text{font-size:22px;font-weight:700;color:var(--pri);letter-spacing:.5px}
.btn-login{text-decoration:none;font-weight:600;font-size:13px;color:var(--pri);
  border:1px solid var(--line-strong);border-radius:8px;padding:7px 14px;background:var(--panel)}
.btn-login:hover{border-color:var(--pri);background:var(--pri-soft)}
/* pasek zalogowanego użytkownika (wspólny dla / i /admin) */
.topbar nav{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
.topbar nav .who{color:var(--ink-soft);font-size:13px}
.topbar nav .who b{color:var(--ink);font-weight:600}
.topbar nav a{text-decoration:none;font-weight:600;font-size:13px;color:var(--pri)}
.topbar nav a:hover{text-decoration:underline}
.topbar nav a.on{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.topbar nav a.wyl{border:1px solid var(--line-strong);border-radius:8px;padding:6px 12px;color:var(--ink-soft)}
.topbar nav a.wyl:hover{border-color:var(--pri);color:var(--pri);text-decoration:none}

.wrap{max-width:1200px;margin:0 auto;padding:26px 18px 90px}
h1{font-size:24px;margin:.2em 0 .1em}
.lead{color:var(--ink-soft);margin:0 0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
.card h2{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin:0 0 12px}

.board{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
.board.solo,.board.board-1col{grid-template-columns:1fr}
.board .col-right{position:sticky;top:20px}

/* podgląd oklejenia na całą szerokość, nad pozycjami (układ tymczasowy) */
/* wysokość podglądu stała dla każdego automatu — wg najszerszego (KS8 ~2,21:1);
   węższe automaty dostają tę samą wysokość i są wyśrodkowane w poziomie */
/* jednakowa wysokość podglądu dla KAŻDEGO modelu (px); szerokość wg proporcji pliku */
.diagram-full .diagram{max-width:100%;margin:0 auto;overflow-x:auto}
.diagram-full .diagram svg{display:block;height:340px;width:auto;max-width:none;max-height:none;margin:0 auto}

.diagram-legenda{display:flex;flex-wrap:wrap;gap:14px 26px;margin:14px auto 0;max-width:1000px;
  padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
.diagram-legenda .leg{display:flex;align-items:center;gap:8px}
.leg-sw{width:22px;height:22px;border-radius:6px;border:1px solid var(--line-strong);flex:none}
.leg-sw-off{background:#f8f8f8}
.leg-sw-on{background:linear-gradient(135deg,#1c1330 0%,#3a1f6b 55%,#472281 100%);border-color:#472281}
@media(max-width:900px){
  .board{grid-template-columns:1fr}
  .board .col-right{position:static}
}

.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{font:inherit;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-soft)}
.seg button.on{background:var(--pri);border-color:var(--pri);color:#fff}
.seg button:hover:not(.on){border-color:var(--pri);color:var(--pri)}

.ilosc-aut{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:14px;font-size:13px;color:var(--ink-soft)}
.ilosc-aut input{width:66px;font:inherit;padding:7px 8px;text-align:center;
  border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink)}
.ilosc-aut .hint{font-size:12px;color:var(--ink-soft)}

.pozycje{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 32px;align-items:start}
@media(max-width:860px){.pozycje{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pozycje{grid-template-columns:1fr}}
.poz-grupa{display:flex;flex-direction:column;min-width:0}
.sekcja-tytul{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--pri);padding:0 4px 4px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sekcja-all{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.sekcja-all:hover{color:var(--seledyn-d)}
.sekcja-all-cb{width:16px;height:16px;accent-color:var(--seledyn);cursor:pointer;flex:none;margin:0}
.poz{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:13.5px}
.poz-grupa .poz:last-child{border-bottom:0}
.poz-nazwa{flex:1;min-width:0;cursor:pointer;font-weight:500}
.poz-ilosc{flex:none;color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.poz-cb{flex:none;width:18px;height:18px;accent-color:var(--pri);cursor:pointer}
.poz.off .poz-nazwa,.poz.off .poz-ilosc{color:var(--ink-soft)}

.m2-info{margin:22px 2px 0;font-size:12.5px;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums}
.suma-bar{position:sticky;bottom:14px;margin-top:10px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;background:var(--pri);color:#fff;
  border-radius:14px;padding:16px 22px;box-shadow:0 8px 30px rgba(45,40,64,.28)}
.suma-bar>span:first-child{font-size:13px;letter-spacing:.04em;opacity:.9;text-transform:uppercase}
.suma{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums}
.suma.pulse{animation:pulse .35s ease}
@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.disclaimer{color:var(--ink-soft);font-size:12px;margin:10px 2px 0}

.malowanie{display:flex;flex-direction:column;gap:14px}
.malowanie .ml-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px}
.malowanie .ml-cell{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft)}
.malowanie .ml-cell[hidden]{display:none}
.malowanie select,.malowanie input[type=text]{font:inherit;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--ink);min-width:0;width:190px}
.malowanie .ral-row{display:flex;align-items:center;gap:8px}
.ral-open{flex:none;width:30px;height:32px;padding:0;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--panel);color:var(--ink-soft);cursor:pointer;font-size:12px;line-height:1;margin-left:-4px}
.ral-open:hover{border-color:var(--pri);color:var(--pri)}
.ral-wrap{position:relative}
.ral-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:60;width:340px;max-width:86vw;max-height:300px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 12px 34px rgba(45,40,64,.2);padding:4px}
.ral-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:6px 8px;border-radius:7px;font:inherit;font-size:13px;color:var(--ink)}
.ral-opt:hover{background:var(--pri-soft)}
.ral-opt-sw{flex:none;width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.22)}
.ral-opt-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ral-empty{padding:10px 8px;color:var(--ink-soft);font-size:13px}
.ral-swatch{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.25);flex:none}
.malowanie .pw-grp{display:flex;gap:16px}
.malowanie .pw-grp label{display:flex;align-items:center;gap:7px;font-weight:500;color:var(--ink);cursor:pointer}
.malowanie .pw-grp input{width:18px;height:18px;accent-color:var(--pri)}
.malowanie .hint{color:var(--ink-soft);font-weight:400}
.malowanie .folia-opis{font-weight:500;color:var(--ink);white-space:nowrap}
.gw-uwaga{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;font-style:italic;line-height:1.5;color:var(--ink-soft);max-width:640px}

/* --- podgląd 1:1 z pliku wektorowego (diagrams.js) --- */
.diagram svg{width:100%;height:auto;display:block;max-height:70vh}
.diagram .piece{cursor:pointer}
.diagram .fill{stroke:var(--ink);stroke-width:17;transition:fill .2s ease,filter .15s ease}
.diagram .piece.bare .fill{fill:var(--line-strong)}
/* wrapped: bez reguły tutaj — element bierze własny fill="url(#grad-…)" z SVG (ten sam kąt 140° na każdym kształcie) */
.diagram .piece:hover .fill{filter:brightness(1.08)}
.diagram .piece:focus{outline:none}
.diagram .piece:focus-visible .fill{stroke:var(--pri);stroke-width:34}
.diagram .cut{fill:none;stroke:var(--ink);stroke-width:9;stroke-dasharray:40 32;opacity:.35;pointer-events:none}
.diagram .piece.bare .cut{opacity:.2}
.diagram .lab{font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  fill:#fff;opacity:.95;pointer-events:none}
.diagram .lab.num{font-weight:500;letter-spacing:0}
.diagram .piece.bare .lab{fill:var(--ink-soft);opacity:.9}
.diagram .static-detail{fill:none;stroke:var(--line-strong);stroke-width:14}
.diagram .handle .fill{fill:var(--panel);stroke:var(--line-strong);stroke-width:14;stroke-dasharray:220 190}
.diagram .handle-lab{fill:var(--ink-soft);opacity:.7;letter-spacing:.04em;text-transform:uppercase}

/* --- KSM: podgląd wykończenia (kolor z listy RAL + moduły / szyby / LED) --- */
.diagram .kolor-fill{fill:#fdf4e3;stroke:var(--ink);stroke-width:.8;transition:fill .3s ease}   /* domyślnie RAL 9001 (kremowy) */
.diagram .szyby path,.diagram .szyby polygon{fill:url(#szyby-grad);stroke:var(--ink);stroke-width:.4;stroke-opacity:.35}
.diagram .uchwyty>*{fill:none;stroke:var(--ink);stroke-width:.9;opacity:.5;stroke-dasharray:4 2.5}
.diagram .mod-static>*{fill:#f8f8f8;stroke:none;pointer-events:none}  /* do oklejenia, bez pozycji na liście */
.diagram .mod{cursor:pointer}
.diagram .mod .fill{fill:#f8f8f8;stroke:none;transition:fill .2s ease}  /* niewybrany — bez obwódki */
.diagram .mod.bare .fill{fill:#f8f8f8;stroke:none}
.diagram .mod.wrapped .fill{fill:url(#grad-ksm);stroke:#472281;stroke-width:1.2;stroke-opacity:1}
.diagram .mod:hover .fill{stroke:var(--pri);stroke-width:1;stroke-opacity:.6}
.diagram .mod:focus{outline:none}
.diagram .mod:focus-visible .fill{stroke:var(--pri);stroke-width:2.4;stroke-opacity:1}
.diagram .mod-lab{font-family:"Segoe UI",system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;text-anchor:middle;dominant-baseline:central;fill:var(--ink);opacity:.6;pointer-events:none}
.diagram .mod.wrapped .mod-lab{fill:#fff;opacity:.92}
.diagram .ster-detail *{fill:none;stroke:var(--ink);stroke-width:.9;stroke-opacity:.5;pointer-events:none}
.diagram .mod.wrapped .ster-detail *{fill:none;stroke:#fff;stroke-width:1.1;stroke-opacity:1}
.diagram .blaszka{cursor:pointer}
.diagram .piece.blaszka .fill{fill:#f8f8f8;stroke:none;transition:fill .2s ease}
.diagram .piece.blaszka.wrapped .fill{fill:url(#grad-ksm);stroke:#fff;stroke-width:1.6;stroke-opacity:1}
.diagram .blaszka:focus{outline:none}
.diagram .instrukcja{cursor:pointer}
/* instrukcja niewybrana: wyraźnie ciemniejszy szary (nie zlewa się z tłem/innymi
   modułami) — łatwo ją znaleźć i zaznaczyć; wybrana = firmowy gradient jak reszta */
.diagram .piece.instrukcja .fill{fill:#7a7684;stroke:none;transition:fill .2s ease}
.diagram .piece.instrukcja.wrapped .fill{fill:url(#grad-ksm);stroke:#fff;stroke-width:1.6;stroke-opacity:1}
/* treść instrukcji zawsze w 100% biała i widoczna (jest zawsze na panelu) */
.diagram .instr-detail *{fill:#fff !important;fill-opacity:1 !important;stroke:none;opacity:1}
.diagram .instr-detail text{font-size:5px;font-weight:700;text-anchor:middle}
/* rysunek techniczny — przód+boki z warstwy "linie" pliku, tył uproszczony */
.diagram .tech-lines *{fill:none;stroke:var(--ink);stroke-width:.9;stroke-opacity:.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.diagram .led{pointer-events:none}
/* wyjątek: napis/logo LED na panelu górnym jest osobno klikalny — wybiera
   "Panel górny (folia translucentna)" niezależnie od samego prostokąta panelu */
.diagram .piece.led{pointer-events:auto;cursor:pointer}
.diagram .led .led-mark path,.diagram .led .led-mark polygon{fill:#fff;stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
/* numerki — klikalne jak moduł: włączone białe, wyłączone jak niewybrane, bez obwódki */
.diagram .numery{cursor:pointer}
.diagram .numery .fill{fill:#fff;stroke:none;transition:fill .2s ease}
.diagram .numery.bare .fill{fill:#fff;stroke:none;opacity:.2}   /* niewybrane numerki — 80% transparentności */
.diagram .numery.wrapped .fill{fill:#fff;stroke:none}
.diagram .numery:focus{outline:none}

/* KS8 — ten sam schemat co KSM, ale viewBox ~10,5x większy: grubsze kreski */
.diagram svg.diag-KS8 .kolor-fill{stroke:none}  /* sylwetka składana z modułów — bez obrysu (obrys daje warstwa linii) */
.diagram svg.diag-KS8 .szyby path,.diagram svg.diag-KS8 .szyby polygon{stroke-width:4}
.diagram svg.diag-KS8 .mod.wrapped .fill{stroke-width:13}
.diagram svg.diag-KS8 .mod:hover .fill{stroke-width:10}
.diagram svg.diag-KS8 .mod:focus-visible .fill{stroke-width:26}
.diagram svg.diag-KS8 .piece.blaszka.wrapped .fill,
.diagram svg.diag-KS8 .piece.instrukcja .fill{stroke-width:17}
.diagram svg.diag-KS8 .tech-lines *{stroke-width:9}
.diagram svg.diag-KS8 .led .led-mark path,.diagram svg.diag-KS8 .led .led-mark polygon{stroke-width:17}
/* naklejka instrukcji (moduł w panelu): ciemniejszy szary gdy niewybrana, biała obwódka gdy wybrana */
.diagram .mod[data-id="instrukcja"].bare .fill{fill:#7a7684;stroke:none}
.diagram .mod[data-id="instrukcja"].wrapped .fill{stroke:#fff}
.diagram svg.diag-KS8 .mod[data-id="instrukcja"].wrapped .fill{stroke-width:17}
/* treść instrukcji — pokazywana przez syncDiagram (Instrukcja lub Panel sterujący) */
/* treść instrukcji jest fizycznie na panelu niezależnie od tego, czy klient
   oklei "Instrukcję" czy "Panel sterujący" — pokazujemy ją zawsze */
.diagram .instr-graf{pointer-events:none}
.diagram .instr-graf *{fill:#fff;stroke:none}

/* Sipply — pionowy rozwinięty korpus (viewBox ~4390, ~3x mniejszy niż KS8) */
.diagram svg.diag-Sipply .kolor-fill{stroke:none}
.diagram svg.diag-Sipply .mod.wrapped .fill{stroke-width:5}
.diagram svg.diag-Sipply .mod:hover .fill{stroke-width:4}
.diagram svg.diag-Sipply .mod:focus-visible .fill{stroke-width:10}
.diagram svg.diag-Sipply .tech-lines *{stroke:#fff;stroke-opacity:.7;stroke-width:9}   /* linie na fioletowych modułach białe (tablet, płatność) */
.diagram .uchwyty .uchwyt-fill{fill:#23262e;stroke:none}   /* uchwyty drzwi — nie oklejane */

@media(max-width:540px){
  .suma{font-size:24px}
}