/* LupikCMS – ekran „Treści strony”: nawigacja sekcji, formularz, podgląd na żywo. */

.glowny--edytor { padding-bottom: 24px; }
/* v2 (14.10): styl jak pozostałe zakładki – przyciski z ikonami, status jako pastylka, nawigacja i formularz bez ciężkich ramek */
.glowny--edytor .przycisk--ikona { display: inline-flex; align-items: center; gap: 7px; }
.glowny--edytor .przycisk:disabled { opacity: .5; }
.glowny--edytor .pasek { margin-bottom: 16px; }
.glowny--edytor .status { display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--sans); color: var(--szary); padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--tlo-2); }
.glowny--edytor .status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--szary); flex: none; }
.glowny--edytor .status--ok { color: var(--zielony); background: #e3f1e8; }
.glowny--edytor .status--ok::before { background: var(--zielony); }
.glowny--edytor .status--zmiany { color: #9a6b1f; background: #f8ecd6; }
.glowny--edytor .status--zmiany::before { background: #d19a2b; }
.glowny--edytor .status--blad { color: var(--czerwony); background: #f6dede; }
.glowny--edytor .status--blad::before { background: var(--czerwony); }
html[data-motyw="ciemny"] .glowny--edytor .status--ok { background: #1f3326; }
html[data-motyw="ciemny"] .glowny--edytor .status--zmiany { background: #3a2d14; }
html[data-motyw="ciemny"] .glowny--edytor .status--blad { background: #3a1d20; }
.glowny--edytor .lata button { padding: 7px 12px; font-size: 13px; }
.pasek__prawa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status--blad { color: var(--czerwony); }
.link-ustawienia { border: 0; background: none; font: 600 14px var(--sans); color: var(--szary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* układ (27.10, etap 1): podgląd strony na całą szerokość jako główny widok (tekst zmienia się w miejscu); nad nim wiersz kafelków
   podstron (gdy jest ich więcej niż jedna); lista części i formularz jednej części w wysuwanym panelu po prawej; pasek statusu przyklejony */
.glowny--edytor { --glowny-x: clamp(16px, 2vw, 28px); }

/* Kafelki podstron – jeden wiersz nad podglądem, przewijany w bok */
.podstrony { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 0 4px; scrollbar-width: thin; }
.podstrona { display: inline-flex; align-items: center; gap: 8px; flex: none; border: 1px solid var(--linia); border-radius: 10px; background: var(--karta); padding: 10px 14px; font: 600 13.5px/1.2 var(--sans); color: var(--atrament); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.podstrona:hover { border-color: var(--akcent); }
.podstrona:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.podstrona .ikona { color: var(--szary); }
.podstrona--aktywna { border-color: var(--akcent); background: var(--akcent); color: #fff; box-shadow: 0 8px 20px -14px rgba(16,24,40,.6); }
.podstrona--aktywna .ikona { color: inherit; }
.podstrona--aktywna .kropka { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
html[data-motyw="ciemny"] .podstrona--aktywna { background: #263a57; border-color: #263a57; color: #d7e3f5; }

/* Wysuwany panel po prawej: lista części albo formularz */
.edytor__panel { position: fixed; top: 60px; right: 0; bottom: 0; width: min(460px, 100%); background: var(--karta); border-left: 1px solid var(--linia); box-shadow: -24px 0 60px -30px rgba(0,0,0,.45); z-index: 25; display: flex; flex-direction: column; transform: translateX(105%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
.edytor__panel--otwarty { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.edytor__panel-glowa { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linia); flex: none; }
.edytor__panel-glowa strong { font-size: 15px; }
.edytor__panel-tresc { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 28px; }

/* Nawigacja: kafelek podstrony → lista części */
.kafelki { display: grid; gap: 8px; }
.kafel-strony { border: 1px solid var(--linia); border-radius: 10px; background: var(--karta); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.kafel-strony--podglad { border-color: var(--akcent); }
.kafel-strony--otwarta { box-shadow: 0 10px 28px -20px rgba(16,24,40,.45); }
.kafel-strony__glowa { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; padding: 11px 12px; font: inherit; color: inherit; cursor: pointer; }
.kafel-strony__glowa:hover { background: var(--tlo-2); }
.kafel-strony__glowa:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.kafel-strony__ikona, .kafel-sekcji__ikona { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--akcent-jasny); color: var(--akcent); flex: none; }
.kafel-strony--podglad .kafel-strony__ikona { background: var(--akcent); color: #fff; }
.kafel-strony__tekst { min-width: 0; flex: 1; display: grid; gap: 1px; }
.kafel-strony__tekst b { font: 700 14.5px/1.25 var(--sans); color: var(--atrament); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kafel-strony__tekst small { font-size: 12px; color: var(--szary); }
.kafel-strony__strzalka { color: var(--szary); display: inline-flex; transition: transform .2s; flex: none; }
.kafel-strony--otwarta .kafel-strony__strzalka { transform: rotate(90deg); }
.lista-sekcji { list-style: none; margin: 0; padding: 4px 6px 8px; display: grid; gap: 1px; border-top: 1px solid var(--linia); }
.sekcja-pozycja { width: 100%; display: flex; align-items: center; gap: 9px; text-align: left; border: 0; background: none; padding: 8px 8px 8px 10px; border-radius: 7px; font: 500 13.5px/1.3 var(--sans); color: var(--atrament); cursor: pointer; }
.sekcja-pozycja:hover { background: var(--tlo-2); }
.sekcja-pozycja:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.sekcja-pozycja > .ikona { color: var(--szary); flex: none; }
.sekcja-pozycja__nazwa { flex: 1; min-width: 0; }
.sekcja-pozycja__ile { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--szary); flex: none; }
.sekcja-pozycja--zamknieta { color: var(--szary); }
.klodka { font-size: 11px; opacity: .7; flex: none; }
.kropka { width: 8px; height: 8px; border-radius: 50%; background: #d18a1f; flex: none; }
.kropka--blad { background: var(--czerwony); }
.kafel-biblioteka { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px dashed var(--linia); border-radius: 10px; background: none; padding: 10px 12px; font: inherit; color: inherit; cursor: pointer; margin-top: 6px; }
.kafel-biblioteka:hover { border-color: var(--akcent); background: var(--tlo-2); }
.kafel-biblioteka .kafel-strony__ikona { background: var(--tlo-2); color: var(--szary); }
.kafel-biblioteka:hover .kafel-strony__ikona { color: var(--akcent); }

/* Formularz sekcji */
.edytor__formularz { background: none; border: 0; border-radius: 0; padding: 0; display: grid; gap: 18px; max-width: none; box-shadow: none; }
.sekcja-glowa__pasek { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sekcja-glowa__wroc { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 8px 6px 4px; margin-left: -4px; border-radius: 6px; font: 600 13px var(--sans); color: var(--akcent); cursor: pointer; }
.sekcja-glowa__wroc:hover { background: var(--akcent-jasny); }
.sekcja-glowa__wybor { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--szary); }
.sekcja-glowa__wybor select { font: 600 13px var(--sans); color: var(--atrament); background: var(--karta); border: 1px solid var(--linia); border-radius: 7px; padding: 6px 28px 6px 10px; max-width: 220px; }
.sekcja-glowa__tytul { display: flex; align-items: center; gap: 12px; }
.sekcja-glowa__tytul .kafel-sekcji__ikona { width: 34px; height: 34px; }
.sekcja-glowa__tytul h2 { font-size: 18px; }
.zakladki { display: flex; gap: 4px; padding: 4px; border-radius: 9px; background: var(--tlo-2); width: fit-content; margin-top: 12px; }
.zakladki button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; border-radius: 6px; padding: 7px 14px; font: 600 13.5px var(--sans); color: var(--szary); cursor: pointer; }
.zakladki button .zakladki__ile { font-size: 11.5px; font-weight: 600; color: var(--szary); background: var(--karta); border-radius: 999px; padding: 1px 7px; }
.zakladki button:hover { color: var(--atrament); }
.zakladki button[aria-selected="true"] { background: var(--karta); color: var(--atrament); box-shadow: 0 1px 2px rgba(16,24,40,.12); }
.zakladki button[aria-selected="true"] .zakladki__ile { background: var(--akcent-jasny); color: var(--akcent); }
html[data-motyw="ciemny"] .zakladki button[aria-selected="true"] { background: #1f2a3a; }
.zakladka-pusta { margin: 0; padding: 18px; border: 1px dashed var(--linia); border-radius: 8px; color: var(--szary); font-size: 13.5px; text-align: center; }
.zakladka-pusta button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--akcent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lista-wskazowka { margin: 0; font-size: 13px; color: var(--szary); }
.lista-wskazowka button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--akcent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Grafika: siatka zdjęć listy (galeria, dodatki, pakiety ze zdjęciem…) */
.siatka-zdjec { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.kafel-zdjecia { display: flex; flex-direction: column; border: 1px solid var(--linia); border-radius: 9px; background: var(--karta); overflow: hidden; }
.kafel-zdjecia--blad { border-color: var(--czerwony); box-shadow: 0 0 0 1px var(--czerwony); }
.kafel-zdjecia__foto { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--tlo-2); border: 0; padding: 0; cursor: pointer; }
.kafel-zdjecia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kafel-zdjecia__foto--pusta { display: grid; place-items: center; border: 2px dashed var(--linia); border-radius: 9px 9px 0 0; color: var(--akcent); font: 700 13px var(--sans); }
.kafel-zdjecia__foto--pusta:hover, .kafel-zdjecia__foto.upusc--nad { background: var(--akcent-jasny); }
.kafel-zdjecia__numer { position: absolute; top: 8px; left: 8px; background: rgba(16,24,40,.72); color: #fff; font: 700 11px/1 var(--sans); padding: 4px 7px; border-radius: 999px; }
.kafel-zdjecia__tresc { display: grid; gap: 8px; padding: 10px 12px 12px; }
.kafel-zdjecia__tytul { font: 600 13px/1.3 var(--sans); color: var(--atrament); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kafel-zdjecia__tresc input { width: 100%; font: 500 12.5px var(--sans); padding: 7px 9px; border: 1px solid var(--linia); border-radius: 6px; background: var(--karta); }
.kafel-zdjecia__akcje { display: flex; align-items: center; gap: 2px; }
.kafel-zdjecia__akcje button { border: 0; background: none; border-radius: 6px; padding: 5px 8px; font: 600 12px var(--sans); color: var(--szary); cursor: pointer; }
.kafel-zdjecia__akcje button:hover:not(:disabled) { background: var(--tlo-2); color: var(--atrament); }
.kafel-zdjecia__akcje button:disabled { opacity: .3; cursor: default; }
.kafel-zdjecia__akcje .kafel-zdjecia__zmien { color: var(--akcent); }
.kafel-zdjecia__akcje .kafel-zdjecia__usun { margin-left: auto; }
.kafel-zdjecia__akcje .kafel-zdjecia__usun:hover { background: #f6dfe0 !important; color: var(--czerwony) !important; }
.kafel-zdjecia__uwaga { font-size: 11.5px; color: #9a6b1f; margin: 0; }
.dodaj-zdjecie { display: grid; place-items: center; gap: 6px; min-height: 180px; border: 2px dashed var(--akcent); border-radius: 9px; background: var(--akcent-jasny); color: var(--akcent); font: 700 13.5px var(--sans); cursor: pointer; }
.dodaj-zdjecie:hover { background: #d9e2ee; }
.grafika-lista { border-top: 1px solid var(--linia); padding-top: 16px; }
.grafika-lista:first-child { border-top: 0; padding-top: 0; }
.edytor__formularz .pole input, .edytor__formularz .pole textarea, .edytor__formularz .pole select { background: var(--karta); border: 1px solid var(--linia); border-radius: 8px; }
.edytor__formularz .pole label { font-size: 13px; font-weight: 600; }
.sekcja-glowa { border-bottom: 1px solid var(--linia-2); padding-bottom: 12px; }
.sekcja-glowa__strona { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--szary); margin: 0 0 2px; }
.sekcja-glowa h2 { font-size: 17px; margin: 0; }
.sekcja-glowa__opis { color: var(--szary); font-size: 13px; margin: 4px 0 0; }

.pole { position: relative; }
.pole label small { font-weight: 500; color: var(--szary); }
.pole__glowa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pole__pomoc { font-size: 13px; color: var(--szary); margin: 0; }
.pole__pomoc--szara { font-size: 12px; opacity: .8; }
.pole__blad { font-size: 13px; color: var(--czerwony); font-weight: 600; margin: 0; }
.pole--blad > input, .pole--blad > textarea, .pole--blad > select, .pole--blad .zdjecie, .pole--blad > .upusc { border-color: var(--czerwony) !important; box-shadow: 0 0 0 1px var(--czerwony); }
.pole--mignij { animation: mignij 1.2s ease; border-radius: 8px; }
@keyframes mignij { 0%, 60% { box-shadow: 0 0 0 6px rgba(47, 111, 208, .25); background: rgba(47, 111, 208, .06); } 100% { box-shadow: none; } }
.pole textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.licznik { font-size: 12px; color: var(--szary); font-variant-numeric: tabular-nums; }
.licznik--blisko { color: #9a6b1f; font-weight: 700; }
.z-jednostka { display: flex; align-items: center; gap: 8px; }
.z-jednostka input { max-width: 180px; }
.z-jednostka span { font-weight: 600; color: var(--szary); }

.formatowanie { display: flex; gap: 4px; flex-wrap: wrap; }
.formatowanie button { border: 1px solid var(--linia); background: var(--tlo); border-radius: 7px; padding: 4px 10px; font: 600 12px var(--sans); color: var(--atrament); cursor: pointer; }
.formatowanie button:hover { background: var(--tlo-2); }

.przelacznik { display: flex; align-items: center; gap: 12px; font-weight: 600; cursor: pointer; }
.przelacznik input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.przelacznik__suwak { width: 44px; height: 26px; border-radius: 6px; background: var(--tlo-2); position: relative; transition: background .2s; flex: none; }
.przelacznik__suwak::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--karta); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.przelacznik input:checked + .przelacznik__suwak { background: var(--zielony); }
.przelacznik input:checked + .przelacznik__suwak::after { transform: translateX(18px); }
.przelacznik input:focus-visible + .przelacznik__suwak { outline: 2px solid var(--akcent); outline-offset: 2px; }

/* Zdjęcia */
.upusc { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 2px dashed var(--linia); border-radius: 8px; background: var(--tlo); padding: 18px; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, background .2s; }
.upusc:hover, .upusc--nad { border-color: var(--akcent); background: var(--akcent-jasny); }
.upusc__ikona { width: 44px; height: 44px; border-radius: 8px; background: var(--karta); display: grid; place-items: center; font-size: 22px; color: var(--akcent); flex: none; }
.upusc b { display: block; }
.upusc small { color: var(--szary); }
.zdjecie { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; border: 1px solid var(--linia); border-radius: 8px; padding: 10px; }
.zdjecie img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--tlo-2); }
.zdjecie__akcje { display: grid; gap: 8px; justify-items: start; }
.zdjecie__uwaga { font-size: 12px; color: #9a6b1f; }
.wgrywanie { opacity: .6; pointer-events: none; position: relative; }
.wgrywanie::after { content: "Wgrywanie…"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; background: rgba(255,255,255,.7); border-radius: inherit; }
.pole--wewn { margin-top: 10px; }

/* Listy */
.pole--lista { border-top: 1px solid var(--linia); padding-top: 16px; }
.lista-glowa h3 { font-size: 16px; margin: 0; }
.lista-glowa__ile { font-weight: 600; color: var(--szary); }
.elementy { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.element { border: 1px solid var(--linia); border-radius: 8px; background: var(--karta); }
.element--otwarty { border-color: var(--akcent); box-shadow: 0 6px 20px -12px rgba(24, 47, 77, .4); }
.element__glowa { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 4px; }
.element__tytul { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: left; font: 600 14px var(--sans); color: var(--atrament); padding: 6px 8px; cursor: pointer; border-radius: 8px; }
.element__tytul:hover { background: var(--tlo); }
.element__tytul span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.element__tytul img { width: 40px; height: 30px; object-fit: cover; border-radius: 5px; flex: none; }
.element__tytul::before { content: "▸"; color: var(--szary); transition: transform .2s; }
.element--otwarty .element__tytul::before { transform: rotate(90deg); }
.element__akcje { display: flex; gap: 2px; }
.element__akcje button { width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; cursor: pointer; font-size: 14px; color: var(--szary); }
.element__akcje button:hover:not(:disabled) { background: var(--tlo-2); color: var(--atrament); }
.element__akcje button:disabled { opacity: .3; cursor: default; }
.element__akcje .element__usun:hover { background: #f6dfe0 !important; color: var(--czerwony) !important; }
.element__pola { display: grid; gap: 16px; padding: 8px 14px 16px; border-top: 1px solid var(--linia); }
.element__pola .pole--lista { border-top: 0; padding-top: 0; }
.dodaj-element { margin-top: 10px; width: 100%; border: 1px dashed var(--akcent); background: var(--akcent-jasny); color: var(--akcent); border-radius: 8px; padding: 12px; font: 700 14px var(--sans); cursor: pointer; }
.dodaj-element:hover { background: #d9e2ee; }

/* Podgląd: na całą szerokość, wysoki na ekran */
.edytor__podglad { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 236px); min-height: 480px; }
.podglad__pasek { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.podglad__tytul { display: flex; align-items: baseline; gap: 8px; margin-right: auto; min-width: 0; }
.podglad__tytul h2 { font-size: 15px; margin: 0; white-space: nowrap; }
.podglad__strona { font-size: 12.5px; color: var(--szary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podglad__narzedzia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.podglad__wskazowka { margin: 0; font-size: 12.5px; color: var(--szary); flex: 1 1 100%; order: 3; }
.ramka { --szer: 100%; flex: 1; min-height: 0; width: 100%; max-width: var(--szer); margin: 0 auto; border-radius: 8px; overflow: hidden; border: 1px solid var(--linia); background: var(--karta); box-shadow: 0 20px 50px -30px rgba(0,0,0,.35); transition: max-width .3s; }
.ramka--telefon { border: 10px solid #1f2328; border-radius: 26px; }
.ramka iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Okna */
.wersje { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.wersja { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--linia); border-radius: 8px; padding: 12px 14px; }
.wersja p { margin: 0; }
.wersja__kiedy { font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wersja__opis { font-size: 14px; }
.wersja__kto { font-size: 12px; color: var(--szary); }
.wersja__akcje { display: flex; align-items: center; gap: 12px; flex: none; }
.wersja--bazowa { border-color: var(--akcent); }
.znacznik--bazowa { display: inline-flex; align-items: center; gap: 4px; background: var(--akcent-jasny); color: var(--akcent); }
/* Punkty powrotu (etap 4, 27.10): bazowa | na stronie teraz | poprzednia publikacja */
.punkty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.punkt { border: 1px solid var(--linia); border-radius: 10px; padding: 12px 14px; display: grid; gap: 5px; align-content: start; background: var(--karta); }
.punkt--bazowa { border-color: var(--akcent); background: var(--akcent-jasny); }
.punkt p { margin: 0; }
.punkt__etykieta { display: flex; align-items: center; gap: 6px; font: 700 11.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--szary); }
.punkt--bazowa .punkt__etykieta { color: var(--akcent); }
.punkt__kiedy { font-weight: 700; font-size: 14px; }
.punkt__kiedy--brak { font-weight: 500; color: var(--szary); font-size: 13px; }
.punkt__opis { font-size: 12.5px; color: var(--szary); line-height: 1.4; }
.punkt .przycisk, .punkt .znacznik { justify-self: start; margin-top: 4px; }
@media (max-width: 640px) { .punkty { grid-template-columns: 1fr; } .wersja { flex-direction: column; align-items: flex-start; gap: 8px; } }
.wgraj { display: inline-flex; margin-bottom: 14px; }
/* okno biblioteki: przycisk „Wgraj zdjęcia” po lewej, opis w tym samym wierszu po prawej */
.biblioteka-gora { display: flex; align-items: center; gap: 18px; margin: 14px 0 16px; }
.biblioteka-gora .wgraj { margin: 0; flex: none; }
.biblioteka-gora .okno__opis { margin: 0; flex: 1; min-width: 0; }
@media (max-width: 640px) { .biblioteka-gora { flex-wrap: wrap; gap: 10px; } .biblioteka-gora .okno__opis { flex-basis: 100%; } }   /* wąski ekran: opis pod przyciskiem */
.wgraj input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wgraj span { background: var(--akcent); color: #fff; font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 8px; cursor: pointer; }
.wgraj input:focus-visible + span { outline: 2px solid var(--akcent); outline-offset: 2px; }
/* poprzednie zdjęcia w tym miejscu – poziome kafelki w nagłówku okna, przed „×” */
.okno__glowa .biblioteka-historia { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 12px 0 auto; }
/* kafelek: trzy kolumny – miniatura | opis z datą | wąska kolumna z przyciskiem (oddzielona linią) */
.biblioteka-historia__kafel { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-width: 320px; padding: 6px; border: 1px solid var(--linia); border-radius: 10px; background: var(--tlo); }
.biblioteka-historia__kafel--pierwotne { border-color: var(--akcent); }
.biblioteka-historia__kafel img { width: 64px; height: 46px; object-fit: cover; border-radius: 6px; background: var(--tlo-2); display: block; }
.biblioteka-historia__opis { display: grid; gap: 2px; min-width: 0; line-height: 1.25; }
.biblioteka-historia__opis b { font-size: 12.5px; color: var(--atrament); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biblioteka-historia__opis small { font-size: 11px; color: var(--szary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biblioteka-historia__akcja { display: flex; align-items: center; align-self: stretch; padding-left: 12px; border-left: 1px solid var(--linia); }
.biblioteka-historia__kafel .przycisk { height: 30px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 640px) {
  #okno-biblioteka .okno__glowa { flex-wrap: wrap; }
  .okno__glowa .biblioteka-historia { order: 3; width: 100%; justify-content: flex-start; margin: 4px 0 0; }
  .biblioteka-historia__kafel { width: 100%; min-width: 0; grid-template-columns: 56px minmax(0, 1fr) auto; }
  .biblioteka-historia__kafel img { width: 56px; height: 42px; }
  .biblioteka-historia__opis b, .biblioteka-historia__opis small { white-space: normal; }   /* wąski ekran: zawijanie zamiast wielokropka */
}
.biblioteka { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-height: 55vh; overflow: auto; }
.miniatura { margin: 0; border: 1px solid var(--linia); border-radius: 8px; overflow: hidden; }
.miniatura__wybierz { display: block; width: 100%; border: 0; padding: 0; background: var(--tlo-2); cursor: pointer; }
.miniatura__wybierz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .2s; }
.miniatura__wybierz:hover img { opacity: .85; }
.miniatura figcaption { display: flex; justify-content: space-between; padding: 6px 10px; font-size: 12px; color: var(--szary); }

.dymek-komunikat { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; background: var(--atrament); color: #fff; padding: 12px 18px; border-radius: 8px; font-weight: 600; box-shadow: 0 16px 40px -12px rgba(0,0,0,.5); max-width: calc(100% - 32px); }
.dymek-komunikat--ok { background: var(--zielony); }
.dymek-komunikat--blad { background: var(--czerwony); }

/* Węższe ekrany */
@media (max-width: 1000px) {
  .edytor__podglad { height: 70vh; min-height: 0; }
}
@media (max-width: 760px) {
  .edytor__panel { top: 56px; width: 100%; border-left: 0; }
}
@media (max-width: 600px) {
  .sekcja-glowa__wybor { margin-left: 0; width: 100%; }
  .sekcja-glowa__wybor select { max-width: none; flex: 1; }
  .siatka-zdjec { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .zakladki { width: 100%; }
  .zakladki button { flex: 1; justify-content: center; }
}

/* ---------- Kadrowanie (etap 3, 27.10): ramka w proporcji miejsca, zdjęcie przesuwane myszą/palcem, powiększenie suwakiem ---------- */
.okno-kadr { max-width: 720px; }
.kadr__proporcje { margin: 0 0 12px; flex-wrap: wrap; width: fit-content; }
.kadr__proporcje button { padding: 6px 11px; font-size: 13px; }
.kadr__info { font-size: 13px; color: var(--szary); padding: 6px 4px; }
.kadr__scena { display: grid; place-items: center; padding: 12px; border-radius: 10px; background: radial-gradient(circle at 1px 1px, var(--linia) 1px, transparent 1.5px) 0 0 / 16px 16px, var(--tlo-2); }
.kadr__ramka { position: relative; overflow: hidden; background: #111; cursor: grab; touch-action: none; user-select: none; border-radius: 4px; box-shadow: 0 0 0 2px var(--akcent), 0 20px 40px -24px rgba(0,0,0,.6); }
.kadr__ramka:active { cursor: grabbing; }
.kadr__ramka:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; }
.kadr__ramka img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; will-change: transform; }
/* linie trójpodziału – pomagają ustawić kadr */
.kadr__ramka::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to right, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(to bottom, transparent calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% - .5px), rgba(255,255,255,.35) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% - .5px), rgba(255,255,255,.35) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.kadr__zoom { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: 13px; font-weight: 600; }
.kadr__zoom input { flex: 1; accent-color: var(--akcent); }
.kadr__akcje { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kadr__akcje .status { margin-left: auto; }
.zdjecie__przyciski { display: flex; gap: 6px; flex-wrap: wrap; }
.zdjecie__uwaga--kadr { color: var(--szary); }
/* zdjęcie przy udostępnianiu linku bez własnego: domyślny obrazek strony (logo i nazwa) ze znacznikiem i jednym przyciskiem */
.zdjecie--domyslne { border-style: dashed; }
.zdjecie--domyslne img { object-fit: contain; background: var(--v2-tlo); }
.zdjecie__znacznik { padding: 2px 8px; border-radius: 999px; background: var(--v2-granat-jasny); color: var(--v2-granat); font: 600 11.5px var(--sans); }
.zdjecie__uwaga--domyslne { color: var(--v2-szary); line-height: 1.45; }

/* Poprzednie zdjęcia w tym miejscu (z opublikowanej treści i wersji, aż do bazowej) */
.historia-zdjec { margin-top: 8px; }
.historia-zdjec__pokaz { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.historia-zdjec__lista { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.historia-zdjec__info { font-size: 12.5px; color: var(--szary); }
.historia-zdjec__poz { display: grid; gap: 3px; width: 116px; border: 1px solid var(--linia); border-radius: 8px; padding: 6px; background: var(--karta); font-size: 11.5px; color: var(--szary); }
.historia-zdjec__poz--pierwotne { border-color: var(--akcent); }
.historia-zdjec__poz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: var(--tlo-2); }
.historia-zdjec__poz b { color: var(--atrament); font-size: 11.5px; }
.historia-zdjec__poz .link-przycisk { justify-self: start; font-size: 12px; margin-top: 2px; }
.historia-zdjec--kafel { padding-top: 6px; border-top: 1px dashed var(--linia); }
.historia-zdjec--kafel .historia-zdjec__lista { margin-top: 0; }
.historia-zdjec--kafel .historia-zdjec__poz { width: 100%; }

/* ---------- nieopublikowane zmiany (27.10): przycisk w pasku nad podglądem i lista „było → jest” w panelu ---------- */
.pasek__lewa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.zmiany-przycisk { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 10px; border-radius: 8px; border: 1px solid #f0d3a8; background: #fdf5e9; color: #8a5a12; font: 600 12.5px var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.zmiany-przycisk:hover { background: #fbecd5; border-color: #e6b46a; }
.zmiany-przycisk b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 6px; background: #e08a1e; color: #fff; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; }
html[data-motyw="ciemny"] .zmiany-przycisk { background: #3a2d14; border-color: #5c4519; color: #f3c784; }
html[data-motyw="ciemny"] .zmiany-przycisk:hover { background: #46361a; }

.przeglad-zmian { display: grid; gap: 4px; }   /* nie .zmiany – ta klasa jest już w panel.css (inny moduł) */
.zmiany__ile { margin: 0; font-size: 14px; color: var(--szary); }
.zmiany__ile b { color: var(--atrament); font-size: 16px; }
.zmiany__wskazowka { margin: 4px 0 0; font-size: 12.5px; color: var(--szary); line-height: 1.45; }
.zmiany__strona h3 { margin: 18px 0 8px; font: 700 11.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--szary); }
.zmiany__sekcja-nazwa { margin: 0 0 6px; font: 600 13.5px var(--sans); color: var(--atrament); }
.zmiany__lista { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.zmiana { border: 1px solid var(--linia); border-radius: 10px; background: var(--karta); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.zmiana--aktywna { border-color: var(--akcent); box-shadow: 0 0 0 1px var(--akcent); }
.zmiana__pokaz { display: grid; gap: 7px; padding: 10px 12px; cursor: pointer; }
.zmiana__pokaz:hover { background: var(--tlo-2); }
.zmiana__pokaz:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; }
.zmiana__etykieta { font: 600 12.5px/1.35 var(--sans); color: var(--atrament); }
.zmiana__teksty { display: grid; gap: 5px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.zmiana__wiersz { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
.zmiana__etyk { font: 700 10px/20px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--szary); }
.zmiana__bylo { color: var(--szary); }
.zmiana__jest { color: var(--atrament); }
.zmiana__teksty i { color: var(--szary); }
.zmiana__bylo del { background: #fde8e8; color: #9b1c1c; border-radius: 3px; text-decoration: line-through; text-decoration-color: rgba(155, 28, 28, .5); }
.zmiana__jest ins { background: #dff3e6; color: #1f6b3a; border-radius: 3px; text-decoration: none; }
html[data-motyw="ciemny"] .zmiana__bylo del { background: #3a1d20; color: #f4a9a9; }
html[data-motyw="ciemny"] .zmiana__jest ins { background: #1f3326; color: #9fdcb2; }
.zmiana__zdjecia { display: flex; align-items: center; gap: 10px; }
.zmiana__fotka { display: grid; gap: 3px; }
.zmiana__fotka img, .zmiana__brak { width: 128px; height: 84px; object-fit: cover; border-radius: 6px; background: var(--tlo-2); display: grid; place-items: center; font-size: 11.5px; color: var(--szary); }
.zmiana__fotka small { font: 700 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--szary); }
.zmiana__strzalka { color: var(--szary); font-size: 16px; }
.zmiana__znacznik { justify-self: start; font: 600 12px var(--sans); padding: 3px 9px; border-radius: 6px; }
.zmiana__znacznik--nowy { background: #dff3e6; color: #1f6b3a; }
.zmiana__znacznik--usuniety { background: #fde8e8; color: #9b1c1c; }
.zmiana__znacznik--kolejnosc { background: var(--tlo-2); color: var(--atrament); }
html[data-motyw="ciemny"] .zmiana__znacznik--nowy { background: #1f3326; color: #9fdcb2; }
html[data-motyw="ciemny"] .zmiana__znacznik--usuniety { background: #3a1d20; color: #f4a9a9; }
.zmiana__akcje { display: flex; align-items: center; gap: 16px; padding: 7px 12px; border-top: 1px solid var(--linia); background: var(--tlo); }
.zmiana__akcje .link-przycisk { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: 600 12.5px var(--sans); color: var(--akcent); cursor: pointer; }
.zmiana__akcje .link-przycisk:hover { text-decoration: underline; }
.zmiana__akcje .zmiana__cofnij { margin-left: auto; color: var(--szary); }
.zmiana__akcje .zmiana__cofnij:hover { color: var(--czerwony); }
.zmiany__stopka { position: sticky; bottom: -28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 8px -16px -28px; padding: 12px 16px 16px; background: var(--karta); border-top: 1px solid var(--linia); }
.zmiany__notka { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--szary); text-align: right; }
.zmiany__pusto { display: grid; justify-items: center; gap: 6px; padding: 40px 12px; text-align: center; }
.zmiany__pusto-ikona { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #e3f1e8; color: var(--zielony); }
.zmiany__pusto p { margin: 0; color: var(--szary); font-size: 13px; }
.zmiana__element { display: flex; align-items: center; gap: 10px; }
.zmiana__element img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--tlo-2); }
.zmiana__element .zmiana__znacznik { justify-self: auto; }

/* panel „Zdjęcia na stronie” (kafelek „Zdjęcia”): miniatury w siatce pod nazwą części; klik – podgląd przewija do zdjęcia,
   panel otwiera jego pole. Kropka w rogu – zdjęcie zmienione, jeszcze nieopublikowane. */
.zdjecia-strony { display: grid; gap: 4px; }
.zdjecia-strony__wskazowka { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--v2-szary); }
.zdjecia-strony__strona h3 { margin: 18px 0 4px; font: 700 11.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--v2-szary); }
.zdjecia-strony__sekcja { margin: 10px 0 8px; }
.zdjecia-strony__nazwa { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font: 600 13.5px var(--sans); color: var(--v2-tekst); }
.zdjecia-strony__nazwa svg { width: 15px; height: 15px; flex: none; color: var(--v2-granat); }
.zdjecia-strony__siatka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px 10px; }
.zdjecie-miejsce { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.zdjecie-miejsce__obraz { position: relative; display: block; aspect-ratio: 4 / 3; border: 1px solid var(--v2-ramka-2); border-radius: 8px; overflow: hidden; background: var(--v2-tlo);
  transition: border-color .15s, box-shadow .15s; }
.zdjecie-miejsce__obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zdjecie-miejsce:hover .zdjecie-miejsce__obraz, .zdjecie-miejsce:focus-visible .zdjecie-miejsce__obraz { border-color: var(--v2-granat); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-granat) 18%, transparent); }
.zdjecie-miejsce:focus-visible { outline: none; }
.zdjecie-miejsce__brak { display: grid; place-items: center; align-content: center; gap: 4px; height: 100%; font-size: 11.5px; color: var(--v2-szary); }
.zdjecie-miejsce__brak svg { width: 20px; height: 20px; }
.zdjecie-miejsce__obraz .kropka { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--v2-karta); }
.zdjecie-miejsce__znacznik { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(15, 18, 24, .72); color: #fff; font: 600 10.5px var(--sans); letter-spacing: .02em; }
.zdjecie-miejsce__opis { overflow: hidden; font-size: 12px; line-height: 1.35; color: var(--v2-szary); text-overflow: ellipsis; white-space: nowrap; }
.zdjecie-miejsce:hover .zdjecie-miejsce__opis { color: var(--v2-tekst); }

/* ---------- (29.10.2026) pod nagłówkiem jeden rząd niskich kafelków jak na pulpicie (.kafel2 z wyglad2.css): stan szkicu szerszy,
   potem Części strony · Zdjęcia · Kto publikuje (ukryte kafelki nie zajmują miejsca). Ikony mają wymiary podane w wyglad2.css. ---------- */
.tresci-kafle { display: grid; grid-template-columns: minmax(0, 2.2fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 22px; }
html[data-panel="2"] main .tresci-kafle .kafel2 { min-height: 64px; }
.tresci-stan .kafel2__akcje { flex-wrap: nowrap; }
.tresci-stan #zmiany-pokaz b { font-weight: inherit; }
/* #status zachowuje klasy status--… (stare style pastylki edytora) – w kafelku to zwykły podpis */
.glowny--edytor .tresci-stan .status { display: block; padding: 0; border-radius: 0; background: none; font: 400 12.5px/1.35 var(--sans); color: var(--v2-szary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glowny--edytor .tresci-stan .status::before { content: none; }

.glowny--edytor .podglad__pasek { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-bottom: 8px; }
.podglad__ikona { display: grid; align-self: start; padding-top: 2px; color: var(--v2-granat); }
.podglad__ikona svg { width: 20px; height: 20px; }
.glowny--edytor .podglad__tytul { display: grid; gap: 2px; margin: 0; }
.glowny--edytor .podglad__tytul h2 { font: 700 15.5px/1.35 var(--sans); white-space: normal; }
.glowny--edytor .podglad__strona { margin-left: 8px; font: 500 13px var(--sans); color: var(--v2-szary); }
/* jedna podstrona – nazwa „Strona główna” nic nie mówi */
.podstrony[hidden] + .edytor__podglad .podglad__strona { display: none; }
.glowny--edytor .podglad__wskazowka { order: 0; flex: none; margin: 0; font-size: 12.5px; color: var(--v2-szary); }
.glowny--edytor .podglad__narzedzia { gap: 16px; flex-wrap: nowrap; }
.glowny--edytor .lata { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--v2-ramka); border-radius: 9px; background: var(--v2-karta); }
.glowny--edytor .lata button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--v2-szary); font: 500 13px var(--sans); cursor: pointer; }
.glowny--edytor .lata button svg { width: 15px; height: 15px; }
.glowny--edytor .lata button[aria-selected="true"] { background: var(--v2-granat); color: #fff; }
html[data-motyw="ciemny"] .glowny--edytor .lata button[aria-selected="true"] { color: #0f1a2a; }
.podglad__nowa { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-granat); font: 600 13px var(--sans); text-decoration: none; white-space: nowrap; }
.podglad__nowa svg { width: 14px; height: 14px; }
.podglad__nowa:hover { text-decoration: underline; }
/* po przewinięciu do podglądu pasek i ramka wypełniają ekran pod górnym paskiem */
.glowny--edytor .edytor__podglad { height: calc(100vh - var(--v2-pasek, 84px) - 24px); }

/* do 1500 px (z menu po lewej) jeden rząd byłby za ciasny na podpisy: stan szkicu na całą szerokość, skróty pod nim */
@media (max-width: 1500px) {
  .tresci-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
  .tresci-kafle .tresci-stan { grid-column: 1 / -1; }
}
@media (max-width: 1180px) {
  .glowny--edytor .podglad__pasek { grid-template-columns: auto minmax(0, 1fr); }
  .glowny--edytor .podglad__narzedzia { grid-column: 1 / -1; flex-wrap: wrap; }
}
@media (max-width: 1000px) {
  .glowny--edytor .edytor__podglad { height: 70vh; }
}
@media (max-width: 600px) {
  .tresci-kafle { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html[data-panel="2"] main .tresci-stan { flex-direction: column; align-items: stretch; }
  .glowny--edytor .tresci-stan .status { white-space: normal; }
  .podglad__ikona { display: none; }
  .glowny--edytor .podglad__pasek { grid-template-columns: minmax(0, 1fr); }
  .glowny--edytor .lata button { padding: 0 10px; }
}