* { box-sizing: border-box; }

html, body {
    /* overscroll-behavior: none — gdy scroll dobija do góry/dołu strony,
       Chrome na Windows próbuje propagować gest (overscroll / nawigacja wstecz)
       i system gra „Default Beep" (pyknięcie). To wyłącza propagację na granicy
       — normalne scrollowanie działa, znika dźwięk i bounce. */
    overscroll-behavior: none;
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: #f4f5f7;
    color: #1c1c1f;
    line-height: 1.45;
    font-size: 14px;
}

/* === SCROLL CHAINING FIX — globalnie dla WSZYSTKICH modali === */
/* Pułapka: gdy scroll wewnątrz modalu dochodzi do końca (góra/dół), browser
   zaczyna scrollować tło (galeria pod modalem). overscroll-behavior: contain
   zatrzymuje propagację na granicy modalu.
   Stosujemy GLOBALNIE na:
   - sam <dialog> (główny kontener)
   - wszystkie scrollowane wnętrza modali (modal-lista, modal-tresc, lista-tagow,
     lista-tagow-chipy itp.)
   To regula żeby NIGDY już nie wracać do tego problemu. */
dialog,
dialog[open] {
    overscroll-behavior: contain;
}
dialog .modal-lista,
dialog .modal-tresc,
dialog .lista-tagow,
dialog .lista-tagow-chipy,
dialog .lista-kategorii,
dialog ul,
dialog ol,
dialog [class*="lista"],
dialog [class*="-tresc"] {
    overscroll-behavior: contain;
}

/* --- LAYOUT z pionowym sidebar --- */
.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #1c1c1f;
    color: #fff;
    padding: 0.5rem 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: width 0.2s ease;
    position: relative;
}

.toggle-sidebar {
    align-self: flex-end;
    background: transparent;
    border: 1px solid #3a3a3e;
    color: #c8c8cc;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    margin: 0 0.5rem 0.25rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}
.toggle-sidebar:hover { color: #fff; background: #26262a; }

.sidebar .brand-skrot,
.sidebar .mi-skrot { display: none; }

.sidebar.zwinieta {
    width: 56px;
}
.sidebar.zwinieta .brand-pelna,
.sidebar.zwinieta .mi-pelna { display: none; }
.sidebar.zwinieta .brand-skrot,
.sidebar.zwinieta .mi-skrot {
    display: inline-block;
    text-align: center;
    width: 100%;
}
.sidebar.zwinieta .brand { padding: 0; text-align: center; font-size: 1rem; }
.sidebar.zwinieta .menu-item { text-align: center; padding: 0.7rem 0; border-left: 3px solid transparent; }
.sidebar.zwinieta .menu-item.active { border-left-color: #6fa8ff; }
.sidebar.zwinieta .toggle-sidebar { align-self: center; margin: 0 0 0.25rem; }

.brand {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.3px;
    padding: 0 1.25rem;
    line-height: 1.3;
}

.brand:hover { opacity: 0.85; }

.menu {
    display: flex;
    flex-direction: column;
}

.menu-item {
    color: #c8c8cc;
    text-decoration: none;
    padding: 0.7rem 1.25rem;
    border-left: 3px solid transparent;
    font-size: 0.95rem;
}

.menu-item:hover {
    color: #fff;
    background: #26262a;
}

.menu-item.active {
    color: #fff;
    background: #26262a;
    border-left-color: #6fa8ff;
}

/* Wykrzyknik „są nieprzeczytane" przy pozycji menu (dziś: Allegro → wiadomości).
   Bliźniak plakietki przy pod-zakładce (apps/allegro/static/allegro.css → .al-wykrzyknik).
   UWAGA: display na elemencie przebija atrybut `hidden`, więc [hidden] MUSI mieć
   jawne display:none — inaczej plakietka świeci się zawsze. */
.menu-wykrzyknik {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.05rem; height: 1.05rem; margin-left: 0.4rem; padding: 0 0.25rem;
    border-radius: 999px; background: #dc2626; color: #fff;
    font-size: 0.72rem; font-weight: 700; line-height: 1; vertical-align: middle;
    animation: menu-puls-wykrzyknik 2s ease-out infinite;
}

.menu-wykrzyknik[hidden] { display: none; }

@keyframes menu-puls-wykrzyknik {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.65); }
    70%  { box-shadow: 0 0 0 0.4rem rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .menu-wykrzyknik { animation: none; }
}

.content {
    flex: 1;
    min-width: 0;
    padding: 1.25rem 1.5rem 2rem;
}

@media (max-width: 800px) {
    .layout { flex-direction: column; }
    .sidebar { width: 100%; padding: 0.5rem 0; gap: 0.25rem; }
    .menu { flex-direction: row; flex-wrap: wrap; }
    .menu-item { border-left: none; border-bottom: 3px solid transparent; }
    .menu-item.active { border-left: none; border-bottom-color: #6fa8ff; }
}

h1 {
    margin: 0.25rem 0 1rem;
    font-size: 1.35rem;
    font-weight: 600;
}

h2 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #555;
}

h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #444;
}

/* --- GRID 3-KOLUMNOWY --- */
.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 1rem;
}

@media (max-width: 1100px) {
    .grid-3 { grid-template-columns: 1fr; }
}

/* --- PANELE --- */
.panel {
    background: #fff;
    border: 1px solid #e3e4e8;
    border-radius: 6px;
    padding: 1rem;
}

.panel-full { margin-bottom: 1rem; }

/* --- FORMULARZE --- */
label {
    display: block;
    font-size: 0.8rem;
    color: #555;
    margin: 0.6rem 0 0.2rem;
}

input[type="text"],
input[type="file"],
textarea,
select {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid #cfd1d6;
    border-radius: 4px;
    font: inherit;
    background: #fff;
}

textarea {
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #6fa8ff;
    box-shadow: 0 0 0 2px rgba(111, 168, 255, 0.25);
}

/* --- PRZYCISKI --- */
button, .btn-as-label {
    appearance: none;
    background: #ececef;
    color: #1c1c1f;
    border: 1px solid #cfd1d6;
    padding: 0.45rem 0.85rem;
    border-radius: 4px;
    font: inherit;
    cursor: pointer;
}

button:hover, .btn-as-label:hover { background: #dee0e4; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.primary {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #fff;
}
button.primary:hover { background: #1d4ed8; }

button.ghost {
    background: transparent;
    border-color: #cfd1d6;
    color: #555;
}

button.danger {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #b91c1c;
    font-weight: 600;
}
button.danger:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

button.btn-mini {
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
}

button.btn-x {
    padding: 0.15rem 0.45rem;
    font-size: 0.85rem;
    background: transparent;
    border-color: transparent;
    color: #b91c1c;
    line-height: 1;
}
button.btn-x:hover { background: #fee; }

.row-btn {
    display: flex;
    gap: 0.4rem;
    margin: 0.65rem 0;
    flex-wrap: wrap;
}

.row-btn.col { flex-direction: column; }
.row-btn.col button { width: 100%; }

.row-inline {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.row-inline > input[type="text"],
.row-inline > input[type="password"],
.row-inline > input[type="number"],
.row-inline > select { flex: 1; min-width: 0; }
.row-inline input[type="checkbox"],
.row-inline input[type="radio"] { flex: 0 0 auto; width: auto; }
label.row-inline { justify-content: flex-start; cursor: pointer; }

/* --- LISTY --- */
.lista {
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    margin-top: 0.75rem;
    background: #fafafb;
}

.lista-naglowek {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid #e3e4e8;
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lista-items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.lista-items li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #f0f0f3;
    font-size: 0.9rem;
}

.lista-items li:last-child { border-bottom: none; }

.lista-items li.puste {
    color: #888;
    font-style: italic;
    justify-content: center;
    padding: 0.75rem;
}

.lista-tagi li { background: #eef4ff; }

.lista-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.3rem;
    padding: 0.5rem;
    max-height: 280px;
}

.lista-thumbs li { background: #ececef; height: 70px; border: none; }

/* --- BIBLIOTEKA --- */
.upload-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
}

@media (max-width: 800px) {
    .upload-row { grid-template-columns: 1fr; }
}

.dropzone {
    border: 2px dashed #cfd1d6;
    border-radius: 6px;
    padding: 1.5rem;
    text-align: center;
    background: #fafafb;
}

.dropzone p { margin: 0.3rem 0; }
.dropzone .hint { color: #888; font-size: 0.85rem; }

.cowork-box {
    background: #f7faff;
    border: 1px solid #d3e0f5;
    border-radius: 6px;
    padding: 1rem;
}

.filtr-bar {
    display: grid;
    grid-template-columns: 1.5fr 1fr auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

/* Filtr Biblioteki — KOMPAKTOWY PASEK W JEDNEJ LINII.
   Wcześniej był układ jednokolumnowy (`grid-template-columns: 1fr`): każdy filtr
   rozciągał się na pełną szerokość panelu, więc cztery pola zajmowały cztery rzędy
   po ~2000 px i zmiana filtra wymagała wodzenia wzrokiem przez cały ekran.
   Teraz flex z zawijaniem — pola są tylko tak szerokie, jak potrzeba, a pasek łamie
   się dopiero, gdy zabraknie miejsca. */
#filtry-zawartosc-bib .filtr-bar {
    display: flex;
    flex-wrap: wrap;
    /* flex-start, NIE flex-end — przyciski są odrobinę wyższe od selectów, więc przy
       wyrównaniu do dołu ich etykiety podskakiwały o kilka pikseli i rząd etykiet
       robił się „schodkowy". */
    align-items: flex-start;
    gap: 0.45rem 0.9rem;
}
/* Przyciski w pasku do wysokości selectów — żeby rząd kontrolek był równy. */
#filtry-zawartosc-bib .filtr-bar .btn-mini {
    padding: 0.3rem 0.5rem;
    line-height: 1.2;
}
/* Grupa = etykieta nad kontrolką, szerokość dopasowana do treści. */
#filtry-zawartosc-bib .filtr-bar > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
#filtry-zawartosc-bib .filtr-bar label {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.15;
    white-space: nowrap;
}
/* Bazowe `select { width: 100% }` rozpychało pola na całą szerokość — tu zawężamy. */
#filtry-zawartosc-bib .filtr-bar select {
    width: auto;
    min-width: 8.5rem;
    max-width: 13rem;
    padding: 0.3rem 0.45rem;
}
/* Szukajka Biblioteki NIE jest już w pasku filtrów — siedzi tuż nad galerią
   (`.bib-szukaj-pasek` niżej), żeby przy wpisywaniu frazy patrzeć od razu na wyniki. */

/* Przyciski czyszczące pola = czerwony X (Rules.md: piktogram tylko przy usuwaniu).
   `min-width` trzyma je równe, żeby kolumna „X" nie skakała między wierszami filtrów. */
#filtry-zawartosc-bib .filtr-bar .btn-mini.danger,
.bib-szukaj-pasek .btn-mini.danger,
.filtr-zakres .btn-mini.danger {
    min-width: 2rem;
    padding: 0.3rem 0.5rem;
    line-height: 1.2;
}
/* Kolekcje (multi): etykieta nad całością, a przyciski i chipy wybranych kolekcji
   w JEDNYM rzędzie — inaczej ta grupa byłaby wyższa od reszty i łamała pasek.
   Selektor musi mieć dwie klasy, żeby przebić `.filtr-bar > div` wyżej. */
#filtry-zawartosc-bib .filtr-bar > .bib-filtr-kolekcje-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.15rem 0.4rem;
}
#filtry-zawartosc-bib .bib-filtr-kolekcje-wrap > label { grid-column: 1 / -1; }
#filtry-zawartosc-bib .bib-wybrane-kolekcje-chipy {
    margin-top: 0;
    min-height: 0;
    max-width: 24rem;
}

