:root {
    --bg: #f4f7f5;
    --surface: #ffffff;
    --surface-soft: #edf3ef;
    --ink: #18251e;
    --muted: #65736b;
    --line: #dce5df;
    --brand: #18764a;
    --brand-dark: #105b38;
    --brand-soft: #ddf3e7;
    --sidebar-bg: #102a1d;
    --sidebar-accent: #46c985;
    --sidebar-accent-text: #0b3520;
    --warning: #a35b00;
    --warning-soft: #fff1d8;
    --danger: #a52a2a;
    --danger-soft: #fde7e7;
    --shadow: 0 12px 36px rgba(30, 58, 42, .08);
    /* Rozmiar czcionki (2026-09-23, Ustawienia ogolne). Skala podnoszona dwa razy tego samego
       dnia na zyczenie Patryka - za kazdym razem "za male". Druga podwyzka: dawny "Duzy"
       (1.40) to teraz "Maly", ze WIEKSZYMI krokami miedzy poziomami (bylo za blisko siebie). */
    --app-zoom: 1.40;
    /* Pasek boczny NIE dostaje `zoom` (patrz .main-content nizej - powod w komentarzu tam),
       wiec jego czcionki skaluja sie osobno, tym mnoznikiem (=1 przy "Maly", zeby wyglad
       nie zmienil sie przy domyslnym ustawieniu). Naprawa 2026-09-23: rozmiar czcionki nie
       dzialal wczesniej na pasek boczny wcale. */
    /* --sidebar-drag-scale (2026-09-28): drugi mnoznik, ustawiany z JS podczas przeciagania
       prawej krawedzi paska bocznego (szerszy pasek = wieksza czcionka) - patrz base.html,
       funkcja sidebarDragScale. Domyslnie 1 (brak zmiany), zeby nikt, kto nie przeciagal,
       nie zobaczyl innego wygladu niz dotychczas. */
    --sidebar-drag-scale: 1;
    /* *1.12 (2026-09-29, uwaga Patryka "wielkosc liter po lewej duzo mniejsza niz reszta") -
       lekki, staly podnosnik niezalezny od --app-zoom/przeciagania, zeby pasek boczny nie byl
       juz tak zauwazalnie mniejszy niz glowna tresc przy KAZDYM ustawieniu rozmiaru czcionki. */
    --sidebar-font-scale: calc(var(--app-zoom) / 1.40 * var(--sidebar-drag-scale) * 1.12);
    /* Czcionka tresci - wybor w Ustawieniach ogolnych (2026-09-23), tylko fonty
       bezpieczne dla weba (zainstalowane na Windows/Mac domyslnie) - bez wgrywania
       zewnetrznych plikow fontow. "Inter" nigdy nie byl faktycznie wczytywany (brak
       @font-face/linku Google Fonts) - i tak zawsze renderowal sie jako font systemowy. */
    --app-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-family: var(--app-font);
    color: var(--ink);
    background: var(--bg);
}
/* Ciemny motyw (2026-09-23, Ustawienia ogolne) - tylko kolory tla/tekstu/linii,
   NIE kolory marki (--brand*, --sidebar*) - te sa per-projekt (patrz base.html:
   project_theme) i maja zostac takie same w obu motywach. Selektor z atrybutem
   ma wyzszy priorytet niz zwykle `:root` z base.html, wiec wygrywa niezaleznie
   od kolejnosci w dokumencie. */
:root[data-theme="dark"] {
    --bg: #141c17;
    --surface: #1d2721;
    --surface-soft: #253028;
    --ink: #e9f1ec;
    --muted: #93a69a;
    --line: #34413a;
    --warning-soft: #3a2c12;
    --danger-soft: #3a1e1e;
    --shadow: 0 12px 36px rgba(0, 0, 0, .45);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
button, input { font: inherit; }

/* Szerszy rozwiniety pasek (2026-09-23, Patryk: "lewa belka mogłaby być szersza jak jest
   rozwinięta", wzorem BaseLinkera) - bylo 250px. Wersja zwinieta (data-sidebar=collapsed)
   nizej. Szerokosc jako zmienna (2026-09-28) - przeciaganie prawej krawedzi (.sidebar-resizer,
   base.html) ja nadpisuje i zapamietuje w localStorage; 272px to wartosc domyslna/powrotna. */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width, 272px) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--sidebar-bg); color: #eef7f1; }
/* Uchwyt do przeciagania szerokosci paska bocznego (2026-09-28, zyczenie Patryka: "chciałbym
   aby lewa belka była do przesuwania"). Cienki pasek na samej krawedzi .sidebar (ktory jest
   position:sticky, wiec sam jest kontekstem pozycjonowania dla position:absolute ponizej). */
.sidebar-resizer { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; background: transparent; }
.sidebar-resizer:hover, .sidebar-resizer.is-dragging { background: rgba(255,255,255,.18); }
@media (max-width: 980px) { .sidebar-resizer { display: none; } }
/* .sidebar-inner scrolluje SAMODZIELNIE, osobno od .sidebar (2026-09-23) - przy niskim
   oknie przegladarki i wielu pozycjach menu dolna czesc paska (w tym "Ustawienia ogolne"
   i "Wyloguj") byla calkowicie niewidoczna i nieosiagalna (realny blad zglaszony przez
   Patryka: "gdzie sa ustawienia?"). Overflow na samym `.sidebar` (position:sticky) dawal
   niespojne wyniki scrollHeight w przegladarce - osobny, zwykly kontener jest pewniejszy. */
/* Pasek celowo bardziej zbity (2026-09-23, na zyczenie Patryka: "login, ustawienia
   ogolne i wylogowanie od razu widoczne, wyzej niz obecnie") - mniejsze odstepy w menu,
   zeby caly pasek zmiescil sie bez przewijania na typowej wysokosci okna. Przewijanie
   (.sidebar-inner) zostaje jako siatka bezpieczenstwa na naprawde niskich oknach. */
