/* V-SLOT CAM — wygląd.
   Ciemny warsztat: interfejs ma nie odciągać uwagi od rysunku, a liczby mają
   być czytelne z odległości ramienia. Układ celowo prosty i liniowy:
   1. Rysunek → 2. Operacje → 3. G-code — bo tak wygląda prawdziwa robota. */
:root {
  --tlo: #0b0e11; --panel: #14181d; --panel-2: #1b2128; --panel-3: #232b33;
  --linia: rgba(255,255,255,.08); --linia-2: rgba(255,255,255,.16);
  --tekst: #eef3f6; --tekst-2: #9fb0ba; --tekst-3: #6b7b86;
  --marka: #53b848; --marka-2: #6cd35f; --marka-ciemna: #0b2107;
  --alarm: #e0362a; --uwaga: #e0a72a; --info: #35a8d6;
  /* powierzchnie zależne od motywu */
  --gora-tlo: #080a0c; --nakladka: rgba(8,10,12,.9); --przyciemnienie: rgba(4,6,8,.7);
  --cien-okna: 0 30px 70px rgba(0,0,0,.7); --cien-chmurki: 0 20px 50px rgba(0,0,0,.6);
  --marka-slad: rgba(83,184,72,.12); --marka-obwodka: rgba(83,184,72,.35);
  /* płótno 2D */
  --plotno-tlo: #0b0e11; --siatka: rgba(255,255,255,.05); --siatka-mocna: rgba(255,255,255,.12); --stol: rgba(83,184,72,.35);
  --wymiar: rgba(159,176,186,.55); --os-x: rgba(224,54,42,.55); --os-y: rgba(83,184,72,.55);
  --ksztalt: #e9eef2; --ksztalt-otwarty: #e0a72a; --ksztalt-zazn: #53b848;
  --punkt: #53b848; --punkt-duzy: #ffd77a; --punkt-obrys: #0b0e11;
  --sciezka-narzedzia: rgba(53,168,214,.85); --sciezka-narzedzia-mocna: #35a8d6;
  /* przebieg G-code i symulacja */
  --os-z: rgba(53,168,214,.7); --roza-tlo: rgba(20,24,29,.85);
  --przejazd: rgba(159,176,186,.45); --przebieg-plytko: #7fd4ff; --przebieg-gleboko: #1c5f8a;
  --narzedzie: #ffd77a; --narzedzie-wypelnienie: rgba(255,215,122,.25);
  --material: #c9a97a; --material-gleboko: #6d5232;
  /* podgląd 3D */
  --br3d-tlo: #0d1114; --br3d-gora: #c9d6de; --br3d-bok: #8a9aa4; --br3d-dno: #a7b8c2;
  --br3d-sciana: #93a5b0; --br3d-przelot: #5c6b75; --br3d-krawedz: rgba(11,14,17,.35);
  --br3d-opis: #6b7b86;
  --r: 10px; --r2: 7px;
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

/* --- motyw jasny ---------------------------------------------------------
   Ta sama struktura, inne wartości. Zielony akcent zostaje marką, ale na
   jasnym tle bierzemy ciemniejszy odcień, żeby napisy na nim dało się czytać. */
:root[data-motyw="jasny"] {
  --tlo: #f4f6f8; --panel: #ffffff; --panel-2: #f7f9fb; --panel-3: #eef2f5;
  --linia: rgba(16,24,32,.10); --linia-2: rgba(16,24,32,.20);
  --tekst: #16202a; --tekst-2: #55646f; --tekst-3: #85939d;
  --marka: #3d9a34; --marka-2: #2f8127; --marka-ciemna: #ffffff;
  --alarm: #c62a1f; --uwaga: #a97400; --info: #1c7fa8;
  --gora-tlo: #ffffff; --nakladka: rgba(255,255,255,.94); --przyciemnienie: rgba(22,32,42,.35);
  --cien-okna: 0 24px 60px rgba(16,24,32,.22); --cien-chmurki: 0 16px 40px rgba(16,24,32,.18);
  --marka-slad: rgba(61,154,52,.13); --marka-obwodka: rgba(61,154,52,.4);
  --plotno-tlo: #fbfcfd; --siatka: rgba(16,24,32,.07); --siatka-mocna: rgba(16,24,32,.16); --stol: rgba(61,154,52,.45);
  --wymiar: rgba(85,100,111,.75); --os-x: rgba(198,42,31,.6); --os-y: rgba(61,154,52,.6);
  --ksztalt: #23303b; --ksztalt-otwarty: #b57a00; --ksztalt-zazn: #3d9a34;
  --punkt: #3d9a34; --punkt-duzy: #c78500; --punkt-obrys: #ffffff;
  --sciezka-narzedzia: rgba(28,127,168,.85); --sciezka-narzedzia-mocna: #1c7fa8;
  --os-z: rgba(28,127,168,.75); --roza-tlo: rgba(255,255,255,.9);
  --przejazd: rgba(85,100,111,.5); --przebieg-plytko: #2d9fd6; --przebieg-gleboko: #0f3f5c;
  --narzedzie: #b56b00; --narzedzie-wypelnienie: rgba(199,133,0,.25);
  --material: #d9c39f; --material-gleboko: #8a6a45;
  --br3d-tlo: #eef2f5; --br3d-gora: #dfe7ec; --br3d-bok: #a9b8c1; --br3d-dno: #c3d0d8;
  --br3d-sciana: #b3c1ca; --br3d-krawedz: rgba(22,32,42,.28); --br3d-przelot: #7c8b95;
  --br3d-opis: #55646f;
}

* { box-sizing: border-box; }
/* Ukrywanie atrybutem musi wygrywać z naszymi regułami display — inaczej pole
   oznaczone jako hidden dalej się pokazuje (etykiety w oknach są flexami). */
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 14px/1.5 var(--font);
       -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }

/* --- górny pasek --- */
.gora { height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 16px;
        background: var(--gora-tlo); border-bottom: 1px solid var(--linia); }