/* Szukajka Biblioteki tuż nad galerią — etykieta, pole i X w jednej linii. */
.bib-szukaj-pasek {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 0.6rem;
}
.bib-szukaj-pasek label {
    margin: 0;
    font-size: 0.82rem;
    white-space: nowrap;
}
/* Globalny `.szukaj-wrap` ma `flex-wrap: wrap` — tutaj X musi zostać przy polu. */
.bib-szukaj-pasek .szukaj-wrap { flex-wrap: nowrap; }
.bib-szukaj-pasek input[type="text"] {
    flex: 0 1 18rem;
    max-width: 18rem;
    padding: 0.3rem 0.45rem;
}

/* Wąski ekran — wracamy do pełnej szerokości, żeby nic się nie ścisnęło. */
@media (max-width: 900px) {
    #filtry-zawartosc-bib .filtr-bar > div { flex: 1 1 100%; }
    #filtry-zawartosc-bib .filtr-bar select { width: 100%; max-width: none; }
    .bib-szukaj-pasek input[type="text"] { flex: 1 1 auto; max-width: none; }
}

.filtr-akcje {
    display: flex;
    gap: 0.4rem;
}

@media (max-width: 800px) {
    .filtr-bar { grid-template-columns: 1fr; }
}

.grid-zdjec {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem;
}