.sidebar-inner { height: 100%; display: flex; flex-direction: column; padding: 16px 18px; overflow-y: auto; }
.brand-row { display: flex; align-items: center; gap: 8px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: white; flex: 1 1 auto; }
.brand:hover { color: white; }
.sidebar-collapse-toggle {
    flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px;
    background: transparent; color: #bed1c5; font-size: 18px; line-height: 1; cursor: pointer;
}
.sidebar-collapse-toggle:hover { background: rgba(255,255,255,.1); color: white; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--sidebar-accent); font-size: calc(20px * var(--sidebar-font-scale)); font-weight: 800; color: var(--sidebar-accent-text); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: calc(17px * var(--sidebar-font-scale)); }
.brand small { margin-top: 2px; color: #a9c2b3; font-size: calc(11px * var(--sidebar-font-scale)); letter-spacing: .04em; }
.project-card { margin: 16px 0 12px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.06); }
.project-card span, .project-card strong, .project-card a { display: block; }
.project-card span { color: #9bb5a5; font-size: calc(11px * var(--sidebar-font-scale)); text-transform: uppercase; letter-spacing: .08em; }
.project-card strong { margin: 5px 0 8px; font-size: calc(16px * var(--sidebar-font-scale)); }
.project-card a { color: var(--sidebar-accent); font-size: calc(12px * var(--sidebar-font-scale)); }
.project-card-logo { max-width: 100%; max-height: 44px; margin-bottom: 10px; border-radius: 6px; }
.main-nav { display: grid; gap: 2px; }
.main-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 9px; color: #bed1c5; font-size: calc(14px * var(--sidebar-font-scale)); font-weight: 600; }
.main-nav a:hover, .main-nav a.is-active { background: rgba(255,255,255,.1); color: white; }
/* Podmenu "Historia importow" bylo dymkiem na hover (position:absolute, left:100% -
   wychodzil poza pasek boczny) - usuniete 2026-09-23, bo `.sidebar` dostal wlasny scroll
   (naprawa nieosiagalnych "Ustawienia ogolne"/"Wyloguj" przy niskim oknie przegladarki),
   a kontener ze scrollem przycina kazdy element wychodzacy poza jego szerokosc/wysokosc -
   dymek staje sie wtedy niewidoczny. Zamiast niego: zwykly, zawsze widoczny link ponizej. */
.nav-sublink { padding-left: 30px; font-size: calc(12px * var(--sidebar-font-scale)); font-weight: 600; color: #9bb5a5; }
.nav-sublink:hover { color: white; }
/* Druga belka Marketplace (2026-10-08): na komputerze z myszka moduly sa w wysuwanym panelu
   (.nav-flyout), wiec podlinki w lewej belce chowamy; na telefonie/dotyku zostaja podlinkami. */
.nav-flyout-arrow { display: none; margin-left: auto; color: #9bb5a5; }
@media (hover: hover) and (min-width: 981px) { .nav-sublink-touch { display: none !important; } .nav-flyout-arrow { display: inline; } }
.nav-flyout {
    position: fixed; z-index: 60; min-width: 190px; padding: 10px; display: grid; gap: 2px;
    background: var(--sidebar-bg); color: #eef7f1; border-radius: 0 12px 12px 0;
    box-shadow: 8px 8px 24px rgba(0,0,0,.22); border-left: 1px solid rgba(255,255,255,.12);
}
.nav-flyout[hidden] { display: none; }
.nav-flyout-title { padding: 4px 12px 8px; color: #9bb5a5; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.nav-flyout a { display: block; padding: 8px 12px; border-radius: 9px; color: #bed1c5; font-size: 14px; font-weight: 600; }
.nav-flyout a:hover, .nav-flyout a:focus, .nav-flyout a.is-active { background: rgba(255,255,255,.1); color: white; }
.nav-flyout-empty { padding: 6px 12px; color: #a9c2b3; font-size: 12px; max-width: 220px; }
/* Zakladki modulow Marketplace nad trescia strony (te same pozycje co druga belka). */
.module-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.module-tabs a { padding: 9px 14px; border-radius: 10px 10px 0 0; font-size: 14px; font-weight: 700; color: inherit; opacity: .7; border-bottom: 3px solid transparent; }
.module-tabs a:hover { opacity: 1; }
.module-tabs a.is-active { opacity: 1; border-bottom-color: var(--brand); }
.nav-icon { width: 20px; text-align: center; color: var(--sidebar-accent); }
.sidebar-hint { margin-top: 28px; color: #a9c2b3; font-size: calc(13px * var(--sidebar-font-scale)); line-height: 1.5; }
.sidebar-footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 6px; }
.sidebar-spacer { flex: 1 1 auto; }
/* Selektor bezposredniego dziecka (>), nie kazdego spana (2026-09-23) - inaczej ta regula
   ustawialaby display:block/kolory tez na zagniezdzonych .nav-icon/.nav-label (ikony przy
   loginie/ustawieniach/wylogowaniu, dodane przy okazji zwijania paska). */
.sidebar-footer > span, .sidebar-footer > a { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-footer > span { color: #a9c2b3; font-size: calc(12px * var(--sidebar-font-scale)); }
.sidebar-footer > a { color: white; font-size: calc(13px * var(--sidebar-font-scale)); }
.sidebar-footer .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-button {
    display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 0; border: none; background: none;
    color: white; font-size: calc(13px * var(--sidebar-font-scale)); font-family: inherit; cursor: pointer; text-align: left;
}
.link-button:hover { text-decoration: underline; }

/* Zwiniety pasek boczny - tylko ikony (2026-09-23, Patryk: "opcja zwijania, tak jak na
   zrzutach" - BaseLinker). Tylko komputer (min-width 981px, tuz nad mobilnym breakpointem
   980px) - telefon ma wlasny "☰ Menu" i wlasna logike pokazywania/ukrywania nav/stopki. */
@media (min-width: 981px) {
    html[data-sidebar="collapsed"] .app-shell { grid-template-columns: 68px minmax(0, 1fr); }
    html[data-sidebar="collapsed"] .sidebar-inner { padding-left: 10px; padding-right: 10px; }
    html[data-sidebar="collapsed"] .brand-row { justify-content: center; }
    html[data-sidebar="collapsed"] .nav-label,
    html[data-sidebar="collapsed"] .project-card,
    html[data-sidebar="collapsed"] .sidebar-hint,
    html[data-sidebar="collapsed"] .nav-sublink { display: none; }
    html[data-sidebar="collapsed"] .brand,
    html[data-sidebar="collapsed"] .main-nav a,
    html[data-sidebar="collapsed"] .sidebar-footer > span,
    html[data-sidebar="collapsed"] .sidebar-footer > a,
    html[data-sidebar="collapsed"] .link-button { justify-content: center; gap: 0; }
}

/* Rozmiar czcionki (Ustawienia ogolne, --app-zoom) dziala TYLKO na `.main-content`, nie
   na cala strone - 2026-09-23, poprawka po realnym bledzie: `zoom` na <body> razem z
   `.sidebar { height: 100vh; overflow-y: auto }` dawaly niespojne wyniki (zoom skaluje
   wyrenderowany obraz PO obliczeniu layoutu/overflow, wiec przewijanie przestawalo dzialac
   przy wiekszych czcionkach - pasek boczny "znikal" bez mozliwosci przewiniecia do niego).
   Efekt uboczny jest wrecz pozadany: pasek boczny (login/nawigacja/wylogowanie) zostaje
   kompaktowy niezaleznie od wybranego rozmiaru czcionki tresci, zgodnie z prosba Patryka. */
.main-content { min-width: 0; padding: 38px clamp(22px, 4vw, 60px) 70px; zoom: var(--app-zoom); }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; }
.page-header h1 { margin: 4px 0 7px; font-size: clamp(28px, 4vw, 42px); line-height: 1.05; letter-spacing: -.035em; }
.page-header p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.55; }
.eyebrow { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.section-block { margin-top: 34px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.section-heading h2 { margin: 4px 0 0; font-size: 23px; }
.section-heading > p { max-width: 520px; margin: 0; color: var(--muted); font-size: 14px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 15px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 13px; }
.button-primary { background: var(--brand); color: white; }
.button-primary:hover { background: var(--brand-dark); color: white; }
.button-secondary { border-color: #a9cbb8; background: var(--surface); color: var(--brand-dark); }
.button-secondary:hover { border-color: var(--brand); background: var(--brand-soft); }
.button-ghost { border-color: var(--line); background: transparent; color: var(--muted); }
.button:disabled { cursor: not-allowed; opacity: .5; }

.messages { display: grid; gap: 10px; margin-bottom: 20px; }
.message { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 14px; }
.message-success { border-color: #9ad0b2; background: var(--brand-soft); }
.message-error { border-color: #efb2b2; background: var(--danger-soft); }

/* Toast: prawy dolny rog ekranu (2026-09-14, na wyraznie zyczenie Patryka -
   wczesniej srodek ekranu), zawsze widoczny niezaleznie od przewiniecia
   strony, znika sam po 5s - pasek na gorze zostaje bez zmian dla kogos, kto
   chce wrocic i doczytac. Uzywany tez do "operacja w toku" zaraz po
   kliknieciu (patrz form[data-async-label] w base.html), nie tylko do
   wyniku po przeladowaniu strony. */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: grid; gap: 10px; pointer-events: none; width: min(360px, 90vw); }
.toast { box-shadow: 0 10px 30px rgba(24,37,30,.18); opacity: 1; transition: opacity .3s ease; }
.toast.toast-hide { opacity: 0; }
.toast.toast-progress { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--ink); }

/* Dymek startu importu - NIE zaslania strony (brak pelnoekranowego tla,
   brak blokady klikniec) - poprzednia wersja to robila i nie mialo
   zadnego zamkniecia, zgloszony blad 2026-09-13. */
.import-toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 1100; background: var(--surface); border-radius: 14px; padding: 16px 40px 16px 20px; max-width: min(420px, 90vw); box-shadow: 0 10px 30px rgba(24,37,30,.18); }
.import-toast strong { display: block; font-size: 15px; margin-bottom: 6px; }
.import-toast p { margin: 0; color: var(--muted); font-size: 13px; }
.import-toast-close { position: absolute; top: 8px; right: 10px; border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px; }
.import-toast-close:hover { color: var(--brand-dark); }

.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stat-card, .panel, .module-card, .integration-card, .toolbar { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 1px 0 rgba(24,37,30,.02); }
.stat-card { padding: 20px; }
.stat-card > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.stat-card > strong { display: block; margin-bottom: 12px; font-size: 31px; line-height: 1; }
.stat-card > a { font-size: 13px; font-weight: 700; }
/* Skrot sprzedazy na pulpicie (2026-10-16): opis karty i zmiana do poprzedniego okresu. */
.stat-card-note { display: block; margin: -6px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.stat-change { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.stat-change.is-up { color: #1f7a4d; }
.stat-change.is-down { color: var(--danger); }
:root[data-theme="dark"] .stat-change.is-up { color: #5fd39a; }
:root[data-theme="dark"] .stat-change.is-down { color: #f08a8a; }
.sales-overview { margin-bottom: 26px; }
.sales-overview .section-heading .button { white-space: nowrap; }
.sales-overview .stat-card > strong { font-size: 26px; overflow-wrap: anywhere; }
.sales-overview-range { margin: 4px 0 0; font-size: 13px; }
.sales-overview-foot { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
/* Wlasny zakres dat z godzina i minuta (statystyki, lista zamowien, 2026-10-16). */
.range-picker { margin-bottom: 12px; }
.range-picker > summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.range-picker-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.range-picker-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.range-picker-form input[type="datetime-local"] { min-width: 210px; }
.range-active { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--brand-soft); font-size: 13px; }
:root[data-theme="dark"] .range-active { background: var(--surface-soft); }
@media (max-width: 640px) {
    .range-picker-form label, .range-picker-form input[type="datetime-local"] { width: 100%; min-width: 0; }
}
.status-text { font-size: 20px !important; line-height: 1.2 !important; }
.status-success { color: var(--brand); }
.status-warning { color: var(--warning); }
.status-error { color: var(--danger); }
.status-muted { color: var(--muted); }

.flow-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.flow-step { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.flow-step > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-weight: 800; }
.flow-step.is-ready > span { background: var(--brand); color: white; }
.flow-step strong, .flow-step small { display: block; }
.flow-step small { margin-top: 2px; color: var(--muted); }
.flow-step a { font-size: 13px; font-weight: 700; }

.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-card { display: flex; flex-direction: column; padding: 18px; }
.module-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.module-card h2, .module-card h3 { margin: 0; }
.module-card h2 { margin-top: 16px; font-size: 20px; }
.module-card p { color: var(--muted); line-height: 1.48; font-size: 14px; }
.module-card > a { margin-top: auto; font-size: 13px; font-weight: 700; }
.module-card ul { margin: 0 0 20px; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.module-number { font-size: 13px; font-weight: 800; color: var(--muted); }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.badge-active { background: var(--brand-soft); color: var(--brand-dark); }
.badge-next { background: var(--warning-soft); color: var(--warning); }
.badge-progress { background: var(--warning-soft); color: var(--warning); }
.badge-planned { background: #e7ecff; color: #425aa8; }
.badge-later { background: #edf0ee; color: #68756d; }
.badge-review { background: #fdeccf; color: #8a5300; }
.badge-error { background: var(--danger-soft); color: var(--danger); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; color: var(--muted); font-size: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #999; }
.dot-active { background: var(--brand); }.dot-next { background: #e4982e; }.dot-planned { background: #6479cf; }.dot-later { background: #9ca7a0; }

.toolbar { margin-bottom: 14px; padding: 15px; }
.search-form label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 800; }
.search-form > div { display: flex; gap: 8px; }
input:not([type]), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="search"], input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"] { width: 100%; max-width: 520px; padding: 10px 12px; border: 1px solid #bdcac2; border-radius: 8px; background: var(--surface); color: var(--ink); }
input[type="date"], input[type="datetime-local"], input[type="time"] { width: auto; }
input:focus { outline: 3px solid rgba(24,118,74,.14); border-color: var(--brand); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { background: var(--surface-soft); color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-soft); }
td strong, td small { display: block; }
td small { margin-top: 3px; color: var(--muted); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 20px; padding: 18px; font-size: 13px; }
.empty-state { padding: 54px 24px; border: 1px dashed #bac8bf; border-radius: 14px; background: var(--surface); text-align: center; }
.empty-state h2 { margin: 8px 0; }
.empty-state p { max-width: 560px; margin: 0 auto 18px; color: var(--muted); }
.empty-icon { font-size: 34px; color: var(--brand); }

.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.panel { padding: 20px; }
.panel h2, .panel h3 { margin-top: 0; }

/* Zwijane sekcje karty produktu (2026-09-15, zgloszone przez Patryka -
   inspiracja BaseLinkerem: "karta produktu podzielona na bloki/sekcje").
   <details class="panel"> zamiast zwyklego <section class="panel"> - bez
   JS, zwijanie/rozwijanie robi sama przegladarka. */
details.panel > summary {
    cursor: pointer; list-style: none; margin: -20px -20px 0; padding: 20px;
    font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: space-between;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after { content: '▾'; color: var(--muted); font-weight: 400; margin-left: 12px; transition: transform .15s ease; }
details.panel[open] > summary::after { transform: rotate(180deg); }
details.panel[open] > summary { margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
details.panel > summary:hover { color: var(--brand-dark); }
.name-generate-row input[type="text"] { flex: 1; min-width: 0; }
.data-list { margin: 0; }
/* minmax(0, 1fr), nie samo 1fr (2026-09-23) - `1fr` ma domyslnie min-width:auto, wiec
   nieprzerywalny tekst (np. nazwa projektu z podkreslnikami, dlugie SKU) rozpychal caly
   wiersz zamiast sie zawijac - realny blad wykryty przy wiekszym rozmiarze czcionki. */
.data-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.data-list > div:last-child { border-bottom: 0; }
.data-list dt { color: var(--muted); font-size: 12px; }
.data-list dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.changelog-list { margin: 0; padding: 0; list-style: none; }
.changelog-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.changelog-list li:last-child { border-bottom: 0; }
.changelog-date { display: block; font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.changelog-list p { margin: 4px 0 0; font-size: 13px; }
.image-gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.product-description { max-width: 720px; line-height: 1.6; overflow-x: auto; }
.product-description img { max-width: 100%; }
.back-link { margin-top: 0; font-size: 13px; }
.muted { color: var(--muted); }
.notice { margin-top: 18px; padding: 13px 15px; border-left: 4px solid var(--warning); border-radius: 8px; background: var(--warning-soft); color: #70430b; font-size: 13px; }
.check-list { padding-left: 20px; line-height: 1.8; }

.integration-card { padding: 22px; }
.integration-head { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.integration-head h2, .integration-head p { margin: 0; }
.integration-head p { margin-top: 3px; color: var(--muted); font-size: 13px; }
/* Telefon: plakietka statusu i "Zwin" schodza pod naglowek zamiast wypychac strone w bok (wszystkie sekcje integracji). */
@media (max-width: 640px) { .integration-head { grid-template-columns: 46px minmax(0, 1fr); } .integration-head > .badge, .integration-head > .button { grid-column: 1 / -1; justify-self: start; } }

/* Kafelek na gorze /integracje/ otwiera te sekcje po kliknieciu - czysty
   CSS (:target), bez JS. Domyslnie zwiniete, dopoki nie wybierzesz kafelka. */
.integration-detail { display: none; margin-top: 20px; }
.integration-detail:target { display: block; }
.module-open-link { display: block; margin-top: 14px; color: var(--brand); font-size: 13px; font-weight: 700; }
/* Pole wyboru pliku nie moze byc szersze niz ekran telefonu (bylo: poziomy scroll m.in. w Uwagach i notatkach). */
input[type="file"] { max-width: 100%; }
/* Tekst tylko dla czytnikow ekranu (np. naglowek kolumny z samymi polami wyboru). */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Dluga nazwa pliku w podpisie albo dluga opcja listy nie moze rozpychac strony na telefonie. */
.studio-compare figcaption { overflow-wrap: anywhere; }
select { max-width: 100%; }
fieldset { min-width: 0; }
.studio-compose-canvas { display: block; width: 100%; max-width: 560px; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-bottom: 12px; }
.studio-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 16px; }
.studio-sliders label { font-size: 12px; font-weight: 700; }
.studio-sliders input[type=range] { display: block; width: 100%; margin-top: 4px; }
.studio-recipe { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 8px; font-size: 13px; }
.studio-recipe dt { color: var(--muted); }
.studio-recipe dd { margin: 0; overflow-wrap: anywhere; }
/* Atrybut hidden ma ukrywac element takze wtedy, gdy klasa nadaje mu display (przyciski, etykiety w siatce). */
[hidden] { display: none !important; }
/* Modul "Zdjecia 2.0" (2026-10-10): siatka kart, pasek wydatkow AI, strona zdjecia z uwagami na zdjeciu. */
.studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.studio-card { border: 1px solid var(--line); border-radius: 13px; padding: 12px; background: var(--surface); min-width: 0; }
.studio-card-image { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--line); display: block; }
.studio-card-select { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; margin-bottom: 6px; cursor: pointer; }
.studio-checks { margin: 8px 0; padding-left: 18px; font-size: 12px; }
.studio-more { margin-bottom: 6px; font-size: 13px; }
.studio-more summary { cursor: pointer; color: var(--brand-dark); font-weight: 700; padding: 4px 0; }
.studio-more form { margin-top: 6px; display: grid; gap: 6px; }
.studio-bulk { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--brand-soft); }
.studio-bulk label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; }
.studio-budget-bar { height: 8px; border-radius: 999px; background: #e3e9e5; overflow: hidden; margin-top: 8px; }
.studio-budget-bar span { display: block; height: 100%; background: var(--brand); }
.studio-budget-bar span.is-full { background: var(--danger); }
.studio-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .studio-detail { grid-template-columns: minmax(0, 1fr); } }
.studio-pin-area { position: relative; line-height: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.studio-pin-area img { width: 100%; height: auto; cursor: crosshair; display: block; }
.studio-pin { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; font-weight: 800; line-height: 24px; text-align: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); pointer-events: none; }
.studio-pin.is-resolved { background: #68756d; }
.studio-pin.is-new { background: var(--brand); }
.studio-pin-inline { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; margin-right: 6px; }
.studio-comment { border-bottom: 1px solid var(--line); padding: 8px 0; }
.studio-comment.is-resolved { opacity: .65; }
.studio-comment.is-resolved .studio-pin-inline { background: #68756d; }
.studio-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.studio-compare figure { margin: 0; min-width: 0; }
.studio-compare img, .studio-compare-empty { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; display: block; }
.studio-compare-empty { display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.studio-compare figcaption { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* Tabela "Co dziala w podlaczonych integracjach" (2026-10-09) - stan rozroznia znak i tekst, nie sam kolor. */
.capability-cell { font-size: 12px; min-width: 110px; vertical-align: top; }
.capability-mark { font-weight: 800; margin-right: 4px; }
.capability-ok .capability-mark { color: var(--brand-dark); }
.capability-untested .capability-mark, .capability-partial .capability-mark { color: var(--warning); }
.capability-missing .capability-mark { color: var(--danger); }
.capability-na { color: var(--muted); }
.integration-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #442586; color: white; font-size: 22px; font-weight: 800; }
.connection-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.connection-summary div { padding: 12px; border-radius: 9px; background: var(--surface-soft); }
.connection-summary dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.connection-summary dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; }
.integration-columns { display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; margin-top: 18px; }
.inset-panel { box-shadow: none; }
.stack-form p, .stack-form > div, .stack-form fieldset > div { margin: 0 0 14px; }
.color-field-row { display: flex; align-items: flex-end; gap: 10px; }
.color-field-row > div { flex: 1; margin: 0 !important; }
.color-swatch { display: block; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 1px; }
/* probnik kolorow obok pola z kodem (ustawienia projektu) */
.color-picker { padding: 2px; background: var(--paper, #fff); cursor: pointer; width: 48px; height: 42px; }
.color-picker.is-empty { opacity: .45; }
.color-picker:disabled { cursor: not-allowed; }
.stack-form label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 800; }
.stack-form .helptext { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.stack-form ul.errorlist { margin: 5px 0; padding: 8px 10px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); list-style: none; font-size: 12px; }
.security-note { margin-top: 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.project-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
.project-choice { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; width: 100%; }
.project-choice:hover, .project-choice.is-current { border-color: #85b99d; box-shadow: var(--shadow); }
.project-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; }
.project-choice strong, .project-choice small { display: block; }
.project-choice small { margin-top: 4px; color: var(--muted); }
.project-choice-cell { position: relative; }
.project-choice-cell form { margin: 0; width: 100%; }
.project-choice { padding-right: 46px; }
.project-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.project-settings-btn { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); }
.project-settings-btn:hover { border-color: #85b99d; background: var(--brand-soft); color: var(--brand-dark); }
.project-settings-btn svg { width: 16px; height: 16px; }
.project-stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
.project-stats div { text-align: left; }
.project-stats dt { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.project-stats dd { margin: 2px 0 0; font-weight: 700; white-space: nowrap; }
.project-choice-arrow { font-size: 18px; color: var(--muted); }

/* Dymek pomocy "?" (2026-09-14, zgloszone przez Patryka: "pole interaktywne
   ze znakiem zapytania - po najechaniu info jak cos dziala") - czysty
   CSS, bez JS, dziala tez z klawiatury (:focus). Uzycie:
   <span class="help-tip" tabindex="0">?<span class="help-tip-content">Tekst</span></span> */
.help-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 11px; font-weight: 800; cursor: help; vertical-align: middle; }
.help-tip-content { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 260px; padding: 8px 10px; border-radius: 8px; background: var(--ink); color: white; font-size: 11px; font-weight: 400; line-height: 1.4; text-align: left; box-shadow: var(--shadow); z-index: 30; }
.help-tip:hover .help-tip-content, .help-tip:focus .help-tip-content { display: block; }

/* Chipy aktywnych filtrow (2026-09-14, inspiracja panelem BaseLinkera
   zaproponowana przez Patryka) - kazdy chip usuwa TYLKO swoj warunek. */
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; font-weight: 600; text-decoration: none; }
.filter-chip:hover { border-color: #85b99d; }
.filter-chip-clear { background: var(--surface); color: var(--muted); font-weight: 400; }

.manifest-status-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.manifest-status-badge.is-draft { background: var(--brand-soft); color: var(--brand-dark); }
.manifest-status-badge.is-approved { background: #d9f2e3; color: #1c7a4a; }

/* Trzy tryby edycji opisu nad tym samym polem (2026-09-29, core/static/core/
   content_editor_tabs.js) - "Edytor wizualny" / "Edytor sekcji" / "HTML",
   wzor panelu BaseLinkera. Male zakladki nad edytorem, osobne od .pim-tabs
   (karta produktu) - inny kontekst, nie maja byc tak samo duze/wysokie. */
.content-editor-tabbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.content-editor-tab-btn { border: 1px solid var(--line); background: var(--surface); padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; border-radius: 8px; }
.content-editor-tab-btn:hover { color: var(--brand-dark); background: var(--brand-soft); }
.content-editor-tab-btn.is-active { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand); }
.content-editor-mode[hidden] { display: none; }
.content-editor-visual { min-height: 160px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.content-editor-visual:focus { outline: none; border-color: var(--brand); }
.content-editor-mode[data-mode="html"] textarea { width: 100%; }

/* Edytor opisu w sekcjach (2026-09-14, core/static/core/section_editor.js) -
   inspiracja BaseLinkerem: bloki tekst/obrazek, mozna przestawiac kolejnosc
   i wstawiac zdjecia z galerii produktu. */
.section-editor-blocks { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.pim-block { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.pim-block-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 7px 9px; background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.pim-block-type-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-right: 4px; white-space: nowrap; }
.pim-block-mixed-badge { font-size: 11px; font-weight: 600; color: #8a5a12; background: #fbe8cf; border-radius: 999px; padding: 3px 9px; white-space: nowrap; cursor: help; }
.pim-block-spacer { flex: 1; }
.pim-block-btn { min-height: 26px; min-width: 26px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12px; line-height: 1; cursor: pointer; }
.pim-block-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.pim-btn-bold { font-weight: 800; }
.pim-block-delete:hover { border-color: #c0392b; background: #fbdada; }
.pim-block-body { padding: 10px; }
.pim-block-body-composite { display: flex; gap: 10px; align-items: flex-start; }
.pim-block-body-composite .pim-col { flex: 1; min-width: 0; }
.pim-block-content { min-height: 60px; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.pim-block-content:focus { outline: none; border-color: var(--brand); border-style: solid; }
.pim-block-image-col { display: flex; flex-direction: column; gap: 8px; }
.pim-block-image-preview { min-height: 50px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: 8px; padding: 6px; }
.pim-block-image-preview img { max-height: 90px; max-width: 100%; }
/* Lista miniaturek do wyboru zdjecia w sekcji (2026-10-01) - male "kafelki"
   zamiast rozwijanej listy tekstowej, zeby nie rozwalac wysokosci sekcji. */
.pim-image-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.pim-image-picker-item { width: 96px; height: 96px; padding: 0; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--surface); }
.pim-image-picker-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pim-image-picker-item:hover { border-color: var(--brand); }
.pim-image-picker-item.is-selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.pim-image-picker-clear { align-self: flex-start; }
.section-editor-add { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.section-editor-add select { min-height: 40px; }

@media (max-width: 640px) {
    .pim-block-body-composite { flex-direction: column; }
}

/* Historia operacji (2026-09-14) - status kazdego wpisu logu. */
.op-status-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.op-status-badge.is-success { background: #d9f2e3; color: #1c7a4a; }
.op-status-badge.is-partial { background: #fbe8cf; color: #8a5a12; }
.op-status-badge.is-error { background: #fbdada; color: #a3271f; }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; }
    .main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
    .sidebar-footer { margin-top: 18px; }
    .stats-grid, .module-grid, .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .main-content { padding: 26px 16px 50px; }
    .page-header, .section-heading { display: block; }
    .page-header .button { margin-top: 14px; }
    .stats-grid, .module-grid, .compact-grid, .detail-grid, .integration-columns, .connection-summary, .project-grid { grid-template-columns: 1fr; }
    .search-form > div { flex-wrap: wrap; }
    .main-nav { grid-template-columns: 1fr; }
    .project-choice { grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "avatar name" "stats stats" "arrow arrow"; row-gap: 10px; }
    .project-choice .project-avatar { grid-area: avatar; }
    .project-choice > span:nth-child(2) { grid-area: name; }
    .project-stats { grid-area: stats; }
    .project-choice-arrow { grid-area: arrow; justify-self: end; }
    .flow-step { grid-template-columns: 34px minmax(0, 1fr); }
    .flow-step > a { grid-column: 2; }
}

/* Podglad integracji projektu (/integracje/) - schemat Startownia -> grupy -> kafelki. */
.integration-map { margin-bottom: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.integration-map > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font-weight: 800; cursor: pointer; list-style: none; }
.integration-map > summary::-webkit-details-marker { display: none; }
.integration-map > summary::after { content: "▾"; color: var(--muted); }
.integration-map[open] > summary::after { content: "▴"; }
.integration-map-body { display: grid; justify-items: center; padding: 4px 20px 22px; }
.integration-hub { padding: 12px 36px; border-radius: 12px; background: var(--brand); color: white; font-weight: 800; font-size: 18px; text-align: center; }
.integration-hub small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; opacity: .85; }
.integration-trunk { height: 22px; border-left: 2px dashed #a9cbb8; }
.integration-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; width: 100%; }
.integration-group { padding: 14px; border: 2px dashed #cfdcd4; border-radius: 12px; background: var(--surface-soft); }
.integration-group h3 { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
/* Wymuszona jedna kolumna na telefonie (2026-09-23) - `minmax(260px, 1fr)` teoretycznie juz
   jest responsywne (auto-fit), ale przy wiekszym rozmiarze czcionki (--app-zoom) ten sztywny
   minimalny rozmiar przestaje miescic sie na waskim ekranie i strona dostaje poziomy scroll.
   Regula musi byc PO bazowej `.integration-groups` powyzej, inaczej przegra w kaskadzie. */
@media (max-width: 640px) {
    .integration-groups { grid-template-columns: 1fr; }
}
.integration-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.integration-tile { display: flex; flex: 1 1 150px; flex-direction: column; align-items: center; gap: 7px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: center; }
.integration-tile:hover { border-color: var(--brand); color: var(--ink); }
.integration-tile small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.tile-brand { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.tile-apilo .tile-brand { color: #442586; }
.tile-allegro .tile-brand { color: #ff5a00; text-transform: lowercase; }
.tile-base .tile-brand { color: #1d2b3a; }
.tile-sellasist .tile-brand { color: #0b7a86; }
.tile-openai .tile-brand { color: #0e8f6e; }
.tile-kaufland .tile-brand { color: #e2001a; }
#kaufland .integration-logo { background: #e2001a; }
.tile-name { max-width: 100%; padding: 2px 12px; overflow: hidden; border: 1px solid #b9c8f0; border-radius: 999px; color: #34509c; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tile-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tile-status i { width: 8px; height: 8px; border-radius: 50%; background: #9ca7a0; }
.tile-status-ok { color: var(--brand-dark); }
.tile-status-ok i { background: var(--brand); }
.tile-status-warn { color: var(--warning); }
.tile-status-warn i { background: #e4982e; }
.tile-status-error { color: var(--danger); }
.tile-status-error i { background: var(--danger); }
.tile-status-neutral { color: var(--muted); }
.integration-empty { margin: 0; color: var(--muted); font-size: 13px; }
.integration-list-title { margin: 0 0 12px; font-size: 16px; }

/* Sortowanie listy produktow po naglowkach kolumn. */
.sort-link { color: inherit; white-space: nowrap; }
.sort-link:hover { color: var(--brand-dark); }
.sort-link span { color: #b3bfb8; font-size: 11px; }
.sort-link.is-active { color: var(--brand-dark); }
.sort-link.is-active span { color: var(--brand); }

/* Usuwanie produktow - wyrazne, czerwone akcje nieodwracalne. */
.button-danger { background: var(--danger); border-color: var(--danger); color: white; }
.button-danger:hover { background: #831f1f; border-color: #831f1f; color: white; }
.button-danger-ghost { border-color: #e3b0b0; background: var(--surface); color: var(--danger); }
.button-danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.delete-impact { margin: 14px 0; padding-left: 20px; line-height: 1.7; font-size: 14px; }
.delete-impact li strong { color: var(--danger); }
.delete-list { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.6; }

/* Zmiana typu istniejacej sekcji opisu - ikonki ukladu (2026-09-21, wzorem
   BaseLinkera) zamiast listy rozwijanej z nazwa typu. */
.pim-block-type-icons { display: flex; gap: 4px; margin-right: 6px; }
.pim-type-icon { display: flex; align-items: center; gap: 2px; padding: 4px 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.pim-type-icon:hover { border-color: var(--brand); }
.pim-type-icon.is-active { border-color: var(--brand); background: var(--brand-soft); }
.pim-type-icon-swatch { display: inline-block; width: 13px; height: 15px; border-radius: 2px; border: 1px solid var(--muted); background: var(--surface); position: relative; overflow: hidden; }
.pim-type-icon-swatch.is-text { background-image: repeating-linear-gradient(to bottom, var(--muted) 0, var(--muted) 2px, transparent 2px, transparent 4px); background-position: 3px 3px; background-size: 7px 3px; background-repeat: repeat-y; }
.pim-type-icon-swatch.is-image::after { content: '⛰'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--muted); }

/* Zadania w tle - pasek postepu. */
.job-bar { height: 8px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; margin-bottom: 4px; }
.job-bar span { display: block; height: 100%; background: var(--brand); }

/* Karta produktu: pole nazwy na pelna szerokosc (globalny limit 520 px obcinal dlugie tytuly),
   licznik znakow oraz przyklejony pasek zapisu (przycisk zawsze widoczny). */
.name-generate-row { display: flex; gap: 6px; align-items: center; }
.name-generate-row input[type="text"] { max-width: none; flex: 1; min-width: 0; }
.name-counter { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.name-counter.is-over { color: var(--warning); }
.sticky-save-bar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 -6px 16px rgba(24,37,30,.08); }
.save-state { color: var(--muted); font-size: 13px; }
.save-state.is-dirty { color: var(--warning); font-weight: 800; }

/* Przeglad UX calej aplikacji (2026-09-19): pola wyboru i wielolinijkowe wygladaly jak surowe
   elementy przegladarki (w przeciwienstwie do pol tekstowych) - jeden wspolny styl. */
select, textarea { font: inherit; color: var(--ink); border: 1px solid #bdcac2; border-radius: 8px; background: var(--surface); padding: 8px 10px; max-width: 100%; }
textarea { width: 100%; padding: 10px 12px; line-height: 1.5; }
.stack-form textarea { max-width: 640px; }
select:focus, textarea:focus { outline: 3px solid rgba(24,118,74,.14); border-color: var(--brand); }
.notes-filter { margin: 14px 0 10px; }
/* Zrzut ekranu wklejony do notatki (2026-10-02) - podglad pod polem pliku w formularzu. */
.note-screenshot-preview:not(:empty) { margin-top: 8px; display: flex; align-items: flex-start; gap: 10px; }
.note-screenshot-preview img { max-width: 220px; max-height: 160px; border: 1px solid var(--line); border-radius: 8px; display: block; }
.note-screenshot-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; }

/* Karta oferty i inne dwie kolumny: jedna kolumna na waskich ekranach (na telefonie strona byla szersza od ekranu). */
@media (max-width: 980px) {
    .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Menu boczne na telefonie/tablecie zwijane za przyciskiem (zajmowalo caly pierwszy ekran). */
.nav-toggle { display: none; }
@media (max-width: 980px) {
    .nav-toggle { display: block; width: 100%; margin-top: 12px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
    .sidebar:not(.nav-open) .main-nav, .sidebar:not(.nav-open) .sidebar-footer { display: none; }
    /* Zwijanie do samych ikon jest funkcja komputera (patrz "collapsed" nizej) - na telefonie
       jest juz "☰ Menu", drugi przycisk tylko myliby. */
    .sidebar-collapse-toggle { display: none; }
}
@media (max-width: 640px) {
    .name-generate-row { flex-wrap: wrap; }
    .name-generate-row input[type="text"] { flex: 1 1 100%; }
}

/* Male przyciski ikonowe na telefonie: wiekszy cel dotyku. */
@media (max-width: 640px) {
    .pim-block-toolbar button, .button-danger-ghost, td .button-ghost { min-width: 34px; min-height: 34px; }
}

/* Pole wyboru w etykiecie (np. Status na karcie i w filtrach) pod napisem, jak pola tekstowe. */
label > select { display: block; width: 100%; max-width: 520px; margin-top: 4px; }

/* Galeria zdjec produktu: ikony (zaznaczenie, smietnik) po najechaniu, przyciski w naglowku sekcji. */
.gallery-tools { display: flex; gap: 8px; margin-left: auto; margin-right: 8px; font-weight: 400; }
.gallery-tools .button { font-size: 12px; padding: 5px 10px; }
.gallery-thumb { position: relative; display: inline-block; }
.gallery-select, .gallery-trash-form { position: absolute; top: 4px; margin: 0; opacity: 0; transition: opacity .12s ease; }
.gallery-select { left: 4px; padding: 3px 4px; border-radius: 6px; background: rgba(255,255,255,.93); box-shadow: 0 1px 3px rgba(0,0,0,.25); line-height: 0; }
.gallery-select input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.gallery-trash-form { right: 4px; }
.gallery-icon-btn { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.93); color: var(--danger); font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.gallery-icon-btn:hover { background: var(--danger-soft); }
.gallery-thumb:hover .gallery-select, .gallery-thumb:hover .gallery-trash-form,
.gallery-thumb:focus-within .gallery-select, .gallery-thumb:focus-within .gallery-trash-form,
.gallery-item.is-selected .gallery-select { opacity: 1; }
.gallery-item.is-selected .gallery-thumb img { box-shadow: 0 0 0 3px var(--danger); }
@media (hover: none) { .gallery-select, .gallery-trash-form { opacity: 1; } }

/* Ekran dotykowy / telefon: wieksze ikony w galerii (bez najechania sa widoczne stale). */
@media (hover: none), (max-width: 640px) {
    .gallery-icon-btn { width: 34px; height: 34px; font-size: 16px; }
    .gallery-select { padding: 6px 7px; }
    .gallery-select input { width: 20px; height: 20px; }
}

/* Przestawianie kolejnosci zdjec (2026-10-01, zyczenie Patryka) - przyciski ◀ ▶ dzialaja wszedzie
   (tez na telefonie, gdzie HTML5 drag&drop nie dziala); przeciaganie myszka to dodatkowy skrot na
   komputerze, nie jedyny sposob. */
.gallery-item[draggable="true"] .gallery-thumb { cursor: grab; }
.gallery-item.is-dragging { opacity: .4; }
.gallery-move-btn { min-width: 28px; min-height: 28px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; font-size: 13px; }
.gallery-move-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.gallery-move-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 640px) {
    .gallery-move-btn { min-width: 34px; min-height: 34px; font-size: 15px; }
}

/* Podglad zdjecia produktu w aplikacji (pelny ekran, ciemne tlo). */
body.image-viewer-open { overflow: hidden; }
.image-viewer { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: auto 1fr; background: rgba(15, 20, 25, .97); color: #fff; }
.image-viewer[hidden] { display: none; }
.image-viewer-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; }
.image-viewer-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.image-viewer-badges span { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12px; }
.image-viewer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.image-viewer-btn { min-width: 38px; min-height: 38px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 14px; line-height: 1.2; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.image-viewer-btn:hover, .image-viewer-nav:hover { background: rgba(255,255,255,.22); }
.image-viewer-btn:focus-visible, .image-viewer-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.image-viewer-zoom-level { min-width: 64px; }
.image-viewer-danger { color: #ffb4b4; border-color: rgba(255,180,180,.5); }
.image-viewer-nav { align-self: center; justify-self: center; width: 44px; height: 72px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.image-viewer.is-single .image-viewer-nav { visibility: hidden; }
.image-viewer-stage { display: flex; overflow: auto; min-width: 0; min-height: 0; padding: 4px; }
.image-viewer-stage img { margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; background: #fff; }
.image-viewer.is-zoomed .image-viewer-stage img { cursor: zoom-out; }
@media (max-width: 640px) {
    .image-viewer { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .image-viewer-nav { position: absolute; top: 50%; width: 38px; height: 60px; opacity: .85; }
    .image-viewer-prev { left: 4px; }
    .image-viewer-next { right: 4px; }
    .image-viewer-btn { min-height: 42px; }
}

/* Pasek generowania AI na karcie produktu (postep zadania w tle). */
.ai-job-banner { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; background: var(--surface); }
.ai-job-banner.is-active { background: var(--brand-soft, #f2f8f4); }
.ai-job-banner.is-error { border-left-color: var(--danger); }
.ai-job-banner.is-cancelled { border-left-color: var(--muted, #8a948e); }
.ai-job-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.ai-job-head form { margin: 0; }


/* Skrot ostatnich operacji na lewej belce (2026-09-23). */
.sidebar-activity { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 4px; }
.sidebar-activity-title { font-size: calc(11px * var(--sidebar-font-scale)); text-transform: uppercase; letter-spacing: .05em; color: #a9c2b3; margin-bottom: 2px; }
.sidebar-activity-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 3px; padding: 4px 8px; border-radius: 8px; color: #dbe8df; font-size: calc(12px * var(--sidebar-font-scale)); min-width: 0; }
.sidebar-activity-item:hover { background: rgba(255,255,255,.08); color: white; }
.sidebar-activity-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-activity-time { font-size: calc(10.5px * var(--sidebar-font-scale)); color: #a9c2b3; }
.sidebar-activity-item.is-error .sidebar-activity-label { color: #ffb4a8; }
.sidebar-activity-item.is-partial .sidebar-activity-label { color: #ffe0a3; }
.sidebar-activity-item.is-running .sidebar-activity-label { color: #9be7b5; }
.sidebar-activity-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.sidebar-activity-bar > span { display: block; height: 100%; background: #4bd07f; }
.sidebar-activity-empty { font-size: calc(12px * var(--sidebar-font-scale)); color: #a9c2b3; padding: 0 8px; }
.sidebar-activity-all { font-size: calc(11.5px * var(--sidebar-font-scale)); color: #a9c2b3; padding: 2px 8px; }
.sidebar-activity-all:hover { color: white; }
@media (max-width: 980px) { .sidebar:not(.nav-open) .sidebar-activity { display: none; } }
@media (min-width: 981px) { html[data-sidebar="collapsed"] .sidebar-activity { display: none; } }

/* Karta produktu w zakladkach (2026-09-25, etap 29+44) - proste zakladki: pasek przyciskow +
   panele, przelaczane JS (patrz product_detail.html). Zadna zakladka nie jest osobnym formularzem
   ani osobnym <details> - to tylko warstwa wizualna nad tym samym <form id="product-form">, zeby
   sledzenie niezapisanych zmian dzialalo bez zmian. */
.pim-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.pim-tab-btn { border: none; background: transparent; padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; border-radius: 9px 9px 0 0; }
.pim-tab-btn:hover { color: var(--brand-dark); background: var(--brand-soft); }
.pim-tab-btn.is-active { color: var(--brand-dark); background: var(--brand-soft); box-shadow: inset 0 -3px 0 var(--brand); }
.pim-tab-panel[hidden] { display: none; }

/* Integracje: OMS obok siebie w 4 kolumnach (2026-09-26, zyczenie Patryka), nizej 2 / 1 kolumna */
.oms-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.integration-subtitle { margin: 0 0 12px; font-size: 15px; color: var(--muted); }
@media (max-width: 1250px) { .oms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .oms-grid { grid-template-columns: minmax(0, 1fr); } }

/* Anonimizacja danych (core/anonymize.py): przycisk "Pokaz dane" / "Ukryj dane" w karcie projektu na lewej belce. */
.anonymize-box { margin-top: 8px; font-size: 12px; }
.anonymize-box summary { cursor: pointer; list-style: none; }
.anonymize-box summary::-webkit-details-marker { display: none; }
.anonymize-box form { display: flex; gap: 6px; margin-top: 6px; }
.anonymize-box input[type="password"] { flex: 1; min-width: 0; padding: 4px 8px; font-size: 12px; }
.anonymize-box .button { padding: 4px 8px; font-size: 12px; }
html[data-sidebar="collapsed"] .anonymize-box { display: none; }
.anonymize-panel-form { display: flex; gap: 8px; flex-wrap: wrap; }
.anonymize-panel-form input[type="password"] { flex: 1; min-width: 140px; }

/* Zakladka "Zrodlo" na karcie produktu (core/product_source.py). */
.source-field { padding: 12px 0; border-top: 1px solid var(--line, #dfe6e0); }
.source-field.is-review { border-left: 4px solid var(--danger, #b3261e); padding-left: 12px; }
.source-field-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.source-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.source-columns > div { min-width: 0; }
.source-caption { display: block; font-size: 12px; color: var(--muted, #5d6b63); margin-bottom: 3px; overflow-wrap: anywhere; }
.source-value { padding: 8px 10px; border-radius: 8px; background: var(--panel-alt, #f7f8f6); font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; }
.source-value.source-long { max-height: 220px; overflow: auto; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.source-value.is-corrected { background: #e7ecff; }
.source-edit { margin-top: 8px; font-size: 13px; }
.source-edit summary { cursor: pointer; color: var(--brand-dark, #1b6b47); }
.source-preview { display: block; width: 100%; height: 420px; border: 0; background: #fff; border-radius: 8px; }
.source-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, calc(50% - 6px)), 1fr)); gap: 12px; }
.source-image { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.source-image img, .source-image-missing { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: var(--panel-alt, #f7f8f6); }
.source-image-missing { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted, #5d6b63); text-align: center; }
.source-image.is-marked img { opacity: .45; }
/* Zrodlo per polaczenie (2026-10-17): przelacznik zrodel, porownanie, wybor zdjec do Mediow */
.source-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.source-switch-item { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line, #dfe6e0); background: var(--surface, #fff); color: inherit; text-decoration: none; font-size: 13px; min-width: 0; max-width: 100%; position: relative; }
.source-switch-item strong { overflow-wrap: anywhere; }
.source-switch-item span { font-size: 12px; color: var(--muted, #5d6b63); }
.source-switch-item .badge { position: absolute; top: -8px; right: -6px; color: #fff; }
.source-switch-item:hover { border-color: #85b99d; }
.source-switch-item.is-active { border-color: var(--brand-dark, #1b6b47); background: var(--brand-soft, #e9f4ee); box-shadow: inset 0 0 0 1px var(--brand-dark, #1b6b47); }
.source-compare-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; font-size: 13px; }
.source-compare-form label { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.source-compare-form select { max-width: 100%; }
.source-compare { padding: 12px; border-radius: 10px; background: var(--panel-alt, #f7f8f6); margin-bottom: 14px; }
.source-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.source-actions form { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.source-media-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; padding: 10px 12px; border-radius: 10px; background: var(--panel-alt, #f7f8f6); margin-bottom: 12px; font-size: 13px; }
.source-media-bar label { display: flex; flex-direction: column; gap: 4px; }
.source-media-bar .source-select-all { flex-direction: row; align-items: center; gap: 6px; }
.source-image > a { display: block; width: 100%; }
.source-image-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.source-image-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* Akcje "nowe produkty z systemu magazynowego" (core/oms_fetch.py). */
.oms-fetch-row { padding: 12px 0; border-top: 1px solid var(--line, #dfe6e0); }
.oms-fetch-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oms-fetch-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 6px; }
.oms-fetch-form label { font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.oms-fetch-form label.oms-fetch-check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px; }
.oms-fetch-form input[type="checkbox"] { width: auto; }
.oms-fetch-edit { margin-top: 6px; font-size: 13px; }
.oms-fetch-edit summary { cursor: pointer; color: var(--brand-dark, #1b6b47); }
.oms-fetch-days { display: flex; flex-wrap: wrap; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.oms-fetch-days legend { font-size: 13px; padding: 0; margin-bottom: 3px; }
.oms-fetch-form .oms-fetch-days label { flex-direction: row; align-items: center; gap: 4px; }

/* Zestawy rol zdjec (core/image_roles.py). */
.role-set-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; }
.role-row { padding: 12px 0; border-top: 1px solid var(--line, #dfe6e0); }
.role-row.is-off { opacity: .6; }
.role-row-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.role-row-head code { font-size: 12px; color: var(--muted, #5d6b63); }
.role-position { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 13px; background: var(--brand-soft, #dff2e6); font-size: 12px; font-weight: 700; }
.role-move { display: inline-flex; gap: 4px; margin-left: auto; }
.role-move .button { padding: 2px 10px; }
.role-text { margin: 4px 0 0; font-size: 13px; overflow-wrap: anywhere; }
.role-edit { margin-top: 6px; font-size: 13px; }
.role-edit summary { cursor: pointer; color: var(--brand-dark, #1b6b47); }
.role-check { display: flex !important; flex-direction: row !important; gap: 6px; align-items: center; }
.role-check input { width: auto; }

/* Pamiec zasad w "Zdjecia 2.0" (core/image_memory.py). */
.rule-row { padding: 10px 0; border-top: 1px solid var(--line, #dfe6e0); overflow-wrap: anywhere; }
.rule-row.is-off { opacity: .6; }
.rule-scope { margin: 16px 0 4px; font-size: 15px; }
.rule-form { margin-top: 8px; }
.rule-checklist { margin: 0 0 8px; padding-left: 20px; font-size: 14px; }
.rule-checklist li { margin-bottom: 4px; overflow-wrap: anywhere; }

/* Modul kanalu Erli (core/channel_offers.py). */
.erli-accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.erli-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.erli-filters label { font-size: 13px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Czas pracy (2026-10-15, czas/): zegar w menu bocznym, "Moj czas", raport zespolu */
.czas-box { margin: 10px 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: inherit; font-size: 13px; }
.czas-box label { display: block; color: inherit; font-size: 12px; margin-bottom: 6px; }
.czas-box select, .czas-box input { width: 100%; max-width: none; padding: 6px 8px; font-size: 13px; margin-top: 2px; }
.czas-box summary { cursor: pointer; font-weight: 800; list-style: none; }
.czas-box summary::-webkit-details-marker { display: none; }
.czas-form { margin-top: 8px; }
.czas-btn { width: 100%; min-height: 34px; margin-top: 6px; }
.czas-on { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.czas-co { margin: 2px 0 4px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.czas-links { margin-top: 8px; font-size: 12px; }
.czas-links a, .czas-box summary, .czas-start-link, .czas-inny { color: inherit; }
.czas-start-link { font-weight: 800; text-decoration: none; }
.czas-inny { display: block; margin-top: 6px; font-size: 12px; }
.czas-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; animation: czas-puls 1.4s infinite; }
@keyframes czas-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .czas-dot { animation: none; } }
.czas-okres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }
.czas-okres label { display: inline-flex; gap: 6px; align-items: center; }
.czas-okres select { max-width: 240px; }
.czas-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.czas-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.czas-card strong { font-size: 24px; }
.czas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; align-items: end; }
.czas-grid label { display: flex; flex-direction: column; gap: 4px; }
.czas-num { text-align: right; white-space: nowrap; }
.czas-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.czas-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.czas-edit summary { cursor: pointer; font-size: 13px; }

/* Karta zamowienia (2026-10-16, core/templates/core/order_detail.html) - prefiks oc- */
.oc-back { display: inline-block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.oc-number { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.oc-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.oc-date { font-size: 13px; margin-left: 4px; }
.oc-badge-smart { background: #ffe8d6; color: #b2470b; }
.oc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -8px 0 16px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.oc-actions form { margin: 0; }
.oc-soon { gap: 6px; min-height: 34px; padding: 6px 11px; font-size: 12px; }
.oc-soon-group { display: contents; }
.oc-soon-note { display: none; margin: 0; font-size: 12px; }
.oc-soon-tag { padding: 2px 6px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.oc-tabs { display: flex; gap: 2px; overflow-x: auto; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.oc-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 3px solid transparent; color: var(--muted); font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.oc-tabs a:hover { color: var(--ink); }
.oc-tabs a.is-active { border-bottom-color: var(--brand); color: var(--brand-dark); }
:root[data-theme="dark"] .oc-tabs a.is-active { color: var(--ink); }
.oc-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; text-align: center; }
.oc-panel { margin-bottom: 18px; }
.oc-panel[hidden] { display: none; }
.oc-h2 { margin: 0 0 12px; font-size: 17px; }
.oc-small { font-size: 12px; }
.oc-label { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.oc-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
.oc-main, .oc-side, .oc-wide { display: grid; gap: 16px; min-width: 0; }
.oc-wide { margin-top: 16px; }
/* os czasu */
.oc-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.oc-step { display: flex; flex-direction: column; gap: 3px; padding-top: 4px; font-size: 13px; }
.oc-step .oc-dot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 4px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-weight: 800; }
.oc-step.is-done .oc-dot { border-color: var(--brand); background: var(--brand); color: #fff; }
.oc-step.is-current .oc-dot { border-color: var(--warning); color: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
.oc-step.is-cancelled .oc-dot { border-color: var(--danger); background: var(--danger); color: #fff; }
.oc-step-note { color: var(--brand-dark); font-size: 12px; font-weight: 700; }
:root[data-theme="dark"] .oc-step-note { color: var(--sidebar-accent); }
/* pozycje */
.oc-lines { display: grid; gap: 10px; }
.oc-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
.oc-thumb { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px; background: var(--surface-soft); font-size: 24px; }
.oc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.oc-line-name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.oc-line-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.oc-tags { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 4px; font-size: 12px; }
.oc-tags div { display: flex; gap: 4px; }
.oc-tags dt { color: var(--muted); }
.oc-tags dd { margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oc-tags div { min-width: 0; }
.oc-summary { display: grid; gap: 6px; max-width: 320px; margin: 14px 0 0 auto; font-size: 14px; }
.oc-summary div { display: flex; justify-content: space-between; gap: 12px; }
.oc-summary dt { color: var(--muted); }
.oc-summary dd { margin: 0; font-weight: 700; }
.oc-summary-total { padding-top: 6px; border-top: 1px solid var(--line); font-size: 17px; }
/* pola z opisem (wzor Sellasist) */
.oc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 10px 18px; margin: 0; }
.oc-fields-1 { grid-template-columns: minmax(0, 1fr); }
.oc-fields dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.oc-fields dd { margin: 2px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.oc-field-strong dd { font-weight: 800; }
.oc-comment { margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--brand); border-radius: 8px; background: var(--surface-soft); }
.oc-comment p { margin: 4px 0 0; }
.oc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.oc-card h3 { margin: 0 0 10px; font-size: 15px; }
.oc-card-invoice { border-color: #e9c27d; }
.oc-invoice-flag { display: inline-block; margin: 0 0 8px; padding: 4px 9px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-size: 12px; font-weight: 800; }
.oc-address { font-style: normal; line-height: 1.55; overflow-wrap: anywhere; }
/* panel boczny */
.oc-alert { margin: 0 0 8px; padding: 9px 11px; border-left: 4px solid var(--line); border-radius: 8px; background: var(--surface-soft); font-size: 13px; line-height: 1.4; }
.oc-alert:last-child { margin-bottom: 0; }
.oc-alert-danger { border-left-color: var(--danger); background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.oc-alert-warning { border-left-color: var(--warning); background: var(--warning-soft); color: var(--warning); font-weight: 700; }
.oc-alert-info { border-left-color: #6a83d6; }
.oc-alert-success { border-left-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
:root[data-theme="dark"] .oc-alert-success { color: var(--ink); background: var(--surface-soft); }
.oc-other { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; text-decoration: none; }
.oc-other:last-child { border-bottom: 0; }
/* przesylki */
.oc-shipment { padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; }
.oc-shipment.is-compact { padding: 9px 10px; }
.oc-shipment-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; align-items: flex-start; }
.oc-shipment.is-compact .oc-shipment-head { flex-direction: column; }
.oc-shipment.is-compact .oc-shipment-status { text-align: left; }
.oc-tracking { display: block; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.oc-shipment-status { font-size: 12px; font-weight: 800; text-align: right; }
.oc-progress { height: 6px; margin: 8px 0 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.oc-progress span { display: block; height: 100%; border-radius: 999px; background: var(--warning); }
.oc-tone-success .oc-progress span { background: var(--brand); }
.oc-tone-success .oc-shipment-status { color: var(--brand); }
.oc-tone-danger .oc-progress span { background: var(--danger); }
.oc-tone-danger .oc-shipment-status { color: var(--danger); }
.oc-tone-info .oc-progress span { background: #6a83d6; }
.oc-tone-muted .oc-progress span { background: var(--muted); }
.oc-tone-progress .oc-shipment-status { color: var(--warning); }
.oc-shipment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* historia i notatki */
.oc-history { margin: 0; padding: 0; list-style: none; }
.oc-history li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px 12px; padding: 9px 0 9px 14px; border-left: 3px solid var(--line); font-size: 14px; }
.oc-history li .oc-label { grid-column: 2; }
.oc-history li time { grid-row: span 2; color: var(--muted); font-size: 12px; }
.oc-history li.oc-history-shipment { border-left-color: #6a83d6; }
.oc-history li.oc-history-cancelled { border-left-color: var(--danger); }
.oc-history li.oc-history-note { border-left-color: var(--warning); }
.oc-history li.oc-history-status { border-left-color: var(--brand); }
.oc-note-form { display: grid; gap: 8px; margin-bottom: 16px; }
.oc-note-form textarea { width: 100%; box-sizing: border-box; }
.oc-note-form .button { justify-self: start; }
.oc-note { padding: 10px 0; border-top: 1px solid var(--line); }
.oc-note p { margin: 4px 0 0; overflow-wrap: anywhere; }
@media (max-width: 980px) {
    .oc-grid { grid-template-columns: minmax(0, 1fr); }
    .oc-side { order: -1; }  /* na waskim ekranie najpierw "Co wymaga uwagi" i przesylki */
}
@media (max-width: 640px) {
    .oc-line { grid-template-columns: 52px minmax(0, 1fr); }
    .oc-thumb { width: 52px; height: 52px; }
    .oc-line-price { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
    .oc-summary { max-width: none; }
    .oc-history li { grid-template-columns: minmax(0, 1fr); }
    .oc-history li .oc-label, .oc-history li time { grid-column: 1; grid-row: auto; }
    .oc-actions .button { flex: 1 1 auto; }
    .oc-soon-group { display: none; }
    .oc-soon-note { display: block; flex-basis: 100%; }
}
@media print {
    .oc-actions, .oc-tabs, .oc-shipment-actions, .oc-note-form { display: none !important; }
    .oc-panel[hidden] { display: block !important; }
}