.marka { font-size: 15px; letter-spacing: .04em; }
.marka b { color: var(--marka); font-weight: 800; }
.marka span { color: var(--tekst-3); font-size: 12px; margin-left: 8px; }
.gora-akcje { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rozdziel { width: 1px; height: 22px; background: var(--linia); }
.wersja { color: var(--tekst-3); font-family: var(--mono); font-size: 11px; }

/* --- przyciski --- */
.btn { background: var(--panel-3); border: 1px solid var(--linia-2); color: var(--tekst);
       border-radius: var(--r2); padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer;
       transition: background-color .14s, border-color .14s; }
.btn:hover:not(:disabled) { background: #2b333c; }
.btn:disabled { opacity: .4; cursor: default; }
.btn.glowny { background: var(--marka); border-color: var(--marka); color: var(--marka-ciemna); width: 100%; padding: 10px; }
.btn.glowny:hover { background: var(--marka-2); }
.btn.cichy { background: transparent; }
.btn.maly { padding: 5px 9px; font-size: 11.5px; }

/* --- układ --- */
.uklad { display: grid; grid-template-columns: 92px 1fr 320px; height: calc(100vh - 52px); height: calc(100dvh - 52px); }

/* --- lewa kolumna --- */
.narzedzia { background: var(--panel); border-right: 1px solid var(--linia); padding: 10px 8px;
             display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.grupa-tytul { color: var(--tekst-3); font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
               text-transform: uppercase; padding: 10px 4px 4px; }
.nrz { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px;
       background: transparent; border: 1px solid transparent; border-radius: var(--r2); cursor: pointer;
       color: var(--tekst-2); }
.nrz span { font-size: 19px; line-height: 1; }
.nrz em { font-style: normal; font-size: 10.5px; }
.nrz:hover { background: var(--panel-2); color: var(--tekst); }
.nrz.aktywne { background: var(--marka); border-color: var(--marka); color: var(--marka-ciemna); font-weight: 700; }

/* --- płótno --- */
.plotno-otoczka { position: relative; background: var(--plotno-tlo); }
/* Oba płótna leżą jedno na drugim w tym samym miejscu — bez pozycjonowania
   bezwzględnego drugie dokładałoby swoją wysokość i wypadało poza ekran. */
#plotno, #plotno3d { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#plotno { cursor: crosshair; }
.hud { position: absolute; left: 50%; transform: translateX(-50%); bottom: 52px; display: none;
       gap: 14px; align-items: center; background: var(--nakladka); border: 1px solid var(--linia-2);
       border-radius: 999px; padding: 8px 18px; font-size: 12.5px; pointer-events: none; white-space: nowrap; }
.hud.on { display: flex; }
.hud b { color: var(--marka-2); }
.hud .wym { font-family: var(--mono); color: #ffd77a; min-width: 90px; }
.hud .snap { color: var(--info); font-weight: 600; }
.pasek-dolny { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex;
               align-items: center; gap: 12px; padding: 0 14px; background: var(--nakladka);
               border-top: 1px solid var(--linia); font-size: 11.5px; color: var(--tekst-2); }
.pasek-dolny select { background: var(--panel-2); border: 1px solid var(--linia-2); border-radius: 5px;
                      padding: 2px 6px; font-size: 11.5px; }
.pasek-dolny label { display: flex; align-items: center; gap: 5px; }
#pozycja, #skala { font-family: var(--mono); }

/* --- prawa kolumna --- */
.panel { background: var(--panel); border-left: 1px solid var(--linia); overflow-y: auto; padding: 12px 12px 28px; }
.karta { background: var(--panel-2); border: 1px solid var(--linia); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; }
.karta h2 { margin: 0; padding: 12px 14px; font-size: 11px; font-weight: 800; letter-spacing: .12em;
            text-transform: uppercase; color: var(--tekst-2); border-bottom: 1px solid var(--linia);
            display: flex; align-items: center; gap: 9px; }
.karta h2 i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--marka);
              color: var(--marka-ciemna); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.karta .tresc { padding: 12px 14px; }
/* zwijanie sekcji: klik w nagłówek, strzałka po prawej, stan w localStorage */
.karta[data-sekcja] h2 { cursor: pointer; user-select: none; }
.karta[data-sekcja] h2::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--tekst-3);
                                 border-bottom: 2px solid var(--tekst-3); transform: rotate(45deg); transition: transform .15s; }
.karta.zwinieta h2 { border-bottom-color: transparent; }
.karta.zwinieta h2::after { transform: rotate(-45deg); }
.karta.zwinieta .tresc { display: none; }
.karta h2 .licznik { margin-left: 6px; font-weight: 600; letter-spacing: 0; color: var(--tekst-3); text-transform: none; }
.rzad { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
/* Grupy w karcie (Operacje CNC / Operacje Laser, Kreatory CNC) — nagłówek
   nad rzędem przycisków; kolejność grup ustawia app.js wg rodzaju maszyny. */
.grupy { display: flex; flex-direction: column; }
.grupa h3 { margin: 0 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tekst-3); }
.grupa + .grupa h3 { margin-top: 2px; }

/* Podgląd G-code: plik ma być czytelny jak w edytorze — numery linii, stała
   szerokość znaku, przejazdy i komentarze wyszarzone. */
.podglad-pasek { align-items: center; gap: 10px; margin-bottom: 10px; }
.podglad-pasek input { flex: 1 1 220px; min-width: 0; }
.podglad-pasek .podpowiedz { white-space: nowrap; font-family: var(--mono); font-size: 11px; }
.gcode-podglad { height: min(56vh, 480px); overflow: auto; background: var(--tlo);
  border: 1px solid var(--linia); border-radius: 8px; font-family: var(--mono); font-size: 12px;
  line-height: 1.5; padding: 8px 0; }
.gcode-podglad:focus-visible { outline: 2px solid var(--marka-obwodka); outline-offset: 1px; }
.gcode-podglad .linia { display: flex; gap: 12px; padding: 0 12px; white-space: pre; }
.gcode-podglad .linia:hover { background: rgba(255,255,255,.035); }
.gcode-podglad .nr { flex: none; min-width: 4.5em; text-align: right; color: var(--tekst-3);
  font-variant-numeric: tabular-nums; user-select: none; }
.gcode-podglad .tekst { color: var(--tekst); }
.gcode-podglad .kom .tekst { color: var(--tekst-3); font-style: italic; }
.gcode-podglad .szybki .tekst { color: var(--info); }
.gcode-podglad .polecenie .tekst { color: var(--marka-2); }
.gcode-podglad .pusto { padding: 18px 12px; }

/* Okno „Kieszeń 2D": zakładki, lista konturów i podgląd planu */
.zakladki { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; border-bottom: 1px solid var(--linia); padding-bottom: 8px; }
.zakladki .btn.aktywny { background: var(--marka); color: var(--marka-ciemna); }
.kieszen-okno .zakladka-tresc { min-height: 220px; }
.kieszen-lista { max-height: 180px; overflow: auto; border: 1px solid var(--linia); border-radius: var(--r2); }
.kieszen-lista .poz.blad .met { color: var(--alarm); }
.kieszen-podglad { margin-top: 10px; background: var(--tlo); border: 1px solid var(--linia); border-radius: 8px; padding: 6px; }
.kieszen-podglad svg { display: block; width: 100%; height: 190px; }
.ki-kontury polygon { fill: var(--marka-slad); stroke: var(--linia-2); stroke-width: .8; }
.ki-tory polyline { fill: none; stroke-width: .9; }
.ki-tory .ki-roughing { stroke: var(--sciezka-narzedzia); }
.ki-tory .ki-wall-finish { stroke: var(--marka-2); stroke-width: 1.2; }
.ki-tory .ki-floor-finish { stroke: var(--info); stroke-width: 1.2; }
.ki-tory .ki-dno { opacity: 1; }
.ki-laczniki line { stroke-width: .8; }
.ki-laczniki .ki-przejazd { stroke: var(--tekst-3); stroke-dasharray: 3 2; }
.ki-laczniki .ki-skrawanie { stroke: var(--uwaga); stroke-dasharray: 4 2; }
.ki-laczniki .ki-lift { stroke: var(--alarm); stroke-dasharray: 1 3; }
.ki-wejscie { fill: none; stroke: var(--punkt-duzy); stroke-width: 1.2; }

/* Okno „Kontur 2D": presety trybu prostego, lista konturów, podgląd planu.
   Kolory podglądu są takie same jak na płótnie — użytkownik ma widzieć w oknie
   dokładnie to, co potem zobaczy na rysunku. */
.kontur-okno .zakladka-tresc { min-height: 220px; }
.presety-op { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.presety-op .preset { display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--linia); border-radius: var(--r2); background: var(--tlo-2); color: var(--tekst); }
.presety-op .preset b { font-size: 13px; }
.presety-op .preset span { font-size: 11px; color: var(--tekst-2); line-height: 1.35; }
.presety-op .preset:hover { border-color: var(--marka-2); }
.presety-op .preset.aktywny { border-color: var(--marka); background: var(--marka-slad); }
.presety-op .preset:focus-visible, .zakladki .btn:focus-visible { outline: 2px solid var(--marka-2); outline-offset: 2px; }
/* Element siatki ma domyślnie min-width:auto, więc <select> z długim opisem
   („Rampa po konturze — frez zjeżdża…") rozpychał okno i dawał poziomy scroll
   na telefonie. Kolumna ma się kurczyć, a kontrolka mieścić w niej. */
.kontur-okno .pola > label { min-width: 0; }
.kontur-okno .pola select, .kontur-okno .pola input { max-width: 100%; box-sizing: border-box; }
.kontur-lista { max-height: 170px; overflow: auto; border: 1px solid var(--linia); border-radius: var(--r2); }
.kontur-lista .poz { display: grid; grid-template-columns: 18px 1fr auto 24px; align-items: center; gap: 6px;
  padding: 5px 8px; cursor: pointer; border-bottom: 1px solid var(--linia); }
.kontur-lista .poz:last-child { border-bottom: none; }
.kontur-lista .poz .met { font-size: 11px; color: var(--tekst-2); }
.kontur-lista .poz.blad .met { color: var(--uwaga); }
.kontur-lista .poz.wskazany { background: var(--marka-slad); }
.kontur-lista .poz .usun { background: none; border: none; color: var(--tekst-3); cursor: pointer; font-size: 15px; line-height: 1; }
.kontur-lista .poz .usun:hover { color: var(--alarm); }
.kontur-wybor { border: 1px solid var(--linia); border-radius: var(--r2); padding: 8px; margin-top: 6px; }
.kontur-wybor .kontur-lista { margin: 6px 0; max-height: 200px; }
.kontur-lista .poz.wybor { grid-template-columns: 18px 18px 1fr auto; cursor: pointer; }
.kontur-wybor .rzad { display: flex; gap: 6px; flex-wrap: wrap; }
.kontur-podglad { margin-top: 10px; background: var(--tlo); border: 1px solid var(--linia); border-radius: 8px; padding: 6px; }
.kontur-podglad svg { display: block; width: 100%; height: 200px; }
.ko-zrodlo polygon, .ko-zrodlo polyline { fill: var(--marka-slad); stroke: var(--linia-2); stroke-width: .8; }
.ko-zrodlo polyline { fill: none; }
.ko-zrodlo .wskazany { stroke: var(--marka-2); stroke-width: 1.6; }
/* kandydat z panelu wyboru — jeszcze nie należy do operacji */
.ko-zrodlo .kandydat { fill: none; stroke-dasharray: 4 3; }
/* wiersz panelu wyboru: checkbox | etykieta z nazwą | przycisk „Pokaż" —
   trzy rodzeństwa, bez zagnieżdżania kontrolek w etykiecie */
.kontur-lista .poz.wybor { grid-template-columns: 18px 1fr auto; align-items: center; }
.kontur-lista .poz.wybor > label { display: grid; grid-template-columns: 18px 1fr auto; align-items: center;
  gap: 6px; cursor: pointer; min-width: 0; }
.kontur-lista .poz.wybor > label .opis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontur-lista .poz .pokaz { background: none; border: none; color: var(--tekst-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.kontur-lista .poz .pokaz:hover, .kontur-lista .poz .pokaz[aria-pressed="true"] { color: var(--marka-2); }
.kontur-lista .poz .pokaz:focus-visible { outline: 2px solid var(--marka-2); outline-offset: 2px; }
.ko-tory polyline { fill: none; stroke-width: 1; }
.ko-tory .ko-roughing { stroke: var(--sciezka-narzedzia); }
.ko-tory .ko-wall-finish { stroke: var(--marka-2); stroke-width: 1.3; }
.ko-dodatki polyline { fill: none; stroke-width: 1.2; }
.ko-dodatki .ko-lead-in { stroke: var(--info); }
.ko-dodatki .ko-lead-out { stroke: var(--marka); }
.ko-dodatki .ko-strzalka { stroke: var(--sciezka-narzedzia-mocna); stroke-width: 1.1; }
.ko-dodatki .ko-helisa { fill: none; stroke: var(--punkt-duzy); stroke-width: 1.2; }
.ko-dodatki .ko-rampa { stroke: var(--punkt-duzy); stroke-width: 2.2; stroke-linecap: round; }
.ko-dodatki .ko-wejscie { fill: var(--punkt-duzy); stroke: var(--punkt-obrys); stroke-width: .6; }
.ko-dodatki .ko-numer { fill: var(--tekst-2); font-size: 8px; }
.ko-przejazdy .ko-przejazd { stroke: var(--tekst-3); stroke-dasharray: 3 2; stroke-width: .8; }
.ko-mostki .ko-mostek { stroke: var(--uwaga); stroke-width: 3; stroke-linecap: round; }
#koLegenda .leg { display: inline-block; margin-right: 10px; padding-left: 14px; position: relative; font-size: 11px; }
#koLegenda .leg::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; margin-top: -1px; }
#koLegenda .leg-zrodlo::before { background: var(--linia-2); }
#koLegenda .leg-roughing::before { background: var(--sciezka-narzedzia-mocna); }
#koLegenda .leg-wall-finish::before { background: var(--marka-2); }
#koLegenda .leg-lead-in::before { background: var(--info); }
#koLegenda .leg-lead-out::before { background: var(--marka); }
#koLegenda .leg-wejscie::before { background: var(--punkt-duzy); }
#koLegenda .leg-mostek::before { background: var(--uwaga); height: 4px; margin-top: -2px; }
#koLegenda .leg-przejazd::before { background: var(--tekst-3); }
.blad-formularza.uwaga { color: var(--tekst); border-color: var(--uwaga); }
.blad-formularza.uwaga .btn { margin-left: 6px; }

/* Okno „Otwory": lista pozycji, panel wyboru i podgląd rozmieszczenia.
   Układ i kolory jak w Konturze — użytkownik ma widzieć ten sam program. */
.otwory-okno .zakladka-tresc { min-height: 220px; }
.otwory-lista { max-height: 190px; overflow: auto; border: 1px solid var(--linia); border-radius: var(--r2); }
.otwory-lista .poz { display: grid; grid-template-columns: 22px 18px 1fr auto 24px; align-items: center; gap: 6px;
  padding: 5px 8px; cursor: pointer; border-bottom: 1px solid var(--linia); }
.otwory-lista .poz:last-child { border-bottom: none; }
.otwory-lista .poz .nr { font-size: 11px; color: var(--tekst-3); text-align: right; font-variant-numeric: tabular-nums; }
.otwory-lista .poz .met { font-size: 11px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.otwory-lista .poz.blad .met { color: var(--alarm); }
.otwory-lista .poz.wskazany { background: var(--marka-slad); }
.otwory-lista .poz .usun { background: none; border: none; color: var(--tekst-3); cursor: pointer; font-size: 15px; line-height: 1; }
.otwory-lista .poz .usun:hover { color: var(--alarm); }
.otwory-wybor { border: 1px solid var(--linia); border-radius: var(--r2); padding: 8px; margin-top: 6px; }
.otwory-wybor .otwory-lista { margin: 6px 0; max-height: 200px; }
.otwory-wybor .rzad { display: flex; gap: 6px; flex-wrap: wrap; }
.otwory-lista .poz.wybor { grid-template-columns: 18px 1fr auto; align-items: center; }
.otwory-lista .poz.wybor > label { display: grid; grid-template-columns: 18px 1fr auto; align-items: center;
  gap: 6px; cursor: pointer; min-width: 0; }
.otwory-lista .poz.wybor > label .opis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otwory-lista .poz .pokaz { background: none; border: none; color: var(--tekst-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; }
.otwory-lista .poz .pokaz:hover, .otwory-lista .poz .pokaz[aria-pressed="true"] { color: var(--marka-2); }
.otwory-lista .poz .pokaz:focus-visible, .otwory-okno .zakladki .btn:focus-visible { outline: 2px solid var(--marka-2); outline-offset: 2px; }
.otwory-podglad { margin-top: 10px; background: var(--tlo); border: 1px solid var(--linia); border-radius: 8px; padding: 6px; }
.otwory-podglad svg { display: block; width: 100%; height: 200px; }
.ot-zrodlo polygon { fill: var(--marka-slad); stroke: var(--linia-2); stroke-width: .8; }
.ot-zrodlo circle { fill: var(--linia-2); }
.ot-zrodlo .wskazany { stroke: var(--marka-2); stroke-width: 1.6; fill: var(--marka-slad); }
.ot-zrodlo .kandydat { fill: none; stroke-dasharray: 4 3; }
.ot-otwory .ot-otwor { fill: none; stroke: var(--sciezka-narzedzia-mocna); stroke-width: 1.2; }
.ot-otwory .ot-otwor.wskazany { stroke: var(--marka-2); stroke-width: 2; }
.ot-otwory .ot-numer { fill: var(--tekst-2); font-size: 8px; }
.ot-przejazdy .ot-przejazd { stroke: var(--tekst-3); stroke-dasharray: 3 2; stroke-width: .8; }
#otLegenda .leg { display: inline-block; margin-right: 10px; padding-left: 14px; position: relative; font-size: 11px; }
#otLegenda .leg::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; margin-top: -1px; }
#otLegenda .leg-zrodlo::before { background: var(--linia-2); }
#otLegenda .leg-otwor::before { background: var(--sciezka-narzedzia-mocna); }
#otLegenda .leg-przejazd::before { background: var(--tekst-3); }
#otLegenda .leg-kandydat::before { background: var(--marka-2); }
.otwory-okno .pola > label { min-width: 0; }
.otwory-okno .pola select, .otwory-okno .pola input { max-width: 100%; box-sizing: border-box; }

/* Adres kontaktowy pod panelem — jedyne miejsce, gdzie użytkownik pyta o pomoc. */
.panel-stopka { margin: 2px 4px 8px; font-size: 11px; color: var(--tekst-3); text-align: center; }
.panel-stopka a { color: var(--marka-2); text-decoration: none; }
.panel-stopka a:hover { text-decoration: underline; }

/* Menu pod prawym przyciskiem (obrazy podkładu) */
.menu-kontekstowe { position: fixed; z-index: 200; min-width: 220px; padding: 6px;
  background: var(--panel-2); border: 1px solid var(--linia-2); border-radius: 10px; box-shadow: var(--cien-okna); }
.menu-kontekstowe .tytul { padding: 4px 8px 6px; font-size: 11px; color: var(--tekst-3);
  border-bottom: 1px solid var(--linia); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-kontekstowe button { display: block; width: 100%; padding: 7px 9px; text-align: left; font-size: 12.5px;
  color: var(--tekst); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-family: inherit; }
.menu-kontekstowe button:hover { background: var(--panel-3); }
.menu-kontekstowe button.groznie { color: var(--alarm); }
.menu-kontekstowe .linia { height: 1px; margin: 4px 2px; background: var(--linia); }
.poz.obraz .ikona { color: var(--info); }

/* Podgląd wzoru planowania */
.plan-podglad { margin: 10px 0 0; background: var(--tlo); border: 1px solid var(--linia); border-radius: 8px; padding: 6px; }
.plan-podglad svg { display: block; width: 100%; height: 150px; }
.plan-pole { fill: var(--marka-slad); stroke: var(--linia-2); stroke-width: .8; }
.plan-tory polyline { fill: none; stroke: var(--sciezka-narzedzia-mocna); stroke-width: .9; stroke-linejoin: round; opacity: .85; }
.plan-start { fill: var(--punkt-duzy); }

/* Podgląd operacji logicznej: cienkie kontury źródłowe, wypełniony wynik */
.log-zrodla polyline { fill: none; stroke: var(--tekst-3); stroke-width: .7; stroke-dasharray: 3 2; }
.log-wynik polygon { fill: var(--marka-slad); stroke: var(--marka-2); stroke-width: 1.1; }
.lista { display: flex; flex-direction: column; gap: 5px; }
.pusto { color: var(--tekst-3); font-size: 12px; line-height: 1.5; }
.poz { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--panel-3);
       border: 1px solid transparent; border-radius: var(--r2); cursor: pointer; font-size: 12.5px; }
.poz:hover { border-color: var(--linia-2); }
.poz.zazn { border-color: var(--marka); background: var(--marka-slad); }
.poz .ikona { color: var(--tekst-3); }
.poz .opis { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poz .met { color: var(--tekst-3); font-family: var(--mono); font-size: 11px; }
.poz .usun { color: var(--tekst-3); background: none; border: 0; cursor: pointer; padding: 0 3px; }
.poz .usun:hover { color: var(--alarm); }
.podsumowanie { font-size: 12px; color: var(--tekst-2); margin: 10px 0; line-height: 1.7; }
.podsumowanie b { color: var(--tekst); font-family: var(--mono); }

/* --- okno dialogowe --- */
.okno { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
        background: var(--przyciemnienie); backdrop-filter: blur(3px); }
.okno[hidden] { display: none; }
/* min-width: 0 jest tu konieczne: karta jest elementem siatki, a te domyślnie
   nie zwężają się poniżej szerokości swojej zawartości — na telefonie okno
   wychodziło poza ekran i nie dało się kliknąć tego, co po bokach. */
.okno .karta-okna { width: min(560px, 94vw); max-width: 96vw; min-width: 0;
                    max-height: 90vh; overflow-y: auto; background: var(--panel);
                    border: 1px solid var(--linia-2); border-radius: var(--r); box-shadow: var(--cien-okna); }
.okno h3 { margin: 0; padding: 16px 20px; font-size: 13px; font-weight: 800; letter-spacing: .1em;
           text-transform: uppercase; border-bottom: 1px solid var(--linia); }
.okno .tresc-okna { padding: 18px 20px; }
.okno .stopka-okna { padding: 14px 20px; border-top: 1px solid var(--linia); display: flex; gap: 8px; justify-content: flex-end; }
.pola { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pola label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tekst-2); }
.pola .szeroko { grid-column: 1 / -1; }
/* Etykieta z checkboxem czyta się w jednej linii — kolumnowy układ stawiał
   kwadracik nad tekstem i wyglądało to jak pomyłka. */
.pola label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 8px; }
.pola label:has(> input[type="checkbox"]) input { width: 16px; height: 16px; flex: none; accent-color: var(--marka); }
.pola input, .pola select { background: var(--panel-2); border: 1px solid var(--linia-2); border-radius: var(--r2);
                            padding: 8px 10px; font-size: 13px; }
.pola input:focus, .pola select:focus { outline: none; border-color: var(--marka); box-shadow: 0 0 0 3px rgba(83,184,72,.2); }
.podpowiedz { font-size: 11.5px; color: var(--tekst-3); line-height: 1.5; margin: 8px 0 0; }

/* --- komunikat --- */
.toast { position: fixed; left: 50%; transform: translateX(-50%); top: 64px; z-index: 200;
         background: var(--panel-3); border: 1px solid var(--linia-2); border-left: 3px solid var(--marka);
         border-radius: var(--r2); padding: 12px 18px; font-size: 13px; max-width: 620px;
         box-shadow: var(--cien-chmurki); }
.toast[hidden] { display: none; }
.toast.uwaga { border-left-color: var(--uwaga); }
.toast.blad { border-left-color: var(--alarm); }

/* --- wybór maszyny i plan --- */
.wybor-maszyny select { background: var(--panel-3); border: 1px solid var(--linia-2); color: var(--tekst);
                        border-radius: var(--r2); padding: 6px 10px; font-size: 12.5px; font-weight: 600; }
#btnPlan { border-color: var(--linia-2); }
#btnPlan.pro { background: var(--marka); border-color: var(--marka); color: var(--marka-ciemna); }
#obszar { color: var(--tekst-3); }
#obszar.poza { color: var(--alarm); font-weight: 700; }
.znaczek-pro { display: inline-block; background: var(--marka); color: var(--marka-ciemna); font-size: 9px;
               font-weight: 800; letter-spacing: .08em; padding: 1px 5px; border-radius: 3px; margin-left: 6px;
               vertical-align: 1px; }
.btn.zablokowany { opacity: .55; }
.zachetta { background: var(--marka-slad); border: 1px solid var(--marka-obwodka); border-radius: var(--r2);
            padding: 12px 14px; margin-top: 10px; font-size: 12.5px; line-height: 1.55; }
.zachetta b { color: var(--marka-2); }

/* --- ekran wyboru maszyny --- */
.karta-okna.szeroka { width: min(880px, 96vw); }
.grupa-maszyn { margin-top: 18px; }
.grupa-maszyn h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--tekst-3); }
.siatka-maszyn { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr)); gap: 8px; }
.maszyna-karta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
                 background: var(--panel-2); border: 1px solid var(--linia); border-radius: var(--r2);
                 padding: 12px 14px; cursor: pointer; text-align: left; transition: border-color .14s, background-color .14s; }