.karta-pusta {
    background: #fafafb;
    border: 1px dashed #d3d4d8;
    border-radius: 6px;
    padding: 1.2rem 0.8rem;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- TAGOWANIE --- */
.podglad-zdjecia {
    background: #fafafb;
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.placeholder-box {
    color: #888;
    font-size: 0.9rem;
    padding: 1rem;
    text-align: center;
}

.hint { color: #888; font-size: 0.85rem; margin: 0.4rem 0 0.6rem; }

/* === TAGOWANIE: sub-zakładki, toolbar folderu, layout 2-kolumnowy === */
.podzakladki {
    display: flex;
    gap: 0;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid #d3d4d8;
}
.pz-tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    font: inherit;
    color: #555;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
}
.pz-tab:hover { color: #1c1c1f; }
.pz-tab.aktywna {
    background: #fff;
    border-color: #d3d4d8;
    border-bottom-color: #fff;
    color: #1c1c1f;
    font-weight: 600;
}
.pz-tresc { display: none; }
.pz-tresc.aktywna { display: block; }

/* --- Toolbar folderu --- */
.toolbar-folderu {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
}
.toolbar-folderu input[type="text"] {
    flex: 1;
    min-width: 200px;
    width: auto;
}
.check-podfoldery {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    white-space: nowrap;
}
.check-podfoldery input { width: auto; margin: 0; }

/* --- Layout 2-kolumnowy: lewa lista, prawa edytor --- */
.grid-tagowanie-2 {
    display: grid;
    grid-template-columns: minmax(420px, 3fr) minmax(440px, 2fr);
    gap: 0.75rem;
    align-items: start;
}
@media (max-width: 1100px) {
    .grid-tagowanie-2 { grid-template-columns: 1fr; }
}

.kolumna-lewa, .kolumna-prawa {
    background: #fff;
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    padding: 0.6rem;
}

.kolumna-lewa select,
.kolumna-lewa input[type="text"] { margin-bottom: 0.7rem; }
.kolumna-lewa > .row-inline { margin-bottom: 0.7rem; }

/* Blok filtrów zakresowych (Szukaj po nazwie / Wymiar px / Rozmiar KB) — WSPÓLNY grid,
   żeby etykiety, pola „od/do" i przyciski „Wyczyść" stały w równych kolumnach we WSZYSTKICH
   rzędach (różna długość etykiet rozjeżdżała je przy układzie flex).
   Kolumny: [etykieta] [pole od] [„do"] [pole do] [Wyczyść]. */
.filtr-zakres {
    display: grid;
    grid-template-columns: 9.5rem 4.5rem 1.3rem 4.5rem auto;
    align-items: center;
    gap: 0.45rem 0.5rem;
    margin-bottom: 0.5rem;
}
.filtr-zakres > label { margin: 0; font-size: 0.85rem; color: #555; white-space: nowrap; }
.filtr-zakres > span { font-size: 0.85rem; text-align: center; }
.filtr-zakres input[type="text"] { margin: 0; width: 100%; min-width: 0; }
.filtr-zakres > .btn-mini { justify-self: start; white-space: nowrap; }
/* Rząd „Szukaj po nazwie": pole zajmuje kolumny 1-4, a „Wyczyść" kolumnę 5 — dzięki temu
   wszystkie trzy przyciski „Wyczyść" stoją w jednej linii pionowej. Odstęp od selektów wyżej. */
.filtr-szukaj { margin-top: 0.8rem; }
.filtr-szukaj.filtr-zakres > input[type="text"] { grid-column: 1 / 5; }

.pelna-szer { width: 100%; }

/* --- Lista plików --- */
.lista-plikow {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: calc(100vh - 280px);
    min-height: 400px;
    overflow-y: auto;
    border-top: 1px solid #e3e4e8;
    margin-top: 0.4rem;
}
/* Tagowanie — listing wydłużony 2x (po powiększeniu miniatur mieści się mniej wierszy,
   więc dajemy podwójną wysokość, żeby widać było więcej produktów naraz). Tylko
   #lista-plikow (Tagowanie); Biblioteka #bib-lista ma własne max-height: none. */
#lista-plikow {
    max-height: calc((100vh - 280px) * 2);
}
/* Pole „Szukaj po nazwie pliku" (Tagowanie + Biblioteka): węższe + przycisk „Wyczyść"
   tuż obok, żeby nie wędrował na prawy skraj panelu. */
.szukaj-wrap {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.szukaj-wrap input[type="text"] {
    flex: 0 1 14rem;
    min-width: 8rem;
    max-width: 14rem;
}
.lista-plikow .plik {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid #f0f0f3;
    cursor: pointer;
    align-items: center;
}
.lista-plikow .plik:hover { background: #f7faff; }
.lista-plikow .plik.aktywny { background: #eef4ff; border-left: 3px solid #2563eb; padding-left: calc(0.4rem - 3px); }
.lista-plikow .plik.zaznaczony { background: #fffbe6; }
.plik-min {
    width: 48px;
    height: 48px;
    object-fit: cover;
    background: #ececef;
    border-radius: 3px;
    flex-shrink: 0;
    border: 2px solid transparent;     /* baseline, zaznaczone podmienia kolor */
    transition: border-color 0.1s;
}
/* Cienka niebieska ramka na miniaturce zaznaczonego zdjęcia (listing + biblioteka) */
.lista-plikow .plik.zaznaczony .plik-min,
#bib-lista li.plik.zaznaczony .plik-min,
.bib-wiersz.zaznaczony .bib-miniatura,
.bib-wiersz.zaznaczony .plik-min {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
}
/* Tagowanie (lista niezatwierdzonych) — większe miniatury 72x72 (jak sekcje w Edytorze
   Artykułów, klasa sekcja-mini). Biblioteka zostaje na bazowych 48 px (.plik-min wyżej,
   wspólna klasa). Klik w miniaturę otwiera podgląd; scroll/strzałki przeglądają kolejne
   zdjęcia z listy Tagowania. Zmieniamy WYŁĄCZNIE rozmiar — reszta wiersza bez zmian. */
#lista-plikow .plik-min {
    width: 72px;
    height: 72px;
    cursor: zoom-in;
}
.plik-info { flex: 1; min-width: 0; }
.plik-nazwa {
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plik-meta { font-size: 0.75rem; color: #888; }
.plik-opis {
    font-size: 0.78rem;
    color: #444;
    margin-top: 0.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}
.btn-podglad-tagow {
    flex-shrink: 0;
    margin-left: 0.3rem;
}
.modal-podglad {
    text-align: center;
    margin-bottom: 0.6rem;
}
.modal-podglad-img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 4px;
    background: #ececef;
}

/* --- Prawa kolumna: edytor --- */
.kolumna-prawa label { margin-top: 0.5rem; }
.kolumna-prawa .row-btn { margin: 0.4rem 0; }
.kolumna-prawa > button.pelna-szer { margin: 0.4rem 0; }
.kolumna-prawa > button.pelna-szer + button.pelna-szer { margin-top: 0.4rem; }

.podglad-box {
    background: #fafafb;
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
}
.podglad-img {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    display: block;
}

.lista-tagow-zdjecia {
    list-style: none;
    margin: 0.3rem 0;
    padding: 0;
    max-height: 140px;
    overflow-y: auto;
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    background: #fafafb;
}
.tag-item {
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f3;
    font-size: 0.85rem;
}
.tag-item:hover { background: #eef4ff; }
.tag-item.zazn { background: #ffe4e4; }
.tag-pusty { padding: 0.5rem; color: #888; font-style: italic; text-align: center; }

.logi {
    background: #1c1c1f;
    color: #c8c8cc;
    padding: 0.5rem;
    border-radius: 4px;
    max-height: 140px;
    overflow-y: auto;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
    margin: 0.3rem 0 0;
    white-space: pre-wrap;
}

/* === BIBLIOTEKA === */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
    margin: 0.4rem 0 1rem;
}

.stat-karta {
    background: #fff;
    border: 1px solid #e3e4e8;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
}
.stat-l { font-size: 0.78rem; color: #666; text-transform: uppercase; letter-spacing: 0.3px; }
.stat-v { font-size: 1.4rem; font-weight: 600; color: #1c1c1f; line-height: 1.2; }
.stat-h { font-size: 0.75rem; color: #888; margin-top: 0.15rem; }

.bib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.bib-karta {
    background: #fff;
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.bib-karta img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: #ececef;
}
.bib-info { padding: 0.4rem 0.5rem; }
.bib-nazwa {
    font-size: 0.85rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bib-meta { font-size: 0.75rem; color: #666; margin-top: 0.15rem; }
.bib-opis {
    font-size: 0.78rem;
    color: #444;
    margin-top: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === WGRYWANIE w Tagowaniu === */
.grid-logo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 800px) {
    .grid-logo { grid-template-columns: 1fr; }
}

.dropzone-tagowanie {
    border: 2px dashed #cfd1d6;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    text-align: center;
    background: #fafafb;
    margin-bottom: 0.75rem;
    color: #555;
    font-size: 0.9rem;
}

/* Sticky baner postępu wgrywania zdjęć */
.upload-baner {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0.8rem;
    background: #1e3a8a;
    color: #f5f5f7;
    border-radius: 6px;
    margin-bottom: 0.75rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* Pułapka: atrybut hidden jest przebijany przez display: flex powyżej.
   Wymuszamy ukrycie gdy element ma [hidden]. */
.upload-baner[hidden] {
    display: none !important;
}
/* Banner AI tagowania — zielony, żeby się odróżniał od niebieskiego bannera uploadu. */
.upload-baner.ai-baner {
    background: #14532d;
}
#ai-baner-stop {
    margin-left: 0.6rem;
}
#upload-baner-tekst { font-weight: 600; min-width: 18rem; }
.upload-baner-tor {
    flex: 1;
    height: 0.55rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    overflow: hidden;
    min-width: 8rem;
}
#upload-baner-pasek {
    height: 100%;
    background: #4ade80;
    width: 0%;
    transition: width 0.2s;
}
.upload-baner-hint { font-size: 0.78rem; color: #cbd5e1; }
.dropzone-tagowanie.aktywna { border-color: #6fa8ff; background: #eef4ff; }

/* === Tag search w edytorze === */
.tag-search {
    position: relative;
    margin: 0.3rem 0 0.5rem;
}
.tag-suggestions {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #cfd1d6;
    border-radius: 4px;
    background: #fff;
    max-height: 180px;
    overflow-y: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    display: none;
}
.tag-suggestions.widoczne { display: block; }
.tag-suggestions li {
    padding: 0.35rem 0.5rem;
    cursor: pointer;
    font-size: 0.88rem;
    border-bottom: 1px solid #f0f0f3;
}
.tag-suggestions li:hover { background: #eef4ff; }
.tag-suggestions li:last-child { border-bottom: none; }

/* === Modal ostrzeżeń === */
.modal {
    border: none;
    border-radius: 6px;
    padding: 0;
    width: 90vw;
    max-width: 720px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.modal::backdrop { background: rgba(0,0,0,0.4); }

/* === Popup podglądu pełnego zdjęcia — wzorzec 1:1 z Biblioteki Artykułów ===
   Czarne tło #1c1c1f + strzałki ‹ › po bokach + obraz + dolny pasek (info + akcje).
   Pasek akcji budowany dynamicznie przez _renderujPodglad() w tagowanie.js. */
dialog.modal-podglad-bib[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1c1c1f;
    padding: 0.6rem;
    border: none;
    border-radius: 6px;
    outline: none;
    max-width: 95vw;
    max-height: 95vh;
}
dialog.modal-podglad-bib:not([open]) { display: none !important; }
dialog.modal-podglad-bib::backdrop { background: rgba(0,0,0,0.9); }
dialog.modal-podglad-bib img#modal-podglad-zdjecia-img {
    max-height: 75vh;
    max-width: 95vw;
    object-fit: contain;
    border-radius: 4px;
    background: transparent;
    transition: opacity 0.12s ease-out;
}
dialog.modal-podglad-bib img#modal-podglad-zdjecia-img:not([src]) { opacity: 0 !important; }

/* Strzałki ←→ po bokach (position: absolute → względem dialogu) */
.modal-strzalka {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 1px solid #3a3a3e;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-strzalka:hover:not(:disabled) { background: rgba(37,99,235,0.85); }
.modal-strzalka:disabled { opacity: 0.25; cursor: not-allowed; }
.modal-strzalka[hidden] { display: none !important; }
.modal-strzalka-lewa  { left: 0.5rem; }
.modal-strzalka-prawa { right: 0.5rem; }

/* Pasek info + akcje pod obrazem */
.modal-podglad-pasek {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem 0;
    flex-wrap: wrap;
}
.modal-podglad-pasek .row-btn {
    margin: 0;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.modal-podglad-info {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-family: ui-monospace, monospace;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .modal-strzalka { width: 2.4rem; height: 2.4rem; font-size: 1.6rem; }
    .modal-strzalka-lewa  { left: 0.3rem; }
    .modal-strzalka-prawa { right: 0.3rem; }
    .modal-podglad-info { font-size: 0.75rem; max-width: 100%; white-space: normal; }
}

/* === Tło za PNG z przezroczystością (biały logo widoczny) === */
/* Klasa historycznie nazwana „szachownica" — zmieniona na jednolite szare
   #6b7280 (spójne z .miniatura-logo-szablonu), bo białe logo na szachownicy
   nie było czytelne (zlewało się z białymi polami). */
.tlo-szachownica {
    background-color: #6b7280;
    background-image: none;
}

/* Małe odstępy między przyciskami / polami w kolumnach edytora */
.kolumna-lewa > button + button { margin-top: 0.35rem; }
.kolumna-prawa input[type="text"] + button:not(.pelna-szer) { margin-top: 0.3rem; }

/* Zaznaczone wiersze w Bibliotece (Ctrl+klik) */
#bib-lista li.plik.zaznaczony {
    background: #fffbe6;
    border-left: 3px solid #f59e0b;
}
.modal-naglowek {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e3e4e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-naglowek h2 { margin: 0; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: #1c1c1f; }
.modal-tresc { padding: 1rem; max-height: 70vh; overflow-y: auto; }
.modal-sekcja { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #f0f0f3; }
.modal-sekcja:last-child { border-bottom: none; margin-bottom: 0; }
.modal-sekcja h3 { margin: 0 0 0.5rem; font-size: 0.92rem; color: #b91c1c; }
.modal-sekcja.duze h3 { color: #b45309; }
.modal-akcje-zbiorcze { margin: 0.4rem 0; }
.modal-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #e3e4e8;
    border-radius: 4px;
}
.modal-lista li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #f0f0f3;
}
.modal-lista li:last-child { border-bottom: none; }
.modal-lista img { width: 48px; height: 48px; object-fit: cover; background: #ececef; border-radius: 3px; }
.modal-lista .l-info { flex: 1; min-width: 0; }
.modal-lista .l-nazwa { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-lista .l-meta { font-size: 0.78rem; color: #666; }
.modal-stopka {
    padding: 0.6rem 1rem;
    border-top: 1px solid #e3e4e8;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* === Przeglądarka folderów serwera === */
.przeg-toolbar {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin: 0.4rem 0;
}
.przeg-toolbar input[type="text"] {
    flex: 1;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
}
.przeg-dyski {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.4rem 0;
}
.przeg-dyski button {
    padding: 0.3rem 0.6rem;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
}
.przeg-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    background: #fafafb;
}
.przeg-lista li {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.88rem;
    border-bottom: 1px solid #f0f0f3;
}
.przeg-lista li:hover { background: #eef4ff; }
.przeg-lista li.aktywny { background: #2563eb; color: #fff; }
.przeg-lista li:last-child { border-bottom: none; }
.przeg-lista li.pusto { color: #888; font-style: italic; cursor: default; }
.przeg-lista li.pusto:hover { background: #fafafb; }

/* Dropzone aktywny stan podczas dragowania */
.dropzone.aktywna {
    border-color: #6fa8ff;
    background: #eef4ff;
}

/* Grid miniaturek w panelu zdjęć */
.grid-miniatury {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.5rem;
    margin-top: 0.6rem;
    max-height: 540px;
    overflow-y: auto;
    padding: 0.25rem;
}

.kafel {
    appearance: none;
    background: #fafafb;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.kafel:hover { border-color: #cfd1d6; }
.kafel.wybrany { border-color: #2563eb; background: #eef4ff; }

.kafel img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 3px;
    background: #ececef;
}

.kafel-info {
    font-size: 0.75rem;
    color: #555;
    text-align: center;
}

/* Podgląd zdjęcia w edytorze */
.podglad-img {
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    background: #ececef;
    border-radius: 4px;
}

/* Grupy tagów (checkboxes per kategoria) w edytorze */
.kategorie-tagow {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 0.4rem;
}

.grupa-tagow {
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    padding: 0.4rem 0.6rem 0.5rem;
    background: #fafafb;
}

.grupa-tagow legend {
    font-size: 0.78rem;
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 0 0.3rem;
}

.tag-checkbox {
    display: inline-flex;
    align-items: center;
    margin: 0.15rem 0.6rem 0.15rem 0;
    font-size: 0.88rem;
    cursor: pointer;
}
.tag-checkbox input { width: auto; margin-right: 0.3rem; }

/* Panel schematu (CRUD kategorii i tagów) */
.lista-kategorii {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.kat-blok {
    border: 1px solid #e3e4e8;
    border-radius: 4px;
    padding: 0.5rem 0.6rem 0.6rem;
    background: #fafafb;
}

.kat-naglowek {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.lista-tagow {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    /* Scroll wewnątrz kategorii — 2× wyższe niż dawniej (było 150px) żeby
       schemat tagów był bardziej czytelny przy dużych kategoriach. */
    max-height: 300px;
    overflow-y: auto;
    /* scrollbar-gutter: scrollbar rezerwuje miejsce — X przycisków nie nachodzi */
    scrollbar-gutter: stable;
}

/* W zakładce „Zarządzaj kolekcjami" listy są jeszcze wyższe (450px). */
#lista-kolekcji .lista-tagow {
    max-height: 450px;
}
.lista-tagow li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.6rem 0.25rem 0;  /* padding-right żeby przyciski X miały miejsce */
    border-bottom: 1px dashed #eef0f3;
    font-size: 0.88rem;
}
/* Tag (środkowy <span> z nazwą) wyrównany do lewej — bez tego flex
   `justify-content: space-between` umieszczał go na środku między uchwytem
   drag a przyciskami akcji. flex: 1 + text-align: left wymusza lewy róg. */
.lista-tagow li > span:not(.tag-uchwyt):not(.row-btn) {
    flex: 1;
    text-align: left;
    padding-left: 0.4rem;
}
.lista-tagow li:last-child { border-bottom: none; }

/* === Schemat tagów: toolbar + per-kategoria search === */
.schemat-toolbar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0.6rem 0 0.8rem;
    padding: 0.4rem 0.6rem;
    background: #fafafb;
    border: 1px solid #e3e4e8;
    border-radius: 4px;
}
.schemat-toolbar > input[type="text"] {
    flex: 1;
    min-width: 200px;
}
.kat-dodaj-tag {
    display: flex;
    gap: 0.3rem;
    margin: 0.4rem 0;
    padding: 0.35rem;
    background: #eef4ff;
    border-radius: 4px;
}
.kat-dodaj-tag input { flex: 1; min-width: 0; }
.kat-search {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin: 0.3rem 0;
    font-size: 0.85rem;
}
.kat-search input { flex: 1; min-width: 0; padding: 0.3rem 0.45rem; }
.tagi-wiecej-info {
    text-align: center;
    color: #888;
    font-size: 0.78rem;
    padding: 0.35rem;
    font-style: italic;
}

/* Drag & drop tagów */
.lista-tagow.drag-wlaczony li[draggable] { cursor: grab; }
.lista-tagow.drag-wlaczony li[draggable]:active { cursor: grabbing; }
.lista-tagow li.dragowany { opacity: 0.4; background: #fffbe6; }
.lista-tagow li.drop-przed { box-shadow: inset 0 3px 0 #2563eb; }
.lista-tagow li.drop-po { box-shadow: inset 0 -3px 0 #2563eb; }
.tag-uchwyt {
    color: #aaa;
    font-size: 0.85rem;
    padding-right: 0.3rem;
    user-select: none;
    cursor: grab;
    display: inline-block;
    min-width: 12px;
}

/* (brand zdefiniowany wyżej w sidebar) */

/* --- WGRYWANIE: tabela + pasek postępu --- */
.tabela-wgr {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    background: #fff;
}

.tabela-wgr th,
.tabela-wgr td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid #eef0f3;
    font-size: 0.9rem;
}

.tabela-wgr th {
    background: #fafafb;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
}

.tabela-wgr .col-check { width: 36px; }
.tabela-wgr .col-akcje { width: 140px; text-align: right; }

.tabela-wgr tr.tabela-pusta td {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 1.25rem 0.6rem;
}

.postep {
    margin-top: 0.4rem;
}

.postep-bar {
    background: #eef0f3;
    border-radius: 4px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.postep-fill {
    background: #2563eb;
    height: 100%;
    transition: width 0.2s ease;
}

.postep-info {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
}

/* ========================================================================
   DARK MODE — override globalny. Niżej tylko delty kolorów; układ bez zmian.
   ======================================================================== */

body {
    background: #1c1c1f;
    color: #e5e7eb;
}

/* Panel docelowy / kontenery */
.panel,
.panel-full,
.toolbar-folderu,
.szablon-blok,
.prompt-blok,
.ig-blok,
.lista,
.lista-items,
.lista-items li,
.lista-plikow,
.lista-plikow .plik,
.lista-tagow-zdjecia,
.lista-tagow,
.lista-kategorii,
.schemat-toolbar,
.modal-naglowek,
.modal-tresc,
.modal-lista,
.modal-lista li,
.modal-stopka {
    background: #26262a;
    color: #e5e7eb;
    border-color: #3a3a3e;
}
.panel { box-shadow: none; }

h1, h2, h3, h4, h5, h6 { color: #f3f4f6; }
label { color: #cbd5e1; }
.hint, .puste { color: #9ca3af; }
hr { border-color: #3a3a3e; }
code { background: #2a2a2e; color: #fbbf24; padding: 0.1em 0.35em; border-radius: 3px; }

/* Pola tekstowe i selecty */
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
textarea, select {
    background: #1f1f23;
    color: #e5e7eb;
    border: 1px solid #3a3a3e;
}
input::placeholder, textarea::placeholder { color: #6b7280; }
input:focus, textarea:focus, select:focus {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

/* Przyciski */
button {
    background: #3a3a3e;
    color: #e5e7eb;
    border: 1px solid #4a4a4f;
}
button:hover { background: #45454a; }
button.primary { background: #2563eb; color: #fff; border-color: #1d4ed8; }
button.primary:hover { background: #1d4ed8; }
button.primary-big { background: #16a34a !important; color: #fff !important; }
button.primary-big:hover { background: #15803d !important; }
button.danger { background: #991b1b; color: #fff; border-color: #7f1d1d; }
button.danger:hover { background: #7f1d1d; }
button.ghost { background: transparent; color: #9ca3af; border-color: #4a4a4f; }
button.btn-mini { background: #3a3a3e; color: #e5e7eb; }
button.btn-mini:hover { background: #4a4a4f; }
button.btn-mini.primary { background: #2563eb; }
button.btn-mini.danger { background: #991b1b; }

/* Listy plików / podglądy */
.lista-plikow .plik:hover { background: #2f2f33; }
/* Aktywny (pojedynczy klik bez Ctrl) i zaznaczony (Ctrl+klik / „Zaznacz wszystkie")
   mają wspólny wygląd: niebieska ramka 2px dookoła całego wiersza + ciemnoniebieskie tło. */
.lista-plikow .plik.aktywny,
.lista-plikow .plik.zaznaczony,
#bib-lista li.plik.zaznaczony {
    background: #1e293b !important;
    outline: 2px solid #2563eb !important;
    outline-offset: -2px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
    border-left-color: transparent;     /* nadpisuje lewy pasek z .plik */
}

/* Sub-zakładki */
.podzakladki { border-bottom-color: #3a3a3e; }
.pz-tab { color: #9ca3af; }
.pz-tab:hover { color: #e5e7eb; }
.pz-tab.aktywna {
    background: #26262a;
    color: #f3f4f6;
    border-color: #3a3a3e;
    border-bottom-color: #26262a;
}

/* Tabele */
table.lista-artykulow,
.lista-artykulow th,
.lista-artykulow td { background: #26262a; color: #e5e7eb; border-color: #3a3a3e; }
.lista-artykulow th { background: #2f2f33; color: #cbd5e1; }
.lista-artykulow th.th-sort:hover { background: #3a3a3e; }
.lista-artykulow th.th-sort-aktywny { background: #1e3a8a !important; color: #60a5fa; }
.lista-artykulow tr:hover td { background: #2c2c30; }
.lista-artykulow input.edytowalny { color: #e5e7eb; }
.lista-artykulow input.edytowalny:hover,
.lista-artykulow input.edytowalny:focus { background: #1f1f23; border-color: #3a3a3e; }

/* TOC promptów — jasny niebieski (czytelny na ciemnym tle) */
.prompty-toc li { border-bottom-color: #3a3a3e; }
.prompty-toc a { color: #93c5fd; font-weight: 700; }
.prompty-toc a:hover { color: #dbeafe; text-decoration: underline; }
.prompty-toc .toc-meta { color: #9ca3af; }

/* Modale */
.modal-wybor,
.modal-podglad { background: #26262a; color: #e5e7eb; border-color: #3a3a3e; }
.modal-wybor-item { background: #2a2a2e; border-color: #3a3a3e; color: #e5e7eb; }
.modal-wybor-item:hover { background: #1e3a8a; border-color: #60a5fa; }
.modal-wybor-item span { color: #cbd5e1; }
.modal-toast { background: #1c1c1f; color: #e5e7eb; border: 1px solid #3a3a3e; }

/* Słowa kluczowe — pola autocomplete */
.slowo-row .slowo-input { background: #1f1f23; color: #e5e7eb; border-color: #3a3a3e; }
.slowo-row .slowo-url { color: #60a5fa; }

/* Sekcje (panel Gotowe) */
.lista-sekcji li.sekcja-item { background: #26262a; border-bottom-color: #3a3a3e; }
.lista-sekcji li.sekcja-aktywna { background: #422d0c; border-left-color: #f59e0b; }
.sekcja-tytul { color: #e5e7eb; }
.sekcja-tytul:hover { background: #1e3a8a; }
.sekcja-numer { color: #9ca3af; }

/* Podgląd belki IG */
.ig-preview { background: #1c1c1f; border-color: #3a3a3e; }

/* Sidebar już ciemny — bez zmian */

/* CodeMirror w dark — theme „idea" jest jasna; podmieniamy na inwersję */
.CodeMirror {
    background: #1f1f23 !important;
    color: #e5e7eb !important;
    border-color: #3a3a3e !important;
}
.CodeMirror-gutters {
    background: #26262a !important;
    border-right-color: #3a3a3e !important;
}
.CodeMirror-linenumber { color: #6b7280 !important; }
.CodeMirror-cursor { border-left-color: #f3f4f6 !important; }
.CodeMirror .cm-tag { color: #60a5fa !important; }      /* niebieski */
.CodeMirror .cm-attribute { color: #c084fc !important; } /* fioletowy */
.CodeMirror .cm-string { color: #fbbf24 !important; }    /* żółto-pomarańczowy */
.CodeMirror .cm-bracket { color: #cbd5e1 !important; }
.CodeMirror .cm-keyword { color: #f472b6 !important; }
.CodeMirror .cm-property { color: #34d399 !important; }
.CodeMirror .cm-comment { color: #6b7280 !important; font-style: italic; }
.CodeMirror .CodeMirror-matchingtag { background: #422d0c; }

/* Schemat tagów toolbar */
.schemat-toolbar { background: #26262a; border-color: #3a3a3e; }
.lista-kategorii { background: #26262a; }
.lista-tagi li { background: #1e3a8a; color: #cbd5e1; }

/* .lista (kontener — Propozycje tytułów, Podtytuły, Sekcje) — dark-mode override.
   Domyślny styl ma `background: #fafafb` + `border: 1px solid #e3e4e8`, co w dark mode daje
   bardzo widoczną JASNĄ kreskę wokół panelu (linia widoczna pod nagłówkiem Podtytuły gdy
   lista jest pusta). Nadpisujemy na ciemne kolory zgodne z resztą interfejsu. */
.lista {
    background: #1c1c1f !important;
    border-color: #3a3a3e !important;
}
.lista-naglowek {
    border-bottom-color: #3a3a3e !important;
    color: #cbd5e1 !important;
}

/* Postęp info */
.postep-info { color: #9ca3af; }

/* Linki w treści */
a { color: #60a5fa; }
a:hover { color: #93c5fd; }

/* ========================================================================
   DARK MODE — poprawki: białe inputy, biblioteka, prompty.
   Mocniejszy poziom: !important żeby pokonać lokalne style w
   tworzenie_artykulow.css i tagowanie.css.
   ======================================================================== */

/* Bielszy tekst globalnie */
body, .panel, .panel-full, h1, h2, h3, h4, h5, h6, p, label, span, div, td, th, li {
    color: #f5f5f7;
}
.hint, .puste, .toc-meta, .modal-wybor-item span,
.sekcja-numer, .CodeMirror-linenumber {
    color: #b8bcc4 !important;
}

/* Wszystkie inputy/selecty/textarea — ciemne tło, biała ramka, biały tekst */
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input:not([type]), textarea, select {
    background: #1f1f23 !important;
    color: #f5f5f7 !important;
    border: 1px solid #6b7280 !important;
    border-radius: 3px;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="search"]:focus, textarea:focus, select:focus {
    border-color: #93c5fd !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.25);
}
input::placeholder, textarea::placeholder { color: #6b7280 !important; }

/* Select dropdown options (Windows/Firefox czasem białe) */
select option {
    background: #1f1f23 !important;
    color: #f5f5f7 !important;
}

/* Biblioteka zdjęć — wymuś ciemne tło na wszystkich poziomach */
#art-bib-lista, #art-bib-lista li {
    background: #26262a !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3e !important;
}
#art-bib-lista li:hover { background: #2c2c30 !important; }

/* Lista plików (tagowanie, biblioteka) */
.lista-plikow, .lista-plikow li {
    background: #26262a !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3e !important;
}

/* Pola prompt-blok / szablon-blok / ig-blok (wymuś dark na białe tła z local CSS) */
.prompt-blok, .szablon-blok, .ig-blok {
    background: #26262a !important;
    border-color: #3a3a3e !important;
    color: #f5f5f7 !important;
}
.prompt-blok h3, .szablon-blok h3, .ig-blok h3 { color: #f5f5f7 !important; }
/* Pole „Skille:" w dark mode — ciemne tło z jaśniejszymi chipsami. */
.prompt-blok .prompt-skille {
    background: #1c1c1f !important;
    border-color: #3a3a3e !important;
}
.prompt-blok .prompt-skille-label { color: #cbd5e1 !important; }
.prompt-blok .prompt-skill-chip {
    background: #26262a !important;
    border-color: #3a3a3e !important;
}
.prompt-blok .prompt-skill-chip.prompt-skill-aktywny {
    background: rgba(251, 191, 36, 0.18) !important;
    border-color: #f59e0b !important;
}
.prompt-blok .prompt-skill-uzyj {
    color: #e5e7eb !important;
    border-right-color: #3a3a3e !important;
}
.prompt-blok .prompt-skill-uzyj:hover {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}
.prompt-blok .prompt-skill-aktywny .prompt-skill-uzyj { color: #fde047 !important; }
.prompt-blok .prompt-skill-ikona {
    color: #9ca3af !important;
    border-right-color: #3a3a3e !important;
}
.prompt-blok .prompt-skill-ikona:hover {
    background: #3a3a3e !important;
    color: #f5f5f7 !important;
}
.prompt-blok .prompt-skill-x:hover {
    background: rgba(185, 28, 28, 0.30) !important;
    color: #fca5a5 !important;
}

/* Podgląd belki IG (powinien być w jasnym żeby user widział faktyczny render) */
.ig-preview { background: #fafbff !important; color: #1c1c1f !important; border-color: #3a3a3e !important; }
.ig-preview * { color: inherit; }

/* Lista artykułów (tabela) */
table.lista-artykulow, .lista-artykulow tbody, .lista-artykulow tr {
    background: #26262a !important;
    color: #f5f5f7 !important;
}
.lista-artykulow th { background: #2f2f33 !important; color: #f5f5f7 !important; }
.lista-artykulow th.th-sort-aktywny { background: #1e3a8a !important; color: #93c5fd !important; }
.lista-artykulow td { background: #26262a !important; border-color: #3a3a3e !important; color: #f5f5f7 !important; }
.lista-artykulow tr:hover td { background: #2c2c30 !important; }

/* Modale (wybór zdjęcia, podgląd, toast) */
.modal-wybor, .modal-podglad, .modal-toast {
    background: #26262a !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3e !important;
}
.modal-wybor .modal-naglowek { background: #26262a !important; border-bottom-color: #3a3a3e !important; }
/* H2 w nagłówku modalu — globalny styl .modal-naglowek h2 ma color: #1c1c1f (ciemny),
   co na ciemnym tle modalu jest niewidoczne. Nadpisz na jasny żeby było widać tytuł. */
.modal-wybor .modal-naglowek h2 { color: #f5f5f7 !important; }
.modal-wybor-item {
    background: #2a2a2e !important;
    border-color: #3a3a3e !important;
    color: #f5f5f7 !important;
}
.modal-wybor-item:hover { background: #1e3a8a !important; border-color: #93c5fd !important; }
.modal-wybor .modal-filtr { background: #1f1f23 !important; color: #f5f5f7 !important; border-color: #6b7280 !important; }

/* Listy: tagi, tagi zdjęcia, kategorie schematu */
.lista-tagi li, .lista-tagow li, .lista-kategorii li {
    background: #1e3a8a !important;
    color: #f5f5f7 !important;
}
.lista-tagow-zdjecia, .lista-tagow-zdjecia li {
    background: #26262a !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3e !important;
}

/* Toolbar folderu (Tagowanie) */
.toolbar-folderu {
    background: #26262a !important;
    border-color: #3a3a3e !important;
    color: #f5f5f7 !important;
}

/* Schemat tagów */
.schemat-toolbar { background: #26262a !important; border-color: #3a3a3e !important; }

/* Modal naglowek - body - stopka */
.modal-naglowek, .modal-tresc, .modal-stopka {
    background: #26262a !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3e !important;
}
.modal-lista, .modal-lista li { background: #26262a !important; color: #f5f5f7 !important; border-color: #3a3a3e !important; }
.modal-lista .l-nazwa { color: #f5f5f7 !important; }
.modal-lista .l-meta { color: #b8bcc4 !important; }

/* Sekcje w panelu Gotowe */
.lista-sekcji li.sekcja-item { background: #26262a !important; color: #f5f5f7 !important; }
.lista-sekcji li.sekcja-aktywna { background: #422d0c !important; }
.sekcja-tytul { color: #f5f5f7 !important; }
.sekcja-tytul:hover { background: #1e3a8a !important; }

/* Słowa kluczowe - autocomplete */
.slowo-row .slowo-input { background: #1f1f23 !important; color: #f5f5f7 !important; border-color: #6b7280 !important; }
.slowo-row .slowo-url { color: #93c5fd !important; }

/* Edytowalne pola inline w tabelach */
.lista-artykulow input.edytowalny {
    background: transparent !important;
    color: #f5f5f7 !important;
}
.lista-artykulow input.edytowalny:hover,
.lista-artykulow input.edytowalny:focus {
    background: #1f1f23 !important;
    border-color: #93c5fd !important;
}

/* Podtytuły input — większe i czytelne */
#lista-art-podtytuly .podtytul-input {
    background: #1f1f23 !important;
    color: #f5f5f7 !important;
    border-color: #6b7280 !important;
}
#lista-art-podtytuly li.podtytul-row { border-bottom-color: #3a3a3e !important; }

/* Pole input strony (paginacja) */
.pasek-paginacji .strona-input {
    background: #1f1f23 !important;
    color: #f5f5f7 !important;
    border-color: #6b7280 !important;
}

/* Wstaw-grupa (dropdown szablonów IG w Edytorze) */
.wstaw-grupa select { background: #1f1f23 !important; color: #f5f5f7 !important; border-color: #6b7280 !important; }

/* Propozycje tytułów */
.tytul-tekst { color: #f5f5f7 !important; }

/* CodeMirror — wzmocnione (lokalne style nie nadpisują z !important) */
.CodeMirror, .prompt-blok .CodeMirror, .szablon-blok .CodeMirror, .ig-blok .CodeMirror {
    background: #1f1f23 !important;
    color: #f5f5f7 !important;
    border-color: #6b7280 !important;
}
.CodeMirror-gutters { background: #26262a !important; border-right-color: #3a3a3e !important; }
.CodeMirror pre, .CodeMirror-line { color: #f5f5f7 !important; }
.CodeMirror-cursor { border-left-color: #ffffff !important; }
.CodeMirror-selected { background: #1e3a8a !important; }
.CodeMirror-focused .CodeMirror-selected { background: #1e40af !important; }
.CodeMirror .cm-tag { color: #60a5fa !important; }
.CodeMirror .cm-attribute { color: #c084fc !important; }
.CodeMirror .cm-string { color: #fbbf24 !important; }
.CodeMirror .cm-bracket { color: #cbd5e1 !important; }
.CodeMirror .cm-comment { color: #6b7280 !important; }

/* Pola w sekcji Tematyki (Edytor — lewa kolumna) */
#art-tytul, #art-slug, #art-temat,
#art-meta, #art-fb, #art-faq,
#ust-openai, #ust-gemini, #ust-base-url,
#ust-model-tekst, #ust-model-vision,
#ust-model-tekst-select, #ust-model-vision-select, #ust-dostawca {
    background: #1f1f23 !important;
    color: #f5f5f7 !important;
    border-color: #6b7280 !important;
}

/* ========================================================================
   DARK MODE — Tagowanie zdjęć (klasy specyficzne)
   ======================================================================== */
/* Dropzone do wgrywania (przeciągnij pliki) */
.dropzone-tagowanie {
    background: #26262a !important;
    color: #f5f5f7 !important;
    border-color: #6b7280 !important;
}
.dropzone-tagowanie strong { color: #93c5fd; }
.dropzone-tagowanie code { background: #1f1f23 !important; color: #fbbf24 !important; }

/* „Wybierz z dysku" (label jako button) */
.btn-as-label {
    background: #3a3a3e !important;
    color: #f5f5f7 !important;
    border: 1px solid #6b7280 !important;
}
.btn-as-label:hover { background: #45454a !important; }

/* Kolumny grida 2-kolumnowego (lewa lista plików, prawa podgląd) */
.kolumna-lewa, .kolumna-prawa {
    background: #26262a !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3e !important;
}

/* Pole podglądu zdjęcia (placeholder PRZED wyborem) */
.podglad-box {
    background: #1f1f23 !important;
    color: #cbd5e1 !important;
    border-color: #3a3a3e !important;
}
.podglad-box .placeholder-box { color: #6b7280 !important; background: transparent; }

/* Aktywna kolumna sortu — ciemniejszy granat zamiast jasno-niebieskiego */
.lista-artykulow th.th-sort-aktywny,
table th.th-sort-aktywny {
    background: #1e3a8a !important;
    color: #93c5fd !important;
}

/* Schemat tagów — kategorie i tagi */
.lista-kategorii li,
.lista-tagow li,
.lista-tagi li {
    background: #2a2a2e !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3e !important;
}
.lista-tagi li { background: #1e3a8a !important; }

/* Suggestions autocomplete tagów */
.tag-suggestions {
    background: #26262a !important;
    border-color: #3a3a3e !important;
    color: #f5f5f7 !important;
}
.tag-suggestions li { background: #2a2a2e !important; color: #f5f5f7 !important; }
.tag-suggestions li:hover { background: #1e3a8a !important; }

/* ========================================================================
   DARK MODE — Schemat tagów + Biblioteka (karty statystyk, kat-blok)
   ======================================================================== */

/* Karty statystyk biblioteki */
.stat-karta {
    background: #26262a !important;
    color: #f5f5f7 !important;
    border: 1px solid #3a3a3e !important;
}
.stat-karta .stat-l, .stat-l {
    color: #b8bcc4 !important;   /* label — przygaszony jasnoszary */
}
.stat-karta .stat-v, .stat-v {
    color: #f5f5f7 !important;   /* wartość — biała */
    font-weight: 700;
}

/* Bloki kategorii w Schemacie tagów */
.kat-blok {
    background: #26262a !important;
    color: #f5f5f7 !important;
    border-color: #3a3a3e !important;
}
.kat-blok h3, .kat-blok h4 { color: #f5f5f7 !important; }

/* „Dodaj tag" wewnątrz kategorii (jasnoniebieski → granat) */
.kat-dodaj-tag {
    background: #1e293b !important;
    border: 1px dashed #6b7280 !important;
    color: #cbd5e1 !important;
}

/* Miniaturka placeholder w bibliotece */
.plik-min {
    background: #2a2a2e !important;
    border: 1px solid #3a3a3e !important;
}

/* Tekst w wierszach listy plików (Tagowanie + Biblioteka) — dark mode:
   zamiast szarych (#888 / #444 / #444) nieczytelnych na ciemnym tle,
   wymuszamy jaśniejsze kolory. Mocniejsze na zaznaczonym wierszu. */
.plik-nazwa {
    color: #f5f5f7 !important;
}
.plik-meta {
    color: #cbd5e1 !important;
}
.plik-opis {
    color: #e5e7eb !important;
}
/* Na zaznaczonym wierszu — pełna biel dla maksymalnego kontrastu */
.lista-plikow .plik.zaznaczony .plik-nazwa,
.lista-plikow .plik.zaznaczony .plik-meta,
.lista-plikow .plik.zaznaczony .plik-opis,
#bib-lista li.plik.zaznaczony .plik-nazwa,
#bib-lista li.plik.zaznaczony .plik-meta,
#bib-lista li.plik.zaznaczony .plik-opis {
    color: #ffffff !important;
}

/* Widok kafelki biblioteki Tagowania (#bib-lista.widok-kafelki) — grid + duża miniaturka */
.lista-plikow.widok-kafelki {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
    gap: 0.9rem;
    padding: 0.2rem 0;
    list-style: none;
}
.lista-plikow.widok-kafelki .plik,
.lista-plikow.widok-kafelki .bib-kafelek {
    display: flex !important;
    flex-direction: column;
    padding: 0;
    background: #26262a;
    border: 1px solid #3a3a3e;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.1s;
    /* KLUCZOWE: element siatki ma domyślnie min-width:auto i NIE kurczy się
       poniżej szerokości najdłuższego dziecka. Długa nazwa pliku (white-space:
       nowrap) rozpychała kafelek ponad ścieżkę siatki — zasłaniała meta/opis.
       min-width:0 pozwala zwęzić kafelek do ścieżki → ellipsis na nazwie działa. */
    min-width: 0;
}
.lista-plikow.widok-kafelki .plik:hover {
    transform: translateY(-1px);
    border-color: #6b7280;
    background: #2c2c30;
}
.lista-plikow.widok-kafelki .bib-miniatura-duza {
    width: 100%;
    height: 264px;
    object-fit: contain;
    background: #1c1c1f;
    cursor: pointer;
    display: block;
    border-bottom: 1px solid #3a3a3e;
    border-radius: 0;
    flex-shrink: 0;
}
.lista-plikow.widok-kafelki .plik-info {
    padding: 0.5rem 0.6rem 0.3rem;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;          /* twardo przycina każde dziecko, które chciałoby rozepchać kafelek */
}
.lista-plikow.widok-kafelki .plik-nazwa {
    font-size: 0.84rem;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;       /* nazwa: początek + wielokropek, nigdy nie rozpycha */
}
.lista-plikow.widok-kafelki .plik-meta {
    font-size: 0.72rem;
    line-height: 1.35;
    max-width: 100%;
    overflow-wrap: anywhere;   /* długie tokeny (np. echo nazwy/URL) łamią się zamiast rozpychać */
    word-break: break-word;
}
.lista-plikow.widok-kafelki .plik-opis {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Widok listy (default) — pasek akcji Edycja / Otaguj / X z odstępami */
.bib-akcje {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

/* Dolna sekcja sidebara (system użytkowników): „Moje konto" + „Wyloguj (login)".
   Separator nad pierwszą pozycją odcina ją od listy modułów. */
.menu-item.menu-dol {
    border-top: 1px solid #3a3a3e;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}

/* Serduszko „ulubione" NAKŁADANE na PRAWY GÓRNY róg miniatury (Artykuły + Zaplecza).
   Domyślnie szare na półprzezroczystym krążku, po kliknięciu (.aktywne) świeci na żółto.
   Kontener miniatury (.bib-mini-wrap / .bib-mini-wrap-w) jest position:relative. */
.bib-serce-rog {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 1.7rem;
    height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #e8e8e8;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color .12s, background .12s, transform .08s;
}
.bib-serce-rog:hover { background: rgba(0, 0, 0, 0.62); transform: scale(1.12); }
.bib-serce-rog.aktywne { color: #f4c400; text-shadow: 0 0 5px rgba(244, 196, 0, 0.75); }
/* Wrapper miniatury w widoku Lista — relative, żeby serce siadło w rogu 40 px kafelka. */
.bib-mini-wrap-w { position: relative; display: inline-flex; flex-shrink: 0; }
/* Mniejsze serce nad 40 px miniaturą listy. */
.bib-wiersz .bib-serce-rog { width: 1.25rem; height: 1.25rem; font-size: 0.72rem; top: 2px; right: 2px; }
/* Odstęp między checkboxem „tylko niedodane" a „tylko ulubione" w pasku filtrów. */
.bib-filtr-ulubione { margin-left: 0.8rem; }

.lista-plikow.widok-kafelki .bib-akcje {
    display: flex;
    gap: 0.2rem;
    padding: 0.35rem 0.4rem 0.5rem;
    flex-wrap: wrap;                     /* gdy nie mieszczą się — łamie do kolejnej linii */
    align-items: center;
    justify-content: flex-start;         /* przyciski do lewej */
}
.lista-plikow.widok-kafelki .bib-akcje .btn-mini {
    font-size: 0.68rem;
    padding: 0.3rem 0.45rem;             /* X ciaśniejszy, ale jest spore żeby tekst się mieścił */
    line-height: 1.1;
    flex: 0 0 auto;                      /* naturalna szerokość — tekst nigdy nie skracany */
    height: 1.7rem;
    white-space: nowrap;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.lista-plikow.widok-kafelki .bib-akcje .btn-x {
    flex: 0 0 auto;
    padding: 0.3rem 0.4rem;
    min-width: 1.7rem;
    height: 1.7rem;
}

/* Pasek toggle widoku (Kafelki/Lista) — wyjustowany do prawego rogu */
.widok-toggle-pasek {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: 0.4rem;
}
.widok-toggle-pasek strong {
    color: #f5f5f7;
    font-size: 0.85rem;
    margin-right: 0.2rem;
}
.widok-toggle-pasek .btn-mini {
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
}

/* Zwijany kontener filtrów (Tagowanie i Biblioteka) */
.filtry-toggle-pasek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: #26262a;
    border: 1px solid #3a3a3e;
    border-radius: 4px;
    margin-bottom: 0.4rem;
}
.filtry-toggle-pasek strong,
.filtry-toggle-pasek h2 {
    color: #f5f5f7;
    font-size: 0.95rem;
}
.filtry-zawartosc {
    display: block;
    transition: opacity 0.15s;
}
.filtry-zawartosc.zwinieta {
    display: none;
}

/* Spinner przy zdjęciu aktualnie analizowanym przez AI — w meta listingu */
.spinner-ai {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #fbbf24 !important;
    font-weight: 700 !important;
    margin-left: 0.4rem;
}
.spinner-ai-kolko {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid rgba(251, 191, 36, 0.3);
    border-top-color: #fbbf24;
    border-radius: 50%;
    animation: spinner-ai-spin 0.8s linear infinite;
}
@keyframes spinner-ai-spin {
    to { transform: rotate(360deg); }
}

/* Przycisk w trakcie długiej operacji (np. „Konwertuję…") — wirujące kółko po tekście.
   Reużywa @keyframes spinner-ai-spin. currentColor → kółko w kolorze tekstu przycisku,
   więc działa na każdym przycisku (primary/danger/itp.). Łączyć z disabled w JS. */
button.btn-laduje::after {
    content: "";
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: 0.45rem;
    vertical-align: -0.12rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spinner-ai-spin 0.7s linear infinite;
}
/* Disabled przyciemnia (opacity 0.5) — ale przy ładowaniu chcemy czytelny wskaźnik. */
button.btn-laduje:disabled {
    opacity: 0.9;
    cursor: progress;
}

/* Licznik tagów + producent — kolorowane fragmenty w .plik-meta */
.plik-meta .meta-tagi,
.plik-meta .meta-producent {
    color: #4ade80 !important;          /* zielony — jest co liczyć */
    font-weight: 600 !important;
}
.plik-meta .meta-tagi-brak,
.plik-meta .meta-producent-brak {
    color: #f87171 !important;          /* czerwony — brak tagów / producenta */
    font-weight: 700 !important;
}
/* Na zaznaczonym wierszu zachowujemy semantyczne kolory (nie wymuszamy bieli) */
.lista-plikow .plik.zaznaczony .plik-meta .meta-tagi,
.lista-plikow .plik.zaznaczony .plik-meta .meta-producent,
#bib-lista li.plik.zaznaczony .plik-meta .meta-tagi,
#bib-lista li.plik.zaznaczony .plik-meta .meta-producent {
    color: #86efac !important;          /* jaśniejsza zieleń dla kontrastu na tle wybranym */
}
.lista-plikow .plik.zaznaczony .plik-meta .meta-tagi-brak,
.lista-plikow .plik.zaznaczony .plik-meta .meta-producent-brak,
#bib-lista li.plik.zaznaczony .plik-meta .meta-tagi-brak,
#bib-lista li.plik.zaznaczony .plik-meta .meta-producent-brak {
    color: #fca5a5 !important;          /* jaśniejsza czerwień */
}

/* Licznik globalnych użyć zdjęcia w artykułach (`wystapienia_art`) — żółty gdy >0
   (wyróżnia się od zielonego tagów/producenta i czerwonego braku), szary gdy 0. */
.plik-meta .meta-uzycia {
    color: #fbbf24 !important;          /* żółty — zdjęcie było użyte w artykule(ach) */
    font-weight: 700 !important;
}
.plik-meta .meta-uzycia-brak {
    color: #9ca3af !important;          /* szary — neutralny, brak użyć to nie jest błąd */
    font-weight: 500 !important;
}
.lista-plikow .plik.zaznaczony .plik-meta .meta-uzycia,
#bib-lista li.plik.zaznaczony .plik-meta .meta-uzycia {
    color: #fcd34d !important;
}
.lista-plikow .plik.zaznaczony .plik-meta .meta-uzycia-brak,
#bib-lista li.plik.zaznaczony .plik-meta .meta-uzycia-brak {
    color: #d1d5db !important;
}

/* Przyciski „X" (usuwanie) — OUTLINE-danger spójny z innymi danger w aplikacji
   (transparent tło, czerwony tekst, czerwona ramka). */
.btn-x,
button.btn-x {
    background: transparent !important;
    color: #f87171 !important;
    border: 2px solid #b91c1c !important;
    border-radius: 3px !important;
    padding: 0.25rem 0.55rem !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
}
.btn-x:hover,
button.btn-x:hover {
    background: rgba(185, 28, 28, 0.18) !important;
    color: #fca5a5 !important;
    border-color: #ef4444 !important;
}

/* Zielony przycisk akcji — OUTLINE (jak primary, ale zielony). Zatwierdź tagowanie itp. */
.btn-zielony,
button.btn-zielony {
    background: transparent !important;
    color: #4ade80 !important;
    border: 2px solid #16a34a !important;
    font-weight: 700 !important;
}
.btn-zielony:hover,
button.btn-zielony:hover {
    background: rgba(22, 163, 74, 0.18) !important;
    color: #86efac !important;
    border-color: #22c55e !important;
}

/* „Zaznacz wszystkie widoczne" — używa domyślnego outline-primary (button.primary)
   z globalnego CSS: transparent + niebieski tekst (#93c5fd) + niebieska ramka (#2563eb).
   Brak własnego override — celowo, dla spójności z innymi primary buttonami. */

/* „Masowo" — żółty akcent w nazwach przycisków masowych operacji */
.msv {
    color: #fbbf24 !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
}

/* Kontener chipów EXIF (Tagi przypisane do zdjęcia) — flex-wrap, jak słowa SEO */
.lista-tagow-chipy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.45rem;
    border: 1px dashed #6b7280;
    border-radius: 4px;
    min-height: 2.2rem;
    margin: 0.3rem 0 0.6rem 0;
}

/* Globalny styl chipa (używany w Tagowaniu i Artykułach) — outline-only:
   sama niebieska ramka, biały tekst, bez tła, pill-shape. */
.slowo-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    background: transparent !important;
    color: #f5f5f7 !important;
    padding: 0.25rem 0.55rem !important;
    border-radius: 999px !important;
    font-size: 0.82rem !important;
    border: 1px solid #3b82f6 !important;
}
.slowo-chip strong { color: #f5f5f7 !important; font-weight: 600 !important; }

/* Para przycisków obok siebie (np. „Analizuj AI" + „Analizuj AI — Masowo")
   — równa szerokość 50/50, drobny odstęp, pełna szerokość kolumny. */
.para-przyciskow {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    margin: 0.25rem 0;
}
.para-przyciskow > button {
    flex: 1 1 0;
    min-width: 0;
}

/* Globalnie: każdy „strong" / nagłówek z czerwonym kolorem na transparent → jaśniejszy czerwony */
strong[style*="color"], .lista-naglowek strong {
    color: #fca5a5 !important;
}

/* ========================================================================
   OUTLINE — wszystkie kluczowe przyciski w stylu „ramka + tekst".
   ======================================================================== */

button.primary,
button.btn-mini.primary {
    background: transparent !important;
    color: #93c5fd !important;
    border: 2px solid #2563eb !important;
    font-weight: 700 !important;
}
button.primary:hover,
button.btn-mini.primary:hover {
    background: rgba(37, 99, 235, 0.18) !important;
    color: #bfdbfe !important;
    border-color: #60a5fa !important;
}

button.primary-big {
    background: transparent !important;
    color: #4ade80 !important;
    border: 2px solid #16a34a !important;
    font-weight: 800 !important;
}
button.primary-big:hover {
    background: rgba(22, 163, 74, 0.18) !important;
    color: #86efac !important;
    border-color: #22c55e !important;
}

button.danger,
button.btn-mini.danger {
    background: transparent !important;
    color: #f87171 !important;
    border: 2px solid #b91c1c !important;
    font-weight: 700 !important;
}
button.danger:hover,
button.btn-mini.danger:hover {
    background: rgba(185, 28, 28, 0.18) !important;
    color: #fca5a5 !important;
    border-color: #ef4444 !important;
}

/* OUTLINE zielony — „akcja aktywna" (np. „+ Sekcja"/„+ Wstęp" w modalu Tagowania
   gdy zdjęcie jest już w galerii/wstępie). Spójnie z innymi outline'ami: transparent
   tło + kolorowy border + tekst. */
button.btn-mini.gen-zielony {
    background: transparent !important;
    color: #4ade80 !important;
    border: 2px solid #16a34a !important;
    font-weight: 700 !important;
}
button.btn-mini.gen-zielony:hover {
    background: rgba(22, 163, 74, 0.18) !important;
    color: #86efac !important;
    border-color: #22c55e !important;
}

/* Domyślny btn-mini bez modyfikatorów — outline neutralny */
button.btn-mini {
    background: transparent !important;
    color: #e5e7eb !important;
    border: 2px solid #4a4a4f !important;
}
button.btn-mini:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: #6b7280 !important;
}

/* Ghost — bez zmian (ramka neutralna) */
button.ghost {
    background: transparent !important;
    color: #9ca3af !important;
    border: 2px solid #4a4a4f !important;
}
button.ghost:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #cbd5e1 !important;
}

/* Generuj per podtytuł — outline zielony / czerwony */
.btn-generuj-podtytul.gen-zielony {
    background: transparent !important;
    color: #4ade80 !important;
    border: 2px solid #16a34a !important;
}
.btn-generuj-podtytul.gen-zielony:hover {
    background: rgba(22, 163, 74, 0.18) !important;
    border-color: #22c55e !important;
}
.btn-generuj-podtytul.gen-czerwony {
    background: transparent !important;
    color: #f87171 !important;
    border: 2px solid #b91c1c !important;
}
.btn-generuj-podtytul.gen-czerwony:hover {
    background: rgba(185, 28, 28, 0.18) !important;
    border-color: #ef4444 !important;
}

/* Chip X — outline: bez wypełnienia, sama ramka czerwona + czerwony znak X, kółko */
.slowo-chip .chip-x,
button.chip-x {
    background: transparent !important;
    color: #ef4444 !important;
    border: 1.5px solid #b91c1c !important;
    border-radius: 999px !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* X w chipach tagów EXIF (Tagowanie + modal Biblioteki) — o 30% mniejszy niż SEO */
.lista-tagow-chipy .chip-x {
    width: 0.84rem !important;
    height: 0.84rem !important;
    font-size: 0.49rem !important;
    border-width: 1px !important;
}

/* Sugestie tagów w modalu „Tagi i opis" — chipy klikalne (cały chip jest button).
   Hover wzmacnia tło/ramkę. „+" w zielonym kółku outline (przeciwieństwo czerwonego X). */
.tag-chipy-sugestie .sugestia-tagu {
    cursor: pointer;
    padding: 0.25rem 0.55rem !important;
    transition: background 0.1s, border-color 0.1s;
}
.tag-chipy-sugestie .sugestia-tagu:hover {
    background: rgba(37, 99, 235, 0.18) !important;
    border-color: #60a5fa !important;
}
.tag-chipy-sugestie .chip-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.84rem;
    height: 0.84rem;
    border-radius: 999px;
    border: 1px solid #16a34a;
    color: #22c55e;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    background: transparent;
}
.tag-chipy-sugestie .sugestia-tagu:hover .chip-plus {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border-color: #22c55e;
}

/* Sugestie kolekcji (combobox tagi+subkolekcje w modalu Edycji) — wyróżnione
   żółtym akcentem żeby user widział że to inna klasa wyniku niż tag. */
.tag-chipy-sugestie .sugestia-naglowek {
    width: 100%;
    margin: 0.2rem 0 0.1rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
}
.tag-chipy-sugestie .sugestia-kolekcja {
    cursor: pointer;
    padding: 0.25rem 0.55rem !important;
    border-color: #fbbf24 !important;
    color: #fcd34d !important;
    transition: background 0.1s, border-color 0.1s;
}
.tag-chipy-sugestie .sugestia-kolekcja:hover {
    background: rgba(251, 191, 36, 0.18) !important;
    border-color: #fde68a !important;
}
.tag-chipy-sugestie .sugestia-kolekcja.sugestia-sub {
    border-color: #93c5fd !important;
    color: #bfdbfe !important;
}
.tag-chipy-sugestie .sugestia-kolekcja.sugestia-sub:hover {
    background: rgba(96, 165, 250, 0.18) !important;
    border-color: #dbeafe !important;
}

/* Kontener chipów kolekcji w edytorze prawej kolumny (Kolekcje N:N) */
.lista-kolekcji-chipy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.45rem;
    border: 1px dashed #6b7280;
    border-radius: 4px;
    min-height: 2.2rem;
    margin: 0.3rem 0;
}
/* Chip kolekcji — używa wspólnego .slowo-chip (outline niebieski).
   Tekst zawsze biały — wzmocniony override na wypadek kolizji z innymi regułami. */
.lista-kolekcji-chipy .slowo-chip,
.lista-kolekcji-chipy .slowo-chip strong {
    color: #f5f5f7 !important;
}

/* Popup wyboru kolekcji — STAŁA wysokość 85vh, żeby okno nie skakało
   przy filtrowaniu (analogicznie do popupu tagów w Bibliotece Artykułów).
   Layout flex column: nagłówek + toolbar + lista (flex:1, scroll wewnątrz) + stopka.
   WAŻNE: kwalifikator [open] — bez tego dialog rysuje się ZAWSZE (pułapka #4
   z CLAUDE.md). Plus :not([open]) wymusza display:none po close(). */
dialog.modal-wybor-kolekcji[open] {
    width: 720px !important;
    max-width: 95vw;
    height: 85vh !important;
    max-height: 85vh;
    display: flex !important;
    flex-direction: column;
}
dialog.modal-wybor-kolekcji:not([open]) { display: none !important; }
.modal-wybor-kolekcji .modal-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #3a3a3e;
    flex-shrink: 0;
}
.modal-wybor-kolekcji .modal-filtr {
    flex: 1;
}
.modal-wybor-kolekcji #mwk-typ {
    flex: 0 0 200px;
}
.modal-wybor-kolekcji .modal-lista {
    flex: 1 1 auto;
    min-height: 0;
    /* Bazowy .modal-lista ma max-height: 280px — nadpisujemy żeby lista
       wypełniała całą przestrzeń dialogu (85vh − naglowek − toolbar − stopka). */
    max-height: none;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}
.modal-wybor-kolekcji .modal-stopka {
    flex-shrink: 0;
}
.modal-wybor-kolekcji .modal-wybor-item {
    display: grid;
    grid-template-columns: 1fr 160px 80px 100px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
}
.modal-wybor-kolekcji .modal-wybor-item:hover {
    background: #1e3a8a !important;
    border-color: #93c5fd !important;
}
.modal-wybor-kolekcji .modal-wybor-item-aktywny {
    border-color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.1) !important;
}

/* Modal multi-select filtra Biblioteki — wiersz z checkboxem przed nazwą */
#modal-bib-filtr-kolekcje .mbfk-item {
    grid-template-columns: 2rem 1fr 160px 80px !important;
}
#modal-bib-filtr-kolekcje .mbfk-checkbox {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    accent-color: #2563eb;
}
#modal-bib-filtr-kolekcje .modal-stopka {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}
#modal-bib-filtr-kolekcje .modal-stopka .mwk-info {
    margin-right: auto;
    color: #93c5fd;
}

/* Obszar chipów wybranych kolekcji pod przyciskiem „Wybierz kolekcje" */
.bib-filtr-kolekcje-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.bib-wybrane-kolekcje-chipy {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
    min-height: 1.5rem;
}
.bib-wybrane-kolekcje-chipy .hint {
    color: #6b7280;
    font-style: italic;
    font-size: 0.85rem;
}
/* Subkolekcja w popupie — wcięcie + niebieski akcent. Wybierając Citterio
   pod Axor backend dorzuca rodzica automatycznie (auto-rodzic w db.py). */
.modal-wybor-kolekcji .modal-wybor-item-sub {
    padding-left: 1.8rem;
    background: rgba(96, 165, 250, 0.05) !important;
    border-left: 3px solid #2563eb !important;
}
.modal-wybor-kolekcji .modal-wybor-item-sub .mwk-nazwa {
    color: #93c5fd;
    font-weight: 500;
}
.modal-wybor-kolekcji .mwk-nazwa { font-weight: 600; color: #f5f5f7; }
.modal-wybor-kolekcji .mwk-typ { color: #93c5fd; font-size: 0.85rem; }
.modal-wybor-kolekcji .mwk-liczba { color: #6b7280; font-size: 0.85rem; }
.modal-wybor-kolekcji .mwk-aktywny { color: #fbbf24; font-weight: 700; font-size: 0.85rem; }
.modal-wybor-kolekcji .mwk-info { color: #93c5fd; }
.modal-wybor-kolekcji .modal-pusty {
    padding: 1rem; text-align: center; color: #6b7280; font-style: italic;
}
.slowo-chip .chip-x:hover {
    background: rgba(185, 28, 28, 0.18) !important;
    color: #fca5a5 !important;
    border-color: #ef4444 !important;
}

/* Tytuł „Użyj" — pełny niebieski (akcja natychmiastowa) */
.tytul-uzyj {
    background: #4f46e5 !important;
    color: #fff !important;
    border: 2px solid #6366f1 !important;
}
.tytul-uzyj:hover { background: #4338ca !important; }

/* Modal strzałki podglądu — koło z ramką */
.modal-strzalka {
    background: rgba(0,0,0,0.55) !important;
    color: #fff !important;
    border: 2px solid #6b7280 !important;
}
.modal-strzalka:hover {
    background: rgba(37,99,235,0.4) !important;
    border-color: #60a5fa !important;
}

/* === Szablony loga — tabela w Ustawieniach === */
.tabela-szablonow-logo {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    color: #f5f5f7;
}
.tabela-szablonow-logo thead th {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #3a3a3e;
    color: #cbd5e1;
    font-weight: 600;
    font-size: 0.85rem;
}
.tabela-szablonow-logo tbody td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid #2a2a2e;
    vertical-align: middle;
}
.tabela-szablonow-logo tbody tr:hover {
    background: rgba(37, 99, 235, 0.08);
}
.tabela-szablonow-logo .wiersz-szablonu-aktywny {
    outline: 2px solid #2563eb;
    background: rgba(37, 99, 235, 0.12);
}
.miniatura-logo-szablonu {
    max-width: 150px;
    max-height: 80px;
    object-fit: contain;
    /* Jednolite średnie szare tło — białe loga (np. hansgrohe-white) widoczne, czarne też. */
    background: #6b7280;
    border-radius: 3px;
    padding: 4px;
    display: block;
}

/* Split-button (przycisk + strzałka dropdown) — wzorzec GitHub */
.split-button {
    display: inline-flex;
    align-items: stretch;
    border-radius: 4px;
    overflow: visible;
    position: relative;
}
.split-button > button {
    margin: 0;
    border-radius: 0;
}
.split-button > button:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.split-button > button.split-button-arrow {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0.35rem 0.5rem;
    min-width: auto;
    font-size: 0.7rem;
}
.split-button-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 2px;
    background: #1c1c1f;
    border: 1px solid #3a3a3e;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    min-width: 180px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.3rem 0;
    display: none;
}
.split-button-menu.otwarte { display: block; }
.split-button-menu .pozycja-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    color: #f5f5f7;
    font-size: 0.88rem;
}
.split-button-menu .pozycja-menu:hover {
    background: rgba(37, 99, 235, 0.2);
}
.split-button-menu .pozycja-menu-domyslna {
    color: #16a34a;
    font-weight: 600;
}
.split-button-menu .pozycja-menu-domyslna::before {
    content: "★";
    color: #fbbf24;
    margin-right: 0.3rem;
}
.split-button-menu .miniatura-mini-logo {
    max-width: 28px;
    max-height: 20px;
    /* Jednolite szare tło — białe loga widoczne w dropdownie */
    background: #6b7280;
    border-radius: 2px;
    padding: 1px;
    object-fit: contain;
}

/* === Modal-tagow (Edycja zdjęcia w Bibliotece) — 2x szerszy + lepszy kontrast === */
#modal-tagow[open] {
    width: 96vw !important;
    max-width: 1440px !important;  /* 2x od standardowego 720px */
    max-height: 92vh;
    overflow: hidden;  /* tylko .modal-tresc scrolluje, nie sam dialog */
    overscroll-behavior: contain;  /* scroll nie przecieka do biblioteki w tle */
}
#modal-tagow .modal-tresc {
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;  /* scroll wewnątrz nie idzie do tła */
    padding: 1.2rem 1.4rem;
}
#modal-tagow .modal-naglowek h2 {
    color: #f5f5f7 !important;
    font-size: 1.1rem;
}
#modal-tagow label {
    color: #e5e7eb !important;
    font-size: 0.9rem;
    font-weight: 600;
}
#modal-tagow h3 {
    /* Wyrównane z label (sekcje Kolekcje/Autorzy) — biały, mniejszy, mniej krzykliwy */
    color: #e5e7eb !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0.8rem 0 0.3rem !important;
}
#modal-tagow input[type="text"],
#modal-tagow input[type="number"],
#modal-tagow textarea {
    background: #1f1f23 !important;
    color: #f5f5f7 !important;
    border: 1px solid #6b7280 !important;
    border-radius: 3px;
    padding: 0.4rem 0.7rem !important;
    font-size: 0.92rem !important;
    width: 100%;
    box-sizing: border-box;
}
#modal-tagow input[type="text"]::placeholder,
#modal-tagow input[type="number"]::placeholder,
#modal-tagow textarea::placeholder {
    color: #9ca3af !important;
    opacity: 0.85;
}
#modal-tagow .hint, #modal-tagow .hint * {
    color: #cbd5e1 !important;
    font-size: 0.85rem;
}
#modal-tagow #modal-logo-status a {
    color: #60a5fa !important;
    text-decoration: underline;
}

/* Override autofill przeglądarki — Chrome/Edge ustawiają białe tło + ciemny tekst
   na inputach automatycznie wypełnionych (Autorzy → autofill imieniem). Pułapka
   dla dark mode. Box-shadow inset na 1000px nadpisuje natywny styl autofill. */
#modal-tagow input:-webkit-autofill,
#modal-tagow input:-webkit-autofill:hover,
#modal-tagow input:-webkit-autofill:focus,
#modal-tagow input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1f1f23 inset !important;
    -webkit-text-fill-color: #f5f5f7 !important;
    caret-color: #f5f5f7 !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Żółty przycisk akcji „Pokaż z logiem" — wyraźny CTA po dodaniu loga */
.btn-zolty {
    background: #fbbf24 !important;
    color: #1c1c1f !important;
    border: 1px solid #fbbf24 !important;
    font-weight: 700;
    padding: 0.45rem 0.9rem;
    border-radius: 4px;
    cursor: pointer;
}
.btn-zolty:hover { background: #f59e0b !important; border-color: #f59e0b !important; }

/* Paginacja biblioteki — pasek przycisków Poprzednia/Następna pod listą */
.bib-paginacja-pasek {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid #3a3a3e;
    background: rgba(0,0,0,0.2);
    grid-column: 1 / -1;  /* gdy bib-lista to grid (widok kafelki) — paginacja zajmuje pełną szerokość */
    list-style: none;
}
.bib-paginacja-info {
    color: #cbd5e1;
    font-size: 1rem;
    font-family: ui-monospace, monospace;
}
/* Przyciski paginacji — 2× większe, niebieskie gdy aktywne (disabled = szare default) */
.bib-paginacja-pasek button {
    font-size: 1.05rem !important;
    padding: 0.7rem 1.4rem !important;
    font-weight: 700;
}
.bib-paginacja-pasek button:not(:disabled) {
    /* Outline IDENTYCZNY jak button.primary (kanoniczny standard panelu):
       2px ramka #2563eb + tekst #93c5fd + transparent bg. NIE zmieniaj tych
       wartości w oderwaniu od button.primary — muszą być spójne (jeden wygląd
       ramki dla wszystkich przycisków akcji). */
    background: transparent !important;
    color: #93c5fd !important;
    border: 2px solid #2563eb !important;
    cursor: pointer;
}
.bib-paginacja-pasek button:not(:disabled):hover {
    background: rgba(37, 99, 235, 0.18) !important;
    border-color: #60a5fa !important;
    color: #bfdbfe !important;
}
.bib-paginacja-pasek button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* „Zarządzaj kolekcjami" — nazwy klikalne (gdy mają zdjęcia) jako linki niebieskie */
.kolekcja-klikalna {
    color: #60a5fa !important;
    font-weight: 600;
    transition: color 0.12s;
}
.kolekcja-klikalna:hover {
    color: #93c5fd !important;
    text-decoration: underline;
}
.kolekcja-klikalna .hint {
    color: #93c5fd !important;  /* podświetlony hint (liczba zdjęć) — też niebieski */
    font-weight: 400;
}
.kolekcja-pusta {
    color: #9ca3af;  /* szary — kolekcja bez zdjęć nie jest klikalna */
}
.kolekcja-pusta .hint {
    color: #6b7280;
}

/* Zwijaczka subkolekcji w „Zarządzaj kolekcjami" — mały button ▸/▾ przed nazwą.
   Korzeń bez sub-y dostaje placeholder o tej samej szerokości żeby tekst nie skakał.
   Gap 0.7rem żeby przycisk +/− nie sąsiadował zbyt blisko nazwy. */
.kolekcja-nazwa-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}
/* Popup „Wybierz kolekcję" — to samo: .mwk-nazwa jest kontenerem dla button+nazwa */
.modal-wybor-kolekcji .mwk-nazwa {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}
.btn-zwijaczka {
    background: transparent !important;
    border: 1px solid #6b7280 !important;
    color: #93c5fd !important;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0 !important;
    line-height: 1;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.85rem;
}
.btn-zwijaczka:hover {
    background: rgba(96, 165, 250, 0.18) !important;
    border-color: #93c5fd !important;
}
.zwijaczka-placeholder {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
}

/* Subkolekcja w drzewku (np. Citterio pod Axor) — wcięcie + pionowo-poziomy łącznik z rodzicem. */
.lista-tagow .li-subkolekcja {
    padding-left: 1.8rem;
    position: relative;
}
.lista-tagow .li-subkolekcja::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #3a3a3e;
    pointer-events: none;
}
.lista-tagow .li-subkolekcja::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    width: 0.9rem;
    height: 2px;
    background: #3a3a3e;
    pointer-events: none;
}

/* Monit pod „Ustawienia rozmiaru/marginesów loga: w sekcji Szablony loga"
   — pokazuje wynik akcji (sukces / błąd) BEZ nadpisania stałej podpowiedzi powyżej. */
#modal-tagow #modal-logo-monit.monit-sukces {
    color: #86efac !important;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid #16a34a;
    border-radius: 3px;
    padding: 0.35rem 0.6rem;
    font-weight: 600;
}
#modal-tagow #modal-logo-monit.monit-blad {
    color: #fca5a5 !important;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid #b91c1c;
    border-radius: 3px;
    padding: 0.35rem 0.6rem;
    font-weight: 600;
}

/* === Modal „Dodaj szablon loga" — pełen dark mode (inputy, labels, status) === */
#modal-logo-szablon[open] {
    background: #1c1c1f !important;
    color: #f5f5f7 !important;
    color-scheme: dark;  /* pozwala browserowi użyć ciemnych kontrolek (input file) */
    width: 560px;
    max-width: 92vw;
    border: 1px solid #3a3a3e;
    border-radius: 6px;
    padding: 0;
}
#modal-logo-szablon:not([open]) { display: none !important; }
#modal-logo-szablon::backdrop { background: rgba(0,0,0,0.7); }
#modal-logo-szablon .modal-naglowek {
    background: #26262a !important;
    border-bottom: 1px solid #3a3a3e;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Tytuł modalu Ostrzeżeń (po imporcie zdjęć) — biała czcionka na ciemnym tle */
#modal-ostrzezenia .modal-naglowek h2 { color: #f5f5f7 !important; }

#modal-logo-szablon .modal-naglowek h2 {
    color: #f5f5f7 !important;
    margin: 0;
    font-size: 1.05rem;
}
#modal-logo-szablon .modal-tresc {
    background: #1c1c1f !important;
    padding: 1rem 1.1rem;
    color: #f5f5f7 !important;
}
#modal-logo-szablon .modal-stopka {
    background: #26262a !important;
    border-top: 1px solid #3a3a3e;
    padding: 0.7rem 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
#modal-logo-szablon label {
    color: #cbd5e1 !important;
    font-weight: 600;
    font-size: 0.85rem;
    display: block;
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
}
#modal-logo-szablon label > input[type="checkbox"] {
    margin-right: 0.4rem;
    accent-color: #2563eb;
}
#modal-logo-szablon input[type="text"],
#modal-logo-szablon input[type="number"],
#modal-logo-szablon input[type="file"] {
    background: #1f1f23 !important;
    color: #f5f5f7 !important;
    border: 1px solid #6b7280 !important;
    border-radius: 3px;
    padding: 0.35rem 0.6rem;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9rem;
}
#modal-logo-szablon input[type="number"] {
    max-width: 120px;
}
#modal-logo-szablon input[type="file"]::file-selector-button {
    background: #26262a;
    color: #f5f5f7;
    border: 1px solid #6b7280;
    border-radius: 3px;
    padding: 0.25rem 0.7rem;
    margin-right: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
}
#modal-logo-szablon input[type="file"]::file-selector-button:hover {
    background: #2563eb;
    border-color: #60a5fa;
}
#modal-logo-szablon #modal-logo-status {
    color: #cbd5e1;
    font-size: 0.88rem;
    margin: 0.5rem 0 0;
    min-height: 1.2em;
}
#modal-logo-szablon #modal-logo-status.status-blad {
    color: #fca5a5 !important;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid #b91c1c;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-weight: 600;
}
#modal-logo-szablon #modal-logo-status.status-ok {
    color: #86efac !important;
    background: rgba(22, 163, 74, 0.15);
    border: 1px solid #16a34a;
    border-radius: 4px;
    padding: 0.4rem 0.6rem;
    font-weight: 600;
}

/* ── „Pokaż duplikaty" (Tagowanie) — żółta ramka wokół kontenera zdjęcia ──
   Duplikaty po sha256 (identyczna treść). Outline (nie border) — nie przesuwa
   layoutu i rysuje się NAD ramkami stanów aktywny/zaznaczony. */
#lista-plikow li.plik.plik-duplikat {
    outline: 3px solid #fbbf24 !important;
    outline-offset: -3px;
    border-radius: 4px;
}
/* Przycisk „Pokaż duplikaty" w stanie aktywnym — solid żółty (znacznik „włączone",
   analogicznie do zielonego solid „aktywny wybór" w bibliotece). */
#btn-duplikaty.duplikaty-aktywne {
    background: #fbbf24 !important;
    color: #1c1c1f !important;
    border: 2px solid #f59e0b !important;
    font-weight: 700 !important;
}
#btn-duplikaty.duplikaty-aktywne:hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #1c1c1f !important;
}

/* ── Tryb EMBED — Tagowanie osadzone w iframe (np. edycja zdjęcia w Artykułach) ──
   Aktywowany przez ?embed=1. Chowamy chrome aplikacji; widoczny tylko modal-tagow
   (dialog z showModal). Opaque backdrop pokrywa cokolwiek zostało za modalem. */
body.tryb-embed .sidebar { display: none !important; }
body.tryb-embed { background: #1c1c1f !important; }
body.tryb-embed #modal-tagow::backdrop { background: #1c1c1f !important; }
/* `.tryb-embed-tylko` — element widoczny TYLKO w embed (iframe z Artykułów). W aplikacji
   Tagowania (bez embed) chowamy go. Używane dla przycisków „+ Sekcja" / „+ Wstęp" w modalu
   edycji — mają sens tylko gdy modal jest osadzony w bibliotece Artykułów. */
body:not(.tryb-embed) .tryb-embed-tylko { display: none !important; }
/* Modal wypełnia szerzej iframe (mniej marginesu niż w pełnej apce). */
body.tryb-embed #modal-tagow {
    max-width: 96vw !important;
    width: 96vw !important;
    max-height: 96vh !important;
    margin: auto !important;
}

/* ── POWRÓT NA GÓRĘ (globalny, base.html) ─────────────────────────────────
   Lewy dolny róg, `position: fixed` — ma być w tym samym miejscu niezależnie od tego,
   jak daleko zjechano, i nie może zależeć od wysokości menu, która zmienia się z modułami.
   ZIELONY: `#16a34a` to zieleń tego projektu (ta sama co `.btn-mini.ws-zielony`
   i ramka `gen-zielony`). Wcześniej w Wysyłkach był niebieski — właściciel 2026-08-30
   opisał go jako zielony i taki ma być wszędzie.
   `z-index` wyżej niż paski alarmu (60), niżej niż modale — nie może zasłaniać okna
   potwierdzenia, ale ma być nad treścią strony. */
button.na-gore {
    position: fixed; left: 0.7rem; bottom: 1.2rem; z-index: 80;
    width: 2.6rem; height: 2.6rem; border-radius: 50% !important; cursor: pointer;
    background: #16a34a !important; color: #fff !important; border: 1px solid #22c55e !important;
    font-size: 1.2rem; line-height: 1; font-weight: 700; padding: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
button.na-gore:hover { background: #15803d !important; border-color: #4ade80 !important; }
button.na-gore[hidden] { display: none !important; }
/* Na wydruku przycisk nie ma czego szukać — wyszedłby na papier. */
@media print { button.na-gore { display: none !important; } }