.maszyna-karta:hover { border-color: var(--marka); background: var(--marka-slad); }
.maszyna-karta .nazwa { font-size: 13.5px; font-weight: 700; color: var(--tekst); }
.maszyna-karta .wymiar { font-family: var(--mono); font-size: 11.5px; color: var(--tekst-2); }
.maszyna-karta .rodzaj { font-size: 10.5px; color: var(--tekst-3); text-transform: uppercase; letter-spacing: .08em; }
.sekcja { margin: 20px 0 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
          text-transform: uppercase; color: var(--tekst-3); border-top: 1px solid var(--linia); padding-top: 14px; }
.lista-maszyn { margin-bottom: 16px; display: flex; flex-direction: column; gap: 5px; }
.lista-maszyn .poz { width: 100%; text-align: left; background: var(--panel-2); }
.wlasny-kod { margin-top: 16px; }
.wlasny-kod summary { cursor: pointer; font-size: 12px; color: var(--tekst-2); }
.btn-maszyna { display: flex; align-items: center; gap: 8px; }
.btn-maszyna .wym { font-family: var(--mono); font-size: 11px; color: var(--tekst-3); }

/* --- osprzęt maszyny --- */
.osprzet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.osprzet .opcja { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: start;
                  background: var(--panel-2); border: 1px solid var(--linia); border-radius: var(--r2);
                  padding: 9px 11px; font-size: 12.5px; cursor: pointer; }
.osprzet .opcja em { grid-column: 2; font-style: normal; font-size: 11px; color: var(--tekst-3); line-height: 1.4; }
.osprzet .opcja:hover { border-color: var(--linia-2); }

/* --- przełącznik 2D / 3D --- */
.przelacznik-widoku { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; gap: 2px;
                      background: var(--nakladka); border: 1px solid var(--linia-2); border-radius: 999px; padding: 3px; }
.przel { background: transparent; border: 0; color: var(--tekst-2); font-size: 11.5px; font-weight: 700;
         padding: 5px 14px; border-radius: 999px; cursor: pointer; }
.przel.aktywny { background: var(--marka); color: var(--marka-ciemna); }
.przel-maly { padding: 5px 9px; font-size: 11px; }
.przel-rozdziel { width: 1px; background: var(--linia-2); margin: 3px 4px; }
#plotno3d { cursor: grab; background: var(--br3d-tlo); }

/* --- pasek symulacji nad paskiem dolnym --- */
.symulacja { position: absolute; left: 50%; transform: translateX(-50%); bottom: 42px; z-index: 6;
             display: flex; align-items: center; gap: 8px; padding: 6px 10px; max-width: calc(100% - 24px);
             background: var(--nakladka); border: 1px solid var(--linia-2); border-radius: 999px;
             box-shadow: var(--cien-chmurki); font-size: 12px; color: var(--tekst-2); }
.symulacja input[type="range"] { width: 220px; min-width: 80px; accent-color: var(--marka); }
.symulacja select { background: var(--panel-2); color: var(--tekst); border: 1px solid var(--linia-2);
                    border-radius: 6px; padding: 2px 4px; font-size: 11.5px; }
.sym-btn { background: transparent; border: 0; color: var(--tekst); font-size: 14px; cursor: pointer;
           width: 28px; height: 28px; border-radius: 50%; }
.sym-btn:hover { background: var(--panel-3); }
.sym-btn.aktywny { background: var(--marka); color: var(--marka-ciemna); }
.sym-czas { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sym-linia { font-family: var(--mono); color: var(--tekst-3); white-space: nowrap; }
.sym-opcja { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.plotno-otoczka.sym .hud { bottom: 92px; }
@media (max-width: 860px) {
  .symulacja { bottom: 40px; gap: 5px; padding: 5px 8px; font-size: 11px; }
  .symulacja input[type="range"] { width: 110px; }
  .sym-linia, .sym-opcja span { display: none; }
  .przel-maly { padding: 5px 7px; }
}
#plotno3d:active { cursor: grabbing; }

/* --- baza narzędzi --- */
.karta-okna.szeroka { width: min(920px, 94vw); }
.narzedzia-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
/* szkice frezów (ui/szkice-narzedzi.js) — kolory z motywu, żeby działały w obu */
.szkic-narzedzia { flex: none; display: block; }
.sz-chwyt { fill: var(--tekst-3); }
.sz-blik { stroke: rgba(255,255,255,.35); stroke-width: 1; }
.sz-korpus { fill: var(--panel-3); stroke: var(--tekst-2); stroke-width: 1; stroke-linejoin: round; }
.sz-rowek { stroke: var(--tekst-2); stroke-width: 1.2; stroke-linecap: round; }
.sz-os { stroke: var(--marka); stroke-width: 1; stroke-dasharray: 2 2; }
.sz-plytka { fill: var(--uwaga); }
.sz-kat { font: 700 8px var(--mono); fill: var(--tekst-3); }
.nrz-poz { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; }
.nrz-poz > .szkic-narzedzia { grid-row: 1 / span 5; align-self: start; }
.nrz-poz > :not(.szkic-narzedzia) { grid-column: 2; }
.nrz-domyslne { font-size: 11px; color: var(--marka-2); }
.karta-form .szkic-podglad { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.karta-form .szkic-podglad small { color: var(--tekst-3); font-size: 11px; line-height: 1.4; }
.materialy-wybor { display: flex; flex-wrap: wrap; gap: 6px 12px; grid-column: 1 / -1; }
.materialy-wybor label { display: flex; flex-direction: row; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; margin: 0; }
.pola-domyslne { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.pola-domyslne label { font-size: 11.5px; }
.nrz-poz { border: 1px solid var(--linia); border-radius: var(--r2); padding: 10px 12px;
           background: var(--panel-2); cursor: pointer; }
.nrz-poz:hover { border-color: var(--linia-2); }
.nrz-poz.wybrane { border-color: var(--marka); background: var(--marka-slad); }
.nrz-poz.obce { opacity: .62; }
.nrz-glowa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nrz-glowa b { font-size: 13.5px; }
.nrz-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--tekst-3);
           border: 1px solid var(--linia-2); border-radius: 999px; padding: 1px 8px; }
.nrz-tag.wlasne { color: var(--marka-2); border-color: var(--marka-obwodka); }
.nrz-akcje { margin-left: auto; display: flex; gap: 6px; }
.nrz-dane, .nrz-opis { font-size: 12px; color: var(--tekst-2); margin-top: 3px; }
.nrz-param { font-size: 12.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.nrz-skad { color: var(--tekst-3); margin-left: 8px; font-size: 11.5px; }
.nrz-uwaga { font-size: 12px; color: var(--uwaga); margin-top: 5px; }
.karta-form { border: 1px solid var(--marka-obwodka); border-radius: var(--r2); padding: 12px;
              margin-top: 14px; background: var(--marka-slad); }
.karta-form h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-2); }
.stopka-form { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* --- telefon i tablet ---------------------------------------------------
   Na wąskim ekranie rysunek dostaje całą wysokość, a paski narzędzi i panel
   układają się nad i pod nim. Ten sam program, inne rozmieszczenie —
   niczego nie chowamy, bo na warsztacie potrzebne bywa wszystko. */
@media (max-width: 860px) {
  .uklad { grid-template-columns: 1fr; grid-template-rows: auto minmax(46vh, 1fr) auto;
           height: calc(100dvh - 52px); }
  .narzedzia { flex-direction: row; overflow-x: auto; border-right: none;
               border-bottom: 1px solid var(--linia); padding: 6px; gap: 6px; }
  .narzedzia .grupa-tytul { display: none; }
  .nrz { min-width: 62px; flex: 0 0 auto; }
  .panel { border-left: none; border-top: 1px solid var(--linia); max-height: 42vh; }
  .pola { grid-template-columns: 1fr; }
  .gora { flex-wrap: wrap; height: auto; padding: 6px 10px; gap: 6px; }
  .gora .marka span { display: none; }
  .okno .karta-okna, .okno .karta-okna.szeroka { width: 96vw; max-height: 86vh; }
  .osprzet, .narzedzia-lista .nrz-glowa { grid-template-columns: 1fr; }
  .nrz-akcje { margin-left: 0; }
  .stopka-okna { flex-wrap: wrap; }
  .stopka-okna .btn { flex: 1 1 auto; }
  /* Kontur 2D na telefonie: zakładki przewijają się w poziomie zamiast łamać na
     trzy rzędy, presety idą w kolumnę, podgląd nie wypycha formularza poza ekran. */
  .presety-op { grid-template-columns: 1fr; }
  .kontur-okno .zakladki, .otwory-okno .zakladki { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .otwory-okno .zakladki .btn { flex: 0 0 auto; }
  .otwory-okno .zakladka-tresc { min-height: 0; }
  .otwory-podglad svg { height: 150px; }
  .otwory-lista { max-height: 140px; }
  .kontur-okno .zakladki .btn { flex: 0 0 auto; }
  .kontur-okno .zakladka-tresc { min-height: 0; }
  .kontur-podglad svg { height: 150px; }
  .kontur-lista { max-height: 130px; }
  .gora-akcje { flex-wrap: wrap; row-gap: 6px; }
  .gora-akcje .btn { font-size: 12px; padding: 6px 10px; }
  .pasek-dolny { font-size: 11px; gap: 8px; overflow-x: auto; }
}
.przel-widok { display: flex; gap: 3px; }

/* --- kreator blatu --- */
.blat-uklad { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.blat-formularz fieldset { border: 1px solid var(--linia); border-radius: var(--r2); padding: 12px 14px; margin: 0 0 14px; }
.blat-formularz legend { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                         color: var(--tekst-3); padding: 0 6px; }
.ptak { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 4px 0 8px; cursor: pointer; }
.narozniki-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 8px 0 10px; font-size: 12px; }
.narozniki-siatka label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.blat-podglad { position: sticky; top: 0; }
.blat-svg { width: 100%; height: auto; background: var(--panel-2); border: 1px solid var(--linia); border-radius: var(--r2); }
.blat-kontur { fill: var(--marka-slad); stroke: var(--marka); stroke-width: 1.6; }
.blat-otwor { fill: var(--tekst-3); }
.blat-otwor.zly { fill: var(--alarm); }
.blat-wymiar { fill: var(--tekst-3); font-size: 10px; text-anchor: middle; font-family: var(--mono); }
.blat-naroznik { fill: transparent; stroke: var(--linia-2); stroke-width: 1.4; cursor: pointer; }
.blat-naroznik:hover { stroke: var(--marka); }
.blat-naroznik.wl { fill: var(--marka-slad); stroke: var(--marka); }
.blat-info { margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--tekst-2); }
.blat-info b { color: var(--tekst); font-variant-numeric: tabular-nums; }
.ostrzezenie { color: var(--uwaga); }
@media (max-width: 860px) { .blat-uklad { grid-template-columns: 1fr; } .blat-podglad { position: static; } }

/* Szerokie okna kreatorów bywają wyższe od ekranu. Przewijamy w nich tylko
   treść, a nagłówek i stopkę zostawiamy na miejscu — inaczej przycisk
   „Utwórz rozkrój" ląduje 900 px pod krawędzią ekranu i nie da się go kliknąć. */
.okno .karta-okna.szeroka, .okno .karta-okna.bardzo-szeroka {
  display: flex; flex-direction: column; overflow: hidden; }
.okno .karta-okna.szeroka > h3, .okno .karta-okna.bardzo-szeroka > h3,
.okno .karta-okna.szeroka > .stopka-okna, .okno .karta-okna.bardzo-szeroka > .stopka-okna { flex: none; }
.okno .karta-okna.szeroka > .tresc-okna, .okno .karta-okna.bardzo-szeroka > .tresc-okna {
  overflow-y: auto; min-height: 0; }

/* cofnij / ponów — wąskie przyciski ze strzałką, obok „Nowy" */
.btn.ikona { padding: 0 10px; font-size: 16px; line-height: 1; min-width: 34px; }
.btn.ikona:disabled { opacity: .35; cursor: default; }

/* --- kreator paneli ściennych 3D --- */
.okno .karta-okna.bardzo-szeroka { width: min(1180px, 97vw); }
.panel-uklad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 20px; align-items: start; }
.panel-formularz fieldset { border: 1px solid var(--linia); border-radius: var(--r2); padding: 12px 14px; margin: 0 0 14px; }
.panel-formularz legend { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                          color: var(--tekst-3); padding: 0 6px; }
.panel-formularz label.szeroko { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tekst-2); }
.panel-prawa { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.panel-przelacznik { display: flex; gap: 6px; flex-wrap: wrap; }
.panel-przelacznik .btn.aktywny { background: color-mix(in srgb, var(--marka) 22%, transparent); color: var(--marka-2); border-color: var(--marka); }
.panel-scena { position: relative; border: 1px solid var(--linia); border-radius: var(--r2); overflow: hidden;
               background: var(--panel-2); }
.panel-scena canvas { display: block; width: 100%; height: 340px; cursor: grab; touch-action: none; }
.panel-scena canvas:active { cursor: grabbing; }
.panel-wskazowka { position: absolute; right: 8px; bottom: 6px; font-size: 10.5px; color: var(--tekst-3);
                   pointer-events: none; }
.panel-info { font-size: 12.5px; line-height: 1.7; color: var(--tekst-2); }
.panel-info b { color: var(--tekst); font-variant-numeric: tabular-nums; }
.panel-uwagi { font-size: 12px; line-height: 1.55; }

/* karty arkuszy — jedna płyta = jedno mocowanie na stole */
.panel-zakladki { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-zakladka { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 11px;
                  border: 1px solid var(--linia); border-radius: var(--r2) var(--r2) 0 0; background: transparent;
                  color: var(--tekst-2); font: inherit; font-size: 12px; cursor: pointer; }
.panel-zakladka small { font-size: 10px; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.panel-zakladka:hover { border-color: var(--linia-2); }
.panel-zakladka.aktywna { background: color-mix(in srgb, var(--marka) 18%, transparent); border-color: var(--marka);
                          color: var(--marka-2); }
.pn-arkusz { width: 100%; height: auto; max-height: 360px; background: var(--panel-2);
             border: 1px solid var(--linia); border-radius: var(--r2); }
.pn-plyta { fill: color-mix(in srgb, var(--tekst) 6%, transparent); stroke: var(--linia-2); stroke-width: 4; }
.pn-obrys { fill: none; stroke: var(--marka); stroke-width: 4; stroke-dasharray: 26 18; }
.pn-maszyna { fill: none; stroke: var(--uwaga); stroke-width: 3; stroke-dasharray: 12 12; }
.pn-czesc { fill: var(--marka-slad); stroke: var(--marka); stroke-width: 2; }
.pn-numer { fill: var(--tekst-2); font-size: 26px; text-anchor: middle; dominant-baseline: middle;
            font-family: var(--mono); }
.pn-opis { fill: var(--tekst-3); font-size: 30px; text-anchor: middle; font-family: var(--mono); }
@media (max-width: 980px) {
  .panel-uklad { grid-template-columns: 1fr; }
  .panel-prawa { position: static; }
  .panel-scena canvas { height: 260px; }
}

/* kreator modeli ciętych: strefa upuszczania pliku */
.pl-upusc { border: 1px dashed var(--linia-2); border-radius: var(--r2); padding: 12px; margin-bottom: 12px;
            text-align: center; transition: border-color .15s, background .15s; }
.pl-upusc.nad { border-color: var(--marka); background: color-mix(in srgb, var(--marka) 10%, transparent); }
.pl-upusc .podpowiedz { margin: 8px 0 0; }
.pl-stan { align-self: center; font-size: 11.5px; color: var(--tekst-3); }

/* podgląd napisu w oknie „Tekst" — to samo, co trafi na rysunek */
.podglad-napisu { position: relative; border: 1px solid var(--linia); border-radius: 8px; background: var(--plotno-tlo); height: 110px; overflow: hidden; }
.podglad-napisu canvas { width: 100%; height: 100%; display: block; }
.podglad-napisu span { position: absolute; right: 8px; bottom: 4px; font-size: 11px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }

/* --- konto: bramka, logowanie, panel, projekty w chmurze --- */
#btnKonto.pro { border-color: var(--marka); }
#btnKonto .znaczek-pro { margin-left: 5px; }
.znaczek-pro.trial, #btnPlan.trial { background: var(--uwaga); border-color: var(--uwaga); color: #2b2000; }
.okno.bramka { z-index: 120; }
.okno.bramka .karta-okna { width: min(460px, 94vw); }
.okno.bramka h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jezyk-bramki { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--linia); border-radius: 8px; }
.jezyk-bramki .btn { padding: 3px 9px; font-size: 11px; letter-spacing: .5px; }
.jezyk-bramki .btn.aktywny { background: color-mix(in srgb, var(--marka) 22%, transparent); color: var(--marka-2); }
.okno .karta-okna.szeroka { width: min(860px, 96vw); }
.zgoda { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; font-size: 12px; line-height: 1.5;
         color: var(--tekst-2); cursor: pointer; }
.zgoda input { margin-top: 3px; flex: none; }
.blad-formularza { margin: 10px 0; padding: 8px 10px; border-radius: var(--r2); font-size: 12px; line-height: 1.45;
                   background: rgba(224,54,42,.1); border: 1px solid rgba(224,54,42,.35); color: var(--alarm); }
.rodo { margin-top: 14px; font-size: 11px; color: var(--tekst-3); line-height: 1.5; }
.rodo summary { cursor: pointer; color: var(--tekst-2); }
.rodo p { margin: 6px 0 0; }
.rodo a, .podpowiedz a { color: var(--marka-2); }
.plany { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.plan-karta { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 34px;
              border: 1px solid var(--linia-2); border-radius: var(--r2); cursor: pointer; font-size: 12.5px; }
.plan-karta input { position: absolute; left: 12px; top: 15px; }
.plan-karta:has(input:checked) { border-color: var(--marka); background: var(--marka-slad); }
.plan-karta .cena { font-size: 18px; font-weight: 800; color: var(--marka-2); }
.plan-karta .cena small { font-size: 11px; font-weight: 400; color: var(--tekst-3); }
.plan-karta .podpowiedz { margin: 0; }
.konto-siatka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; }
@media (max-width: 720px) { .konto-siatka { grid-template-columns: 1fr; } .plany { grid-template-columns: 1fr; } }
.pasek-miejsca { height: 6px; margin-top: 12px; background: var(--panel-2); border: 1px solid var(--linia); border-radius: 3px; overflow: hidden; }
.pasek-miejsca i { display: block; height: 100%; background: var(--marka); }
.ostrzezenie { color: var(--uwaga); }
.lista-projektow { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 52vh; overflow-y: auto; }
.projekt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px;
           padding: 8px 10px; border: 1px solid var(--linia); border-radius: var(--r2); font-size: 12.5px; }
.projekt .wersje { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--tekst-2);
                   border-top: 1px dashed var(--linia); padding-top: 6px; }
.projekt .wersje span { display: inline-flex; align-items: center; gap: 4px; }

/* 0.9.0: edycja list, surowiec, podkład, próbki krojów */
.poz .mini { color: var(--tekst-3); background: none; border: 0; cursor: pointer; padding: 0 3px; font-size: 11px; line-height: 1; }
.poz .mini:hover { color: var(--tekst); }
.poz .mini:disabled { opacity: .25; cursor: default; }
.poz input.nazwa { flex: 1; min-width: 0; font: inherit; background: var(--panel-2); color: var(--tekst);
  border: 1px solid var(--marka); border-radius: 4px; padding: 1px 5px; }
.poz.edytowalna { cursor: pointer; }
.surowiec-info { display: flex; align-items: center; gap: 8px; padding: 6px 9px; margin-bottom: 6px; border-radius: 6px;
  background: var(--material, #6b4f2a); color: #fff; font-size: 12px; }
.surowiec-info b { font-family: var(--mono); font-weight: 500; }
.surowiec-info button { margin-left: auto; background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 4px;
  padding: 2px 8px; cursor: pointer; font-size: 11px; }
.lista-krojow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 210px; overflow: auto; padding: 2px; }
.lista-krojow .grupa { grid-column: 1 / -1; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tekst-3); margin-top: 4px; }
.lista-krojow .kroj { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 6px 9px; background: var(--panel-3); border: 1px solid var(--linia); border-radius: 6px; color: var(--tekst); cursor: pointer; }
.lista-krojow .kroj:hover { border-color: var(--linia-2); }
.lista-krojow .kroj.aktywny { border-color: var(--marka); background: var(--marka-slad); }
.lista-krojow .kroj .probka { font-size: 21px; line-height: 1.15; }
.lista-krojow .kroj small { font-size: 10.5px; color: var(--tekst-3); font-family: var(--sans, inherit); }
.podklad-podglad { position: relative; width: 100%; max-height: 220px; overflow: hidden; border-radius: 6px; background: var(--panel-3);
  display: flex; align-items: center; justify-content: center; }
.podklad-podglad canvas { max-width: 100%; max-height: 220px; }
.suwak { display: flex; align-items: center; gap: 8px; }
.suwak input[type=range] { flex: 1; }
.suwak output { font-family: var(--mono); font-size: 11px; min-width: 38px; text-align: right; }

/* kreator płytek wzorzystych — galeria wzorów i podgląd */
.wzory-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin-bottom: 8px; }
.wzor-kafel { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 4px 6px;
  background: var(--panel-3); border: 1px solid var(--linia); border-radius: 6px; color: var(--tekst); cursor: pointer; }
.wzor-kafel:hover { border-color: var(--linia-2); }
.wzor-kafel.aktywny { border-color: var(--marka); background: var(--marka-slad); }
.wzor-kafel small { font-size: 10.5px; color: var(--tekst-3); text-align: center; line-height: 1.2; }
.wzor-kafel .wzor-svg { width: 100%; height: auto; }
.wzor-2frezy { font-family: var(--mono); color: var(--uwaga); }
.wzor-svg { display: block; width: 100%; }
.wzor-tlo { fill: var(--material, #6b4f2a); opacity: .18; }
.wzor-obrys { fill: none; stroke: var(--ksztalt, #e9eef2); stroke-width: 1.2; }
.wzor-rowki path { fill: none; stroke: var(--marka-2, #53b848); stroke-width: 1.2; stroke-linecap: round; }

/* --- okno operacji: sekcje w tej samej kolejności co w oknie Kieszeni --- */
.sekcja-op { margin: 0 0 14px; }
.sekcja-op h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
                color: var(--tekst-3); border-bottom: 1px solid var(--linia); padding-bottom: 5px; }
.sekcja-op .podpowiedz { margin: 0 0 8px; }
.podsumowanie-op { background: var(--panel-2); border: 1px solid var(--linia-2); border-left: 3px solid var(--marka);
                   border-radius: var(--r2); padding: 10px 12px; font-size: 12.5px; line-height: 1.65; }
.podsumowanie-op[hidden] { display: none; }

/* ---------- wersja testowa: ostrzeżenia ---------- */
.uwaga-beta { margin:0 0 8px; padding:6px 8px; border-radius:6px; font-size:.9em;
  background:#fdf3e3; border:1px solid #e6c98a; color:#5a3d12; }
.uwaga-beta-pobranie { margin-top:6px; }
.lista-ostrzezen { margin:8px 0; padding-left:18px; }
.lista-ostrzezen li { margin-bottom:4px; }
.komunikat-ok { padding:8px; border-radius:6px; background:#e6f4e8; border:1px solid #a9d6b3; }
@media (prefers-color-scheme: dark) {
  .uwaga-beta { background:#33291a; border-color:#6b5527; color:#f0d9a8; }
  .komunikat-ok { background:#1d2f22; border-color:#3f6b4b; }
}