/* HIDDEN WYGRYWA Z KAZDYM display Z KLASY (Pawel 2026-09-13: prawa kolumna nie znikala, tylko spadala pod tresc).
   Lekcja powtorzona trzeci raz — dlatego regula globalna, nie punktowa. */
[hidden]{display:none!important}

:root{
  /* ═══ TOKENY (DESIGN.md §1, 2026-09-18) — jedyne miejsce z kolorami marki. ═══ */
  /* powierzchnie */
  --bg:#f3f5f4; --panel:#ffffff; --soft:#e6ebe8; --soft-2:#eef1ef; --line:#dde3e0; --line-strong:#c5cec9;
  /* tekst */
  --txt:#17211c; --muted:#5b6b63; --muted-2:#9aa8a1;
  /* akcent — PODMIENIANY per instalacja (app_settings `branding.theme` → :root); reszta liczy sie z niego */
  --accent:#0f7a4f;
  --accent-hover:color-mix(in srgb, var(--accent) 85%, #000000);
  --on-accent:#ffffff;   /* tekst i ikona NA wypelnieniu (akcent, danger, ok) — zostaje bialy takze w skorkach ciemnych, bo lezy na pelnym kolorze */
  --field-line:#7e8b85;   /* obrys KONTROLKI (pole, przelacznik, segment) — 3,55:1 wobec bieli; --line (1,30:1) jest niewidoczny dla oka slabowidzacego, DESIGN §8.8 */
  --accent-text:var(--accent);   /* DESIGN 1.4 1: akcent jako tekst/ikona/obrys. W jasnym = akcent, w ciemnym rozjasniony. */
  --accent-soft:color-mix(in srgb, var(--accent) 12%, #ffffff);
  --accent-ring:color-mix(in srgb, var(--accent) 25%, #ffffff);
  --accent-deep:color-mix(in srgb, var(--accent) 78%, #0d1a13);
  /* semantyka — STALA, niezalezna od akcentu */
  --ok:#067647; --ok-soft:#e3f3ea; --warn:#b54708; --warn-soft:#fbefe3; --danger:#b42318; --danger-soft:#fbeae7; --info:#175cd3; --info-soft:#e8f0fb;
  /* kategorie wpisow kalendarza (kolor DANYCH, nie marki — istnialy przed DESIGN.md) */
  --spotkanie:#7c3aed; --email:#0ea5e9; --telefon:#15a05a; --zadanie:var(--muted);
  /* typografia */
  --font:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Manrope',var(--font);
  /* geometria */
  --radius-sm:10px; --radius:12px; --radius-lg:14px; --radius-xl:16px; --radius-pill:999px;
  /* cienie — tylko dwa (aktywny segment, okno modalne / arkusz dolny) */
  --sh-seg:0 1px 2px rgba(23,33,28,.10); --sh-modal:0 12px 32px rgba(23,33,28,.18);
  --shadow:none;                              /* 30 istniejacych uzyc `var(--shadow)` = karty BEZ cienia (DESIGN §0.3) */
  --ring:0 0 0 3px var(--accent-ring);        /* poswiata focusu pol */
  --tr:.16s cubic-bezier(.4,0,.2,1);
}
/* TRYB CIEMNY (DESIGN §1) — te same nazwy, inne wartosci. ⚠️ Wlaczany JAWNIE atrybutem <html data-theme="dark">, a nie
   automatem `prefers-color-scheme`. [ZMIERZONE 2026-09-18, paczka 2] tla i obrysy sa juz na tokenach — poza
   automat dalby uzytkownikom z ciemnym telefonem biale klocki na ciemnym tle. Automat wlaczymy, gdy komponenty przejda
   na tokeny (etapy B–H); decyzja Pawla. */
:root[data-theme="dark"]{
  --bg:#121816; --panel:#1b2320; --soft:#26302b; --soft-2:#212a26; --line:#2e3934; --line-strong:#3d4a44;
  --txt:#e8ede9; --muted:#a3b0a9; --muted-2:#6d7a73;
  --accent-soft:color-mix(in srgb, var(--accent) 22%, #1b2320);
  --ok:#4cc38a; --warn:#f3a75c; --danger:#f0776d; --info:#7aa7f5;
  --ok-soft:#173a29; --warn-soft:#3f2a12; --danger-soft:#3f1c19; --info-soft:#17284a;
  /* CHIPY W CIEMNYM (DESIGN 1.3 §1): tekst chipa liczy sie wzgledem TLA CHIPA, nie tla ekranu.
     Pelny kolor na ciemnym „soft” daje ok. 3:1 — dlatego tekst to rozjasniony wariant tego samego koloru. */
  --accent-text:color-mix(in srgb, var(--accent) 55%, #ffffff);
  --chip-ok-txt:color-mix(in srgb, var(--ok) 72%, #ffffff);
  --chip-warn-txt:color-mix(in srgb, var(--warn) 78%, #ffffff);
  --chip-danger-txt:color-mix(in srgb, var(--danger) 72%, #ffffff);
  --chip-info-txt:color-mix(in srgb, var(--info) 72%, #ffffff);
  --spotkanie-text:color-mix(in srgb, var(--spotkanie) 55%, #ffffff);   /* plakietka spotkania — kolor DANYCH rozjasniony jak chipy (DESIGN §1) */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
/* POLA TEKSTOWE BIORA CZCIONKE APLIKACJI (zgloszenie Pawla 2026-08-29: „ciagle pisze jakas dziwna
   czcionka?"). Przegladarka domyslnie rysuje <textarea> czcionka MASZYNOWA i tak wygladalo pole
   pytania w Bazie wiedzy [ZMIERZONE: font-family = monospace, gdy cala strona ma Inter].
   Dotad kazdy komponent ustawial to sobie sam (.addfld, .cronf, .mailcompose) — kto zapomnial,
   ten dostawal maszyne do pisania. To jest regula OGOLNA i o najnizszej siled: dowolna istniejaca
   klasa albo styl w kodzie ja przebija, wiec pola celowo maszynowe (kod, JSON) zostaja jak byly. */
textarea,input,select,button{font-family:inherit}
body{background:var(--bg);color:var(--txt);font:15px/1.4 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* DESIGN §0.12: widoczny focus z klawiatury na WSZYSTKIM */
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
/* ===== SCROLLBARY — cienkie, nowoczesne (zamiast grubych systemowych belek), spójne z motywem ===== */
/* Standard (Chrome 121+/Firefox). UWAGA: scrollbar-width NIE jest dziedziczone → musi być na KAŻDYM scrollerze (*);
   scrollbar-color JEST dziedziczone → wystarczy na html + override dla ciemnych powierzchni. */
/* ⭐ Paweł 2026-09-29 („szare paski na szarym tle… zmieniałeś tylko w jednym miejscu”): JEDEN wygląd paska w całym panelu — uchwyt
   `--accent` na torze `--soft-2`, jak w oknach i u asystenta. ⚠️ Nowy Chrome (121+) bierze kolor ze STANDARDU `scrollbar-color`
   i wtedy IGNORUJE `::-webkit-scrollbar-*` — dlatego akcentowy uchwyt w regułach webkit poniżej nie działał tam, gdzie reguła
   komponentu ustawiała `scrollbar-color` na szary. Komponent może zmienić GRUBOŚĆ (scrollbar-width), kolor zostaje wspólny. */
*{scrollbar-width:thin}
html{scrollbar-color:var(--accent) var(--soft-2)}
/* WebKit fallback (starszy Chrome/Safari; nowy Chrome i tak używa standardu wyżej) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--soft-2)}
::-webkit-scrollbar-thumb{background-color:var(--accent);border:2px solid transparent;background-clip:padding-box;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background-color:var(--accent-hover)}
::-webkit-scrollbar-corner{background:transparent}
.hidden{display:none !important}
small{color:var(--muted)}
kbd{font:11px monospace;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--muted)}
.btn{border:1px solid var(--field-line);background:var(--panel);color:var(--txt);padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:14px;transition:background var(--tr),border-color var(--tr),box-shadow var(--tr)}
.btn:hover{background:var(--soft);border-color:var(--field-line)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--sm{padding:5px 11px;font-size:13px}
.abtn{border:1px solid var(--field-line);background:var(--panel);border-radius:7px;padding:3px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--accent-text)}
.abtn:hover{background:var(--accent-soft)}
.upsearch{margin:7px 0 5px}
.upsearch .upcliq{width:100%;max-width:300px;border:1px solid var(--field-line);border-radius:8px;padding:7px 11px;font-size:13px;background:var(--panel)}
.upsearch .upcliq:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.upclilist{display:flex;flex-wrap:wrap;gap:6px}
.iconbtn{border:none;background:transparent;cursor:pointer;font-size:15px;color:var(--muted);padding:6px;border-radius:8px}
.iconbtn:hover{background:var(--soft);color:var(--txt)}

.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px}
.brand__mark{display:grid;place-items:center;width:26px;height:26px;background:#111827;color:var(--on-accent);border-radius:7px;font-size:14px}
.brand--big{font-size:24px}.brand--big .brand__mark{width:34px;height:34px;font-size:18px}

/* LOGIN */
.login{min-height:100%;display:grid;place-items:center;padding:24px;
  background:radial-gradient(900px 500px at 80% -10%,var(--accent-soft),transparent)}
.login__card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.login__sub{color:var(--muted);margin:8px 0 18px}
.login__hint{color:var(--muted);font-size:12px;margin-top:14px}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field span{font-size:13px;color:var(--muted)}
.field input{border:1px solid var(--field-line);border-radius:9px;padding:10px 12px;font-size:14px}
.field input:focus{outline:none;border-color:var(--accent-text)}
.login .btn--primary{width:100%;margin-top:8px}

/* APP LAYOUT */
.app{display:grid;grid-template-columns:264px 1fr;height:100vh;overflow:hidden;transition:grid-template-columns .22s ease}
.app.nav-collapsed{grid-template-columns:68px 1fr}

/* SIDEBAR — jasny (DESIGN.md 2026-09-18: powierzchnie jasne, obrys 1 px; dawna ciemna chroma zdjeta z uzycia). */
.sidebar{background:var(--panel);color:var(--txt);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:10px 10px 0;overflow:hidden}
.sidebar__top{display:flex;flex-direction:column;gap:8px;padding:4px 4px 8px}
.sidebar__brandrow{display:flex;align-items:center;gap:10px}
.sidebar .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;color:var(--txt);flex:1;min-width:0}
.sidebar .brand__mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:15px;flex:none;box-shadow:none}
.sidebar .brand__txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__collapse{border:none;background:none;cursor:pointer;color:var(--muted);display:flex;padding:4px;border-radius:7px;flex:none}
.nav__collapse:hover{background:var(--soft-2);color:var(--txt)}
.nav__collapse svg{transition:transform .18s}
.app.nav-collapsed .nav__collapse svg{transform:rotate(180deg)}
.sidebar .search{position:relative;display:flex;align-items:center;background:var(--soft-2);border-radius:9px}
.sidebar .search input{width:100%;border:none;background:none;color:var(--txt);padding:8px 11px;font-size:12.5px}
.sidebar .search input::placeholder{color:var(--muted)}
.sidebar .search input:focus{outline:none}
.sidebar .search kbd{position:absolute;right:8px;font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:none}
.nav{flex:1;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden;padding:2px 0 12px}
.nav__pinned,.nav__favlist,.nav__kids{display:flex;flex-direction:column;gap:1px}
.nav__sep{height:1px;background:var(--line);margin:7px 6px}
.nav__favhd{display:flex;align-items:center;gap:6px;padding:6px 10px 4px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sidebar .nav__label{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:8px 8px 4px}
.nav__item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:transparent;color:var(--txt);padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:600}
.nav__item:hover{background:var(--soft-2)}
.nav__item.is-active{background:var(--accent);color:var(--on-accent)}
.nav__item.is-echo{background:var(--accent-soft);color:var(--accent-text)}   /* DESIGN §8.2: skrot w Ulubionych, gdy ten sam ekran stoi TEZ w drzewie — pelny akcent bierze drzewo */
.nav__item.is-active .nav__badge{background:rgba(255,255,255,.22);color:var(--on-accent)}
.nav__ic{display:flex;flex:none;color:inherit}
.nav__svg{display:block}
.nav__txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__badge{font-size:11px;font-weight:600;color:var(--muted);background:var(--soft-2);border-radius:20px;padding:1px 7px}
.nav__dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.nav__star{display:flex;flex:none;color:var(--muted);opacity:.35;padding:1px;border-radius:5px;cursor:pointer}
.nav__star:hover{opacity:1}
.nav__star.is-on{opacity:1;color:var(--accent-text)}
/* „Schowaj z menu" — POKAZUJE SIE DOPIERO PO NAJECHANIU na pozycje. Przy spoczynku menu wyglada
   jak dotad (gwiazdka + licznik), wiec nie robimy balaganu z drugiej ikony w kazdym wierszu. */
.nav__hide{display:flex;flex:none;color:var(--muted);opacity:0;padding:1px;border-radius:5px;cursor:pointer;transition:opacity .12s}
.nav__item:hover .nav__hide{opacity:.35}
.nav__hide:hover{opacity:1 !important}
.app.nav-collapsed .nav__hide{display:none}
.nav__ghead{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:transparent;color:var(--txt);padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:600}
.nav__ghead:hover{background:var(--soft-2)}
.nav__chev{display:flex;flex:none;color:var(--muted);transition:transform .18s}
.nav__group.is-open .nav__chev{transform:rotate(180deg)}
.nav__group .nav__kids{margin:2px 0 5px 19px;border-left:1px solid var(--line);padding-left:8px}
.nav__group:not(.is-open) .nav__kids{display:none}
.nav__kids .nav__item{font-size:12.5px;font-weight:500;padding:7px 9px;color:var(--muted)}
.nav__kids .nav__ic{color:var(--muted)}
.nav__kids .nav__item.is-active,.nav__kids .nav__item.is-active .nav__ic{color:var(--on-accent)}
/* zwinięty (68px) — tylko wyśrodkowane ikony + tooltip (title) */
.app.nav-collapsed .brand__txt,.app.nav-collapsed .sidebar .search,.app.nav-collapsed .nav__txt,.app.nav-collapsed .nav__badge,.app.nav-collapsed .nav__dot,.app.nav-collapsed .nav__star,.app.nav-collapsed .nav__chev,.app.nav-collapsed .nav__favhd,.app.nav-collapsed .userbox__meta,.app.nav-collapsed .userbox__cog,.app.nav-collapsed .recent{display:none}
.app.nav-collapsed .sidebar{padding-left:8px;padding-right:8px}
.app.nav-collapsed .nav__group .nav__kids{display:none}
.app.nav-collapsed .nav__item,.app.nav-collapsed .nav__ghead{justify-content:center;padding:9px 0}
.app.nav-collapsed .sidebar__brandrow,.app.nav-collapsed .userbox{justify-content:center}
/* Ostatnie + stopka (ciemne) */
.recent{padding:0 0 4px}
.recent__item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--muted)}
.recent__item:hover{background:var(--soft-2)}
.recent__av{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--soft-2);font-size:11px;font-weight:700;color:var(--muted)}
.userbox{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 6px;border-top:1px solid var(--line)}
.userbox__av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font-size:12px;font-weight:700;flex:none}
.userbox__meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
/* DESIGN 2.9 §8.2: imie i nazwisko to JEDNA linia z wielokropkiem (pelne w `title`), rola pod nim,
   dopisek w nawiasie jako chip obok roli — nie jako druga linia nazwy. */
.userbox__meta b{font-size:12.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.userbox__meta small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.userbox__rola{display:flex;align-items:center;gap:6px;min-width:0}
.userbox__tag{font-size:10px;padding:1px 7px;flex:none}
.userbox__cog{margin-left:auto;cursor:pointer;color:var(--muted)}
/* LAUNCHER (Faza 2) — widok kafelków sekcji (klik nagłówka grupy w menu); od DESIGN.md jasny, bez dekoru */
@keyframes lchOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.app.view-launcher .main{padding:0;display:flex;flex-direction:column}
.app.view-launcher #vLauncher{flex:1;min-height:0;display:block}
.app.view-launcher .gcomposer{display:none}
.launcher{position:relative;overflow:hidden;min-height:100%;padding:38px 42px 46px;background:var(--bg)}
/* .launcher__decor / .launcher__grid — ozdoby sprzed systemu (fioletowe obreczki, siatka): mialy display:none, wyciete (DESIGN §0.3) */
.launcher__inner{position:relative;max-width:1100px}
.launcher__crumb{font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:.04em}
.launcher__hd{display:flex;align-items:center;gap:16px;margin-bottom:4px}
.launcher__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--accent);color:var(--on-accent);box-shadow:none}
.launcher__title{margin:0;font-size:28px;font-weight:500;color:var(--txt);letter-spacing:.01em}
.launcher__sub{margin:10px 0 28px;color:var(--muted);font-size:14px;max-width:560px}
.launcher__tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.lch__tile{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:24px;cursor:pointer;display:flex;flex-direction:column;gap:18px;border:1px solid var(--line);background:var(--panel);transition:border-color var(--tr)}
.lch__tile:hover{border-color:var(--accent-text)}
.lch__glow{display:none}
.lch__row{display:flex;align-items:flex-start;gap:16px;position:relative}
.lch__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--accent);color:var(--on-accent);flex:none;box-shadow:none}
.lch__body{flex:1;min-width:0}
.lch__name{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:500;color:var(--txt);letter-spacing:.01em}
.lch__count{font-size:11px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border:1px solid transparent;padding:2px 9px;border-radius:20px}
.lch__desc{font-size:13px;color:var(--muted-2);margin-top:5px;line-height:1.5}
.lch__star{display:flex;flex:none;cursor:pointer;color:var(--muted);opacity:.45}
.lch__star:hover{opacity:1}
.lch__star.is-on{opacity:1;color:var(--accent-text)}
.lch__acts{display:flex;gap:10px;position:relative;margin-top:auto}
.lch__new{display:flex;align-items:center;gap:6px;border:none;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:12.5px;padding:8px 16px;border-radius:10px;cursor:pointer;box-shadow:none}
.lch__new:hover{filter:brightness(1.12)}
.lch__open{border:1px solid var(--field-line);background:none;color:var(--txt);font-weight:500;font-size:12.5px;padding:8px 16px;border-radius:10px;cursor:pointer}
.lch__open:hover{background:var(--soft-2)}

/* MAIN */
.mainwrap{display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;height:56px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--panel);position:relative;z-index:60}   /* z-index: dropdown powiadomień (dziecko topbara, absolute) MUSI malować się NAD .main (main ma isolation:isolate → własny kontekst; bez tego panel lądował POD treścią = bug „widać górę ramki, nieklikalne", zgł. Stefan .618) */
.topbar__title{font-size:17px;margin:0}
.topbar__actions{margin-left:auto;display:flex;align-items:center;gap:4px}
.topbar__refresh{display:inline-flex;align-items:center;gap:6px;color:var(--muted);background:transparent;border-color:transparent}
.topbar__refresh:hover{background:var(--soft);color:var(--accent-text);border-color:var(--line)}
.topbar__refresh.is-busy{opacity:.55;pointer-events:none}
.main{flex:1;overflow-y:auto;padding:22px}
.view{display:none}.view.is-active{display:block}
/* DESIGN 2.9 §8.3: wiersz tytulu stoi w TRESCI — tytul + licznik po lewej, akcja glowna po prawej. */
.view__head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.vtitle{display:flex;align-items:baseline;gap:10px;margin-right:auto;min-width:0}
/* `.hint` — linia podpowiedzi POD kontrolka (DESIGN §8.4 i §8.6). Jedno zdanie, stonowane, w osobnym
   wierszu: instrukcja nie nalezy do etykiety przycisku ani do zdania obok niego. */
.hint{display:block;font-size:12px;color:var(--muted);line-height:1.45;max-width:72ch}
/* Zakladka-sygnal („Nieprzypisane"): kolor uwagi zamiast znaku w napisie (DESIGN 2.6 §5c). */
.ptab--uwaga{color:var(--warn)}
.ptab--uwaga .cnt{background:var(--warn-soft);color:var(--warn)}
/* §8.3: akcja glowna stoi w WIERSZU TYTULU; podpowiedz (§8.4) idzie pod calym wierszem, na pelnej szerokosci. */
.vact{display:flex;align-items:center;gap:8px}
.vhint{margin:-10px 0 12px}
/* DESIGN §8.5: zero wierszy to EKRAN, nie puste cialo tabeli — bez belki naglowka i bez „Razem (0)". */
.emptyscr{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:28px 22px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--txt)}
.emptyscr b{font-size:15px}
/* Chip-filtr w pasku narzedzi (stan listy, nie akcja): wlaczony bierze akcent, wylaczony jest stonowany. */
.zadbar .fchip{cursor:pointer;background:var(--panel);border-color:var(--field-line);color:var(--muted);height:32px}
.zadbar .fchip--on{background:var(--accent-soft);border-color:var(--accent-ring);color:var(--accent-text)}
.zadbar .fchip input{margin:0}
.vtitle__h{margin:0;font-size:22px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtitle__n{font-size:13px;color:var(--muted);white-space:nowrap}
/* §8.5 (2.15): licznik bywa DROGA do kolumny resztkowej, dopoki tablica nie ma sygnalu przewijania.
   Wtedy wyglada na klikalny — i jest: role=button, tabindex, obsluga Enter i Spacji w app.js. */
.vtitle__n--klik{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.vtitle__n--klik:hover{color:var(--accent-text)}
.vtitle__n--klik:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.view__head h2{margin:0;font-size:19px}

/* DASHBOARD */
/* powitanie Pulpitu zyje w WIERSZU TYTULU (`tytulEkranu` + `metaHtml`), nie jako osobne h2 + p — 2026-09-22 */
.vtitle__meta{font-size:14px;color:var(--txt);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* zdanie, nie licznik (.vtitle__n) */
.vtitle__meta b{font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.kpi__lab{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.kpi__val{font-size:26px;font-weight:800;margin-top:6px}
.kpi__sub{font-size:12px;color:var(--muted)}
.kpi--danger .kpi__val{color:var(--danger)}
.timeline{position:relative}
.tl__slot{margin-bottom:18px}
.tl__time{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}
.tl__row{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:8px;box-shadow:var(--shadow)}
.tl__row.now{border-color:var(--accent-text);box-shadow:none}
.tl__main{flex:1}.tl__main b{font-size:14px}.tl__main small{display:block}

/* TABLES */
/* WIDOCZNY pasek przewijania w krotkich listach (np. „Pliki bazy"). Zgloszenie Pawla 2026-08-28:
   „sa te pliki, tylko nie bylo widac paska przewijania" — globalny thumb rgba(...,.30) na jasnym
   panelu jest praktycznie niewidoczny, wiec lista 12 pozycji wygladala na liste 3 pozycji.
   ⚠️ Lekiem NIE jest rozciagniecie listy: to zjada rozmowe, po ktora ten ekran istnieje. */
.bwscroll{scrollbar-width:auto;scrollbar-color:rgba(90,80,140,.62) rgba(90,80,140,.12)}
.bwscroll::-webkit-scrollbar{width:12px}
.bwscroll::-webkit-scrollbar-track{background:rgba(90,80,140,.12);border-radius:8px}
.bwscroll::-webkit-scrollbar-thumb{background-color:rgba(90,80,140,.62);border:2px solid transparent;background-clip:padding-box;border-radius:8px}
.bwscroll::-webkit-scrollbar-thumb:hover{background-color:rgba(90,80,140,.80)}
.tablewrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:var(--soft)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--accent-soft)}
.link{color:var(--accent-text);font-weight:600;cursor:pointer}
.link[data-kon],.zadtbl .link[data-kon]{color:var(--accent-text)}   /* nazwy klientów = jeden brand-fiolet (jak tło nagłówków tabel + dashboard); .zadtbl .link[data-kon] (0,3,0) bije .zadtbl .link z l.602 */
.empty{padding:24px;text-align:center;color:var(--muted)}

/* BADGES */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid transparent}
/* .780 UWAGA — klient z wstrzymanymi platnosciami (uslugi wstrzymane do decyzji zarzadu). Ma KRZYCZEC: czerwien + bold,
   ten sam znacznik na liscie Klientow, karcie klienta, kartach pracy i w wyborze firmy (zrodlo: kontrahenci.platnosci='wstrzymane'). */
.uwagatag{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.3px;
  color:var(--on-accent);background:var(--danger);border:1px solid #b91c1c;white-space:nowrap;vertical-align:middle}
/* .781 (zgloszenie Pawla: "na liscie klientow slabo") — sama plakietka ginela w gestej tabeli,
   wiec NAZWA firmy z UWAGA jest dodatkowo czerwona i pogrubiona. Dwie klasy = wygrywa z .link. */
/* ⚠️ `.link[data-kon]` (fioletowe linki do klienta) ma TE SAMA sile co `.link.link--uwaga` — przy remisie wygrywa
   pozniejsza w pliku, wiec kolor alarmu przegrywal z dekoracyjnym. Dokladamy [data-kon] => o jeden stopien wyzej. */
.link.link--uwaga,.link.link--uwaga[data-kon]{color:var(--danger);font-weight:800}
.platwstrz{color:var(--danger);font-weight:700}   /* kolumna Platnosci: "wstrzymane" ma krzyczec tak samo jak nazwa */
/* .782 KARTY PRACY rozliczane POJEDYNCZO (firmy bez umowy/pakietu): czerwone godziny = czeka na fakture,
   zielone potwierdzenie = juz zafakturowana. Paweł: "na czerwono swieca 4h - rozliczam i jest na zielono". */
.godzfv{color:var(--danger)}
/* .786 NADGODZINY DO FAKTURY w rejestrze — Pawel: "ladnie sie prosto na czerwono pokazywalo".
   Mocny czerwien (bialy tekst), zeby w gestej tabeli bylo widac z daleka -- `.btn--danger` daje tylko
   czerwony tekst na bialym i ginie. ⚠️ Prefiks `button` (lekcja .781): bez niego `.btn--primary` wygrywa remis. */
/* .787 KARTA REKORDU — pod polem "Klient" ta sama informacja co przy WYBORZE firmy: UWAGA + sposob rozliczen.
   Pawel: "po dolozeniu klienta dalej juz nie widzimy, z jaka forma rozliczenia to klient... czy nie ma UWAGA". */
/* GODZINY Z KALENDARZA NA KARCIE ZADANIA (.1261, zgloszenie Stefana Ocetkiewicza) — czas przy kazdym
   wpisie + suma pod lista, zeby nie trzeba bylo liczyc w glowie. „—" znaczy: NIE liczylismy tego
   wpisu (caly dzien albo cykliczny), a powod jest w podpowiedzi. Cicha suma bylaby gorsza niz brak. */
.zadkal-h{margin-left:auto;font-size:12px;font-weight:700;color:var(--txt);white-space:nowrap}
.zadkal-h--nie{color:var(--muted);font-weight:600}
.zadkal-suma{margin:6px 0 2px;padding-top:6px;border-top:1px dashed var(--line);font-size:12.5px;text-align:right}
/* PODPOWIEDZ PRZY ZAMYKANIU ZADANIA — z etykieta-przypomnieniem, o ktora prosil Stefan wprost. */
.zk-kalinfo{margin:0 0 10px;padding:8px 11px;border:1px solid #bfdbfe;background:#eff6ff;border-radius:9px;font-size:12.5px;line-height:1.55;color:#1e40af}
.zk-kalinfo__uwaga{color:#b45309}
.zk-kalinfo__spr{color:#9a3412;font-weight:600}
.keyrozl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:-5px 0 9px;padding:0 2px;font-size:13px}
/* „Pokaz karte klienta" (.1251, zgloszenie Stefana Ocetkiewicza) — z karty zadania/projektu/leada
   nie dalo sie PODEJRZEC kartoteki klienta: klikniecie w pole „Klient" otwiera WYBOR klienta,
   czyli jego ZMIANE. Osobny przycisk, bo oczywiste klikniecie jest juz zajete przez picker.
   Powrot dziala sam — globalny handler `[data-kon]` odklada krok na stosie („← Wstecz"). */
.keykarta{margin:-3px 0 9px;width:100%;justify-content:center}
button.btn--fv{background:var(--danger);border-color:#b91c1c;color:var(--on-accent);font-weight:700}
button.btn--fv:hover{background:#b91c1c;color:var(--on-accent)}
/* .784 TRYB "Do rozliczenia" — glowna akcja osoby rozliczajacej, ma sie wyroznia z paska filtrow */
/* ⚠️ lekcja .781: `.fpill.is-on` ma TE SAMA sile co `.fpill--akcja.is-on` -- przy remisie wygrywa pozniejsza
   w pliku, wiec kolor akcji przegrywal z domyslnym fioletem. Prefiks `button` => o jeden stopien wyzej. */
button.fpill--akcja{border-color:var(--accent-text);color:var(--accent-text);font-weight:700}
button.fpill--akcja.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
button.fpill--akcja.is-on b{color:var(--on-accent)}
.dorozlbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 2px 10px;padding:9px 13px;
  border:1px solid var(--ok);border-left:4px solid var(--ok);border-radius:10px;background:#f0fdf4;font-size:13px}
.fvok{color:var(--ok);font-weight:700;white-space:nowrap}
.b-spotkanie{color:var(--spotkanie);background:var(--accent-soft);border-color:var(--accent-soft)}
.b-email{color:var(--email);background:#f0f9ff;border-color:#e0f2fe}
.b-telefon{color:var(--telefon);background:#f0fdf4;border-color:#dcfce7}
.b-zadanie{color:var(--zadanie);background:var(--soft);border-color:var(--line)}
.b-status{color:var(--txt);background:var(--soft);border-color:var(--line)}
.b-oferta{color:var(--accent-text);background:var(--accent-soft);border-color:var(--accent-ring)}
.b-otwarty{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-soft)}   /* [2.30] bylo #fffbeb/#fef3c7 — wartosci spoza tablicy tokenow */
/* .842 (zgloszenie Pawla: "czy status otwarte moglby miec taki zielony odcien jak kolor numeru wersji na belce")
   — DOKLADNIE te same trzy wartosci co `.verbadge.ok`. ⚠️ NIE MYLIC z `.b-otwarty` wyzej (zolty): tamten opisuje
   LEADA/PROJEKT „Otwarty", ten status „otwarte" zadania i decyzji. Nazwy sa mylaco podobne. */
.b-open{color:#16a34a;background:rgba(22,163,74,.14);border-color:rgba(22,163,74,.3)}
/* OZNACZENIE PRIV (migracja 005) — pozycja widoczna tylko dla przypisanego operatora i super-administratora.
   Kolor CELOWO inny niz statusy: to nie jest etap pracy, tylko informacja KTO to widzi. */
.b-priv{color:var(--accent-text);background:var(--accent-soft);border-color:var(--accent-ring);font-weight:700}
.privtgl{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;user-select:none}
.privtgl input{cursor:pointer;margin:0}
.b-prop{color:#92400e;background:#fef3c7;border-color:#fde68a}
.b-rej{color:var(--muted);background:var(--soft);border-color:var(--line);text-decoration:line-through}

/* CARDS (klienci) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 3px;font-size:16px;cursor:pointer}
.card h3:hover{color:var(--accent-text)}
.card__meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.card__row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:#374151}

/* ZADANIA grupowane */
.group__lab{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:18px 0 8px;font-weight:700}
.task{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow)}
.task input{width:17px;height:17px;accent-color:var(--accent)}
.task__main{flex:1}.task__main b{font-size:14px}.task__main.done b{text-decoration:line-through;color:var(--muted)}
.task__main small{display:block;color:var(--muted)}
.task__av{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--soft);font-size:11px;font-weight:700;color:var(--muted)}
/* PROPOZYCJE zadań z transkrypcji (do_zatwierdzenia) + priorytet + uczestnicy spotkania */
.group__lab--prop{color:#92400e}
.group__lab--prop small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.task--prop{cursor:pointer;border-color:#fde68a;background:#fffdf5;border-left:3px solid var(--warn)}
.task--prop:hover{box-shadow:none}
.partpick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0 2px;padding:10px;background:var(--soft);border:1px solid var(--line);border-radius:8px}
.partopt{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:#374151;cursor:pointer}
.partopt input{width:15px;height:15px;accent-color:var(--accent)}
.pchip{display:inline-block;font-size:12px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:999px;padding:1px 9px;margin-right:3px}

/* POCZTA — skrzynka (lista + podgląd) */
.mailconnect h3{margin:4px 0 6px}
.mailbar{display:flex;justify-content:space-between;align-items:center;gap:12px;row-gap:6px;flex-wrap:wrap;padding:2px 2px 10px}
/* 2026-09-17 (Paweł): góra Poczty zabierała za dużo miejsca — tagi siedzą W TYM SAMYM wierszu co zakładki i szukajka,
   a adres/auto/czas pobrania idą do nagłówka obok tytułu „Poczta” (.mailinfo; na Dashboardzie zostają w pasku). */
.mailbar .mailtagi{padding:0;flex:1 1 220px;min-width:160px}
.mailinfo{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.mailinfo b{color:var(--txt);font-weight:600}
.view__head .mailinfo{margin-left:4px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.mailbar__r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mailtabs{display:flex;gap:4px}
.mailsearch{display:flex;align-items:center;gap:6px;flex:1 1 240px;min-width:180px;max-width:440px}
.mailsearch input{flex:1;min-width:120px;border:1px solid var(--field-line);border-radius:9px;padding:7px 11px;font-size:13px;background:var(--panel)}
.mailsearch input:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.mailauto{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);white-space:nowrap}
.mailauto input{width:15px;height:15px;accent-color:var(--accent)}
.mailauto__ts{font-size:11px;color:var(--muted);white-space:nowrap;min-width:64px}
.maildraft-hint{font-size:12px;color:var(--muted);background:var(--soft);border-radius:8px;padding:6px 10px;margin-bottom:8px}
.mailfmt{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.mailfmt__b{border:1px solid var(--field-line);background:var(--panel);border-radius:7px;padding:4px 10px;font-size:13px;cursor:pointer;color:var(--txt)}
.mailfmt__b:hover{background:var(--soft)}
.mailfmt__sep{width:1px;height:18px;background:var(--line);margin:0 4px}
/* .1274 (prosba Pawla: „rodzaj, wielkosc i kolor czcionki"): trzy kontrolki w pasku formatowania maila.
   Wygladaja jak przyciski B/I obok, bo to ten sam pasek — nie druga estetyka w tym samym miejscu. */
.mailfmt__sel{border:1px solid var(--field-line);background:var(--panel);border-radius:7px;padding:3px 7px;font:inherit;font-size:12.5px;color:var(--txt);max-width:150px;cursor:pointer}
.mailfmt__sel:hover{border-color:var(--accent-text)}
.mailfmt__col{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:2px 7px;font-size:13px;cursor:pointer}
.mailfmt__col:hover{border-color:var(--accent-text)}
.mailfmt__col input[type=color]{width:22px;height:20px;border:0;background:transparent;padding:0;cursor:pointer}
.mailatts{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.mailpow{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ok);font-weight:700}   /* ADR-0020: "z tego maila juz cos jest" — numer rekordu obok przycisku, zamiast milczacego "Konwertuj" */
.mailatt-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:8px;padding:4px 9px;color:var(--txt)}
.mailatt-chip a{color:var(--danger);text-decoration:none;font-weight:700}
.cvatts{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--panel)}
.cvatt{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--txt);cursor:pointer}
.cvatt input{width:15px;height:15px;accent-color:var(--accent);flex:0 0 auto}
.mailtab{font-size:13px;font-weight:600;padding:6px 13px;border:1px solid var(--field-line);background:var(--panel);border-radius:8px;cursor:pointer;color:var(--muted)}
.mailtab:hover{background:var(--soft)}
/* POWIERZCHNIA TINTOWANA PRZEDEFINIOWUJE --field-line U SIEBIE (DESIGN 2.31 §1a), zamiast liczyc
   obrys w locie. [ZMIERZONE] #7e8b85 na --accent-soft = 3,02:1 (prog bez zapasu), --accent-ring
   na tej samej powierzchni = 1,21:1, akcent = 4,54:1. Nazwa zostaje jedna, wartosc jest lokalna. */
.mailtab.is-active{--field-line:var(--accent-text);color:var(--accent-text);background:var(--accent-soft);border-color:var(--field-line)}
.mailview{display:flex;gap:14px;height:calc(100vh - 296px);min-height:320px}
.maillist{width:495px;min-width:300px;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
/* 2026-09-17 (Paweł): lewa kolumna +30% (380→495) i WYRAŹNY pasek przewijania listy — cienki nakładkowy ginął. */
.maillist{scrollbar-width:auto;scrollbar-color:var(--accent) var(--soft-2)}
.maillist::-webkit-scrollbar{width:14px}
.maillist::-webkit-scrollbar-track{background:var(--soft-2);border-radius:0 12px 12px 0}
.maillist::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.maillist::-webkit-scrollbar-thumb:hover{background:var(--accent-hover);background-clip:padding-box}
.mailprev{flex:1;overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:18px}
.mailprev__empty{color:var(--muted);text-align:center;padding:48px 16px}
.mailrow{padding:10px 13px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
/* .1840 (zgloszenie Pawla): kosz PROSTO Z WIERSZA, jak w Zoho Mail — widoczny po najechaniu, na dotyku zawsze */
.mailrow__del{opacity:0;border:0;background:transparent;cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:6px;color:var(--muted)}
.mailrow:hover .mailrow__del,.mailrow__del:focus-visible{opacity:1}
.mailrow__del:hover{background:var(--danger-soft);color:var(--danger)}
@media (hover:none){.mailrow__del{opacity:.7}}
.mailrow:hover{background:var(--soft)}
.mailrow.sel{background:var(--accent-soft)}
.mailrow.unread .mailrow__from,.mailrow.unread .mailrow__subj{font-weight:700}
.mailrow.unread .mailrow__from::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}   /* DESIGN §7: bez kolorowego paska z lewej — nieprzeczytany poznaje sie po kropce i pogrubieniu */
.mailrow__top{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:#1f2937}
.mailrow__from{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.mailrow__date{color:var(--muted);font-size:11px;white-space:nowrap}
.mailrow__subj{font-size:13px;color:#374151;margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailrow__meta{display:flex;align-items:center;gap:6px}
.mailclip{font-size:12px}
/* POTWIERDZENIA ODCZYTU (.1133) — ptaszek w kompozytorach, pasek w podgladzie, znacznik na liscie wyslanych. */
.mailpotw{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap;margin-left:6px}
.mailpotw input{accent-color:var(--accent);width:14px;height:14px}
.mailpotwbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:8px 0 4px;padding:7px 11px;border-radius:9px;font-size:12.5px;background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.35);color:#b45309}
.mailpotwbar.is-ok{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.35);color:#15803d}
.mailpotw__ok{font-size:11px;font-weight:700;color:#15803d;white-space:nowrap}
.mailpotw__wait{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.mailhead{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.mailhead h3{margin:0 0 4px}
/* ── NAGLOWEK WIADOMOSCI (Pawel 2026-08-20: "przydaloby sie widziec naglowek wyslanego maila jak
   w Zoho Mail"). Nadawca z awatarem + data w jednej linii, pod spodem wiersze Do / Kopia do / UDW /
   Tagi / Zabezpieczenia. Etykieta o stalej szerokosci = wartosci wyrownane w kolumnie, jak w kliencie
   pocztowym. Dlugie listy adresow zawijaja sie i lamia w srodku adresu, zeby nie rozpychac panelu. */
.mailhd{margin:6px 0 2px}
.mailhd__top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mailhd .mailhd__av{width:32px;height:32px;font-size:11px}   /* dwie klasy w selektorze: samo .mailhd__av przegrywalo z .av (24px) zdefiniowanym nizej w pliku */
.mailhd__kto{font-size:13.5px;color:var(--txt);min-width:0;overflow-wrap:anywhere}
.mailhd__adr{color:var(--muted);font-size:12.5px}
.mailhd__data{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.mailhd__d{margin:8px 0 0 41px;display:flex;flex-direction:column;gap:3px}   /* 32px awatara + 9px odstepu = wiersze zaczynaja sie pod nazwiskiem nadawcy */
.mailhd__r{display:flex;gap:8px;font-size:12.5px;line-height:1.45}
.mailhd__lb{flex:0 0 96px;color:var(--muted)}
.mailhd__lb::after{content:":"}
.mailhd__vl{color:var(--txt);min-width:0;overflow-wrap:anywhere}
.mailhd__tls{color:var(--ok);font-weight:600}
.mailhd--s{margin:2px 0 6px}
.mailhd.mailhd--s .mailhd__av{width:24px;height:24px;font-size:10px}
.mailhd--s .mailhd__d{margin-left:33px}
.mailtag--ro{cursor:default;padding:2px 8px;font-size:12px}
.mailatts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mailatt{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:8px;padding:4px 10px;text-decoration:none}
.mailatt:hover{filter:brightness(.97)}
/* ⚠️ `flex-wrap` DOPISANE w .1255: pasek dostal trzy przyciski wiecej (Wszystkim / Przekaz dalej /
   Usun) i bez zawijania ostatnie wychodzilyby poza panel podgladu — dokladnie ta wpadka, co
   z kolumna akcji plikow (.740): przycisk byl, tylko niewidoczny. Zawijamy zamiast ucinac. */
.mailactions{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* 🗑 Usun — odsuniete na PRAWO i wyszarzone: akcja niszczaca nie stoi obok „Odpowiedz" jako rowna
   z nia (lekcja `.799`: akcja destrukcyjna z dala od codziennych). Czerwone dopiero po najechaniu. */
.mailakc--usun{margin-left:auto;opacity:.75}
.mailakc--usun:hover{opacity:1;color:#b91c1c;border-color:#fecaca;background:#fef2f2}
.mailbody{font-size:13.5px;line-height:1.55;color:#1f2937;white-space:normal;word-break:break-word}
.mailcompose{display:flex;flex-direction:column;height:100%;min-height:0}
.mailcompose h3{margin:0 0 10px;flex:0 0 auto}
.mailcompose .cfgform{max-width:none;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;gap:8px}
.mailcompose .cfgform>.cfgrow{margin:0}
/* ── KOMPOZYTOR JAK W NORMALNEJ POCZCIE (Pawel 2026-08-18: "czy pola Od/Do/Temat musza zajmowac
   3/4 ekranu... zobacz jak te proporcje wygladaja w normalnych systemach"). Wzor: Zoho —
   naglowek to zwarte JEDNOLINIJKOWE wiersze (etykieta z lewej, pole obok), tresc dostaje reszte.
   Bylo: etykieta NAD kazdym polem = ~70px na wiersz, naglowek zjadal pol panelu. */
.mailcompose .cfgform>.cfgrow:not(.cfgrow--grow){flex-direction:row;align-items:center;gap:10px}
.mailcompose .cfgform>.cfgrow:not(.cfgrow--grow)>label{flex:0 0 74px;margin:0;font-size:12px}
/* ── WIERSZ TRESCI: min-height na WIERSZU, nie tylko na polu. ⚠️ Lekcja z .1061: min-height na
   samym polu ROZSADZALO wiersz (ten mogl sie skurczyc do 90px), a pole przelewalo sie POD przyciski
   Wyslij/Anuluj — "fatalnie zaslaniane przez przyciski". Wiersz rosnie -> przyciski ida ZA nim. */
.mailcompose .cfgrow--grow{flex:1 1 auto;display:flex;flex-direction:column;min-height:min(420px,48vh)}
.mailcompose .cfgrow--grow textarea,.mailcompose .cfgrow--grow .mailedit{flex:1 1 auto;min-height:120px;resize:none}
.mailcompose .cfgactions{flex:0 0 auto;margin-top:2px}
/* KONWERSJA MAILA (.1458): ta formatka nie ma rosnącego edytora, więc nie wolno jej ściskać do 100%
   wysokości — przy niskich oknach wiersze wychodziły z formy i NACHODZIŁY na przyciski (zrzut Marcina
   2026-09-01; klikał wielokrotnie, bo nie widział reakcji). Naturalna wysokość + przewija .mailprev. */
.mailcompose--konwersja{height:auto;min-height:0}
.mailcompose--konwersja .cfgform{flex:0 0 auto}
/* .1459: załączniki na formatce dodawania zadania/pomysłu/decyzji (chipy jak w kompozytorze Poczty) */
.addatts__list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.mailcompose>p.s{flex:0 0 auto;margin:8px 0 0}
.mailcompose input,.mailcompose textarea{width:100%;box-sizing:border-box}
.mailcompose textarea{font:inherit;font-size:13px;line-height:1.5}
.mailedit{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;font-size:13px;line-height:1.55;overflow:auto;background:var(--panel);color:var(--txt)}
.mailedit:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.mailedit:empty::before{content:attr(data-ph);color:var(--muted)}
.mailedit--box{min-height:120px;max-height:320px}
/* .1275 (prosba Pawla: „zeby od razu przy kliknieciu Odpowiedz pojawiala sie stopka podpisu"):
   podglad stopki SKLEJONY z polem tresci — wyglada jak dalszy ciag wiadomosci, ale NIE jest polem
   edycji (tresc maila bierze sie z pola wyzej, a stopke dokleja serwer przy wysylce). */
/* .1294: podglad stoi NAD polem tresci, wiec skleja sie z nim od gory (zaokraglenie i brak
   krawedzi po stronie pola). Przy odpowiedzi pole niesie caly cytat i rosnie — pod spodem
   podglad wypadal poza ekran (zmierzone: 888 px przy oknie 720 px). */
.mailsig-auto{border:1px solid var(--line);border-top:0;border-radius:0 0 9px 9px;background:var(--soft);
              padding:8px 12px 10px;max-height:150px;overflow:auto;
              /* .1295: PRZYKLEJONY do dolnej krawedzi widoku okna. ZMIERZONE: kolumna okna ma
                 1152 px przy 619 px widocznych, wiec pasek pod polem tresci ladowal poza ekranem
                 (888 px przy oknie 720 px) i wygladal na nieobecny. Nad polem z kolei wymuszal
                 pisanie POD podpisem. Sticky godzi jedno z drugim: kolejnosc naturalna, pasek widoczny. */
              position:sticky;bottom:0;z-index:2}
.mailsig-auto__t{font-size:11.5px;color:var(--muted);margin-bottom:6px}
.mailsig-auto__b{font-size:12.5px;opacity:.9;pointer-events:none}
.mailsig-auto__b a{color:inherit;text-decoration:none}
/* .1279 (zgloszenie Pawla: „cos mi sie pojawia, ale nie wiem co dalej"): przyciski „Opublikuj"/„Anuluj"
   stały POD dlugim polem tresci, czyli poza ekranem — formularz wygladal na niedokonczony.
   Pasek akcji przykleja sie do dolu panelu i jest widoczny od pierwszej chwili. */
.ntakcje{position:sticky;bottom:0;background:var(--panel);padding:10px 0 4px;margin-top:6px;
         border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;z-index:2}
/* .1280 OBRAZKI W OGLOSZENIACH — na scianie i w edytorze trzymaja sie szerokosci kolumny.
   Bez tego zrzut 1200 px rozpycha karte wpisu i cala sciana jedzie w bok. */
.tabkarta img,.tabpisz__ed img,#ntTresc img,.mailedit img{max-width:100%;height:auto;border-radius:8px;display:block;margin:6px 0}
.tabkarta img{border:1px solid var(--line);cursor:zoom-in}   /* .1281: klik = pelny rozmiar w nakladce */
/* .1281 (Pawel: „mam trzy paski przewijania i zadnym nie dojade do konca"): formularz ogloszenia
   z maila ma JEDEN obszar przewijany (pole tresci) + przyklejony pasek akcji. Naglowek i pole tytulu
   zostaja w widoku, zeby nie trzeba bylo ich szukac scrollem. */
.ntnag{position:sticky;top:0;background:var(--panel);padding:2px 0 6px;margin:0 0 8px;z-index:3}
#ntTresc img{max-height:none}
.ntakcje{flex-wrap:wrap}
.ntkat{flex:0 1 220px;min-width:150px}
/* .1287 (Pawel: „jeszcze troche ten wyglad minimalnie dopracuj… ta zakladka kategorie"):
   listy rozwijane w pasku publikacji mialy WYGLAD SYSTEMOWY — szara, kanciasta wstawka obok
   zaokraglonych pol i przyciskow. Ubieramy je tak samo jak reszte paska (ta sama ramka, to samo
   tlo, ta sama wysokosc) i dokladamy wlasna strzalke, bo natywna znika razem z `appearance`. */
select.ntkat{appearance:none;-webkit-appearance:none;border:1px solid var(--field-line);background:var(--panel);
  color:var(--txt);border-radius:9px;padding:6px 30px 6px 11px;font:inherit;font-size:13px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b63' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-position:right 9px center;background-size:14px 14px;background-repeat:no-repeat}
select.ntkat:hover{border-color:var(--accent-text)}
select.ntkat:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
input.ntkat{border:1px solid var(--field-line);background:var(--panel);color:var(--txt);border-radius:9px;
  padding:6px 11px;font:inherit;font-size:13px}
/* pasek publikacji: rowna wysokosc i odstepy — fajki nie maja „skakac" wzgledem list i przyciskow */
.tabpisz__row,.ntakcje{gap:10px;align-items:center;flex-wrap:wrap}
.tabpisz__row .tabwazne,.ntakcje .tabwazne{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.tabodb [data-odbtog]{border-radius:9px;min-height:34px}
/* .1287: WYSOKOSCI W PASKU. Zmierzone przed poprawka: lista 34 px, fajki 19, przyciski 25 i 30 —
   pasek wygladal jak zlepek przypadkowych elementow. Jedna wysokosc dla wszystkiego i fajki
   ubrane w te sama „pigulke", co reszta. */
.tabpisz__row>*,.ntakcje>*{min-height:34px}
.tabpisz__row .tabwazne,.ntakcje .tabwazne{min-height:34px;padding:0 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);cursor:pointer}
.tabpisz__row .tabwazne:hover,.ntakcje .tabwazne:hover{border-color:var(--accent-text)}
.tabpisz__row .btn,.ntakcje .btn{min-height:34px;display:inline-flex;align-items:center}
.tabpisz__row .cfgsaved,.ntakcje .cfgsaved{min-height:0}
/* .1290 (Pawel: „popraw rozwijalna liste — bo jakby sie przyklejala"): odbiorcy korzystaja ze
   WSPOLNEJ listy wyboru (`.combopop`), ktora sama dopasowuje sie do krawedzi ekranu i warstw okien.
   Zostaje tu tylko WYGLAD POZYCJI przy wyborze wielokrotnym. */
.comboopt--multi{display:flex;align-items:center;gap:8px}
.comboopt--multi .comboopt__ptak{font-size:14px;line-height:1;opacity:.75}
.comboopt--multi.is-zazn{background:var(--accent-soft)}
.comboopt--multi.is-zazn .comboopt__ptak{opacity:1;color:var(--accent-text)}
.tabodb{min-height:34px}

/* .1287: WYSOKOSCI W PASKU. Zmierzone przed poprawka: lista 34 px, fajki 19, przyciski 25 i 30 —
   pasek wygladal jak zlepek przypadkowych elementow. Jedna wysokosc dla wszystkiego i fajki
   ubrane w te sama „pigulke", co reszta. */
.tabpisz__row>*,.ntakcje>*{min-height:34px}
.tabpisz__row .tabwazne,.ntakcje .tabwazne{min-height:34px;padding:0 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);cursor:pointer}
.tabpisz__row .tabwazne:hover,.ntakcje .tabwazne:hover{border-color:var(--accent-text)}
.tabpisz__row .btn,.ntakcje .btn{min-height:34px;display:inline-flex;align-items:center}
.tabpisz__row .cfgsaved,.ntakcje .cfgsaved{min-height:0}
/* .1285 (ujednolicenie tablicy i maila): wybor odbiorcow powiadomienia. Lista jest ZWINIETA —
   przy 24 osobach rozwinieta zaslanialaby formularz, a to ona ma sluzyc wpisowi, nie odwrotnie. */
.tabodb{position:relative;display:inline-block}
.tabodb__lista{position:absolute;bottom:calc(100% + 6px);left:0;z-index:20;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:none;
  padding:8px 10px;max-height:260px;overflow:auto;min-width:250px}
.tabodb__akcje{font-size:11.5px;margin-bottom:6px;color:var(--muted)}
.tabodb__p{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 0;white-space:nowrap}
.tabodb__ja{margin-top:6px;padding-top:6px;border-top:1px solid var(--line);white-space:normal}
/* .1273 (zgloszenie Pawla 2026-08-25): OBRAZ WKLEJONY W TRESC MAILA.
   1) `max-width` — bez tego zrzut 4K rozpychal pole w bok, a uchwyt do skalowania lezal poza ekranem;
   2) ramka z uchwytem rysowana POZA edytorem (position:fixed) — edytor to contenteditable, wiec
      element wstrzykniety do srodka trafilby do tresci wysylanego maila. */
.mailedit img{max-width:100%;height:auto}
.mailedit img.is-imgsel{outline:2px solid var(--accent-text);outline-offset:1px}
.imgres{position:fixed;z-index:1300;pointer-events:none;border:1.5px solid var(--accent-text);border-radius:3px}
/* .1273b (Pawel: „nie widze kwadracikow w rogach do zmniejszania obrazka"): uchwyty w CZTERECH rogach
   i pokazywane JUZ PRZY NAJECHANIU mysza — poprzednia wersja czekala na klikniecie w obraz, wiec
   o ich istnieniu trzeba bylo wiedziec z gory. Funkcja, o ktorej nie wiadomo, nie istnieje. */
.imgres__h{position:absolute;width:14px;height:14px;border-radius:4px;background:var(--accent);
           border:2px solid var(--panel);box-shadow:none;pointer-events:auto}
.imgres__h[data-rog="se"]{right:-7px;bottom:-7px;cursor:nwse-resize}
.imgres__h[data-rog="sw"]{left:-7px;bottom:-7px;cursor:nesw-resize}
.imgres__h[data-rog="ne"]{right:-7px;top:-7px;cursor:nesw-resize}
.imgres__h[data-rog="nw"]{left:-7px;top:-7px;cursor:nwse-resize}
.imgres__n{position:absolute;left:0;top:-23px;background:var(--accent);color:var(--on-accent);font-size:11px;line-height:1;
           padding:4px 7px;border-radius:6px;white-space:nowrap}
/* .1273: WYSYLKA W TOKU. Mail leci kilka sekund, a formatka stala bez zmian — niecierpliwy user klikal
   „Wyslij" kilka razy i kazde klikniecie to OSOBNA wiadomosc u adresata. Pola gasna, przycisk jest
   zablokowany i mowi „Wysylam…" (blokada logiczna siedzi w app.js — to jest tylko jej widok). */
.is-sending .mailedit,.is-sending .addfld input,.is-sending .addfld select,
.is-sending .cfgrow input,.is-sending .cfgrow select{opacity:.55;pointer-events:none}
.mailinline{margin-top:14px;display:flex;flex-direction:column;gap:10px}   /* obrazki OSADZONE w tresci maila (zrzuty/logo) — pod tekstem, przez /api/mail/inline */
.mailinline img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:9px;display:block}
.mailbody .mailinline{display:block;margin:10px 0}
/* .1307: GALERIA obrazkow NIEUZYTYCH w tresci = zwykle ikonki i baner ze stopki nadawcy.
   Do .1306 szly jako kolumna kafli na cala szerokosc, wiec ikonka 32 px wygladala jak zrzut ekranu
   (zgloszenie Pawla: "rozjezdza sie tylko u nas — nie wysylamy rozjazdu, tylko zle czytamy").
   Teraz: rzad miniatur. Klik dalej otwiera pelny rozmiar, wiec zaden obrazek nie ginie. */
.mailinline--galeria{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:8px;padding-top:4px;border-top:1px dashed var(--line)}
.mailinline--galeria img{max-height:72px;width:auto;max-width:100%;border-radius:6px;cursor:zoom-in}
/* .1307/.1308: kwadratowy obrazek ze stopki = IKONKA SERWISU, nie kafel na cala szerokosc.
   Dotyczy obu drog: galerii pod trescia I obrazkow WSTAWIONYCH W TRESC (znaczniki [[OBRAZEK:n]]),
   bo stopka idzie wlasnie ta druga — `.1307` poprawil tylko galerie i Pawel dalej widzial kafle. */
.mailinline img.is-ikona{max-height:24px;width:auto;border:0;border-radius:4px;display:inline-block;vertical-align:middle}
.mailbody .mailinline--ikona{display:inline-block;margin:0 6px 0 0}
/* podpowiadanie adresów w kompozytorze (Kasia 2026-08-18) — okienko pod polem Do/DW/UDW */
.mailcompose .cfgrow{position:relative}
.mailsug{position:absolute;top:100%;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:none;max-height:240px;overflow:auto}
.mailsug__p{padding:7px 11px;cursor:pointer;display:flex;flex-direction:column;gap:1px}
.mailsug__p small{color:var(--muted)}
.mailsug__p:hover,.mailsug__p.akt{background:var(--accent-soft)}
/* TAGI POCZTY (Kasia 2026-08-18, migracja 037): pasek nad lista + kropki na wierszach + edytor */
.mailtagi{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 2px}
.mailtagi__lab{font-size:12px;color:var(--muted);font-weight:600}
.mailtag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px;cursor:pointer;background:var(--panel);color:var(--txt)}
.mailtag:hover{background:var(--soft)}
/* §8.8: te trzy klasy nosi i przycisk, i zwykly kafel/etykieta. Obrys kontrolki nalezy sie
   tylko temu, co da sie ogniskowac — reszta zostaje na kresce pojemnika. */
button.mailtag,button.dkpi,button.tabreak{border-color:var(--field-line)}
.mailtag.akt{border-color:var(--accent-text);background:var(--accent-soft);font-weight:700}
.mailtag i{width:10px;height:10px;border-radius:50%;display:inline-block}
.mailtag small{color:var(--muted)}
.mailtag b{font-weight:400;opacity:.35;cursor:pointer;margin-left:2px}
.mailtag b:hover{opacity:1}
.mailtag--add{font-weight:700}
.mailtag__kropka{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}
/* ADR-0061 E3: plan wdrożenia — etapy z postępem, pozycje z rezultatem i kryterium */
.planw__start{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
/* KROK DROGI WDROZENIA: jeden przycisk „Dalej" + wyjasnienie POD nim (zlecenie Pawla 2026-09-12) */
.planw__start--krok{flex-direction:column;align-items:flex-start;gap:0}
/* USTALENIA Z KLIENTEM - lista do odhaczania przy planie (decyzja Pawla 2026-09-12) */
/* WARSZTAT PLANU: pasek dzialan masowych + zaznaczanie (Pawel 2026-09-12) */
.planw__masa{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;margin:0 0 10px;border:1px solid var(--accent);border-radius:8px;background:var(--panel)}
.planw__chk,.planw__chke{margin-right:6px;cursor:pointer}
.planw__nazwa{outline:none;border-bottom:1px dashed transparent;cursor:text}
.planw__nazwa:hover,.planw__nazwa:focus{border-bottom-color:var(--accent)}
.planw__ustal{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;padding:8px 10px;margin:0 0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
/* podpowiedz „co teraz" stoi W LINII zetonow drogi - zero dodatkowej linijki ekranu (Pawel 2026-09-12) */
.ofdroga__co{margin-left:10px;font-size:12px}
.planw__start--gotowe{gap:14px;font-size:13px}
.planw__e{border:1px solid var(--line);border-radius:9px;margin:0 0 10px;overflow:hidden}
.planw__eh{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:7px 10px;background:var(--soft);border-bottom:1px solid var(--line)}
.planw__bar{width:110px;flex:0 0 110px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.planw__bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.planw__p{padding:7px 10px;border-bottom:1px dashed var(--line)}
.planw__p:last-child{border-bottom:none}
.planw__ph{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.planw__kod{font-size:11px;color:var(--muted);background:var(--soft);border-radius:5px;padding:1px 5px}
.planw__st{margin-left:auto;max-width:170px;font-size:12px;padding:2px 6px}
/* KONTROLKI POZYCJI PRZY PRAWEJ KRAWEDZI (zgloszenie Pawla 2026-09-12: nie byly wyrownane).
   Nazwa rozpycha sie, a wybor etapu, przycisk i krzyzyk stoja w jednej kolumnie - niezaleznie od dlugosci tekstu. */
.planw__ph{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.planw__ph>b{flex:1 1 auto;min-width:0}
.planw__akcje{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.planw__eh>b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.planw__eakcje{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.planw__eakcje[hidden],.planw__akcje[hidden],.planw__masa[hidden]{display:none!important}
.planw__et{flex:0 0 190px;max-width:190px;font-size:12px}
.planw__wyk{flex:0 0 160px;max-width:160px;font-size:12px}
.planw__do{flex:0 0 auto}
.planw__zad{margin-left:auto;flex:0 0 auto}
.planw__p .planw__x{flex:0 0 auto}
.planw__x{opacity:.5}
.planw__x:hover{opacity:1;color:var(--danger)}
.planw__zad{font-size:12px}
/* WAZNY PLIK W BAZIE WIEDZY PROJEKTU (2026-09-13): jeden klik obok nazwy, wiersz robi sie jasno zielony */
.bwgwiazda{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;color:var(--muted);padding:0 2px}
.bwgwiazda.is-on{color:#f59e0b}
tr.bwwazny>td{background:#eaf7f0}

/* STAN MODULU — informacja, nie przycisk (2026-09-13): co juz powstalo, a co system jeszcze mieli */
.zakstan{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
.zakstan__p{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--soft);cursor:default}
.zakstan__p--ok{border-color:#bfe3cf;background:#eaf7f0;color:#2f8f63}
.zakstan__p--czeka{border-color:#f2d9a8;background:#fdf5e6;color:#b45309}
.zakstan__p--zle{border-color:#f0c2c2;background:#fdeeee;color:#b42318}

/* ODPOWIEDZ BAZY WIEDZY POD PYTANIEM ANALIZY (2026-09-13) — odpowiedzi ukladaja sie w czasie, jedna pod druga */
.anodp__box{display:flex;flex-direction:column;gap:6px;margin:6px 0 0 26px}
.anodp__box:empty{display:none}
.anodp{border-left:3px solid var(--accent);background:var(--soft);border-radius:0 8px 8px 0;padding:6px 10px}
.anodp--brak{border-left-color:#b45309}
.anodp__h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:2px}
.anodp__h>b{font-size:12px}
.anodp__h .planw__x{margin-left:auto}
.anodp__t{font-size:13px;line-height:1.45;outline:none;border-bottom:1px dashed transparent;cursor:text;white-space:pre-wrap}
.anodp__t:hover,.anodp__t:focus{border-bottom-color:var(--accent)}
/* pytanie, o ktore WLASNIE pytamy baze — pulsujaca kropka, zeby bylo widac, ze cos sie dzieje */
.planw__p.anpyta>.planw__ph>b::after{content:'';display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--accent);animation:anpuls 1s ease-in-out infinite;vertical-align:middle}
@keyframes anpuls{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

.planw__meta{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:3px;padding-left:2px}
.kwal__o{margin-right:10px;font-size:13px;cursor:pointer}
/* ADR-0061 E2: pasek „oferta zatwierdzona → załóż projekt" na karcie oferty */
.ofprj{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 14px 4px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--accent-soft)}
.ofprj__t{font-size:13px;font-weight:600}
.ofprj .btn{margin-left:auto}
/* ADR-0061 E2: zakres projektu i założenia wdrożeniowe per moduł (zakładka Plan) */
.zak__m{border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin:0 0 8px}
.zak__h{display:flex;align-items:center;gap:8px}
.zak__h b{font-size:14px}
.zak__x{margin-left:auto;opacity:.5}
.zak__x:hover{opacity:1;color:var(--danger)}
.zak__std-row{margin:6px 0}
.zak__std{max-width:420px}
.zak__lab{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:6px 0 3px}
.zak__ta{width:100%;resize:vertical}
.zak__ro{white-space:pre-wrap;font-size:13px}
.zak__add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.rolerow--off{opacity:.45}   /* .1642: moduł wyłączony w profilu instalacji — rola go nie włączy (Administracja → Moduły instalacji) */
/* TAGI rekordów CRM (ADR-0060) — ten sam wygląd chipsów co tagi poczty; pasek pod nagłówkiem karty + wybierak */
.tagstrip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 14px 8px}
.tagstrip__lab{font-size:12px;color:var(--muted)}
.tagchip{cursor:default}
.tagchip--g{border-style:double;border-width:3px;padding-top:1px;padding-bottom:1px}
.tagpick{position:absolute;z-index:60;min-width:260px;max-width:340px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:none;padding:8px 10px}
.tagpick__h{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:6px 0 4px}
.tagpick__row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:7px;cursor:pointer}
.tagpick__row:hover{background:var(--soft)}
.tagpick__row.akt{background:var(--accent-soft)}
.tagpick__row i{width:10px;height:10px;border-radius:50%;display:inline-block}
.tagpick__row small{margin-left:auto;color:var(--muted)}
.tagpick__note{font-size:11.5px;color:var(--muted);padding:2px 6px 6px}
.mailtag__paleta{display:flex;gap:8px;flex-wrap:wrap}
.mailtag__paleta i{width:26px;height:26px;border-radius:8px;cursor:pointer;display:inline-block;border:2px solid transparent}
.mailtag__paleta i.akt{border-color:var(--txt);box-shadow:0 0 0 2px var(--panel) inset}
.mailtag__poz{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer}
.mailtag__poz:hover{background:var(--soft)}
.mailtag__poz i{width:11px;height:11px;border-radius:50%}
.mailtag__poz span{flex:1}
.mailtag__poz b{color:var(--ok);width:16px}
/* miniatury obrazkow na karcie zadania/pomyslu (Pawel 2026-08-18: zrzut zamiast slownego opisu) */
.zadgaleria{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
.zadgaleria img{max-height:120px;max-width:200px;border:1px solid var(--line);border-radius:9px;display:block;object-fit:cover}
.zadgaleria a:hover img{box-shadow:none}   /* obrazek W MIEJSCU wklejenia (znacznik z czesci HTML), nie tylko galeria na dole */   /* pole odpowiedzi na karcie zadania (poza .mailcompose, ktore rozciaga na wysokosc panelu) */

/* ASYSTENT pełny */
.assistant{max-width:760px;margin:0 auto;text-align:center;padding-top:32px}
.assistant__mark{width:54px;height:54px;border-radius:14px;background:#111827;color:var(--on-accent);display:grid;place-items:center;font-size:24px;margin:0 auto 16px}
.assistant h2{margin:0 0 6px}
.assistant p{color:var(--muted)}
.suggest{display:flex;flex-direction:column;gap:10px;margin:22px 0;text-align:left}
.suggest button{border:1px solid var(--field-line);background:var(--panel);border-radius:10px;padding:13px 16px;text-align:left;cursor:pointer;font-size:14px;color:#374151}
.suggest button:hover{border-color:var(--accent-text);color:var(--accent-text)}
.composer{display:flex;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel);align-items:center}
.composer input{flex:1;border:none;outline:none;font-size:14px}
.composer__clip{flex:none;color:var(--accent-text);background:transparent;padding:4px 6px;display:flex;align-items:center;border-radius:8px;transition:background var(--tr)}
.composer__clip:hover{background:var(--accent-soft);color:var(--accent-text)}
/* .1431 (zgloszenie Pawla „czy nie moglby miec ladnej zaokraglonej formy jak pasek asystenta?"):
   pasek „Wiedzy o kliencie" przechodzi na TEN komponent zamiast wlasnego stylu. Rozni sie od
   asystenta jednym: ma pole WIELOLINIJKOWE (Shift+Enter = nowa linia), a `.composer input` wyzej
   celuje tylko w `input`. Regula jest DOKLADANA, nie zmieniana — dzis zaden `.composer` nie
   zawiera `textarea`, wiec nie moze niczego przestawic w istniejacych paskach. */
.composer textarea{flex:1;border:none;outline:none;font-size:14px;resize:none;background:transparent;font-family:inherit;line-height:1.45;color:inherit}
.composer--big textarea{font-size:15px}

/* ASYSTENT — dolny dok (cała szerokość) */
.assist{display:none;background:var(--panel);border-top:1px solid var(--line);flex-direction:column;overflow:hidden;height:clamp(260px,40vh,460px);box-shadow:none}
.app.assist-open .assist{display:flex}
.assist__head{display:flex;align-items:center;gap:7px;padding:7px 18px;border-bottom:1px solid var(--line)}
.assist__head .iconbtn{margin-left:auto}
.assist__ctx{padding:7px 22px;font-size:12px;color:var(--muted);background:var(--soft);border-bottom:1px solid var(--line)}
.acard{border:1px solid var(--line);border-radius:11px;padding:13px;background:var(--panel);max-width:860px}
.acard__t{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.acard p{margin:0;font-size:13px;color:#374151}
.acard .btn{margin-top:10px;padding:6px 11px;font-size:13px}
.amsg--b b{color:var(--txt)}
.amsg__err{color:var(--txt)}
.amsg__errhint{font-size:12px;color:var(--muted);margin:4px 0 8px}
.amsg__retry{margin-top:2px}
/* dynamiczny wskaźnik „Hermes pracuje": pulsująca kropka + lecące sekundy */
.amsg--think{background:var(--soft)}
.think{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap}
.think__dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;animation:thinkpulse 1.1s ease-in-out infinite}
.think__txt{color:var(--muted)}
.think__sec{font-variant-numeric:tabular-nums;color:var(--accent-text);opacity:.85;font-weight:600;font-size:.85em;min-width:30px}
.think__hint{color:var(--muted);opacity:.65;font-size:.82em;font-style:italic}
@keyframes thinkpulse{0%{opacity:.35;transform:scale(.8);box-shadow:none}50%{opacity:1;transform:scale(1.1);box-shadow:none}100%{opacity:.35;transform:scale(.8);box-shadow:none}}
.asuggest{display:flex;flex-wrap:wrap;gap:7px;max-width:860px}
.asuggest button{text-align:left;border:1px solid var(--field-line);background:var(--panel);border-radius:9px;padding:9px 11px;cursor:pointer;font-size:13px;color:#374151}
.asuggest button:hover{border-color:var(--accent-text);color:var(--accent-text)}
.assist__attach{display:flex;flex-wrap:wrap;gap:6px;padding:8px 22px 0}
.atchip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 6px 4px 9px;font-size:13px;max-width:100%}
.atchip__ic{flex:none;font-size:14px}
.atchip__nm{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--txt)}
.atchip__sz{flex:none;color:var(--muted);font-size:12px}
.atchip__x{flex:none;border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;padding:0 2px}
.atchip__x:hover{color:var(--danger)}
.assist--drag{outline:2px dashed var(--accent-text);outline-offset:-5px;background:var(--accent-soft)}
/* .1580 (Pawel: „ta ikonka myli userow co kliknac… niech bedzie chociaz mniejsza i za przyciskiem wyslij"): 🧠 = droga awaryjna, nie glowna.
   Mala i przygaszona, ZA „Wyslij"; zwykla droga = napisac „poszukaj glebiej" albo kliknac propozycje pod odpowiedzia. */

/* ADMIN */
.adminblock{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.adminblock h3{margin:0 0 4px;font-size:15px}
.adminblock p{margin:0;color:var(--muted);font-size:13px}

/* iteracja UI */
.composer--big{padding:14px 16px;border:1.5px solid var(--line);box-shadow:var(--shadow);border-radius:14px}
.composer--big input{font-size:15px}
.composer--big:focus-within{border-color:var(--accent-text);box-shadow:none}
.dash-composer{position:sticky;bottom:-22px;margin-top:22px;background:var(--bg);padding-top:10px}
.dash-composer .composer--big{background:var(--panel)}
.app.assist-open .dash-composer{display:none}
/* globalny composer — na wszystkich widokach, chowa się gdy dok otwarty */
.gcomposer{flex:none;padding:12px 22px 16px;border-top:1px solid var(--line);background:var(--bg)}
.gcomposer .composer--big{background:var(--panel);max-width:980px;margin:0 auto}
.app.assist-open .gcomposer{display:none}
.askpill{display:none}   /* domyslnie: telefon i waskie okno — pigulki nie ma */
/* DESIGN 2.9 §8.7: KOMPOZYTOR STOI TYLKO NA PULPICIE I W ASYSTENCIE. Na rejestrze zabieral ~92 px
   wysokosci na kazdym ekranie i nikt z niego tam nie korzystal. Lista ekranow jest BIALA (co ma byc),
   nie czarna (czego ma nie byc) — nowy ekran nie dostaje paska przez przeoczenie. Na pozostalych
   ekranach zostaje pigulka `#askPill`. Dotyczy komputera (§8); telefon ma swoja regule nizej. */
@media (min-width: 901px) {
  .app .gcomposer{display:none}
  .app.view-dashboard .gcomposer{display:block}   /* ADR-0093: Asystent ma WŁASNĄ rozmowę (z Claude / agentem) — kompozytor czatu tylko na Pulpicie */
  .app.assist-open .gcomposer{display:none}
  .askpill{position:fixed;right:22px;bottom:22px;width:40px;height:40px;border-radius:50%;border:1px solid var(--accent-ring);
    background:var(--panel);color:var(--accent-text);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;z-index:40}
  .askpill:hover{background:var(--accent-soft)}
  .app.view-dashboard .askpill,
  .app.assist-open .askpill,
  .app.view-launcher .askpill,
  .app.view-czat .askpill{display:none}
  /* „Nad niczym" bierzemy doslownie: ZMIERZONE, ze pigulka w rogu przykrywala komorke ostatniego
     wiersza na liscie Tresc. Tam, gdzie pigulka stoi, tresc dostaje zapas 40 px (pigulka) + 2x18 px. */
  .app:not(.view-dashboard):not(.assist-open):not(.view-czat) .main{padding-bottom:76px}
}
.app.view-czat .gcomposer{display:none}   /* Czat ma własny pasek pisania — globalny kompozytor Hermesa nie nachodzi na dole */
.app.view-bazywiedzy .gcomposer{display:none}   /* to samo w Bazach wiedzy: panel dziedziny ma własne pole pytania, a DWA pola „Wyślij" pod sobą myliły — jedno pytało bazę, drugie zwykłego Hermesa (zgłoszenie Pawła 2026-08-29) */
.app.wk-open .gcomposer{display:none}
/* ⛔ GLOBALNY KOMPOZYTOR HERMESA TYLKO TAM, DOKAD PROWADZI LEWE MENU (zasada Pawla 2026-09-13:
   „pokazuj go tylko przy glownych elementach menu z lewej — wewnatrz zadan, leadow, projektow juz nie;
   tylko tam, gdzie bezposrednio prowadzi lewe menu — w glab juz przycisk menu nie prowadzi").
   Karty (`record` = zadanie/projekt/lead/oferta, `kontrahent` = klient) maja WLASNE paski rozmowy
   (czat karty, asystent projektu, wiedza o projekcie, wiedza klienta) — dwa pola „Wyslij" pod soba myla,
   dokladnie jak w Bazach wiedzy i Czacie wyzej. Jedna regula zamiast klasy pilnowanej w kilku miejscach. */
.app:has(.view[data-view="record"].is-active) .gcomposer,
.app:has(.view[data-view="kontrahent"].is-active) .gcomposer{display:none}   /* zakładka „Wiedza klienta" na karcie kontrahenta — ma własne pole pytania, ta sama zasada co wyżej */
tbody tr.clk{cursor:pointer}
tbody tr.clk:hover td{background:var(--accent-soft)}
/* DESIGN 2.9 §8.3: w belce slad nawigacyjny (maly, stonowany), ostatni czlon pogrubiony; calosc z wielokropkiem. */
.topbar__crumbs{display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden}
.topbar__crumbs .crumb{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__crumbs .crumb--last{font-weight:700;color:var(--txt);font-size:14px}
.topbar__crumbs .crumb + .crumb::before{content:"· ";color:var(--muted);font-weight:400}
@media (min-width: 901px) {
  /* Szesc skrotow i „Odswiez" znikaja Z BELKI (nie z aplikacji): skroty pod „Nowe", odswiezanie w menu konta.
     ⚠⚠ TABLICA ZOSTAJE NA BELCE — zdjalem ja 2026-09-18 (commit f7dfe1fc) „bo ma pozycje w menu", a ten skrot
     jest WPROST decyzja wlasciciela z ADR-0017 („prosba Pawla — rzecz, do ktorej wraca sie kilka razy dziennie").
     Zglosil brak 2026-09-21. Limit czterech przyciskow w belce (§8.3) jest zachowany: Tablica, Wnioski, dzwonek,
     konto — „Nowe ▾" to przycisk z etykieta, ktory §8.3 sam dopuszcza jako jedno wejscie do szesciu skrotow. */
  .topbar__quick,.topbar__refresh{display:none !important}
  .topbar__nowe{white-space:nowrap}
}
@media (max-width: 900px) {
  .topbar__nowe{display:none}   /* telefon ma arkusz „…" z tymi samymi pozycjami */
  .vtitle{display:none}         /* §4.5: na telefonie tytul NOSI belka — wiersz tytulu w tresci bylby drugim tytulem */
}
.colcfg{margin-left:auto;font-size:12px;color:var(--muted)}
/* segment filtra + chip aktywnego filtra (sterowany przez asystenta) */
.seg{display:inline-flex;gap:6px;flex-wrap:wrap}
.seg button{border:1px solid var(--field-line);background:var(--panel);border-radius:8px;padding:5px 12px;font-size:13px;font-weight:600;color:#374151;cursor:pointer}
.seg button:hover{border-color:var(--accent-text)}
.seg button.is-active{background:var(--accent-soft);border-color:var(--accent-ring);color:var(--accent-text)}
.fchip{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent-ring);border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700;margin-left:6px}
.fchip__x{cursor:pointer;font-weight:800}
.wikicard{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-size:13px;line-height:1.65;color:#374151;max-width:820px}
.wl{color:var(--accent-text);font-weight:600}
.dash-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.dash-grid--mail{grid-template-columns:3fr 1fr}   /* zakładka E-mail/Kalendarz: e-mail szerszy, kalendarz węższy (przed media-query, by <1100px wciąż stackowało) */
/* .1465: zakładka Zadania z OBSERWOWANYMI (decyzja Pawła): Moje ≈ Obserwowane, „Do zatwierdzenia" wąskie */
/* .1487 (Paweł): „Zadania otwarte" NAJSZERSZE (na nich pracujemy), „Obserwowane" tak wąskie jak „Do zatwierdzenia" */
/* D-2026-10-05-pulpit-otwarte-z-list: dwie kolumny — „Zadania otwarte” + JEDEN panel stałej szerokości (dawne 0.7fr + 0.7fr) z przełącznikiem .seg */
.dash-grid--zad2{grid-template-columns:1.6fr 1.4fr}
#vDashboard .dash-grid > div > .seg{position:sticky;top:0;z-index:2;flex:none;grid-auto-columns:auto}   /* przełącznik zostaje na wierzchu przy przewijaniu; przyciski na szerokość napisów (1280 px: „Do zatwierdzenia” się nie ucina) */
#vDashboard .dash-grid > div > .seg button{padding:0 10px;font-size:13px}   /* jak .zadbar > .seg — trzy podzakładki z licznikami w panelu ~450 px */
.obsgwiazdka{background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:2px 4px}
.obsgwiazdka:hover{transform:scale(1.15)}
/* .1488: wiersz „Obserwowane" w WĄSKIEJ kolumnie — treść może się kurczyć (min-width:0), tytuł do 2 linii, klient/wykonawca
   z wielokropkiem, plakietka statusu nie ucieka za krawędź (flex:none). Bez tego kolumna dostawała poziomy pasek. */
.tl__row--obs .tl__main{min-width:0}
.tl__row--obs .tl__main b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.3}
.tl__row--obs .tl__main small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl__row--obs .badge{flex:none}
.dash-grid h3{font-size:14px;margin:0 0 10px;color:#374151}
.dash-h{font-size:14px;font-weight:700;margin:0 0 10px;color:#374151}
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.fstage{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;box-shadow:var(--shadow)}
.fstage__lab{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.fstage__val{font-size:18px;font-weight:800;margin:5px 0 9px}
.fstage__track{height:7px;background:var(--soft);border-radius:20px;overflow:hidden}
.fstage__bar{height:100%;border-radius:20px;min-width:4px}
.dkpi{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:var(--shadow);cursor:pointer;transition:border-color .12s,box-shadow .12s}
.dkpi:hover{border-color:var(--accent-text);box-shadow:none}
.dkpi__ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:var(--accent-soft);color:var(--accent-text)}
.dkpi__ico .ico{width:22px;height:22px}
.dkpi__val{font-size:25px;font-weight:800;line-height:1.05}
.dkpi__lab{font-size:12px;color:var(--muted);margin-top:4px}
.dkpi__lab b{color:var(--txt);font-weight:700}
.dtabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.dtab{flex:1;border:none;background:transparent;padding:11px 8px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.dtab:hover{color:var(--txt)}
.dtab.is-active{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.dpanel{display:none}.dpanel.is-active{display:block}
/* SZYBKIE SKROTY na Pulpicie (ADR-0070): kafelki jak .dkpi, tokeny, zero kolorow na sztywno */
.sktiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-content:start}
.sktile{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 8px 8px 12px;min-width:0}
.sktile:hover{border-color:var(--accent-text)}
.sktile__b{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;border:0;background:none;padding:4px 0;text-align:left;font:inherit;color:var(--txt);cursor:pointer}
.sktile__i{grid-row:1/3;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center}
.sktile__t{font-size:14px;font-weight:600;line-height:1.25;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* nazwa „Klient · Zakladka" ma prawo do dwoch linii, nie do wielokropka po pol slowa */
.sktile__s{font-size:12px;color:var(--muted)}
.sktile__a{display:flex;align-items:center;gap:2px;flex:none;opacity:0;transition:opacity .12s}   /* dzialania w spoczynku schowane (jak kolumna dzialan, DESIGN 2.30) — nazwa dostaje pelna szerokosc */
.sktile:hover .sktile__a,.sktile:focus-within .sktile__a{opacity:1}
.sktile__in{font:600 14px var(--font);color:var(--txt);border:1px solid var(--field-line);border-radius:var(--radius-sm);padding:4px 8px;min-width:0;width:100%}
/* ADR-0071: zalaczniki budzetu projektu (zakladka Budzet) */
.budz-zal{display:flex;flex-direction:column;gap:4px;margin:6px 0 4px}
.budz-zal__row{display:flex;align-items:center;gap:10px;min-width:0}
.budz-zal__row .btn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-mut{font-size:12px;color:var(--muted);font-weight:400}
/* Asystent jako pełny widok-czat (zastąpił dolny dok) */
.achat{display:flex;flex-direction:column;height:calc(100vh - 100px);max-width:980px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.achat__head{display:flex;align-items:center;gap:7px;padding:13px 20px;border-bottom:1px solid var(--line);font-size:15px}
.achat__head small{color:var(--muted)}
.achat__ctx{margin-left:auto;font-size:12px;color:var(--muted)}
@media(max-width:1100px){.dash-grid{grid-template-columns:1fr}}
/* Dashboard o stałej wysokości — listy mają własny scroll, dolny dok nie zasłania */
#vDashboard.is-active{display:flex;flex-direction:column;height:100%;min-height:0}
#vDashboard.is-active > .view__head,
#vDashboard.is-active > .kpis,
#vDashboard.is-active > .dtabs{flex:none}
#vDashboard.is-active > .dash-composer{flex:none;position:static;bottom:auto;margin-top:14px}
#vDashboard.is-active .dpanel.is-active{display:flex;flex-direction:column;flex:1;min-height:0}
#vDashboard.is-active .dash-grid{flex:1;min-height:0;grid-template-rows:minmax(0,1fr)}
#vDashboard .dash-grid > div{display:flex;flex-direction:column;min-height:0;min-width:0;overflow-y:auto;padding-right:6px}   /* min-width:0 = szeroka tabela zadań przewija się W kolumnie (zadtblwrap overflow-x), nie rozpycha grida/strony */
#vDashboard .dash-grid > div > .dash-h{position:sticky;top:0;z-index:2;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:none;margin:0 0 10px;padding:7px 13px}
@media(max-width:1100px){
  #vDashboard.is-active{height:auto;display:block}
  #vDashboard.is-active .dpanel.is-active{display:block}
  #vDashboard.is-active .dash-grid{grid-template-rows:none}
  #vDashboard .dash-grid > div{overflow:visible;display:block;padding-right:0}
  #vDashboard .dash-grid > div > .dash-h{position:static}
}
/* Widoki listowe (Leady/Klienci/Zadania/Projekty/Spotkania/Pomysły/Decyzje/Kalendarz) o stałej wysokości
   — nagłówek u góry stały, treść z własnym scrollem; dolny dok asystenta nie zasłania */
.view--list.is-active{display:flex;flex-direction:column;height:100%;min-height:0}
.view--list.is-active > .view__head{flex:none}
.view--list.is-active > :not(.view__head){flex:0 1 auto;min-height:0;overflow:auto}
.view--list.is-active thead th{position:sticky;top:0;z-index:2}
.view--list.is-active .group__lab{position:sticky;top:0;z-index:2;background:var(--bg);margin-bottom:0;padding-bottom:8px}
/* .1486 (zgłoszenie Pawła: „nagłówki kolumn mogłyby być trzymane na górze"): sticky wyżej NIGDY nie działał w listach, bo
   `.zadtblwrap{overflow-x:auto}` jest kontenerem przewijania MIĘDZY nagłówkiem a hostem listy — sticky kleił się do ramki,
   a ramka przewijała się razem z treścią. W widokach-listach ramka nie przewija; przewija host (obie osie), więc nagłówek
   trzyma się góry, a pasek w bok stoi u dołu ekranu (pilot `.tblsx__bar` w tych widokach jest wyłączany w JS). */
.view--list.is-active .zadtblwrap{overflow:visible}   /* szerokość ramki = szerokość tabeli — ustawia JS (cfgWireScrollPilot); `width:max-content` NIE: tabela z `width:100%` w kontekście shrink-to-fit rozdyma się do 1 000 000 px [ZMIERZONE w podglądzie] */
.profile__head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.profile__head h2{margin:0}
.profile__back{cursor:pointer;color:var(--accent-text);font-weight:600;font-size:13px}
.profile__sub{color:var(--muted);margin:0 0 18px}
.psec{margin-bottom:22px}
.psec h3{font-size:14px;margin:0 0 8px;color:#374151;display:flex;align-items:center;gap:8px}
.psec h3 .cnt{font-size:12px;color:var(--muted);background:var(--soft);border-radius:20px;padding:0 8px}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.admin-card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px;cursor:pointer;box-shadow:var(--shadow)}
.admin-card:hover{border-color:var(--accent-text)}
.admin-card h3{margin:0 0 4px;font-size:14px}
.admin-card small{color:var(--muted);font-size:12px}

/* formularze konfiguracji */
.cfgform{display:flex;flex-direction:column;gap:13px;max-width:580px;margin-top:12px}
.cfgrow{display:flex;flex-direction:column;gap:5px}
.cfgrow label{font-size:13px;color:var(--muted);font-weight:600}
.cfgrow input,.cfgrow select{border:1px solid var(--field-line);border-radius:9px;padding:9px 11px;font-size:14px;font-family:inherit;background:var(--panel)}
.cfgrow input:focus,.cfgrow select:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.cfgrow--chk{flex-direction:row;align-items:center;gap:9px}
.cfgrow--chk label{color:var(--txt)}
.cfgrow--chk input{width:17px;height:17px;accent-color:var(--accent)}
.cfgactions{display:flex;gap:8px;margin-top:4px;align-items:center}
.cfgnote{font-size:12px;color:var(--muted)}
.cfgsaved{color:var(--ok);font-size:13px;font-weight:600;margin-left:6px}
.cfgout{background:#0f1115;color:#d7e3f4;border-radius:9px;padding:12px 14px;font:12px/1.55 ui-monospace,Consolas,monospace;white-space:pre-wrap;margin-top:6px;min-height:54px}
.cfgtable{width:100%;border-collapse:collapse;margin-bottom:12px}
.cfgtable th,.cfgtable td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px}
.cfgtable th{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.4px}
.cfgcols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* KARTA ZDARZENIA — redesign 2026-07-03: Cały dzień + miejsce w rzędzie, separator powiązań, zasób odpięty, asystent terminów */
.cfrow1{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.cfrow1 .nfseg{flex:0 0 auto;gap:4px}
.cfrow1 .nfseg button{padding:6px 9px;font-size:12px}
.cfrow1 .cfpill{padding:6px 9px;font-size:12px}
.cfrow1 .cfchk{font-size:13px}
.cflinks{margin-top:8px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:6px 14px 12px}
.cflinks .cfsep{margin-top:2px}
.cflinks .cfsep::before,.cflinks .cfsep::after{background:var(--line-strong)}
.cfpill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--field-line);background:var(--panel);border-radius:9px;padding:7px 12px;font-size:13px;font-weight:600;color:var(--txt);cursor:pointer;white-space:nowrap}
.cfpill:hover{background:var(--soft);border-color:var(--field-line)}
/* KONIEC SERII cyklicznej (migracja 034) — stoi w tym samym rzedzie co pigulka powtarzania,
   wiec ma jej wysokosc i zawija sie razem z nia na waskim ekranie (telefon). */
.cfseria{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
/* PRZYPOMNIENIA O WYDARZENIU (.1129, ADR-0043) — chipy „15 min wczesniej" + „dodaj". */
.cfprzyp{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
/* ZAPROSZONY W CUDZYM WPISIE (zgloszenie Stefana Ocetkiewicza 2026-08-24) — pasek mowiacy WPROST,
   czego tu nie zmieni i co zmieni. Bez niego wyszarzone pola wygladaja jak awaria (lekcja .649). */
.cfgosc{margin:0 16px 10px;padding:9px 12px;border:1px solid #fde68a;background:#fffbeb;border-radius:9px;font-size:12.5px;line-height:1.5;color:#92400e}
.calmodal__card .is-locked{opacity:.55;cursor:not-allowed}
.calmodal__card .is-locked:hover{background:inherit;border-color:var(--line)}
/* ZAPROSZENIA NA SPOTKANIE (.1135) — pasek przycisku na formatce + lista adresatow w podgladzie. */
.cfzapro{display:flex;flex-direction:column;gap:3px;font-size:12px;margin-top:6px}
/* .1139: JEDEN znacznik „Spotkanie Meet" zamiast trzech wierszy (decyzja Pawla 2026-08-21).
   Rozwijane pole gosci + podglad odbiorcow siedza w ramce, zeby bylo widac, ze naleza do znacznika. */
.cfmeetchk{font-size:13.5px;padding:8px 0}
.cfmeetbox{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px 12px 11px}
/* ⚠️ Bez tej linii `display` powyzej BIJE wbudowane [hidden]{display:none} i pole gosci sterczy
   przy odznaczonym znaczniku — dokladnie ta pulapka, ktora .1138 naprawial przy .cfseria. */
.cfmeetbox[hidden]{display:none}
.cfzapro__brak{color:#b45309}
/* .1141: link do spotkania online. Na karcie wpisu pelny (skrocony adres + „kopiuj"), na listach
   sama ikona 🎥 — ta sama informacja, proporcjonalnie do miejsca. */
/* .1142: ogloszenie dociagnnięte z powiadomienia, gdy nie ma go na biezacej scianie (zgloszenie
   Stefana). Ramka mowi WPROST, skad sie tu wzielo — inaczej wygladaloby jak zwykly wpis sciany. */
.tabwskaz{border:1px solid var(--accent-text);border-radius:12px;padding:6px;margin-bottom:12px;background:var(--accent-soft)}
.tabwskaz__hd{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text);padding:2px 6px 6px}
.cpop__meet{display:flex;align-items:center;gap:7px;overflow-wrap:anywhere}
/* .1145: „goscie sa, linku nie ma" - stan, ktory do tej pory byl nieodroznialny od zwyklego spotkania */
.cpop__brak{background:#fffbeb;color:#b45309;border:1px solid #fde68a;border-radius:9px;padding:7px 9px;line-height:1.45}
.cpop__kop{flex:0 0 auto;border:1px solid var(--field-line);background:var(--panel);border-radius:7px;padding:1px 8px;font:inherit;font-size:11px;color:var(--muted);cursor:pointer}
.cpop__kop:hover{border-color:var(--accent-text);color:var(--accent-text)}
.calag__meet{flex:0 0 auto;text-decoration:none;font-size:15px;line-height:1;padding:2px 5px;border-radius:7px}
.calag__meet:hover{background:var(--accent-soft)}
.cfzapro__hist{color:var(--muted)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--accent-text);cursor:pointer;text-decoration:underline}
.cfmeet{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* .1138: 180, NIE 260 — od kiedy pole stoi w polowie karty (calmodal__r2), przy bazie 260 px
   przycisk „Utworz link Meet" nie miescil sie obok i spadal do drugiego wiersza. */
.cfmeet input{flex:1 1 180px;min-width:0}
.zaprolista{max-height:220px;overflow:auto;margin-top:6px;border:1px solid var(--line);border-radius:9px}
.zaprow{display:flex;align-items:center;gap:9px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:12.5px}
.zaprow:last-child{border-bottom:none}
.zaprow__kto{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-weight:600}
.zaprow__mail{color:var(--muted);overflow-wrap:anywhere}
.przypchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px;background:var(--panel)}
.przypchip b{font-weight:400;opacity:.4;cursor:pointer;margin-left:2px}
.przypchip b:hover{opacity:1;color:var(--danger)}
/* .1611 przypomnienie TELEFONEM — drugi kanal w tym samym wierszu formatki wpisu. */
.cfprzyp--tel{margin-top:6px}
.przyptel{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer}
.przyptel input{margin:0}
.przyptel__min{font-size:12.5px;padding:2px 6px;height:auto;width:auto;min-width:150px}
.przyptel__min:disabled{opacity:.45}
/* .1612 znaczek telefonu przy wpisie kalendarza — maly, przygaszony, ma nie zaslaniac tytulu. */
.caltel{display:inline-block;margin-right:3px;opacity:.75;font-size:.95em}
/* .1614 zalacznik przypiety przez panel (PDF oferty) — wyglada jak zalacznik, ale bez krzyzyka. */
.mailatt-chip--stala{border-style:dashed;opacity:.9}
.przypadd{border:1px dashed var(--field-line);background:transparent;color:var(--muted);font:inherit;font-size:12.5px;border-radius:999px;padding:3px 11px;cursor:pointer}
.przypadd:hover{border-color:var(--accent-text);color:var(--accent-text)}
.cfseria__lab{font-size:12px;color:var(--muted);font-weight:600}
/* flex:0 0 auto = pola NIE kurcza sie do ikonki, gdy w rzedzie zrobi sie ciasno */
.cfseria__tryb{flex:0 0 auto;padding:6px 9px;font-size:12px;height:auto;width:auto;min-width:132px}
.cfseria__pole{flex:0 0 auto;padding:6px 9px;font-size:12px;height:auto;width:auto;min-width:118px;max-width:170px}
.cfseria__ile{font-size:12px;color:var(--muted)}
/* KONTAKTY KLIENTA na karcie (zgłoszenie Pawła 2026-08-18) — zwarta lista pod nazwą klienta
   w prawej szynie. Ten sam blok na karcie zadania, projektu i leada. */
.keykont{margin:8px 0 2px;padding:8px 10px;background:var(--soft);border-radius:9px}
.keykont__h{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.keykont__i{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 6px;padding:5px 0}
.keykont__i+.keykont__i{border-top:1px solid var(--line)}
.keykont__n{font-size:13px;font-weight:600;color:var(--txt)}
.keykont__s{font-size:11px;color:var(--muted);grid-column:1;margin-top:-2px}
.keykont__e{grid-row:1;grid-column:2}
.keykont__d{grid-column:1/-1;font-size:12px;color:var(--muted);word-break:break-word}
/* mail jako przycisk (nasza formatka), telefon jako link tel: — oba maja wygladac jak zwykly odsylacz */
.keykont__l{background:none;border:0;padding:0;font:inherit;color:var(--accent-text);cursor:pointer;text-decoration:none}
.keykont__l:hover{text-decoration:underline}
.keykont__p{font-size:12px;color:var(--muted);padding:3px 0}
/* KALENDARZ — szybkie widoki nad lista kalendarzy (decyzja Pawla 2026-08-18; czwarty przycisk .1509) */
/* .1318: trzeci przycisk schodzil POD dwa pierwsze zamiast wypadac poza kolumne (zmierzone: 309 px tresci na 208 px miejsca).
   .1509: przy CZTERECH przyciskach zawijanie dawalo 3 rzedy (2+1+1) i rosło o 36 px — a w tym panelu pionowe
   miejsce jest drogie (lekcja .1317: przy 13 operatorach wybor dnia wypadal pod krawedz ekranu). Siatka 2x2
   trzyma te sama wysokosc co poprzednie trzy przyciski. Zmierzone w kolumnie 208 px: najszerszy napis
   („Plan zasobow") potrzebuje 110 px przy 12 px czcionki, a komorka ma 101 px — stad 11 px i wezsze marginesy
   boczne. `minmax(0,1fr)` zamiast `1fr`, bo domyslne min-width:auto rozpycha komorke do szerokosci napisu. */
/* ⚠️ BEZ `white-space:nowrap` (bylo do .1508): przy 11 px najszerszy napis miesci sie w komorce
   z zapasem 3 px — na innej maszynie z szersza czcionka nowrap URWALBY tekst po cichu. Bez niego
   najgorszy przypadek to napis w dwoch linijkach (oba przyciski rzedu rosna rowno), a nie ucieta
   etykieta, ktorej nikt nie zglosi. Zmierzone tutaj: wszystkie cztery mieszcza sie w jednej linii. */
.calrail__widoki{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0 2px}
.calrail__widoki .btn{justify-content:center;padding:6px 2px;font-size:11px;line-height:1.25;text-align:center}
.calrail__hint{font-weight:400;font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}
.cfplace{margin-top:2px}
.cfchk{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--txt);font-weight:600;cursor:pointer;white-space:nowrap}
.cfchk input{width:17px;height:17px;accent-color:var(--accent)}
.cfbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.cfsep{display:flex;align-items:center;gap:10px;margin:6px 0 2px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.cfsep::before,.cfsep::after{content:"";flex:1;height:1px;background:var(--line)}
.cfai{width:100%;margin-top:4px;border:1px dashed var(--accent-text);background:var(--accent-soft);color:var(--accent-text);border-radius:11px;padding:12px 14px;font-size:14px;font-weight:600;cursor:pointer;text-align:center}
.cfai:hover{background:var(--accent);color:var(--on-accent);border-style:solid}
.calai__ov{z-index:90}
.calai__card{max-width:520px}
.calai__lead{font-size:13px;color:var(--muted);margin:2px 0 10px;line-height:1.5}
.calai__out{margin-top:12px}
.calai__bot{background:var(--accent-soft);border-radius:11px;padding:11px 13px;font-size:13.5px;line-height:1.5;margin-bottom:10px}
.calai__day{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0}
.calai__day>b{font-size:13px;min-width:70px}

/* ===== KARTA KLIENTA — kokpit ===== */
.prof__back{cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--accent-text);background:var(--panel);border:1px solid var(--field-line);font-family:inherit;font-weight:600;font-size:13px;border-radius:8px;padding:7px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
.prof__back:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.prof__hd{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.prof__av{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:13px;background:var(--accent-soft);color:var(--accent-text);font-size:19px;font-weight:800}
.prof__id{flex:0 1 auto;min-width:180px}
.prof__id h2{margin:0;font-size:21px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prof__sub{color:var(--muted);font-size:13px;margin:4px 0 0}
.prof__acts{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.prof__acts a.btn{text-decoration:none;display:inline-flex;align-items:center}
.prof{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.prof--solo{grid-template-columns:minmax(0,1fr)}   /* karta bez prawego rail-a (pliki przeniesione do zakladki) — pelna szerokosc */
/* .1111: `minmax(0,1fr)` zamiast `1fr`. Kolumna `1fr` nie schodzi ponizej najszerszej rzeczy w srodku,
   wiec karta klienta byla SZERSZA OD EKRANU i na dole siedzial pasek przewijania — na KAZDEJ zakladce
   (zmierzone: nadmiar 184 px identyczny na Przegladzie, Haslach i Licencjach). Zglosil Pawel przy kafelkach
   licencji, ale przyczyna byla wspolna dla calej karty. */
@media(max-width:1080px){.prof{grid-template-columns:minmax(0,1fr)}}
.pkpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media(max-width:1500px){.pkpis{grid-template-columns:repeat(2,1fr)}}
.pkpi{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;box-shadow:var(--shadow);min-width:0}
.pkpi__lab{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.pkpi__val{font-size:18px;font-weight:800;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkpi__sub{font-size:12px;font-weight:600;margin-top:4px;color:var(--muted)}
.pkpi--danger{background:var(--danger-soft);border-color:var(--danger-soft)}
.pkpi--danger .pkpi__lab,.pkpi--danger .pkpi__val{color:var(--danger)}
/* DESIGN 2.9 §8.6: kafla faktu bez wartosci nie rysujemy — brakujace liczy JEDNA linia pod siatka. */
.pkpis__braki{grid-column:1/-1;font-size:12px;color:var(--muted);align-self:center}
.pkpis__braki[data-tabgo]{text-decoration:underline;text-underline-offset:2px}
/* PROJEKTY Etap1 — pasek postępu (% realizacji) */
.pprog{display:flex;align-items:center;gap:10px;margin:-4px 0 18px}
.pprog__track{flex:1;height:9px;background:var(--line);border-radius:6px;overflow:hidden}
.pprog__track>span{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .3s}
.pprog__pct{font-size:13px;font-weight:800;min-width:38px;text-align:right}
.pprog__etap{font-size:12px;font-weight:600;color:var(--muted);padding:2px 8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.prjmini{display:inline-flex;align-items:center;gap:7px;width:100%}
.prjmini__t{flex:1;height:7px;background:var(--line);border-radius:5px;overflow:hidden;min-width:40px}
.prjmini__t>span{display:block;height:100%;background:var(--accent);border-radius:5px}
.prjmini>small{font-size:11px;font-weight:700;color:var(--muted);min-width:30px;text-align:right}
/* BUDŻET PROJEKTU (Etap 2) */
.ibtn{border:1px solid var(--field-line);background:var(--panel);border-radius:7px;padding:3px 7px;font-size:12px;font-weight:600;color:var(--txt);cursor:pointer;line-height:1.4}
.ibtn:hover{background:var(--soft-2);border-color:var(--accent)}
.budz-sum{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px}
@media(max-width:1100px){.budz-sum{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.budz-sum{grid-template-columns:repeat(2,1fr)}}
.budzkpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0}
.budzkpi__lab{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.budzkpi__val{font-size:16px;font-weight:800;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* .1149 ROBOCIZNA (Etap 2 kontrolingu): rozbicie kosztu pracy per osoba + dopisek na kaflu kosztow */
.budzkpi__sub{font-size:10.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.budz-rob{border:1px solid var(--line);border-radius:10px;padding:4px 12px}
.budz-rob__brak{background:#fffbeb;color:#b45309;border:1px solid #fde68a;border-radius:9px;padding:7px 9px;margin:8px 0;font-size:12.5px;line-height:1.45}
.budzrobrow{display:grid;grid-template-columns:1fr 110px 120px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.budzrobrow:last-child{border-bottom:0}
.budzrobrow.is-sum{border-top:2px solid var(--line-strong,var(--line));border-bottom:0}
.budzrobrow__g{text-align:right;color:var(--muted)}
.budzrobrow__k{text-align:right;font-weight:700}
/* ===== FAKTURA ZAKUPOWA: ODCZYT OBOK ORYGINALU (zamowienie Pawla 2026-08-21) =====
   PO CO: propozycja modelu i oryginal dokumentu byly na DWoCH ekranach — zrodlo otwieralo sie
   w nowej karcie przegladarki, wiec sprawdzanie „czy AI dobrze przeczytala" szlo z pamieci.
   Teraz: z lewej odczytane pola, z prawej oryginal, jedno spojrzenie.
   ⚠️ Prawa kolumna jest STICKY — przy dlugiej rozpisce pozycji zrodlo ma zostac na oczach. */
.fzsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}  /* POL NA POL — zgloszenie Pawla: przy 60/40 orginal byl scisniety, a to on jest tu dowodem */
.fzsplit--solo{grid-template-columns:minmax(0,1fr)}
.fzsplit__l{min-width:0}                       /* min-width:0 = warunek, by dlugie nazwy pozycji nie rozpychaly gridu */
.fzsplit__r{position:sticky;top:8px;min-width:0}
.fzsrc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.fzsrc__bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid var(--line)}
.fzsrc__bar b{font-size:13px}
.fzsrc__bar .fzsrc__sp{margin-left:auto}
.fzsrc__box{position:relative;overflow:auto;max-height:calc(100vh - 210px);background:var(--bg);text-align:center}
.fzsrc__box.is-lupa img{cursor:zoom-in}
/* LUPA — czyta drobny tekst BEZ przelaczania widoku. Pokazuje piksele ORYGINALU (nie powiekszony
   podglad), wiec jest ostra. `pointer-events:none` jest tu konieczne: inaczej lupa lapalaby mysz
   i zdarzenie `mousemove` nad obrazem przestaloby przychodzic. */
.fzlupa{position:absolute;width:230px;height:230px;border-radius:50%;border:3px solid var(--accent-text);
  box-shadow:none;background-repeat:no-repeat;background-color:var(--panel);
  pointer-events:none;display:none;z-index:5}
.fzsrc__box.is-lupa .fzlupa.is-on{display:block}
/* POLA NAGLOWKA WPISYWANE NA KARCIE — okno „Popraw" zaslanialo orginal, wiec nie bylo z czego
   przepisywac (zgloszenie Pawla). Teraz pola stoja obok podgladu. */
.fzhead__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:8px}
.fzfld{display:flex;flex-direction:column;gap:3px;font-size:12px}
.fzfld span{color:var(--muted);font-weight:600}
.fzfld input{padding:7px 9px;border:1px solid var(--field-line);border-radius:8px;font-size:13.5px;background:var(--panel);color:inherit;width:100%}
.fzfld input:focus{outline:2px solid var(--accent-text);outline-offset:-1px}
.fzfld--brak input{border-color:#fbbf24;background:#fffbeb}   /* nieodczytane = zolte, zeby bylo widac, co zostalo do wpisania */
.fzfld--brak span::after{content:" — do wpisania";color:#b45309;font-weight:600}
.fzfld--ok input{border-color:#86efac}
.fzfld__wide{grid-column:1/-1}
.fzsrc__box img{width:100%;height:auto;display:block}
.fzsrc__box.is-11 img{width:auto;max-width:none}   /* 1:1 = prawdziwe piksele; male literki na zrzucie z ERP inaczej sa nieczytelne */
.fzsrc__box iframe{width:100%;height:calc(100vh - 250px);border:0;display:block;background:var(--panel)}
.fzsrc__brak{padding:14px;font-size:13px;color:var(--muted)}
/* WASKI EKRAN: zrodlo schodzi POD odczyt i przestaje byc przyklejone — inaczej zjadaloby cala
   wysokosc telefonu i rozpiska pozycji staje sie nieuzywalna. */
@media (max-width:1100px){
  .fzsplit{grid-template-columns:minmax(0,1fr)}
  .fzsplit__r{position:static}
  .fzsrc__box{max-height:60vh}
  .fzsrc__box iframe{height:60vh}
}
.budzkpi--over{border-color:#ef4444}.budzkpi--over .budzkpi__val{color:#ef4444}
.budzkpi--good{border-color:#22c55e}.budzkpi--good .budzkpi__val{color:#16a34a}
.budz-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.budz-head h4{margin:0;font-size:14px}
.budz-tb{display:flex;gap:6px;flex-wrap:wrap}
.budz-cols{display:grid;grid-template-columns:minmax(180px,2fr) 1fr 1fr auto;gap:10px;padding:0 10px 6px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);border-bottom:1px solid var(--line)}
.budz-tree{display:flex;flex-direction:column}
.budzrow{display:grid;grid-template-columns:minmax(180px,2fr) 1fr 1fr auto;gap:10px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line)}
.budzrow:hover{background:var(--soft-2)}
.budzrow__name{display:flex;align-items:center;gap:7px;min-width:0;font-size:14px}
.budzrow__name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.budzrow__acts{display:flex;gap:4px;justify-content:flex-end}
.budzb{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:2px 6px;border-radius:999px}
.budzb--g{background:var(--accent-soft);color:var(--accent-text)}.budzb--k{background:#fef2f2;color:#dc2626}.budzb--p{background:#ecfdf5;color:#059669}
.budzc{display:flex;flex-direction:column;gap:3px}
.budzc__n{font-size:13px;font-weight:700}.budzc__n small{font-weight:500;color:var(--muted)}
.budzc__bar{height:5px;background:var(--line);border-radius:4px;overflow:hidden}
.budzc__bar>span{display:block;height:100%;background:var(--accent);border-radius:4px}
.budzc.is-over .budzc__n b{color:#dc2626}.budzc.is-over .budzc__bar>span{background:#ef4444}
.budzc.is-rev .budzc__bar>span{background:#22c55e}
.budz-reals{display:flex;flex-direction:column}
.budzreal{display:grid;grid-template-columns:92px minmax(120px,1.4fr) 110px 2fr auto auto;gap:10px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);font-size:13px}
/* .1148 PLATNOSCI KLIENTA (Etap 1 kontrolingu): wiersz raty = termin, kwota, opis, dwa czeki.
   CZERWONY = termin minal bez odhaczonej FV (to ma kluc w oczy); zielone tlo czeka = odhaczony. */
.budzplat{display:grid;grid-template-columns:92px 110px 1fr auto auto auto auto;gap:10px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);font-size:13px}
.budzplat.is-late{background:#fef2f2}
.budzplat.is-late .budzplat__d{color:#b91c1c;font-weight:700}
.budzplat__kw{font-weight:700;text-align:right}
.budzplat__o{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.budzplat__late{color:#b91c1c;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.budzchk{border:1px solid var(--field-line);background:var(--panel);border-radius:8px;padding:3px 9px;font:inherit;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.budzchk:hover{border-color:var(--accent-text);color:var(--accent-text)}
.budzchk.is-on{background:#f0fdf4;border-color:#dcfce7;color:#15803d;font-weight:700}
@media (max-width:900px){ .budzplat{grid-template-columns:88px 1fr auto auto;row-gap:4px} .budzplat__o{grid-column:1/-1} }
.budzreal__d{color:var(--muted);font-size:12px}
.budzreal__poz{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.budzreal__kw{font-weight:800;text-align:right}.budzreal__kw.is-cost{color:#dc2626}.budzreal__kw.is-rev{color:#16a34a}
.budzreal__o{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.budzreal__src{font-size:10px;font-weight:700;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:999px}
.budz-empty{padding:18px;text-align:center}.budz-empty p{color:var(--muted);margin-bottom:12px}
.budz-empty .budz-tb{justify-content:center}
.ptabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.ptab{border:none;background:transparent;padding:9px 13px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.ptab:hover{color:var(--txt)}
.ptab.is-active{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.ptab .cnt{font-size:11px;background:var(--soft);border-radius:20px;padding:0 7px;margin-left:5px;color:var(--muted)}
.ppanel{display:none}.ppanel.is-active{display:block}
.psec2{margin-bottom:20px}
.psec2 h3{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:0 0 9px}
.tldot{flex:none;width:9px;height:9px;border-radius:50%}
.notebox{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px;box-shadow:var(--shadow);margin-bottom:16px}
.notebox textarea{width:100%;border:none;outline:none;resize:vertical;min-height:60px;font:14px/1.5 inherit;font-family:inherit;color:var(--txt)}
.notebox__bar{display:flex;align-items:center;gap:10px;margin-top:8px}
.notebox__hint{font-size:12px;color:var(--muted);flex:1}
.note{border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.note__hd{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.note__hd b{font-size:13px}.note__hd small{color:var(--muted);margin-left:auto}
.note__bd{font-size:14px;line-height:1.55;color:#374151;white-space:pre-wrap}
/* Formularz „Nowa notatka" (karty klient/projekt/lead) → save_note */
.noteform{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px;box-shadow:var(--shadow);margin-bottom:16px;display:flex;flex-direction:column;gap:9px}
.nf__top{display:flex;align-items:center;gap:10px}
.nfinput{flex:1;min-width:0;border:1px solid var(--field-line);border-radius:9px;padding:8px 11px;font:inherit;font-size:14px;color:var(--txt);background:var(--panel)}
.nfinput:focus{outline:none;border-color:var(--accent-text)}
.nfinput--sm{font-size:13px;padding:7px 9px}
.nftext{width:100%;border:1px solid var(--field-line);border-radius:9px;outline:none;resize:vertical;min-height:74px;font:14px/1.5 inherit;color:var(--txt);padding:9px 11px;background:var(--panel);box-sizing:border-box}
.nftext:focus{border-color:var(--accent-text)}
.nfseg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex:none}
.nfseg__b{border:none;background:var(--panel);padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.nfseg__b+.nfseg__b{border-left:1px solid var(--line)}
.nfseg__b.is-active{background:var(--accent-soft);color:var(--accent-text)}
.nf__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.nffield{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--muted);flex:1;min-width:150px}
.nffield--wide{flex-basis:100%;flex-grow:1}
.nfsel{border:1px solid var(--field-line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;font-weight:400;color:var(--txt);background:var(--panel)}
.nfsel:focus{outline:none;border-color:var(--accent-text)}
.nfchip{align-self:flex-start;display:inline-block;background:var(--accent-soft);color:var(--accent-text);border-radius:7px;padding:6px 10px;font-size:13px;font-weight:600}
.av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:700;flex:none}
.av--soft{background:var(--soft);color:var(--muted)}
.rail{display:flex;flex-direction:column;gap:16px}
.railsec{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.railsec h3{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 11px}
.person{display:flex;align-items:center;gap:10px;padding:6px 0}
.person__meta{flex:1;min-width:0;line-height:1.3}
.person__meta b{font-size:13px;display:block}
.person__meta small{color:var(--muted);font-size:12px}
.person .iconbtn{text-decoration:none}
/* DESIGN 2.10 §8.6 — WIERSZ POLA: siatka 40% / 1fr / 28px, min. 36 px, dolna krawedz `--soft`.
   Wartosc stoi DO LEWEJ na wspolnej osi (takze liczby): wyrownanie do prawej krawedzi panelu tworzylo
   rwany rynek w srodku i przy krotkich wartosciach kazalo wodzic wzrokiem.
   Olowek 26x26 wychodzi na najechaniu (albo z klawiatury) — w spoczynku wiersza nie zdobi. */
.dl__row{display:grid;grid-template-columns:40% 1fr 28px;align-items:center;gap:10px;min-height:36px;
  font-size:13px;padding:4px 0;border-bottom:1px solid var(--soft)}
.dl__row:last-child{border-bottom:none}
.dl__row span{color:var(--muted)}
.dl__row b{font-weight:600;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dl__row .cpchev{grid-column:3;justify-self:end;opacity:0;transition:opacity .12s;color:var(--muted)}
.dl__row:hover .cpchev,.dl__row .dfval:focus .cpchev{opacity:1}
.dl__row.is-pusty:hover{background:var(--soft)}
/* Licznik brakow w naglowku panelu — raz na panel, nie przy kazdym pustym wierszu. */
.pcard__braki{font-weight:600;font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}
/* §8.6: SKAD wartosc — chip, nie kursywa z kropka w srodku zdania. 10,5 px, `--muted`, tlo `--soft-2`. */
.frow__src{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--radius-pill);
  background:var(--soft-2);color:var(--muted);font-size:10.5px;font-weight:600;vertical-align:middle;white-space:nowrap}
/* Podsumowanie POD tabela (§8.1: liczby podsumowujace nie stoja przed danymi). */
.ksum--pod{margin:10px 0 0;border-top:1px solid var(--line);padding-top:10px}
/* Pasek wyzwalacza jako element PASKA NARZEDZI: bez wlasnego rzedu i bez wlasnego marginesu. */
.zadbar > .spo-trigbar{margin:0;flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
[data-goto],[data-open]{cursor:pointer}
tbody tr[data-open]:hover td{background:var(--accent-soft)}
.cardbannerwrap{flex:1 1 auto;display:flex;justify-content:center;min-width:180px}
.cardbanner{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--on-accent);background:var(--accent);border:none;border-radius:999px;padding:5px 14px;white-space:nowrap;box-shadow:none}
.person__acts{margin-left:auto;display:inline-flex;gap:6px;align-items:center}
tbody tr[data-goto]:hover td{background:var(--accent-soft)}
.tl__row[data-goto]:hover,.task[data-goto]:hover{border-color:var(--accent-text)}
.tl__row[data-open],.tl__row[data-calopen],.tl__row[data-goto]{cursor:pointer}   /* klikalne karty pulpitu (zadanie/kalendarz) */
.tl__row[data-calopen]:hover{border-color:var(--accent-text)}
.tl__time--task .listdate{font-size:12px;padding:3px 6px}   /* edytowalny termin w karcie zadania (węższy) */
/* Przegląd jako dashboard */
.pdash{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:780px){.pdash{grid-template-columns:1fr}}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow);min-width:0}
.pcard--wide{grid-column:1/-1}
.pcard h4{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin:0 0 8px;display:flex;align-items:center;gap:7px}
.pcard h4 .cnt{font-size:11px;background:var(--soft);border-radius:20px;padding:0 7px;color:var(--muted)}
.pli{display:flex;align-items:center;gap:8px;padding:8px 6px;margin:0 -6px;border-bottom:1px solid var(--soft);font-size:13px;border-radius:7px}
.pli:last-child{border-bottom:none}
.pli:hover{background:var(--soft)}
.pli__main{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pli__r{color:var(--muted);font-size:12px;flex:none}
/* Zakładka PLAN projektu — harmonogram etapów (spójny z .pcard/.pli) */
.pli--task{padding-left:22px;font-size:13px}
.etap-st{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;border:1px solid transparent;white-space:nowrap;flex:none}
.etap-st--planowany{color:var(--muted);background:var(--soft);border-color:var(--line)}
.etap-st--w_toku{color:var(--accent-text);background:var(--accent-soft);border-color:var(--accent-ring)}
.etap-st--zrobiony{color:var(--ok);background:#ecfdf5;border-color:#d1fae5}
.plan-etsel{border:1px solid var(--field-line);border-radius:7px;padding:4px 7px;font-size:12px;background:var(--panel);color:var(--txt);font-family:inherit;max-width:170px;flex:none}
.plan-etsel:focus{outline:none;border-color:var(--accent-text);box-shadow:var(--ring)}
/* .576 (Etap 6): edytowalne daty etapu w wierszu Harmonogramu */
.etap-dates{display:inline-flex;align-items:center;gap:3px;flex:none}
.etap-date{border:1px solid var(--field-line);border-radius:6px;padding:2px 5px;font-size:11px;background:var(--panel);color:var(--txt);font-family:inherit;width:120px}
.etap-date:focus{outline:none;border-color:var(--accent-text);box-shadow:var(--ring)}
.etap-date--hint{border-color:var(--accent-text);background:var(--accent-soft)}   /* .577: podświetlenie pustych pól dat (zachęta) gdy zaden etap nie ma dat */
.etap-dsep{color:var(--muted);font-size:11px}
/* .576: OŚ CZASU etapów (własny layout, bez zależności) */
.etos{position:relative;margin:2px 0 6px;padding:4px 8px 2px}
.etos__grid{position:absolute;left:158px;right:8px;top:4px;bottom:20px;pointer-events:none;z-index:0}
.etos__mline{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.6}
.etos__today{position:absolute;top:0;bottom:0;width:2px;background:#ef4444;opacity:.75}
.etos__row{position:relative;display:flex;align-items:center;height:80px;z-index:1}   /* 2026-09-13: pasek 3x grubszy — ma pokazywac POSTEP etapu, nie sam termin */
.etos__lbl{width:150px;flex:0 0 150px;padding-right:8px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.etos__lp{flex:none;min-width:16px;height:16px;border-radius:50%;background:var(--soft);color:var(--muted);font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.etos__track{position:relative;flex:1 1 auto;height:100%}
.etos__bar{position:absolute;top:8px;height:64px;border-radius:8px;font-size:12px;font-weight:600;color:#334155;line-height:64px;overflow:hidden;white-space:nowrap;box-sizing:border-box;box-shadow:none;min-width:6px;background:var(--panel);border:1px solid var(--line);display:flex;align-items:stretch}   /* 2026-09-13: pusty = bialy; wypelnienie mowi o zadaniach */
.etos__zrob{display:block;background:#16a34a}
.etos__otw{display:block;background:#f2c94c}
.etos__txt{position:absolute;left:8px;right:8px;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.etos__bar--planowany{background:#94a3b8}
.etos__bar--w_toku{background:var(--accent)}
.etos__bar--zrobiony{background:#16a34a}
.etos__bar.is-approx{opacity:.55;outline:1px dashed var(--line-strong);outline-offset:-1px}   /* DESIGN: bez wzorkow z gradientu — „szacunek” = wyblakly + przerywany obrys */
.etos__nodate{position:absolute;top:5px;left:2px;font-size:10px;color:var(--muted)}
.etos__scale{position:relative;height:16px;margin-left:158px}
.etos__mlbl{position:absolute;font-size:10px;color:var(--muted);transform:translateX(2px);white-space:nowrap}
.etos__leg{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--muted);padding:2px 8px 8px}
.etos__leg span{display:inline-flex;align-items:center;gap:5px}
.etos__dot{width:11px;height:11px;border-radius:3px;display:inline-block}
.etos__empty{padding:10px 8px;color:var(--muted);font-size:13px}
.etos__hint{margin:2px 0 10px;padding:11px 14px;background:var(--accent-soft);border:1px dashed var(--accent-text);border-radius:10px;color:var(--txt);font-size:13px;line-height:1.5}   /* .577: zachęta do wpisania dat etapów zamiast mylącego pustego wykresu */
/* .580: karta Plan — przełącznik Harmonogram/Zarządzaj + kolory etapów */
.planvtog{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:14px}
.planvtog__b{border:none;background:var(--panel);padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.planvtog__b+.planvtog__b{border-left:1px solid var(--line)}
.planvtog__b.is-active{background:var(--accent-soft);color:var(--accent-text)}
.etap-dot{width:13px;height:13px;border-radius:50%;flex:none;display:inline-block}
.etap-dot--btn{border:2px solid var(--panel);box-shadow:none;cursor:pointer;padding:0}
.etap-dot--btn:hover{box-shadow:none}
.etap-lp{width:20px;text-align:center;color:var(--muted);font-size:12px;flex:none}
.etcpick{padding:12px}
.etcpick__hd{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:9px}
.etcpick__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.etcpick__sw{width:22px;height:22px;border-radius:6px;border:2px solid var(--panel);box-shadow:none;cursor:pointer;padding:0}
.etcpick__sw.is-on{box-shadow:none}
.etcpick__def{display:block;margin-top:11px;font-size:12px;color:var(--muted);background:none;border:none;cursor:pointer;padding:2px}
.etcpick__def:hover{color:var(--accent-text)}
.harmo-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;margin-bottom:8px;background:var(--soft);border:1px solid var(--line);border-radius:9px;font-size:13px}
.harmo-bulk [data-zbcount]{color:var(--muted);font-size:12px}
.reccard{max-width:680px}
/* pasek akcji edycji na karcie rekordu (Krok 1) */
.recacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;max-width:680px}
.recacts .recact{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.recacts select,.recacts input[type=date]{border:1px solid var(--field-line);border-radius:8px;padding:6px 9px;font:inherit;font-size:13px;background:var(--panel);color:var(--txt)}
.recacts select:focus,.recacts input:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.recact-msg{font-size:12px;font-weight:600;color:var(--ok)}
.reccard .dl__row{padding:9px 0}
.reccard .note__bd{font-size:14px}
/* Duże pole Opis na karcie rekordu (zadanie/pomysł/decyzja) — edycja inline */
.railsec--opis h3{color:var(--accent-text)}
.opisbox{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;line-height:1.55;color:#374151;border:1px solid var(--field-line);border-radius:10px;padding:11px 13px;resize:vertical;background:var(--panel)}
.opisbox:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.opisbar{display:flex;align-items:center;gap:10px;margin-top:9px}
.opisro{min-height:36px}
/* Karta rekordu: układ 2-kolumnowy (Szczegóły | Opis) + inline edycja pól przez rozwijaną listę */
.reccard--split{max-width:1320px;display:grid;grid-template-columns:1.7fr 1fr;gap:14px;align-items:start}
@media(max-width:900px){.reccard--split{grid-template-columns:1fr}}
.recmain{display:flex;flex-direction:column;gap:14px;min-width:0}
.recside{min-width:0;display:flex;flex-direction:column;gap:14px}
.recside .opisbox{min-height:260px}
/* redesign karty (2026-06-28): nagłówek z akcjami, Opis-hero, Status-akcent, edytowalny termin */
.recheadbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.recheadbar-r{display:flex;gap:8px;align-items:center}
.railsec:empty{display:none}
.railsec--opishero{border-color:var(--accent-text);background:var(--accent-soft)}
.railsec--opishero .opishero-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:9px}
.railsec--opishero h3{color:var(--accent-text);margin:0}
.opishero-sub{font-weight:500;text-transform:none;letter-spacing:0}
.opisbox--hero{min-height:150px;background:var(--panel)}
/* KOMENTARZE wewnętrzne karty zadania (2026-07-08) — dodawanie + akcje edytuj/usuń */
.komadd{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.komadd .btn{align-self:flex-end}
.komta{width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;line-height:1.5;color:#374151;border:1px solid var(--field-line);border-radius:8px;padding:8px 10px;resize:vertical;background:var(--panel);min-height:44px}
.komta:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.komtresc{font-size:13px;line-height:1.5;color:var(--txt);margin-top:3px;white-space:pre-wrap;overflow-wrap:anywhere}
.komacts{display:flex;gap:12px;margin-top:6px}
.komacts .link{font-size:12px;cursor:pointer}
.railsec--status{border-color:var(--accent-text)}
.railsec--status h3{color:var(--accent-text)}
.railstatus{width:100%;box-sizing:border-box;font:inherit;font-size:14px;font-weight:600;border:1px solid var(--field-line);border-radius:8px;padding:8px 10px;background:var(--panel);color:var(--txt)}
.railstatus:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.statushint{margin-top:6px;font-size:11px}
.raildate{border:1px solid var(--field-line);border-radius:7px;padding:3px 7px;font:inherit;font-size:13px;background:var(--panel);color:var(--txt)}
.raildate:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
/* KLUCZOWE pola karty (Przypisanie) — wyróżnione, klikalne (user 2026-06-28: koniec „masy szarych pól") */
.railsec--key{border-color:var(--accent-text)}
.railsec--key h3{color:var(--accent-text)}
.keyfield{margin-bottom:10px}
.keyfield:last-child{margin-bottom:0}
.keyfield-lab{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.kf-need{color:var(--danger);font-weight:600}
.keyctl{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:var(--panel);font-size:14px;font-weight:600;color:var(--txt);cursor:pointer}
.keyctl:hover{border-color:var(--accent-text);background:var(--accent-soft)}
.keyctl .cpchev{color:var(--muted);font-style:normal;font-size:12px}
.keyctl--need{border-color:var(--danger);background:#fef2f2}
.keyctl--ro{cursor:default;font-weight:500}
.keyctl--ro:hover{border-color:var(--line);background:var(--panel)}
.keyctl-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comboopt small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:1px}
.combogrp{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:7px 10px 3px;border-top:1px solid var(--soft);margin-top:3px}
.comboopt--inactive{opacity:.62}
.comboopt--inactive:hover{opacity:1}
/* FAZA 2: panel Konwersacja (wątek Zoho na karcie) */
.konw-hd{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.konw-hd h3{margin:0}
/* .1240: akcje odpowiedzi przeniesione POD nagłówek wątku (były pod całą korespondencją — przy dłuższej
   historii trzeba było przewinąć wszystko, żeby zobaczyć, że da się odpowiedzieć). `flex-wrap` jest tu
   konieczny: cztery kontrolki obok tytułu nie mieszczą się na węższym ekranie i bez zawijania
   „Odśwież wątek" wypadłby poza kartę. */
.konw-akcje{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.konw-thread{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.konw-msg{border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.konw-msg--us{border-color:var(--accent-text);background:var(--accent-soft);margin-left:26px}
.konw-meta{font-size:12px;color:var(--muted);margin-bottom:3px}
/* .1146 (zgloszenie Lukasza Zarzyckiego): watek zwijany, najnowsze na gorze. Zwinieta pozycja to
   JEDEN wiersz - kto, kiedy i poczatek tresci - wiec cala korespondencja miesci sie na ekranie. */
.konw-meta[data-konwtog]{cursor:pointer;display:flex;align-items:baseline;gap:6px;margin-bottom:0;padding:3px 0;flex-wrap:wrap}
.konw-meta[data-konwtog]:hover{color:var(--txt)}
.konw-ch{color:var(--muted);flex:0 0 auto;width:11px;display:inline-block}
.konw-meta b{color:var(--txt);font-size:12.5px}
/* podglad tresci na zwinietej pozycji: zabiera reszte wiersza i URYWA sie wielokropkiem, nie zawija */
.konw-prev{flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic;opacity:.85}
.konw-msg.is-open .konw-prev{display:none}   /* rozwinieta pokazuje pelna tresc — podglad bylby powtorzeniem */
.konw-wrap{margin-top:6px}
.konw-wrap[hidden]{display:none}   /* ⚠️ bez tej linii `display` na dziecku bilby wbudowane [hidden] */
.konw-body{font-size:13px;line-height:1.5;color:var(--txt);word-break:break-word}
.konw-reply{border-top:1px solid var(--soft);padding-top:10px}
.cellpick{cursor:pointer;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--field-line);border-radius:7px;padding:2px 8px;background:var(--panel);font-weight:600;color:var(--txt)}
.cellpick:hover{border-color:var(--accent-text);background:var(--accent-soft)}
/* §8.5 (2.14): kontrolka w komorce nie wystaje poza nia, a jej etykieta skraca sie WIELOKROPKIEM.
   `text-overflow` z `.zadtbl--cfg td` nie siega tekstu w pojemniku `inline-flex` — stąd wlasny nosnik.
   Wielokropek nic nie kosztuje i mowi „tu jest wiecej”; twarde ciecie wyglada jak zepsute dane. */
.cellpick{max-width:100%;min-width:0}
.cellpick__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cellpick .cpchev{flex:none}
/* Chip taga w komorce tabeli — to samo: pol chipa bez wielokropka wyglada jak blad renderowania. */
.zadtbl--cfg td .mailtag{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpchev{color:var(--muted);font-size:11px}
.combopop{position:absolute;z-index:1000;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:none;padding:7px;max-width:460px}
.comboinp{width:100%;box-sizing:border-box;border:1px solid var(--field-line);border-radius:7px;padding:7px 10px;font:inherit;font-size:13px;outline:none;margin-bottom:6px}
.comboinp:focus{border-color:var(--accent-text)}
.combolist{max-height:260px;overflow-y:auto}
.comboopt{padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13px;display:flex;flex-direction:column;align-items:stretch;gap:1px;line-height:1.3}
.comboopt:hover{background:var(--accent-soft)}
.comboopt.is-cur{background:var(--soft);font-weight:700}
.comboopt small{display:block;color:var(--muted);margin-left:0;font-size:11px;margin-top:1px}
/* 🏢 „rozlicza sie jako X" w wybieraku klienta — wlasny znacznik, zeby nazwa firmy zostala czytelna
   (zgloszenie Pawla 2026-09-14). Kolor akcentu, nie czerwien: to informacja, nie ostrzezenie. */
.comboopt__pod{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--accent-soft);color:var(--accent-hover);white-space:nowrap}
.comboopt__bill{align-self:flex-start;display:inline-block;font-weight:700;font-size:11px;color:var(--accent-text);background:var(--accent-soft);border:1px solid var(--accent-text);border-radius:6px;padding:0 7px;margin-top:2px;line-height:1.55}
.comboopt--add{color:var(--accent-text);font-weight:700;border-top:1px solid var(--soft);margin-top:3px}
.comboopt--add:hover{background:var(--accent-soft)}
.comboempty{padding:9px;color:var(--muted);font-size:13px;text-align:center}
.convbar{background:var(--accent-soft);border:1px solid var(--accent-text);color:var(--accent-text);border-radius:10px;padding:10px 14px;margin:0 0 16px;font-size:13px;font-weight:600;max-width:680px}
/* Lista zadań — tabela + szybkie akcje inline */
.zadseg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:14px}
.zadseg__b{border:none;background:var(--panel);padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.zadseg__b+.zadseg__b{border-left:1px solid var(--line)}
/* KLODKA PRZY CUDZYM ZADANIU (ADR-0051) — wiersz zespolu, ktorego nie da sie otworzyc bez zgody.
   Wyglada jak PRZYCISK, nie jak ikonka ostrzegawcza: to jest DROGA DALEJ (zloz wniosek), a nie
   komunikat „nie wolno". Roznica jest istotna — ekran bez wyjscia to osobna klasa usterki (.1082). */
.zadklodka{border:1px solid var(--field-line);background:var(--soft);color:var(--muted);border-radius:999px;
           padding:1px 9px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;margin-left:6px}
.zadklodka:hover:not(:disabled){background:var(--panel);color:var(--accent-text);border-color:var(--accent-text)}
.zadklodka:disabled{opacity:.7;cursor:default}
.zadseg__b.is-active{background:var(--accent-soft);color:var(--accent-text)}
.zadgrp{margin-bottom:20px}
.zadgrp__h{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin:0 0 9px}
.zadgrp__h--prop{color:var(--accent-text)}
.zadgrp__h small{font-weight:400;text-transform:none;letter-spacing:0}
.zadtbl{width:100%;border-collapse:collapse;font-size:13px}
.zadtbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:7px 9px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
.zadtbl td{padding:7px 9px;border-bottom:1px solid var(--soft);vertical-align:middle}
.zadtbl tbody tr:hover td{background:var(--accent-soft)}
/* CYTAT W ODPOWIEDZI = WLASNY BLOK (2026-09-21, zgloszenie Stefana). Nie jest to ozdoba: blok
   oddziela historie od tego, co piszesz, wiec Enter dzieli TYLKO maly akapit nad nim, a nie caly
   watek. Przy zgloszeniu Zoho 2358 (285 KB cytatu) plaski ciag zawieszal przegladarke na dobre. */
/* PUNKT Z JEDNYM ZADANIEM = JEDEN CIENKI WIERSZ (zgloszenie Pawla 2026-09-21: przeksztalcony element
   listy wisial dalej, a zadanie stalo pod nim osobnym blokiem i rozciagalo liste). Kolor jak w planie:
   zielony = zamkniete, zolty = w toku. Przy WIELU zadaniach wraca lista pod spodem, bo jeden wiersz
   nie pomiescilby trzech zadan bez sciskania tresci. */
.anzad__zad{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.anzad__zad:hover{color:var(--accent-text);text-decoration:underline}
.anzad__p--zielone{background:var(--ok-soft,#ecfdf5)}
.anzad__p--zolte{background:var(--warn-soft,#fffbeb)}
.anzad__form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:6px;padding:6px 0 8px 26px}
.anzad__form .nfinput{max-width:220px}
.mailcyt{border-left:2px solid var(--line);padding-left:10px;margin:8px 0 0;color:var(--muted);max-height:280px;overflow:auto;font-size:13px}
.cmcyt__t{margin-top:10px;color:var(--muted)}
.cmcyt__t.is-on{color:var(--txt)}
.listdate{border:1px solid var(--field-line);border-radius:7px;padding:4px 7px;font:inherit;font-size:12px;background:var(--panel);color:var(--txt)}
.listdate:focus{outline:none;border-color:var(--accent-text)}
.listdate.overdue,.zadtbl span.overdue{color:var(--danger);font-weight:700}
.cellpick--sm{padding:2px 7px;font-size:12px}
.zadacts{white-space:nowrap;text-align:right}
.zbtn{border:1px solid var(--field-line);background:var(--panel);border-radius:7px;min-width:28px;height:28px;cursor:pointer;font-size:13px;margin-left:3px;line-height:1;padding:0 5px}
.zbtn:hover{background:var(--soft)}
.zbtn--ok:hover{background:var(--ok);color:var(--on-accent);border-color:var(--ok)}
.zbtn--no:hover{background:var(--danger);color:var(--on-accent);border-color:var(--danger)}
/* Konfigurowalna tabela: pasek + wybór kolumn (popover) + przeciąganie szerokości */
.zadbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.zadbar .zadseg{margin-bottom:0}
.zadbulk{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;padding-left:10px;margin-left:2px;border-left:1px solid var(--line)}
.zadbulk b{color:var(--accent-text)}
/* Etap 5 (ADR-0011): widok TABLICA (Kanban) zadan — kolumny=status, przeciaganie karty = zmiana statusu */
.zadvtog{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.zadvtog__b{border:none;background:var(--panel);padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.zadvtog__b+.zadvtog__b{border-left:1px solid var(--line)}
.zadvtog__b.is-active{background:var(--accent-soft);color:var(--accent-text)}
.kancols{padding:8px 6px;max-height:340px;overflow:auto}   /* .578: popup wyboru widocznych kolumn tablicy */
.kancols__hd{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding:2px 6px 8px}
.kancols__list{display:flex;flex-direction:column;gap:1px}
.kancols__it{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;font-size:13px;cursor:pointer}
.kancols__it:hover{background:var(--soft)}
.kancols__it input{flex:none}
.zadkanban{display:flex;gap:14px;align-items:stretch;overflow-x:auto;padding-bottom:8px}   /* .1491: KOLUMNY RÓWNEJ WYSOKOŚCI (było flex-start): przyklejony nagłówek trzyma się tylko w obrębie WŁASNEJ kolumny, więc niska (pusta) kolumna wyjeżdżała za ekran razem z nagłówkiem — po .1490 Paweł widział samą kolumnę „Otwarte" */
.zadkcol{flex:1 1 0;min-width:250px;background:var(--soft-2);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column}   /* 2026-09-29: kolumna w pionie, żeby strefa upuszczania (.zadkcol__body) sięgała do dołu toru */
.zadkcol__h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin:2px 4px 10px}
/* .1490 (Paweł): NAGŁÓWKI KOLUMN TABLICY PRZYKLEJONE do góry przy przewijaniu — „schodzimy na dół i nie widać".
   Nagłówek dostaje tło kolumny i wychodzi na jej krawędzie (ujemne marginesy = padding .zadkcol), żeby karty chowały
   się pod niego. W WIDOKACH-LISTACH sama tablica nie przewija (overflow:visible — jak tabela w .1486): przewija host
   listy w obu osiach, więc nagłówek trzyma się góry hosta. NA KARTACH (klient/projekt/lead) przewija cała strona,
   więc tablica i tabela dostają WŁASNĄ wysokość i własne przewijanie — nagłówek ma się czego trzymać. */
.zadkcol__h{position:sticky;top:0;z-index:2;background:var(--soft-2);margin:-10px -10px 8px;padding:12px 14px 8px;border-radius:12px 12px 0 0}
.view--list.is-active .zadkanban{overflow:visible}
#vRecord .zadkanban,#vKontrahent .zadkanban{max-height:calc(100vh - 150px);overflow:auto}
#vRecord .zadtblwrap,#vKontrahent .zadtblwrap{max-height:calc(100vh - 150px);overflow:auto}
#vRecord .zadtblwrap thead th,#vKontrahent .zadtblwrap thead th{position:sticky;top:0;z-index:2}   /* na kartach reguła z widoków-list nie sięga — nagłówek tabeli klei się do ramki, która tu przewija */
.zadkcol__n{margin-left:auto;background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600}
.zadkcol__body{display:flex;flex-direction:column;gap:8px;min-height:56px;flex:1 1 auto}   /* Paweł 2026-09-29: karta „wskakiwała” tylko przy górze toru — strefa upuszczania miała wysokość kart (pusta: 56 px), a szary tor ciągnął się do wysokości najdłuższego; teraz cały tor przyjmuje kartę (wszystkie tablice) */
.zadkcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 11px;cursor:pointer;box-shadow:none;transition:box-shadow .12s,border-color .12s}
.zadkcard.can-move{cursor:grab}
.zadkcard.can-move:active{cursor:grabbing}
.zadkcard:hover{box-shadow:none;border-color:var(--accent-soft)}
.zadkcard__t{font-weight:600;font-size:13px;line-height:1.3;margin-bottom:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.zadkcard__m{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted);margin-bottom:6px}
/* .1840 (zgloszenie Stefana): wpis w kalendarzu na karcie tablicy — najblizszy termin albo jasne „brak wpisow" */
.zadkcard__kal{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:1px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);white-space:nowrap}
.zadkcard__kal.is-minal{background:var(--soft);color:var(--muted)}
.zadkcard__kal.is-brak{background:transparent;color:var(--muted);opacity:.75;border:1px dashed var(--line)}
.zadkcard__term.is-over{color:var(--danger);font-weight:600}
.zadkcard__f{display:flex;align-items:center;gap:8px;justify-content:space-between;font-size:12px;color:var(--muted);flex-wrap:wrap}
/* .596 (feedback Pawła): wskazniki POWIAZAN na kartach Kanbana — wyrazne, wypelnione pigulki zamiast slabych emoji/tekstu; spojnie zadanie<->plik na WSZYSTKICH powierzchniach */
.zadkcard__flags{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.relchip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.zadkcard__plik,.relchip--plik{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.42);color:#1d4ed8}   /* zadanie -> podpiete pliki (paperclip) */
/* ZNACZNIK „KLIENT ODPISAL" (.1130) — ten sam kafelek na Kanbanie i w kolumnie Nazwa kazdej listy zadan.
   Swieza odpowiedz (dzis) mocniejsza: ma sie RZUCAC W OCZY posrod kilkudziesieciu kart. */
.zadwiad{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap;background:rgba(217,119,6,.12);border:1px solid rgba(217,119,6,.4);color:#b45309}
.zadwiad.is-swieze{background:rgba(220,38,38,.13);border-color:rgba(220,38,38,.45);color:#b91c1c}
.relchip--zad{background:var(--accent-soft);border-color:var(--accent-ring);color:var(--accent-hover)}   /* plik -> powiazane zadania (link) */
.relchip--flag{background:var(--accent-soft);border-color:var(--line);color:var(--muted);font-weight:600}   /* wiedza / kluczowy zasob (status pliku) */
.zadk-ghost{opacity:.4}
.zadk-chosen{box-shadow:none}
.zadk-note{margin-top:10px;font-size:12px;color:var(--muted)}
/* 2.10 szukanie na tablicy (K-Tablica-Szukaj): opis pustej kolumny + podświetlenie wpisanego słowa */
.zadkcol__pusto{font-size:13px;color:var(--muted);padding:6px 4px 8px}
mark.kbmark{background:#fff3b0;color:inherit;padding:0 1px;border-radius:3px}
.filtpresets{display:flex;gap:4px;flex-wrap:wrap;padding:6px 8px}
.zadcolsbtn{margin-left:auto}
.zadtbl--cfg{table-layout:fixed}
.zadtbl--cfg th{position:relative;overflow:hidden}
.zadtbl--cfg td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ===== E1 rozliczeń: rozszerzenia OPT-IN wspólnej tabeli (grupowanie / stopka sum / kolumny liczbowe / numer wiersza / edycja liczby).
   Klasy, których pozostałe listy nie używają — zero wpływu na Zadania/Klientów/Leady/Pliki itd. ===== */
.zadtbl--cfg tr.cfg-grp td{background:var(--accent-soft);color:var(--accent-hover);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;cursor:pointer;overflow:visible;white-space:nowrap;user-select:none}   /* overflow:visible — inaczej reguła .zadtbl--cfg td ucina sumę grupy wielokropkiem */
.zadtbl--cfg tr.cfg-grp:hover td{filter:brightness(.97)}
.cfg-grp__tw{display:inline-block;width:15px;color:var(--muted)}
.cfg-grp__s{float:right;font-weight:800;text-transform:none;letter-spacing:0;color:var(--txt);font-variant-numeric:tabular-nums}
.zadtbl--cfg tfoot td{background:var(--soft);font-weight:700;border-top:2px solid var(--line);position:sticky;bottom:0;overflow:visible}
.zadtbl--cfg th.thnum,.zadtbl--cfg td.tdnum{text-align:right;font-variant-numeric:tabular-nums}
/* DESIGN 2.11 §8.5: w drugiej linii komorki „Projekt” numer NIE SKRACA SIĘ nigdy (to tożsamość rekordu),
   a odnośnik do karty zostaje w całości. Skraca się nazwa klienta — jedyna rzecz, którą da się rozpoznać po połowie. */
.prjcell{display:flex;align-items:baseline;gap:6px;min-width:0}
.prjcell__id{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.prjcell__kli{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prjcell__go{flex:0 0 auto;white-space:nowrap;margin-left:auto}
.prjcell__kli::before{content:"·";margin-right:6px;color:var(--muted-2)}
.tdnum .numneg,.numneg{color:#dc2626;font-weight:700}
.zadtbl--cfg th.thno,.zadtbl--cfg td.tdno{text-align:right;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;padding-right:6px}
.listnum{border:1px solid var(--field-line);border-radius:9px;padding:5px 9px;font:inherit;font-size:12px;width:100%;box-sizing:border-box;
  text-align:right;font-variant-numeric:tabular-nums;background:var(--panel);color:var(--txt)}
.listnum:focus{outline:none;border-color:var(--accent-text)}
.listnum::-webkit-outer-spin-button,.listnum::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.listnum.is-reczne{border-color:var(--accent-text);background:var(--accent-soft);font-weight:700}   /* ADR-0023: godziny wpisane RECZNIE (zastepuja sume z kart pracy) */
.erpt{display:inline-block;min-width:34px;text-align:center;padding:2px 7px;border-radius:6px;font-size:10.5px;font-weight:800;letter-spacing:.03em}
.erpt--env{background:#e0f2fe;color:#0369a1}.erpt--opt{background:#fef3c7;color:#92400e}.erpt--xl{background:var(--accent-soft);color:var(--accent-hover)}
.vpill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.vpill--bazowa{background:var(--soft);color:var(--muted)}.vpill--brazowa{background:#fdf0e3;color:#b45309}
.vpill--srebrna{background:#eef2f6;color:#475569}.vpill--zlota{background:#fef9c3;color:#a16207}
/* KARTA UMOWY: karty pracy WYBRANEGO miesiaca (jedna zasada: selektor okresu = te karty, ktore widzisz).
   Lista na komponencie osi aktywnosci (.aktlist/.akt__i) — ten sam wyglad co zakladka Aktywnosc. */
.umnagl{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:8px;background:var(--accent-soft);
  border-radius:10px;font-size:13px;color:var(--accent-hover)}
.umnagl>b{font-size:14px}
.umnagl .btn{margin-left:auto}
.umnagl .muted2{font-variant-numeric:tabular-nums}
/* kropka rodzaju pracy przy wierszu (kolumna 9px siatki .akt__i) */
.akt__d{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.akt__d--wyjazdowe{background:#f59e0b}
.akt__d--zdalne{background:var(--accent)}
/* KARTY PRACY: wlasna siatka wiersza — data i godziny w STALYCH kolumnach (dotad data lamala sie na dwie linie
   przy dlugim opisie) + lista PRZEWIJALNA (przy 50 wpisach karta nie moze rosnac w nieskonczonosc). */
/* ⚠️ ZERO WLASNEGO OKIENKA (zgloszenie Pawla 2026-09-14: „dalej nie widze suwaka..."). Lista miala
   max-height + wlasne przewijanie, wiec ostatnia pozycja byla przycieta krawedzia, a suwak Windows
   chowa, dopoki sie nie przewija — czlowiek widzial „cos uciętego" i nie wiedzial, czy to usterka.
   Lista pokazuje teraz WSZYSTKIE pozycje miesiaca; przewija sie cala strona, jak wszedzie indziej. */
.umkarty{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.umkarty{scrollbar-width:thin;scrollbar-color:var(--accent) var(--soft-2)}
.umkarty::-webkit-scrollbar{width:11px}
.umkarty::-webkit-scrollbar-track{background:var(--soft-2)}
.umkarty::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.umkarty .akt__i{grid-template-columns:30px 9px 1fr 104px 92px 74px}
.umkarty .akt__i--nieplatna{background:var(--soft-2)}
.akt__rodz{justify-self:start;font-size:11.5px;white-space:nowrap}
.akt__pusty{padding:12px 14px;color:var(--muted);font-size:12.5px;font-style:italic;border-bottom:1px solid var(--line)}
.akt__godzin{max-width:70px;padding:3px 6px}
.umrodzbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.umrodzbar .zadseg__b{font-size:12px;padding:4px 10px}
.akt__d--wewnetrzne{background:#94a3b8}
.akt__d--projektowe{background:#10b981}
.akt__data{color:var(--muted);font-size:11.5px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.akt__godz{font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kchip[data-rejf]{cursor:pointer}
.kchip.is-on{background:var(--accent);color:var(--on-accent);font-weight:700}
.mcard__m .budzc{min-width:120px}   /* pasek godzin czytelny także w karcie mobilnej */
.colrz{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;user-select:none}
.colrz:hover{background:var(--accent)}
.colchooser{padding:9px;min-width:180px}
.colchooser__h{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin-bottom:7px}
.colchooser__row{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:13px;cursor:pointer;border-radius:6px}
.colchooser__row:hover{background:var(--soft)}
/* .716: KOLEJNOSC kolumn — strzalki przy kazdej pozycji (zamiast przeciagania: dziala tak samo mysza i palcem) */
/* .724: WYLACZONY przycisk ma WYGLADAC na wylaczony — inaczej user klika w martwy element i nie wie, czemu nic sie nie dzieje.
   (Powod zawsze obok, w tooltipie albo w pasku wyjasniajacym — lekcja .649: zaden przycisk nie moze byc disabled bez widocznego powodu.) */
.btn:disabled,.btn[disabled]{background:var(--soft);color:var(--muted-2);border-color:transparent;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover,.btn[disabled]:hover{transform:none}
/* .721: pasek „co dalej" po zaznaczeniu wierszy ptaszkiem — nastepny krok ma byc widoczny, a nie do odgadniecia */
.rejsel{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px;padding:9px 14px;font-size:13px;
  background:var(--accent-soft);border:1px solid var(--accent-ring);border-radius:12px}
.colchooser{min-width:250px;max-width:min(320px,92vw)}
/* Strzalki MUSZA byc zawsze widoczne — dluga nazwa kolumny („Dodatkowy pakiet") ma sie przyciac, nie wypchnac ich poza okno */
.colchooser__row>label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colmv{display:flex;gap:2px;flex:0 0 auto}
.colmv__b{border:1px solid var(--field-line);background:var(--panel);color:var(--txt);border-radius:6px;width:22px;height:22px;line-height:1;font-size:10px;cursor:pointer;padding:0}
.colmv__b:hover:not(:disabled){background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.colmv__b:disabled{opacity:.28;cursor:default}
.colchooser__hint{font-size:11px;color:var(--muted);margin:6px 2px 0}
/* .716: PILOT poziomego przewijania — ten sam pasek co pod tabela, ale przyklejony do dolu ekranu.
   Bez niego przy dlugiej liscie trzeba bylo przewinac WSZYSTKIE wiersze, zeby siegnac paska (zgloszenie Pawla). */
.tblsx{position:relative}
/* DESIGN 2.10 §8.10 pkt 17: przy prawej krawedzi kolumna urywala sie w polowie slowa i nic nie mowilo,
   ze tabela ma ciag dalszy. Wygaszenie 40 px w kolor tla — ten sam jezyk, co przy pasku zakladek (§4.5).
   Klasa `is-wiecej` zapala sie z JS tylko wtedy, gdy naprawde jest co przewijac w bok. */
.tblsx.is-wiecej::after{content:"";position:absolute;top:0;right:0;bottom:15px;width:40px;pointer-events:none;
  background:linear-gradient(to right, transparent, var(--bg));border-radius:0 var(--radius-lg) var(--radius-lg) 0;z-index:5}
.tblsx__end{display:block;height:1px}
.tblsx__bar{position:sticky;bottom:0;z-index:6;overflow-x:auto;overflow-y:hidden;height:15px;margin-top:-15px;
  background:var(--panel);border-radius:0 0 14px 14px}
.tblsx__bar>i{display:block;height:1px}
.tblsx__bar{scrollbar-width:auto;scrollbar-color:var(--accent) var(--soft-2)}
.tblsx__bar::-webkit-scrollbar{height:13px}
.tblsx__bar::-webkit-scrollbar-track{background:var(--soft-2)}
.tblsx__bar::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.tblsx__bar::-webkit-scrollbar-thumb:hover{background:var(--accent-hover);background-clip:padding-box}
/* ===== Nowoczesny wygląd tabel list (zadania → wzorzec dla reszty) ===== */
.zadtblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);background:var(--panel)}
/* WIDOCZNY pasek przewijania w poziomie — Chrome domyślnie chowa nakładkowy scrollbar i user nie wie,
   że po prawej są jeszcze kolumny (zgłoszenie Pawła). Ten sam wygląd dla list CFG i tabel kart. */
.zadtblwrap{scrollbar-width:auto;scrollbar-color:var(--accent) var(--soft-2)}
.zadtblwrap::-webkit-scrollbar{height:12px}
.zadtblwrap::-webkit-scrollbar-track{background:var(--soft-2);border-radius:0 0 14px 14px}
.zadtblwrap::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.zadtblwrap::-webkit-scrollbar-thumb:hover{background:var(--accent-hover);background-clip:padding-box}
.zadgrp__h{font-size:12px;padding:2px 2px 9px}
.zadtbl{font-size:13.5px}
.zadtbl th{padding:0 14px;height:38px;font-size:11px;color:var(--muted);background:var(--soft);border-bottom:1px solid var(--line);font-weight:700;letter-spacing:.05em}   /* DESIGN §8.5: naglowek NEUTRALNY — akcent zostaje dla odnosnikow, podswietlenia wiersza i jednej akcji glownej */
/* UCHWYT ROZSUWANIA KOLUMN — dotąd niewidoczny do czasu najechania (nikt nie wiedział, że kolumny da się rozsuwać).
   Teraz stała, delikatna kreska na nagłówku + wyraźne podświetlenie pod kursorem. */
.zadtbl--cfg th .colrz{width:9px}
.zadtbl--cfg th .colrz::after{content:"";position:absolute;top:22%;right:3px;width:2px;height:56%;background:var(--line-strong);border-radius:2px}
.zadtbl--cfg th .colrz:hover{background:var(--accent-soft)}
.zadtbl--cfg th .colrz:hover::after{background:var(--accent);width:3px}
/* ===== Lejek-filtr + sort w nagłówku (BRAMA TABEL — jeden silnik, 7 list) ===== */
.zadtbl--cfg th{padding-left:11px;padding-right:11px}
.thlab{vertical-align:middle}
/* DESIGN 2.9 §8.5: w SPOCZYNKU widac sama etykiete. Ikony wychodza na najechaniu (miejsce na nie jest
   zarezerwowane zawsze — przezroczystosc, nie `display`, zeby etykieta nie skakala) i zostaja na stale
   TYLKO tam, gdzie sortowanie albo filtr sa zalozone. Kolor: `--muted` na neutralnym naglowku — bialy
   `--on-accent` byl z czasow naglowka wypelnionego akcentem i po jego zneutralizowaniu ZNIKAL w tle. */
.thsort,.thfilt{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:7px;color:var(--muted);opacity:0;vertical-align:middle;line-height:1;border-radius:6px;transition:opacity .12s,background .12s}
.thsort{font-size:12px;width:17px;height:18px}
.thfilt{width:20px;height:18px}
.zadtbl th:hover .thsort,.zadtbl th:hover .thfilt,.zadtbl th:focus-within .thsort,.zadtbl th:focus-within .thfilt{opacity:.75}
.thsort:hover,.thfilt:hover{opacity:1;background:var(--soft-2)}
.thsort.is-on,.thfilt.is-on{opacity:1;color:var(--accent-text)}
.thsort.is-on:hover,.thfilt.is-on:hover{background:var(--accent-ring)}
.thsort__i{display:inline-flex}
.thsort__i.is-desc{transform:rotate(180deg)}
.thsort svg,.thsort__i svg{display:block;width:13px;height:13px}
.thfilt svg{display:block;width:13px;height:13px}
/* lejek-popup (enum/text/num) */
.filtpop{min-width:218px;max-width:300px;padding:10px}
.filtpop__h{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin-bottom:8px}
.filtvals{max-height:240px;overflow:auto;margin:4px 0}
.filtval{display:flex;align-items:center;gap:8px;padding:5px 5px;font-size:13px;cursor:pointer;border-radius:6px}
.filtval:hover{background:var(--soft)}
.filtnum{display:flex;gap:9px}
.filtnum label{display:flex;flex-direction:column;gap:3px;flex:1;font-size:12px;color:var(--muted)}
.filttext{display:flex;flex-direction:column;gap:7px}
.filtrad{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.filtpop input[type=text],.filtpop input[type=number]{width:100%;box-sizing:border-box;border:1px solid var(--field-line);border-radius:7px;padding:6px 9px;font:inherit;font-size:13px;color:var(--txt)}
.filtpop input:focus{outline:none;border-color:var(--accent-text)}
.filtpop__b{display:flex;gap:7px;margin-top:9px}
.filtpop__b .btn{flex:1}
.fbtn-go{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.fbtn-go:hover{filter:brightness(1.06)}
/* Pod-tabele KART (lead/projekt/klient) — ujednolicone do stylu głównych list (fioletowy nagłówek) + wiersz filtrów */
.zadtbl--card thead tr:first-child th{cursor:pointer}
.zadtbl--card .sarr{color:var(--on-accent);font-size:10px;margin-left:3px}
.zadtbl--card thead .filtrow th{background:var(--soft);padding:6px 9px;border-bottom:1px solid var(--line);text-transform:none;letter-spacing:0}
.zadtbl--card .filtrow input,.zadtbl--card .filtrow select{width:100%;box-sizing:border-box;border:1px solid var(--field-line);border-radius:7px;padding:4px 7px;font:inherit;font-size:12px;color:var(--txt);background:var(--panel);font-weight:400}
.zadtbl--card .filtrow input:focus,.zadtbl--card .filtrow select:focus{outline:none;border-color:var(--accent-text)}
/* Formularz DODAWANIA (modal) — „+ Dodaj" na listach; pola = kolumny tabeli */
.modalov{position:fixed;inset:0;background:rgba(23,33,28,.45);z-index:950;display:flex;align-items:flex-start;justify-content:center;padding:60px 20px;overflow:auto}
.modalbox{background:var(--panel);border-radius:16px;box-shadow:var(--sh-modal);width:min(460px,100%);max-height:86vh;overflow:auto}
/* Paweł 2026-09-24: „formatka straciła boczny pasek przewijania — jak dostać się na dół?” [ZMIERZONE na PROD] pasek BYŁ (10 px, jasnoszary przy samej krawędzi ekranu) — nie było go widać. Okna przewijają się nakładką (.acmodal, .modalov) albo samym oknem (.modalbox): wszystkim trzem ten sam gruby, zielony pasek co asystent (.assist__body, 2026-09-23 „prawie go nie widać”). */
.acmodal,.modalov,.modalbox,.acmodal__card{scrollbar-width:auto;scrollbar-color:var(--accent) var(--soft-2)}
/* Paweł 2026-09-24 (drugie zgłoszenie): pasek ma być NA FORMATCE, nie przy krawędzi ekranu — okno .acmodal (kalendarz i inne) przewija teraz SWOJE wnętrze: wysokość do ekranu, stopka z przyciskami (.acconfirm__bar, sticky) zostaje na dole formatki. */
.acmodal__card{max-height:calc(100vh - 96px);overflow-y:auto}
@media (max-height:820px){.acmodal__card{max-height:calc(100vh - 40px)}}
.calmodal .acmodal__card{max-height:calc(100vh - 48px)}
.acmodal::-webkit-scrollbar,.modalov::-webkit-scrollbar,.modalbox::-webkit-scrollbar{width:14px}
.acmodal::-webkit-scrollbar-track,.modalov::-webkit-scrollbar-track,.modalbox::-webkit-scrollbar-track{background:var(--soft-2);border-radius:8px}
.acmodal::-webkit-scrollbar-thumb,.modalov::-webkit-scrollbar-thumb,.modalbox::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.modalbox__h{font-size:17px;font-weight:700;padding:18px 22px;border-bottom:1px solid var(--line)}
.modalbox__f{display:flex;justify-content:flex-end;gap:10px;padding:15px 22px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--panel)}
.addform__b{padding:16px 22px;display:flex;flex-direction:column;gap:13px}
/* FORMATKA SZERZEJ, NIE DLUZEJ (Pawel 2026-08-18: "troche za bardzo sie wydluzyla — nie mozesz
   bardziej po szerokosci?"). Wspolny modal dodawania: krotkie pola w DWOCH kolumnach, pelna
   szerokosc tylko dla pierwszego pola (nazwa), opisow (textarea), ptaszkow i pol z podpowiedziami.
   :has() — Chrome 105+; starsze przegladarki zostana przy jednej kolumnie (grid sie nie wlaczy tam,
   gdzie selektor nieznany? nie — grid wlaczy sie zawsze, wiec span-reguly MUSZA byc wspierane;
   panel wymaga nowoczesnego Chrome, co juz zalozylismy przy min() w .1059). */
.modalbox.addform{width:min(660px,94vw)}
.modalbox.addform .addform__b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:11px 14px;align-items:start}   /* .1111: `minmax(0,1fr)` zamiast `1fr` — kolumna `1fr` NIE MOZE zejsc ponizej najszerszego pola, wiec na waskim ekranie formularz rozpychal okno i wracal poziomy pasek przewijania (zmierzone: 375 px, 10 pol poza oknem) */
.modalbox.addform .addform__b>.addfld:first-child,
.modalbox.addform .addform__b>.addfld:has(textarea),
.modalbox.addform .addform__b>.addfld--cb,
.modalbox.addform .addform__b>.addfld:has(#zdDeskMail),
.modalbox.addform .addform__b>.addfld:has(.addcl){grid-column:1/-1}
.modalbox.addform .addform__b>.addform__b{grid-column:1/-1;display:grid;grid-template-columns:1fr;padding:0}
/* SCALANIE ZADAŃ — checkbox w wierszu, przycisk paska, okno wyboru głównego */
.zadselcb{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);vertical-align:middle}
.zadmergebtn:not(:disabled){border-color:var(--accent-text);color:var(--accent-text);font-weight:600}
.zadmergebtn:disabled{opacity:.5;cursor:not-allowed}
.mergebox__b{padding:16px 22px;display:flex;flex-direction:column;gap:12px}
.mergebox__b .muted2{font-size:12.5px;line-height:1.5;color:var(--muted)}
.mergelist{display:flex;flex-direction:column;gap:7px}
.mergeopt{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.mergeopt:hover{background:var(--accent-soft)}
.mergeopt input{accent-color:var(--accent);flex:none}
.mergeopt__id{font-weight:700;font-size:12.5px;color:var(--accent-text);flex:none}
.mergeopt__t{font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.addfld{display:flex;flex-direction:column;gap:5px}
.addfld[hidden]{display:none}   /* .901: pole zalezne (Etap projektu) chowamy atrybutem `hidden` — bez tej linii `display:flex` BIJE wbudowane [hidden]{display:none} (wyzsza specyficznosc) i pole zostawaloby widoczne. Ta sama pulapka co przy PRIV w .84x. */
/* .906 PODZIAL ZADANIA — jeden wiersz = jedno nowe zadanie: nazwa + wykonawca + kosz, opis pod spodem na calej szerokosci */
.splitrow{display:grid;grid-template-columns:1fr 200px 34px;grid-template-areas:"tyt wyk del" "op op op";gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--line)}
.splitrow:last-child{border-bottom:0;margin-bottom:0}
.splitrow>.splittyt{grid-area:tyt}.splitrow>.splitwyk{grid-area:wyk}.splitrow>.splitdel{grid-area:del}.splitrow>.splitop{grid-area:op}
.splitrow input,.splitrow select,.splitrow textarea{width:100%;box-sizing:border-box;border:1px solid var(--field-line);border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;color:var(--txt);background:var(--panel)}
.splitrow textarea{resize:vertical;min-height:38px;font-size:13px}
.splitrow input:focus,.splitrow select:focus,.splitrow textarea:focus{outline:none;border-color:var(--accent-text)}
@media(max-width:700px){.splitrow{grid-template-columns:1fr 34px;grid-template-areas:"tyt del" "wyk wyk" "op op"}}
.addfld>span{font-size:12px;font-weight:600;color:var(--muted)}
/* .1119: „Zlecił" przy zamykaniu zadania — wartość DO ODCZYTU, ale ma wyglądać jak pole formularza,
   inaczej ginie między polami do wpisywania (ta sama wysokość i wcięcie co input obok). */
.instr-yt{font-size:12px;opacity:.75}   /* .1121: znak, ze tytul prowadzi do filmu, nie do pobierania */
.zk-zlecil{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--soft);font-size:14px}
.addfld .req{color:var(--danger);font-style:normal}
.addfld .opt{font-weight:400;color:var(--muted-2);font-size:11px}
.addfld input,.addfld textarea,.addfld select,.addcl{width:100%;box-sizing:border-box;border:1px solid var(--field-line);border-radius:9px;padding:9px 11px;font:inherit;font-size:14px;color:var(--txt);background:var(--panel)}
.addfld input:focus,.addfld textarea:focus,.addfld select:focus{outline:none;border-color:var(--accent-text)}
.addfld textarea{resize:vertical;min-height:64px}
.addcl{text-align:left;cursor:pointer;color:var(--muted)}
.addcl.is-set{color:var(--txt);font-weight:600}
.addcl:hover{border-color:var(--accent-text)}
.addform__err{color:var(--danger);font-size:13px;padding:0 22px 6px;font-weight:600}
.zadtbl td{padding:10px 14px;border-bottom:1px solid var(--soft);color:var(--txt)}
.zadtbl tbody tr:last-child td{border-bottom:none}
.zadtbl tbody tr:hover td{background:var(--accent-soft)}
/* „W toku” w Obiegach (DESIGN §4.9, makieta K-Obieg-WToku): tło stanu sprawy — po terminie / blisko terminu (CFG[k].trCls) */
.zadtbl tbody tr.is-po td{background:var(--danger-soft)}
.zadtbl tbody tr.is-blisko td{background:var(--warn-soft)}
.mcard.is-po{background:var(--danger-soft)}
.mcard.is-blisko{background:var(--warn-soft)}
.zadtbl tbody tr.is-po:hover td,.zadtbl tbody tr.is-blisko:hover td{background:var(--accent-soft)}
.zadtbl .link{color:var(--accent-text);font-weight:600}
.zadtbl .badge,.zadtbl .prio{border-radius:999px;padding:3px 11px;font-size:11px;font-weight:700;letter-spacing:.2px}
.cellpick{border-color:transparent;background:transparent;padding:3px 8px;border-radius:8px;font-weight:600}
.cellpick:hover{border-color:var(--field-line);background:var(--panel);box-shadow:var(--shadow)}
.cellpick .cpchev{opacity:.35}
.cellpick:hover .cpchev{opacity:1;color:var(--accent-text)}
.zbtn{border-radius:9px;border-color:var(--soft);width:30px;height:30px}
.listdate{border-color:var(--field-line);border-radius:9px;padding:5px 9px}
/* tabela sortowalna/filtrowalna */
.dtbl{overflow-x:auto}
.dtbl table{min-width:640px}
.dtbl th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.dtbl th.sortable:hover{color:var(--txt)}
.dtbl .sarr{font-size:10px;color:var(--accent-text)}
.dtbl .filtrow th{padding:6px 8px;background:var(--panel);border-bottom:1px solid var(--line)}
.dtbl .filtrow input,.dtbl .filtrow select{width:100%;min-width:64px;border:1px solid var(--field-line);border-radius:6px;padding:4px 7px;font-size:12px;font-family:inherit;background:var(--panel);color:var(--txt)}
.dtbl .filtrow input:focus,.dtbl .filtrow select:focus{outline:none;border-color:var(--accent-text)}
.dtbl td{font-size:13px;vertical-align:top}

/* ===== ASYSTENT: układ 2-kolumnowy + przeglądarka skilli Hermesa ===== */
.asystent-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start;max-width:1240px;margin:0 auto}
.asystent-grid .assistant{max-width:none;margin:0;padding-top:18px}
.skills{position:sticky;top:0;display:flex;flex-direction:column;max-height:calc(100vh - 150px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.skills__head{display:flex;align-items:center;gap:8px;padding:13px 14px 8px}
.skills__title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px}
.skills__count{color:var(--muted);font-weight:600;font-size:13px}
.skills__refresh{margin-left:auto;font-size:16px;line-height:1}
.skills__refresh.is-spin{animation:skspin .8s linear infinite}
@keyframes skspin{to{transform:rotate(360deg)}}
.skills__meta{padding:0 14px 9px;font-size:11px;color:var(--muted)}
.skills__tools{display:flex;flex-direction:column;gap:8px;padding:0 14px 10px;border-bottom:1px solid var(--line)}
.skills__modes{display:flex;gap:4px;background:var(--soft);border-radius:9px;padding:3px}
.skmode{flex:1;border:none;background:transparent;border-radius:7px;padding:6px 4px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.skmode:hover{color:var(--txt)}
.skmode.is-active{background:var(--panel);color:var(--accent-text);box-shadow:var(--shadow)}
.skills__alwayson{font-size:11px;color:var(--muted);line-height:1.4}
.skills__alwayson:empty{display:none}
.skills__search{border:1px solid var(--field-line);border-radius:8px;padding:7px 10px;font-size:13px;font-family:inherit;background:var(--soft);color:var(--txt)}
.skills__search:focus{outline:none;border-color:var(--accent-text);background:var(--panel)}
.skills__body{flex:1;min-height:0;overflow-y:auto;padding:6px 8px}
.skgroup{border-bottom:1px solid var(--soft)}
.skgroup:last-child{border-bottom:none}
.skgroup__h{display:flex;align-items:center;gap:8px;padding:8px 6px;cursor:pointer;user-select:none;border-radius:8px}
.skgroup__h:hover{background:var(--soft)}
.skgroup__chev{color:var(--muted);font-size:11px;transition:transform .15s;width:10px;flex:none}
.skgroup.is-open .skgroup__chev{transform:rotate(90deg)}
.skgroup__cb{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex:none}
.skgroup__lab{font-weight:700;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skgroup__n{font-size:11px;color:var(--muted);background:var(--soft);border-radius:20px;padding:1px 8px;font-weight:700;flex:none}
.skgroup__items{display:none;padding:2px 0 8px 8px}
.skgroup.is-open .skgroup__items{display:block}
.skitem{display:flex;align-items:flex-start;gap:6px;padding:4px 6px 4px 8px;border-radius:8px}
.skitem:hover{background:var(--accent-soft)}
.skitem__pick{display:flex;align-items:flex-start;gap:8px;flex:1;min-width:0;cursor:pointer}
.skitem__cb{width:15px;height:15px;margin-top:2px;accent-color:var(--accent);cursor:pointer;flex:none}
.skstar{border:none;background:transparent;cursor:pointer;line-height:0;color:var(--muted);padding:2px;flex:none;align-self:center}
.skstar:hover{color:#f5a623}
.skstar.is-on{color:#f5a623}
.skitem__lock{font-size:10px}
.skitem__main{display:flex;flex-direction:column;gap:1px;min-width:0}
.skitem__name{font-size:13px;font-weight:600;color:var(--txt);word-break:break-word}
.skitem__desc{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.skills__foot{padding:9px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);background:var(--soft)}
.sksec{border-bottom:1px solid var(--line)}
.sksec:last-child{border-bottom:none}
.sksec__h{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer;user-select:none}
.sksec__h:hover{background:var(--soft)}
.sksec__lab{flex:1;font-size:13px;font-weight:700}
.sksec--domyslne .sksec__lab{color:#b8860b}
.sksec--domyslne.is-open{background:var(--warn-soft)}
.sksec__body{display:none;padding:0 4px 8px}
.sksec.is-open>.sksec__body{display:block}
.sksec.is-open>.sksec__h .skgroup__chev{transform:rotate(90deg)}
.sksec__empty{font-size:12px;color:var(--muted);padding:4px 12px 10px;line-height:1.45}
.sksec__list{padding:2px 0}
.skopt{border:none;background:transparent;cursor:pointer;line-height:0;padding:2px;flex:none;align-self:center;opacity:.4;filter:grayscale(1)}
.skopt:hover{opacity:1;filter:none}
.skopt.is-on{opacity:1;filter:none}
.skitem.is-dim{opacity:.6}
.skitem__plug{width:15px;text-align:center;flex:none;font-size:12px;opacity:.6;filter:grayscale(1)}
.sklink{color:var(--accent-text);cursor:pointer;font-weight:600}
.sklink:hover{text-decoration:underline}
.paneltabs{display:flex;gap:2px;padding:8px 8px 0;flex:none;border-bottom:1px solid var(--line)}
.ptabbtn{flex:1;border:none;background:transparent;padding:8px 4px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.ptabbtn:hover{color:var(--txt)}
.ptabbtn.is-active{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.paneltab{display:none;flex-direction:column;min-height:0;flex:1}
.paneltab.is-active{display:flex}
/* UMIEJĘTNOŚCI — karty (czysty widok użytkownika w Asystencie) */
.umhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 0;flex:none}
.umhead__title{font-weight:800;font-size:15px;letter-spacing:-.01em}
.umhead__hint{color:var(--muted);font-size:12px;line-height:1.5;padding:6px 14px 10px;flex:none}
.umscroll{flex:1;min-height:0;overflow-y:auto;padding:2px 12px 12px}
.umlist{display:flex;flex-direction:column;gap:10px}
.umcard{display:flex;gap:12px;align-items:flex-start;padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:none;cursor:pointer;transition:border-color var(--tr),box-shadow var(--tr),background var(--tr)}
.umcard:hover{border-color:var(--line-strong);box-shadow:none}
.umcard.is-on{border-color:var(--accent-text);background:var(--accent-soft);box-shadow:none}
.umcard__cb{margin:2px 0 0;width:17px;height:17px;accent-color:var(--accent);cursor:pointer;flex:none}
.umcard__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.umcard__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.umcard__name{font-weight:700;font-size:13.5px;color:var(--txt);line-height:1.3}
.umcard__tech{font-weight:500;font-size:11px;color:var(--muted)}
.umcard__badge{flex:none;font-size:10.5px;font-weight:700;color:var(--accent-text);background:#f3eefe;border:1px solid #e7dcff;padding:2px 9px;border-radius:999px;white-space:nowrap}
.umcard__desc{color:var(--muted);font-size:12px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.umfoot{margin-top:12px;font-size:12px;color:var(--txt);line-height:1.5;padding:10px 12px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm)}
.umfoot__infra{display:block;color:var(--muted);font-size:11px;margin-top:5px}
.umempty{color:var(--muted);font-size:12.5px;padding:16px 14px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);line-height:1.55;text-align:center}
/* Zaawansowane — zwijane zarządzanie (katalog skilli / narzędzia / crony) */
.adv{margin-top:18px;border-top:1px solid var(--line)}
.adv__head{display:flex;align-items:center;gap:7px;cursor:pointer;padding:11px 2px 4px;font-weight:700;font-size:12.5px;color:var(--muted);user-select:none}
.adv__head:hover{color:var(--txt)}
.adv__head .skgroup__chev{transition:transform var(--tr)}
.adv.is-open .adv__head .skgroup__chev{transform:rotate(90deg)}
.adv__body{display:none;padding-top:4px}
.adv.is-open .adv__body{display:block}
/* ASYSTENT v2 — dwie kolumny (lewa: wszystkie + kategorie, prawa: ulubione) */
.asys2{max-width:1240px;margin:0 auto}
.asys2__top{display:flex;flex-direction:column;gap:10px;margin-bottom:16px;padding:12px 15px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none}
.asys2__intro{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;line-height:1.5}
.asys2__mark{display:grid;place-items:center;width:26px;height:26px;flex:none;background:var(--accent);color:var(--on-accent);border-radius:9px;font-size:14px}
.suggest--inline{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:0}
.suggest--inline button{width:auto;text-align:left;border:1px solid var(--field-line);background:var(--panel);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--txt);cursor:pointer;transition:background var(--tr),border-color var(--tr)}
.suggest--inline button:hover{background:var(--accent-soft);border-color:var(--accent-text)}
.asys2__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:1100px){.asys2__cols{grid-template-columns:1fr}}
.catchips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 2px;flex:none;max-height:96px;overflow-y:auto}
.catchip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background var(--tr),color var(--tr),border-color var(--tr)}
.catchip:hover{background:var(--soft);color:var(--txt)}
.catchip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.catchip b{font-weight:800;opacity:.65;margin-left:3px}
.catchip.is-on b{opacity:.9}
.brow{display:flex;gap:6px;align-items:flex-start;padding:8px 9px;border:1px solid transparent;border-radius:var(--radius-sm);transition:background var(--tr),border-color var(--tr)}
.brow:hover{background:var(--soft)}
.brow.is-on{background:var(--accent-soft);border-color:var(--accent-text)}
.brow__star{flex:none;border:none;background:transparent;color:var(--warn);font-size:16px;line-height:1;cursor:pointer;padding:1px 3px;border-radius:6px}
.brow__star:not(.is-fav){color:var(--line-strong)}
.brow__star:hover{background:var(--panel);color:var(--warn)}
.brow__pick{flex:1;min-width:0;display:flex;gap:8px;align-items:flex-start;cursor:pointer}
.brow__cb{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none}
.brow__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.brow__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brow__name{font-weight:700;font-size:13px;color:var(--txt)}
.brow__desc{color:var(--muted);font-size:11.5px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.umcard__pick{flex:1;min-width:0;display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.umcard__star{flex:none;border:none;background:transparent;color:var(--warn);font-size:16px;line-height:1;cursor:pointer;padding:2px 4px;border-radius:6px}
.umcard__star:hover{background:var(--soft)}
/* === KARTA UMIEJĘTNOŚCI v3 — jedna, dopracowana (obie kolumny), pastelowa plakietka per kategoria === */
.umc{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;background:var(--panel);border:1px solid #ECEAF2;border-radius:16px;transition:border-color var(--tr),background var(--tr),box-shadow var(--tr)}
.umc:hover{border-color:#DAD3EF;box-shadow:none}
.umc.is-on{background:#F7F5FE;border-color:#E2DAFA}
.umc__cb{margin-top:2px;width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex:none}
.umc__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.umc__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.umc__name{font-weight:600;font-size:14px;color:var(--txt);line-height:1.3}
.umc__tech{font-weight:400;font-size:11.5px;color:#A6ABBA}
.umc__right{display:flex;align-items:center;gap:8px;flex:none}
/* DESIGN 2.8 §7: znak zamieniony na SVG ZMIENIA KATEGORIE w CSS — emoji skalowalo sie przez font-size
   i bralo kolor z tekstu, ikona bierze width/height i currentColor. Zostawiony font-size nic nie robi
   i myli nastepnego czytelnika, wiec schodzi razem ze znakiem. */
.umc__star{border:none;background:transparent;color:var(--muted);line-height:0;cursor:pointer;padding:1px 3px;border-radius:6px;transition:color var(--tr)}
.umc__star.is-fav{color:#F2B53C}
.umc__star:hover{color:#E0A52E}
.umc__badge{font-size:11px;font-weight:600;padding:3px 11px;border-radius:999px;white-space:nowrap}
.umc__desc{color:#6B7280;font-size:12.5px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#browseBody{display:flex;flex-direction:column;gap:10px;padding:8px 13px 14px}
.umlist{gap:10px}
.umscroll{padding:6px 13px 14px}
/* kategorie — spokojniejsze chipy */
.catchips{gap:7px;padding:13px 13px 5px;max-height:104px}
.catchip{border:1px solid #ECEAF2;background:var(--panel);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:600;color:#7A8194}
.catchip:hover{background:#F7F5FE;color:var(--panel);border-color:#E2DAFA}
.catchip.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.catchip b{font-weight:700;opacity:.6;margin-left:4px;font-size:11px}
.catchip.is-on b{opacity:.85}
/* nagłówki paneli + przycisk select-all — więcej oddechu */
.umhead{padding:14px 16px 2px}
.umhead__title{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.umhead__hint{padding:9px 16px 12px;font-size:11.5px;line-height:1.55}
.skills__tools{padding:6px 13px 10px}
#favAll{border:1px solid var(--field-line);background:var(--panel);color:var(--accent-text);font-size:12px;font-weight:600;padding:5px 12px;border-radius:9px}
#favAll:hover{background:#F7F5FE;border-color:#E2DAFA}
/* === v3.1 ODCHUDZENIE — dropdown kategorii zamiast ściany chipów + dużo powietrza === */
.asys2__cols{gap:24px}
.umc{padding:15px 18px;gap:14px;border-radius:15px}
.umlist{gap:12px}
#browseBody{gap:12px;padding:10px 15px 16px}
.umscroll{padding:8px 15px 16px}
.umhead{padding:16px 18px 2px}
.umhead__hint{padding:9px 18px 13px;color:#9097A6}
.browsebar{display:flex;gap:8px;padding:12px 15px 12px;flex:none}
.browsebar__search{flex:1;min-width:0;border:1px solid var(--field-line);border-radius:10px;padding:9px 13px;font-size:13px;background:var(--panel);color:var(--txt)}
.browsebar__search::placeholder{color:#9aa0ad}
.browsebar__search:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.browsebar__cat{flex:none;max-width:48%;border:1px solid var(--field-line);border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:500;background:var(--panel);color:var(--txt);cursor:pointer}
.browsebar__cat:focus{outline:none;border-color:var(--accent-text)}
.asys2__top{padding:13px 16px;gap:8px;margin-bottom:18px}
.asys2__intro{font-size:12px}
.suggest--inline button{font-size:12px;padding:6px 12px;font-weight:500}
/* === v4 TRZY STREFY — wąskie panele po bokach, PRZESTRONNY środek, mniejsze marginesy === */
.asys3{max-width:1640px;margin:0 auto}
.asys3__cols{display:grid;grid-template-columns:minmax(285px,330px) minmax(0,1fr) minmax(285px,330px);gap:30px;align-items:start}
@media(max-width:1280px){.asys3__cols{grid-template-columns:1fr}.asys3__cols .skills{position:static;max-height:600px}.assistant--center{order:-1}}
.assistant--center{align-self:start;padding:46px 28px 34px;text-align:center}
.assistant--center h2{font-size:25px;margin:18px 0 10px;letter-spacing:-.02em}
.assistant--center p{color:var(--muted);font-size:14px;line-height:1.65;max-width:520px;margin:0 auto}
.assistant--center .suggest{max-width:560px;margin:26px auto 0}
.assistant__note{color:var(--muted);font-size:12px;margin-top:20px}
/* boczne panele — wąskie, karty bardziej kwadratowe (opis 3 linie, paski przewijania robią resztę) */
.skills--side .browsebar{flex-direction:column;gap:8px}
.skills--side .browsebar__cat{max-width:none}
.skills--side .umc{padding:13px 15px;gap:11px}
.skills--side .umc__desc{-webkit-line-clamp:3}
.skills--side .umc__name{font-size:13.5px}
.skills--side .umhead{flex-wrap:wrap;gap:6px}
.skills--side #favAll{font-size:11.5px;padding:4px 10px}
/* === v5 — Ulubione LEWO / Wszystkie PRAWO; checkbox=preferencja (tylko w Ulubionych); WIĘKSZE gwiazdki === */
#agentPanel{order:1}
.assistant--center{order:2}
#browseCol{order:3}
@media(max-width:1280px){.assistant--center{order:-1}}
.umc__star{font-size:20px;padding:2px 5px}
.umc--nocb .umc__star{font-size:22px}
.umc__star:hover{transform:scale(1.12)}
/* Ulubione — bardziej widoczne: delikatne fioletowe tło (wyróżnione od „Wszystkie") */
#agentPanel{background:var(--accent-soft);border:1px solid var(--accent-ring);box-shadow:none}
#agentPanel .umhead__title{color:var(--accent-hover)}
#agentPanel .umc.is-on{border-color:var(--accent-text);box-shadow:none}
.tool{border-bottom:1px solid var(--soft)}
.tool:last-child{border-bottom:none}
.tool__h{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;user-select:none}
.tool__h:hover{background:var(--soft)}
.tool__lab{flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool.is-open>.tool__h .skgroup__chev{transform:rotate(90deg)}
.tool__body{display:none;padding:0 12px 10px 28px}
.tool.is-open>.tool__body{display:block}
.tool__desc{font-size:12px;color:var(--muted);margin-bottom:6px}
.tool__chips{display:flex;flex-wrap:wrap;gap:4px}
.tchip{font:11px ui-monospace,Consolas,monospace;background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--txt)}
.tool__none{font-size:11px;color:var(--muted)}
.tbadge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:1px 7px;border-radius:20px;background:var(--soft);color:var(--muted);flex:none}
.tbadge--on{background:#dcfce7;color:#15803d}
.tbadge--cfg{background:#fef3c7;color:#b45309}
/* Połączone aplikacje (Narzędzia) + katalog skilli */
.integr{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px;background:var(--panel)}
.integr__h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.integr__ico{font-size:16px;flex:none}
.integr__name{font-weight:700;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.integr__detail{font-size:12px;color:var(--muted);line-height:1.45}
.skcatsub{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin:10px 8px 4px}
.sksec__hint{font-weight:400;color:var(--muted);font-size:11px}
.cron{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px;background:var(--panel)}
.cron__top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cron__name{font-weight:700;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cron__sched{font:11px ui-monospace,Consolas,monospace;color:var(--accent-text);margin-bottom:4px}
.cron__prompt{font-size:12px;color:var(--muted);line-height:1.4;margin-bottom:8px}
.cron__run{font-size:11.5px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cron__err{font-size:11.5px;color:var(--danger);background:#fef2f2;border:1px solid #fecaca;border-radius:7px;padding:4px 8px;margin-bottom:6px;line-height:1.4;word-break:break-word}
.cron-st{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap}
.cron-st--ok{background:#dcfce7;color:#15803d}
.cron-st--err{background:#fee2e2;color:#b91c1c}
.cron-st--never{background:#f1f5f9;color:#64748b}
.cron--overdue{border-color:#fca5a5;box-shadow:none}
.cron__acts{display:flex;gap:6px;flex-wrap:wrap}
.cron__acts button{border:1px solid var(--field-line);background:var(--panel);border-radius:7px;padding:3px 10px;font-size:12px;font-weight:600;color:var(--accent-text);cursor:pointer}
.cron__acts button:hover{background:var(--accent-soft)}
.cron__acts .cron__del{color:var(--danger)}
.cron__acts .cron__del:hover{background:#fee2e2}
.cronadd{flex:none;border-top:1px solid var(--line);padding:10px 12px;background:var(--soft)}
.cronform{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cronf{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:var(--muted)}
.cronf input,.cronf textarea,.cronf select{border:1px solid var(--field-line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;font-weight:400;color:var(--txt);background:var(--panel)}
.cronf input:focus,.cronf textarea:focus,.cronf select:focus{outline:none;border-color:var(--accent-text)}
.cronquick{display:flex;gap:6px;flex-wrap:wrap;margin-top:-2px}
.cronquick button{border:1px dashed var(--field-line);background:var(--panel);border-radius:20px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--accent-text)}
.cronquick button:hover{background:var(--accent-soft);border-style:solid}
.cronform__bar{display:flex;align-items:center;gap:8px}
.cron__edit{margin-top:8px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--soft);display:flex;flex-direction:column;gap:7px}
.cronmsg{font-size:12px;font-weight:600}
/* Automatyzacje (crony) — karty w duchu kart pulpitu */
.acard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:12px;align-items:start}
.acard{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--panel);box-shadow:none}
.acard--off{opacity:.72;background:var(--soft)}
.acard--warn{border-color:#fecaca}
.acard__hd{display:flex;align-items:center;gap:11px}
.acard__ico{width:38px;height:38px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--accent-soft)}
.acard__ttl{flex:1;min-width:0}
.acard__name{font-weight:700;font-size:15px;color:var(--txt)}
.acard__when{font-size:12.5px;color:var(--accent-text);font-weight:600;margin-top:1px}
.acard__chip{flex:none;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.acard__chip.is-on{background:#ecfdf5;color:var(--ok)}
.acard__chip.is-off{background:#f1f5f9;color:var(--muted)}
.acard__desc{font-size:13px;line-height:1.5;color:var(--txt);margin-top:10px}
.acard__tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.acard__lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.acard__tool{font-size:11.5px;font-weight:600;color:var(--accent-text);background:var(--accent-soft);border-radius:7px;padding:2px 9px}
.acard__flow{font-size:12px;color:var(--muted);margin-top:7px}
.acard__flow b{color:var(--accent-text)}
.acard__meta{font-size:12px;color:var(--muted);margin-top:10px}
.acard__ok{color:var(--ok);font-weight:600}
.acard__bad{color:var(--danger);font-weight:600}
.acard__never{color:var(--muted)}
.acard__err{font-size:12px;color:var(--danger);background:#fef2f2;border-radius:8px;padding:5px 9px;margin-top:8px}
.acard__acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.acard__acts button{border:1px solid var(--field-line);background:var(--panel);border-radius:9px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--accent-text);cursor:pointer}
.acard__acts button:hover{background:var(--accent-soft)}
.acard__acts .acard__del{color:var(--danger);margin-left:auto}
.acard__acts .acard__del:hover{background:#fee2e2}
.acard__tech{margin-top:10px}
.acard__tech summary{font-size:11.5px;color:var(--muted);cursor:pointer;user-select:none}
.acard__techbody{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:6px;background:var(--soft);border-radius:8px;padding:8px 10px;white-space:pre-wrap;word-break:break-word}
.acard__techbody code{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:11px}
.ce__q{font-weight:700;font-size:12.5px}
.ce__modes{display:flex;gap:16px;flex-wrap:wrap;font-size:13px}
.ce__modes label{display:flex;align-items:center;gap:6px;cursor:pointer}
.ce__int,.ce__daily{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}
.ce__n,.ce__u,.ce__time,.ce__raw{border:1px solid var(--field-line);border-radius:8px;padding:6px 8px;font:inherit;font-size:13px;background:var(--panel)}
.ce__n{width:66px}
.ce__work{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px}
.ce__preview{font-size:12.5px;color:var(--muted)}
.ce__preview b{color:var(--accent-text)}
.ce__adv summary{font-size:11.5px;color:var(--muted);cursor:pointer}
.ce__adv .ce__raw{margin-top:6px;width:100%;font-family:ui-monospace,Consolas,monospace}
/* Konsola Hermesa */
.hk-ver{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:#ecfdf5;margin-bottom:6px}
.hk-ver--old{background:#fffbeb;border-color:#fde68a}
.hk-ver__col{min-width:90px}
.hk-ver__lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.hk-ver__big{font-size:22px;font-weight:800;color:var(--txt);font-family:ui-monospace,Consolas,monospace}
.hk-ver__arrow{font-size:20px;color:var(--muted)}
.hk-ver__badge{margin-left:auto;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:20px}
.hk-ver__badge.is-cur{background:#d1fae5;color:var(--ok)}
.hk-ver__badge.is-old{background:#fef3c7;color:#b45309}
.hk-h{margin:16px 0 7px;font-size:13px;color:var(--muted)}
.hk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.hk-cell{border:1px solid var(--line);border-radius:11px;padding:10px 13px;background:var(--panel)}
.hk-cell__lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.hk-cell__val{font-size:17px;font-weight:700;color:var(--txt);margin-top:2px}
.hk-feats{display:flex;flex-wrap:wrap;gap:7px}
.hk-feat{font-size:12px;font-weight:600;padding:3px 10px;border-radius:8px}
.hk-feat.on{background:#ecfdf5;color:var(--ok)}
.hk-feat.off{background:#f1f5f9;color:var(--muted)}
.hk-rels{display:flex;flex-direction:column;gap:4px}
.hk-rel{font-size:12.5px;color:var(--txt);padding:5px 0;border-bottom:1px solid var(--soft)}
/* Workflow — oś czasu kroków */
.wf-timeline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px}
.wf-arr{color:var(--muted);font-size:12px}
.wf-step{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:8px;background:#f1f5f9;color:var(--muted)}
.wf-step small{font-weight:400;opacity:.8}
.wf-step--done{background:#ecfdf5;color:var(--ok)}
.wf-step--pending,.wf-step--waiting{background:#fef3c7;color:#b45309}
.wf-step--running{background:var(--accent-soft);color:var(--accent-text)}
.wf-step--failed,.wf-step--rejected{background:#fee2e2;color:var(--danger)}
/* ===== WORKFLOW Faza 2: karty + szczegóły + wizualizacja grafu ===== */
.wfcard{cursor:pointer;transition:box-shadow .12s,border-color .12s}
.wfcard:hover{border-color:var(--accent-text);box-shadow:none}
.wfd-stats{display:flex;flex-wrap:wrap;gap:7px}
.wfd-stat{font-size:12px;color:var(--muted);background:var(--soft);border-radius:8px;padding:3px 10px}
.wfd-stat b{color:var(--txt);font-weight:700}
.wfd-stat.is-run b{color:var(--accent-text)}
.wfd-stat.is-ok b{color:var(--ok)}
.wfd-stat.is-bad b{color:var(--danger)}
.wfd-stat.is-wait b{color:#b45309}
.wfd-hd{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.wfd-split{display:grid;grid-template-columns:minmax(230px,330px) 1fr;gap:16px;align-items:start;margin-top:6px}
@media(max-width:900px){.wfd-split{grid-template-columns:1fr}}
.wfd-runs,.wfd-graph{min-width:0}
.wfd-run{border:1px solid var(--line);border-radius:11px;padding:9px 11px;margin-bottom:8px;cursor:pointer;background:var(--panel);transition:border-color .12s,background .12s}
.wfd-run:hover{border-color:var(--accent-text)}
.wfd-run.is-sel{border-color:var(--accent-text);background:var(--accent-soft)}
.wfd-run__hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wfd-run__when{font-size:11.5px;color:var(--muted);margin-top:3px}
.wfd-graph__wrap{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:8px;overflow:auto;max-height:560px}
/* DESIGN §4.9 — edytor obiegu: schemat BPMN + panel boczny (D-2026-09-25-edytor-obiegu) */
.obed{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.obed__plotno{position:relative;padding:12px}
.obed__zoom{position:absolute;right:12px;top:12px;display:flex;gap:6px;align-items:center;z-index:2}
.obed__widok{overflow:auto;min-height:480px;max-height:calc(100vh - 290px);padding-top:40px;cursor:grab}
.obed__widok.is-ciagniete{cursor:grabbing;user-select:none}
.obed__svg{display:block;margin:0 auto}   /* margin:auto, nie flex-center — szerszy od okna da się przewinąć w lewo */
.obed__panel{padding:16px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.obed__kat{display:flex;gap:10px;align-items:flex-start;width:100%;margin-top:10px;padding:10px 12px;border:1px solid var(--field-line);border-radius:10px;background:var(--panel);color:var(--txt);text-align:left;font:inherit;cursor:pointer}
.obed__kat:hover:not(:disabled){background:var(--soft)}
.obed__kat:disabled{opacity:.55;cursor:default}
.obed__kat b{display:block;font-size:14px;font-weight:600}
.obed__kat b + span{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.obed__katikona{flex:none;color:var(--accent-text);margin-top:1px}
/* Karta agenta (moduł Agenci, D-2026-09-25-modul-agenci): klocki jak na schemacie — wybrany = obwódka akcentu; kreska łączy kolejne */
.obed__kat.is-wybrany{border:2px solid var(--accent);background:var(--accent-soft);padding:9px 11px}
.obed__mini{overflow:auto;max-width:100%;padding:4px 0}   /* F9: podgląd rysunku agenta poza kartą (obieg, „Nowy agent”, propozycja, okno Asystent) */
.obed__klocki .obed__kat{position:relative;margin-top:16px}
.obed__klocki .obed__kat:first-child{margin-top:0}
.obed__klocki .obed__kat + .obed__kat::before{content:"";position:absolute;left:21px;top:-17px;width:2px;height:16px;background:var(--line-strong)}
@media (max-width:1100px){.obed{grid-template-columns:1fr}.obed__panel{position:static}}
.wfd-nodeinfo{font-size:12px;color:var(--txt);margin-top:8px;min-height:18px}
.wfd-nodeinfo pre{background:var(--soft);border-radius:8px;padding:8px;overflow:auto;font-size:11px;margin:5px 0 0;white-space:pre-wrap}
.wfg{display:block;margin:0 auto}
.wfg-edge{fill:none;stroke:var(--line-strong);stroke-width:1.5;opacity:.65}
.wfg-arrh{fill:var(--line-strong)}
.wfg-elbl{font-size:10.5px;fill:var(--muted);paint-order:stroke;stroke:var(--panel);stroke-width:3px;stroke-linejoin:round}
.wfg-node{cursor:pointer}
.wfg-node rect{fill:var(--panel);stroke:var(--line-strong);stroke-width:1.5;transition:fill .12s,stroke .12s,stroke-width .12s,filter .12s}
.wfg-node:hover rect{stroke-width:2.5;filter:brightness(.97)}
.wfg-ico{font-size:16px}
.wfg-name{font-size:12px;font-weight:700;fill:var(--txt)}
.wfg-sub{font-size:10px;fill:var(--muted)}
.wfg-node--start rect{fill:#ecfdf5;stroke:var(--ok)}
.wfg-node--koniec rect{fill:#f3f4f6;stroke:var(--muted)}
.wfg-node--agent rect{fill:var(--accent-soft);stroke:var(--accent-text)}
.wfg-node--par rect{fill:#f0fdfa;stroke:#0d9488}
.wfg-node--par .wfg-sub{fill:#0d9488}
.wfg-node--recenzja rect{fill:#fff7ed;stroke:#ea580c}   /* H11: krok recenzji — drugi agent sprawdza wynik pierwszego */
.wfg-node--recenzja .wfg-sub{fill:#ea580c}
.wfg-node--decyzja rect{fill:#fffbeb;stroke:var(--warn)}
.wfg-node--akcja rect{fill:#eff6ff;stroke:var(--accent-text)}
.wfg-node--powiad rect{fill:#fdf2f8;stroke:#db2777}
.wfg-node.is-done rect{fill:#dcfce7;stroke:var(--ok);stroke-width:2}
.wfg-node.is-active rect{fill:#fef3c7;stroke:var(--warn);stroke-width:2}
.wfg-node.is-failed rect{fill:#fee2e2;stroke:var(--danger);stroke-width:2}
.wfg-node.is-current rect{stroke:var(--accent-text);stroke-width:3}
.wfg-here{font-size:14px}
.wfg-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--muted);margin-top:8px;align-items:center}
.wfg-legend i.wfg-lg{display:inline-block;width:11px;height:11px;border-radius:3px;border:1.5px solid;margin-right:4px;vertical-align:middle}
.wfg-lg.start{border-color:var(--ok);background:#ecfdf5}
.wfg-lg.agent{border-color:var(--accent-text);background:var(--accent-soft)}
.wfg-lg.akcja{border-color:var(--accent-text);background:#eff6ff}
.wfg-lg.recenzja{border-color:#ea580c;background:#fff7ed}
.wfg-lg.decyzja{border-color:var(--warn);background:#fffbeb}
/* H12: MODELE AI — czym pracuje każde zadanie i ile to kosztuje (Administracja → Modele AI) */
.mod-card{margin-bottom:12px}
.mod-koszt{flex:none;text-align:right;font-size:11.5px;color:var(--muted);line-height:1.35}
.mod-koszt__v{font-size:19px;font-weight:800;color:var(--txt)}
.mod-row{display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.mod-fld{flex:1;min-width:240px;display:flex;flex-direction:column;gap:4px}
.mod-fld>span{font-size:11.5px;color:var(--muted);font-weight:600}
.mod-fld input{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:13px}
.mod-meta{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:8px;font-size:12px}
.mod-uzycie{margin-top:9px;font-size:12.5px;line-height:1.9}
.mod-zad{display:inline-block;margin:0 5px 0 0;padding:2px 9px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.mod-zad.is-rozjazd{background:#fff7ed;border-color:#fdba74;color:#9a3412}   /* rejestr mowi co innego niz pomiar — pokazujemy, nie chowamy */
@media(max-width:760px){.mod-koszt{text-align:left;margin-top:6px}}
/* H11: ŁAŃCUCH AGENTÓW — kroki po kolei + kto je wykonuje (Administracja → Workflow → przepływ) */
.wf-lanc{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.wf-lanc__l{list-style:none;margin:8px 0 0;padding:0;counter-reset:none}
.wf-lstep{display:flex;gap:11px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);margin-bottom:7px}
.wf-lstep.is-recenzja{border-color:#fdba74;background:#fff7ed}
.wf-lstep__ico{flex:none;font-size:17px;line-height:1.25}
.wf-lstep__b{flex:1;min-width:0}
.wf-lstep__n{font-size:13.5px;font-weight:700;color:var(--txt)}
.wf-lstep__w{font-size:12.5px;color:var(--txt);margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.wf-lstep__w select{max-width:280px}
.wf-lstep__st{margin-left:8px;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--soft);color:var(--muted)}
.wf-lstep__st.is-ok{background:#dcfce7;color:#15803d}
.wf-lstep__st.is-bad{background:#fee2e2;color:#b91c1c}
.wf-lstep__st.is-run{background:#fef3c7;color:#b45309}
.wf-lstep__rec{margin-top:6px;padding:7px 9px;border-radius:8px;background:var(--panel);border:1px dashed #fdba74;font-size:12px;white-space:pre-wrap}
.wf-lstep__a{flex:none;display:flex;gap:6px;align-items:center}
@media(max-width:760px){.wf-lstep{flex-wrap:wrap}.wf-lstep__a{width:100%;justify-content:flex-end}}
.wfg-lg.koniec{border-color:var(--muted);background:#f3f4f6}
.wfd-nodeinfo{font-size:12.5px;line-height:1.5}
.wfni-h b{font-size:13.5px}
.wfni-desc{margin:6px 0 0;padding-left:18px}
.wfni-desc li{margin:3px 0;color:var(--txt)}
.wfni-raw{margin-top:8px}
.wfni-raw summary{cursor:pointer;color:var(--muted);font-size:11.5px}
.wfni-raw pre{margin:4px 0 0;font-size:11px;background:#f6f6f6;padding:6px 8px;border-radius:6px;overflow:auto;white-space:pre-wrap}
/* edytor grafu */
.btn--danger{color:var(--danger);border-color:#fecaca}
.btn--danger:hover{background:#fef2f2}
.wfd-graph__wrap.is-edit{background:var(--soft-2)}
.wfcond{margin-top:4px}
.wfcond__t{font-size:11.5px;color:var(--muted);margin-bottom:5px}
.wfcond__r{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.wfcond__r input,.wfcond__r select{width:100%}
.wf-trlist{margin-top:6px}
.wf-tr{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;cursor:pointer;font-size:12.5px;background:var(--panel)}
.wf-tr:hover{border-color:var(--accent-text);background:var(--accent-soft)}
.wf-tr>span:first-child{flex:1;min-width:0;font-weight:600;color:var(--txt)}
.wf-tr__e{flex:none;color:var(--accent-text);font-weight:700}
/* warstwa ludzka: decydenci, powiadomienia, terminy */
.wfappr{display:flex;flex-wrap:wrap;gap:6px 14px;padding:4px 0}
.wfappr__o{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.wfappr__o input{accent-color:var(--accent)}
.wfappr__auto{display:flex;align-items:baseline;gap:7px;margin:2px 0 8px;padding:7px 9px;border:1px solid var(--accent-text);background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:7px;cursor:pointer}
.spo-trigbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 10px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);background:color-mix(in srgb,var(--ok) 7%,transparent);border-radius:9px;font-size:13px;cursor:pointer}
.spo-trigbar:hover{background:color-mix(in srgb,var(--ok) 12%,transparent)}
.spo-trigbar.is-warn{border-color:color-mix(in srgb,#b45309 40%,transparent);background:color-mix(in srgb,#b45309 8%,transparent)}
.spo-trigbar.is-off{border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:color-mix(in srgb,var(--danger) 9%,transparent)}
.spo-trigbar__t{font-weight:700}
.spo-trigbar__i{color:var(--txt)}
.spo-trigbar__go{margin-left:auto;font-weight:600;color:var(--accent-text);white-space:nowrap}
.wf-unread{display:inline-block;background:var(--danger);color:var(--on-accent);font-size:11px;font-weight:700;border-radius:20px;padding:1px 8px;margin-left:4px}
.wf-notifs{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.wf-notif{display:flex;align-items:flex-start;gap:10px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:default}
.wf-notif.is-unread{border-color:var(--accent-text);background:var(--accent-soft);cursor:pointer}
.wf-notif__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wf-notif__b b{font-size:13px;color:var(--txt)}
.wf-notif__b small{font-size:12px;color:var(--muted)}
.wf-notif__t{flex:none;font-size:11px;color:var(--muted)}
.wf-over{color:var(--danger);font-weight:700}
.wf-mailcfg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:2px 0 10px}
.wf-mailcfg select{padding:5px 9px;border:1px solid var(--field-line);border-radius:8px;font-size:13px}
.wf-mailcfg .cfgsaved{font-size:12px;color:var(--ok)}
/* Centrum budowania — schemat warstw */
.bh-wrap{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:10px;margin:4px 0 6px;overflow:auto}
.bh-svg{display:block;width:100%;max-width:680px;height:auto;margin:0 auto}
.bh-nm{font-size:16px;font-weight:700;fill:var(--txt)}
.bh-sub{font-size:11.5px;fill:var(--muted)}
.bh-ico{font-size:19px}
.bh-base{fill:var(--panel);stroke:var(--line-strong);stroke-width:1.5}
.bh-comp{fill:var(--accent-soft);stroke:var(--accent-text);stroke-width:1.5}
.bh-edge{stroke:var(--muted);stroke-width:1.6;fill:none}
.bh-lg{font-size:11.5px;fill:var(--muted)}
/* Konsola komend Hermesa (wariant A) */
.hkc-quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.hkc-quick .btn{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.hkc-row{display:flex;gap:8px;align-items:center;max-width:680px}
.hkc-row input{flex:1;padding:8px 11px;border:1px solid var(--field-line);border-radius:9px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.hkc-row input:focus{outline:none;border-color:var(--accent-text);box-shadow:none}
.hkc-out{margin-top:10px;background:#0f1729;color:#e7e9ee;border-radius:10px;padding:12px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;white-space:pre-wrap;overflow:auto;max-height:360px;max-width:880px}
.hkc-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;max-width:780px;margin:4px 0}
.hkc-mf{display:flex;flex-direction:column;gap:3px}
.hkc-mf span{font-size:11.5px;color:var(--muted);font-weight:600}
.hkc-mf input{padding:6px 9px;border:1px solid var(--field-line);border-radius:8px;font-size:12.5px;font-family:ui-monospace,Menlo,Consolas,monospace}
.hkc-inst{background:var(--accent-soft);border:1px solid var(--accent-text);border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.5;margin:2px 0 8px;max-width:820px}
.hkc-inst code{background:var(--panel);padding:1px 5px;border-radius:5px;font-size:12px}
.hkc-inst--top{margin:0 0 14px;font-size:13.5px;border-width:2px}
.hkc-id{margin:6px 0;font-size:14px}
.hkc-proj{background:var(--accent);color:var(--on-accent);padding:1px 8px;border-radius:6px}
.hk-more{margin:4px 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.hk-more>summary{cursor:pointer;padding:9px 13px;font-weight:600;font-size:13px;color:var(--muted);list-style:none}
.hk-more>summary::-webkit-details-marker{display:none}
.hk-more>summary::before{content:"▸ "}
.hk-more[open]>summary::before{content:"▾ "}
.hk-morebox{padding:2px 13px 12px}
.ntree{font-size:13px}
.ntgrp{margin-bottom:1px}
.ntgrp__h{display:flex;align-items:center;gap:7px;padding:6px;cursor:pointer;user-select:none;border-radius:8px}
.ntgrp__h:hover{background:var(--soft)}
.ntgrp.is-open>.ntgrp__h .skgroup__chev{transform:rotate(90deg)}
.ntgrp__lab{font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntgcb{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex:none}
.ntgrp__items{display:none;padding:2px 0 6px 18px}
.ntgrp.is-open>.ntgrp__items{display:block}
.ntsubs{padding-left:10px}
.ntitem{display:flex;align-items:flex-start;gap:8px;padding:5px 8px;border-radius:8px;cursor:pointer}
.ntitem:hover{background:var(--accent-soft)}
.ntcb{width:15px;height:15px;margin-top:1px;accent-color:var(--accent);cursor:pointer;flex:none}
.ntico{flex:none;font-size:14px;line-height:1.3}
.ntfico{flex:none;font-size:22px;line-height:1;width:28px;text-align:center;text-decoration:none}
.ntdgrp{margin:2px 0}
.ntdrow{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:8px}
.ntdrow--top{margin-top:6px}
.ntdname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ntdsub{margin-left:16px;border-left:2px solid var(--line);padding-left:8px}
.ntdkids{margin-left:16px;border-left:2px solid var(--line);padding-left:8px}
.ntfocus{flex:none;border:none;background:transparent;cursor:pointer;font-size:13px;opacity:.35;padding:0 2px;border-radius:6px;transition:opacity .12s,background .12s}
.ntgrp__h:hover .ntfocus{opacity:.8}
.ntfocus:hover{opacity:1;background:var(--accent-soft)}
.login__err{color:var(--danger);font-size:13px;min-height:16px;margin:8px 0 0;text-align:center;font-weight:500}
.login__forgot{display:block;text-align:center;margin:12px 0 0;font-size:13px;color:var(--muted);text-decoration:none;cursor:pointer}
.login__forgot:hover{color:var(--txt);text-decoration:underline}
.login__hint{color:var(--muted);font-size:12px;margin:2px 0 6px;text-align:center}
.ntmain{display:flex;flex-direction:column;gap:1px;min-width:0}
.ntname{font-weight:600;color:var(--txt);word-break:break-word}
.ntmeta{font-size:11px;color:var(--muted)}
.ntlink{color:var(--accent-text);font-weight:600;text-decoration:none}
.ntlink:hover{text-decoration:underline}
.ntpdm{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:11px}   /* D1: „⬆ podmień" przy pliku — wygląda jak ntlink, nie jak natywny button */
/* ===== ZAKŁADKA „PLIKI" — przestronna przeglądarka (redesign) ===== */
.pliki__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:4px 0 16px}
.pfolders{display:flex;gap:7px;flex-wrap:wrap;flex:1;min-width:0}
.pfolder{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--txt);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis}
.pfolder:hover{background:var(--soft)}
.pfolder.is-active{background:var(--accent-soft);border-color:var(--accent-text);color:var(--accent-text)}
.pfolder .cnt{color:var(--muted);font-weight:600;font-size:12px}
.pfolder.is-active .cnt{color:var(--accent-text)}
.pliki__tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pfile__search{border:1px solid var(--field-line);border-radius:9px;padding:8px 12px;font-size:13px;background:var(--panel);min-width:190px}
.pfile__search:focus{outline:none;border-color:var(--accent-text);box-shadow:var(--ring)}
.pfile{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin-bottom:9px;transition:border-color var(--tr),box-shadow var(--tr)}
.pfile:hover{border-color:var(--line-strong);box-shadow:none}
.pfile--click{cursor:pointer}   /* ergonomia v3: cały wiersz klikalny (otwiera), jedyny przycisk = Edytuj przy Office */
.pfile__ico{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:23px;background:var(--soft)}
.pfile__ico--word{background:var(--accent-soft)}.pfile__ico--excel{background:#e6f7ef}.pfile__ico--pdf{background:#fdeaea}.pfile__ico--ppt{background:#fdf0e6}.pfile__ico--img{background:#eef0f8}.pfile__ico--txt{background:#f1f3f7}.pfile__ico--video{background:#f3ecfd}
.pfile__main{flex:1;min-width:0}
.pfile__name{font-size:15px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.pfile__name:hover{color:var(--accent-text);text-decoration:underline}
.pfile__meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.pfile__acts{flex:none;display:flex;align-items:center;gap:8px}
.pfile__more{border:1px solid var(--line);background:var(--panel);border-radius:8px;width:36px;height:33px;cursor:pointer;font-size:17px;color:var(--muted);line-height:1;display:flex;align-items:center;justify-content:center}
.pfile__more:hover{background:var(--soft);color:var(--txt)}
.pmenu{position:absolute;z-index:80;min-width:200px;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:var(--sh-modal);padding:6px}
.pmenu__it{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--txt);background:none;border:0;cursor:pointer;text-align:left;text-decoration:none;box-sizing:border-box}
.pmenu__it:hover{background:var(--accent-soft)}
.pmenu__it--danger{color:var(--danger)}
.pmenu__it--danger:hover{background:#fde8e8}
.pliki__empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:14px;border:1px dashed var(--line);border-radius:12px}
.pliki__hint{font-size:12px;margin-top:6px;opacity:.85}
@media(max-width:640px){.pliki__bar{flex-direction:column;align-items:stretch}.pliki__tools{justify-content:space-between}.pfile__search{flex:1}}
.ntempty{font-size:12px;color:var(--muted);padding:4px 8px}
.ntitem--doc{cursor:default}
.ntdrivenote{padding:4px 8px;font-weight:600}
.ntsoon{color:var(--muted);font-weight:400}
.ntscope{margin-top:10px;padding:8px 10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);background:var(--soft);border-radius:8px}
.ntdrive__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 8px 8px}
.ntsubh{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin:8px 8px 2px}
.ntopen{cursor:pointer}
.ndetail{font-size:13px}
.ntback{border:none;background:transparent;color:var(--accent-text);font-weight:600;cursor:pointer;padding:4px 0;font-size:13px}
.ntback:hover{text-decoration:underline}
.ndetail__hd{display:flex;align-items:center;gap:8px;margin:8px 0 2px}
.ndetail__t{margin:0;font-size:15px}
.ndetail__meta{font-size:12px;color:var(--muted);margin-bottom:10px}
.ndetail__drive{margin-bottom:12px}
.ndetail__body{border-top:1px solid var(--line);padding-top:10px}
.ndetail__body .wikicard{font-size:13px;line-height:1.6}
@media(max-width:1100px){.asystent-grid{grid-template-columns:1fr}.skills{position:static;max-height:600px}}

/* TREŚĆ / STRUMIEŃ — znacznik źródła, „bez klienta", picker przypisania, toast */
.srcb{display:inline-block;font-size:12px;color:var(--muted);white-space:nowrap}
.srcb--ff{color:#b45309;font-weight:600}
.muted2{color:var(--muted);font-style:italic}
.assignbox{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.assignbox .assignsel{padding:4px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;max-width:220px}
.nstoast{position:fixed;right:18px;bottom:18px;z-index:9999;color:var(--on-accent);padding:11px 16px;border-radius:10px;font-weight:600;font-size:13px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none;max-width:380px}
.nstoast.show{opacity:1;transform:translateY(0);pointer-events:auto}   /* .1910: widoczny komunikat MUSI lapac klik — bez tego krzyzyk bledu (DESIGN 2.5) byl martwy, a czerwony komunikat nie znikal (zgloszenie Pawla 2026-09-22) */
.nstoast{color:var(--txt);border:1px solid var(--line)}   /* DESIGN 2.5 §4.7: tekst na --txt (14,2-16,5:1 na tlach *-soft), nie bialy na pelnym kolorze */
.nstoast--blad{border-color:var(--danger);padding-right:40px}
.nstoast__x{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;color:var(--muted);display:inline-flex;padding:6px}

/* NAGRYWANIE EKRANU (etap 2): pasek sterowania w trakcie nagrania + ostrzezenia i pasek postepu w okienkach */
.nagrbar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:10000;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-left:4px solid #e24b4a;border-radius:12px;padding:8px 14px;box-shadow:var(--sh-modal)}
.nagrbar__dot{width:11px;height:11px;border-radius:50%;background:#e24b4a;flex:none;animation:nagrpuls 1.4s ease-in-out infinite}
.nagrbar__t{font-variant-numeric:tabular-nums;font-weight:700;font-size:16px;color:var(--txt);min-width:52px}
.nagrbar--pauza{border-left-color:#b7791f}
.nagrbar--pauza .nagrbar__dot{background:#b7791f;animation:none}
@keyframes nagrpuls{0%,100%{opacity:1}50%{opacity:.25}}
.nagrbar--czeka{border-left-color:var(--accent-text);font-size:13.5px;color:var(--txt);max-width:min(92vw,660px)}
.nagrbar--czeka b{white-space:nowrap}
.nagrbar--czeka small{display:block;font-size:11.5px;font-style:normal;margin-top:2px}
.nagrbar--blad{border-left-color:#e24b4a}
.nagrwarn{background:#fef3c7;color:#92400e;border-radius:9px;padding:9px 12px;font-size:13px;line-height:1.45;margin-bottom:9px}
.nagrwarn--info{background:var(--accent-soft);color:var(--accent-hover)}
.nagrpost{height:8px;border-radius:99px;background:var(--soft);overflow:hidden;margin-top:10px}
.nagrpost__bar{height:100%;width:0;border-radius:99px;background:var(--accent);transition:width .2s}
/* checkbox w .addfld: bez tego `.addfld input{width:100%}` rozciaga kwadracik na cala szerokosc (ta sama pulapka co .cgm-o, l. 2041) */
.addfld--cb{flex-direction:row;align-items:center;gap:9px}
.addfld--cb input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;margin:0;padding:0;accent-color:var(--accent)}
.addfld--cb>span{font-size:13.5px;font-weight:500;color:var(--txt)}
/* Wybor dzwieku przed nagraniem: dwa kafelki zamiast malego checkboxa (Pawel przeoczyl kwadracik na tescie 28.07) */
.nagrpicks{display:flex;gap:9px}
.nagrpick{flex:1;display:flex;align-items:center;gap:10px;border:2px solid var(--field-line);border-radius:11px;padding:10px 12px;cursor:pointer;background:var(--panel);transition:border-color .15s,background .15s}
.nagrpick:hover{border-color:var(--line-strong)}
.nagrpick.is-on{border-color:var(--accent-text);background:#f6f2fe}
.nagrpick input[type=radio]{width:16px;height:16px;flex:0 0 auto;margin:0;padding:0;accent-color:var(--accent)}
.nagrpick__ico{font-size:21px;line-height:1}
.nagrpick__t{display:flex;flex-direction:column;min-width:0}
.nagrpick__t b{font-size:13.5px;color:var(--txt)}
.nagrpick__t small{font-size:11.5px;color:var(--muted)}

/* Szukajka na liście (Klienci) */
.listsearch{flex:1;min-width:180px;max-width:340px;padding:7px 11px;border:1px solid var(--field-line);border-radius:9px;font-size:13px;background:var(--panel)}
.listsearch:focus{outline:none;border-color:var(--accent-text)}

/* Combobox typeahead (picker przypisania klienta) */
.cpick{position:relative;display:inline-block;min-width:240px;vertical-align:top}
.cpick__in{width:100%;padding:5px 9px;border:1px solid var(--accent-text);border-radius:8px;font-size:13px}
.cpick__in:focus{outline:none}
.cpick__menu{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 3px);background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);max-height:280px;overflow:auto}
.cpick__opt{display:flex;flex-direction:column;gap:1px;padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--soft)}
.cpick__opt:hover{background:var(--accent-soft)}
.cpick__opt small{color:var(--muted);font-size:11px}
.cpick__empty{padding:8px 10px;color:var(--muted);font-size:12px}
.cpick__add{color:var(--accent-text);font-weight:600}

/* Modal „Dodaj klienta" (po NIP / po nazwie) */
/* ⚠️ WARSTWA 1100, NIE 200 (zgłoszenie Pawła 2026-08-13: „chce dodać nowego klienta i wtedy ta
   do wyszukiwania chowa się pod spodem — DRAMAT"). Okno „➕ Dodaj klienta" otwiera się Z WNĘTRZA
   formatki zadania (.modalov = 950) przez picker klienta (.combopop = 1000), więc z-index 200
   malował je POD nimi: użytkownik widział przyciemnienie i nie mógł nic kliknąć. Kolejność warstw:
   .modalov 950 < .combopop 1000 < .acmodal 1100 — okno otwarte NA WIERZCHU zawsze wygrywa. */
.acmodal{position:fixed;inset:0;z-index:1100;background:rgba(16,24,40,.45);display:grid;place-items:start center;padding:48px 16px;overflow:auto}
/* ⚠️ .1242 — ZGŁOSZENIE GRZEGORZA MOTŁOCHA: „tworzyłem wpis w kalendarzu i z tego poziomu od razu
   zadanie; zadanie się utworzyło, wpis też, ale nie utworzyło się powiązanie". [ZMIERZONE] przyczyną
   NIE było samo powiązanie, tylko WARSTWY: formatka zadania (.modalov = 950) otwierana Z WNĘTRZA
   okna kalendarza (.acmodal = 1100) lądowała POD nim — `elementFromPoint` w miejscu formatki
   zwracał `calmodal__r2`, czyli okno kalendarza. Formatka istniała, ale była NIEWIDOCZNA
   i NIEKLIKALNA, więc jedyną drogą było zamknięcie kalendarza — a wtedy wpis zapisywał się
   bez zadania. To ta sama klasa błędu, co zgłoszenie Pawła z 2026-08-13 o „➕ Dodaj klienta"
   („chowa się pod spodem — DRAMAT"), tylko piętro wyżej.
   ZASADA: okno otwarte PÓŹNIEJ jest NA WIERZCHU. `.modalov` wywołany z wnętrza `.acmodal`
   dostaje 1200 — powyżej kalendarza, poniżej pickera klienta (1300), który sam bywa z niego wołany. */
.acmodal ~ .modalov{z-index:1200}
.acmodal ~ .modalov .combopop,
.acmodal ~ .combopop{z-index:1300}
/* Na niskim ekranie (laptop ~768 px wysokości) 48 px pustki u góry to stracony wiersz formularza. */
@media (max-height:820px){.acmodal{padding:16px 16px 24px}}
.acmodal__card{width:100%;max-width:480px;background:var(--panel);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px}
.acmodal__hd{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-bottom:12px}
.acseg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:12px}
.acseg__b{border:none;background:var(--panel);padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.acseg__b.is-active{background:var(--accent);color:var(--on-accent)}
.acsearch{display:flex;gap:8px}
.acsearch .nfinput{flex:1}
.acmodal__hint{font-size:12px;color:var(--muted);margin:8px 0}
.acload{padding:12px;background:var(--soft);border-radius:9px;font-size:13px;color:var(--muted)}
.acerr{padding:10px 12px;background:#fef2f2;border:1px solid #fecaca;border-radius:9px;font-size:13px;color:var(--danger)}
.acsub{font-size:12px;color:var(--muted);margin:6px 0}
.accand{padding:9px 11px;border:1px solid var(--line);border-radius:9px;margin-bottom:7px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.accand:hover{border-color:var(--accent-text);background:var(--accent-soft)}
.accand small{color:var(--muted);font-size:11px}
.acconfirm__hd{font-weight:700;font-size:13px;margin-bottom:8px}
.acf{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted);margin-bottom:8px}
.acf .nfinput,.acf .nftext{font-size:13px;color:var(--txt)}
.acconfirm .dl__row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:12px;border-top:1px solid var(--soft)}
/* 🔴 PRZYCISK ZAPISU MA BYĆ ZAWSZE POD RĘKĄ — zgłoszenie Pawła: „to jak teraz mam zatwierdzić?".
   Okno rośnie od treści (dołożony wiersz, wielu uczestników, lista salek) i pasek akcji zjeżdżał
   pod krawędź ekranu. Samo poszerzenie okna łagodzi objaw — przy dłuższej formatce problem wróci.
   `sticky` przykleja pasek do dołu KARTY, więc widać go niezależnie od ilości treści i wysokości
   ekranu. To jest naprawa przyczyny, poszerzenie jest naprawą wygody. */
.acconfirm__bar{display:flex;align-items:center;gap:10px;margin-top:12px;position:sticky;bottom:-18px;background:var(--panel);padding:12px 0 6px;margin-bottom:-6px;border-top:1px solid var(--line);z-index:2}
.acconfirm__bar .acmsg{flex:1;font-size:12px}

/* Rozwijane okienko podsumowania spotkania */
.sumpanel{border:1px solid var(--line);border-radius:9px;margin-top:8px;overflow:hidden}
.sumpanel__h{display:flex;align-items:center;gap:7px;padding:9px 11px;cursor:pointer;font-weight:600;font-size:13px;background:var(--soft);user-select:none}
.sumpanel__h:hover{background:var(--accent-soft)}
.sumpanel__h .skgroup__chev{transition:transform .15s;color:var(--muted)}
.sumpanel__b{padding:10px 12px;border-top:1px solid var(--line)}
.sumpanel__b .wikicard{font-size:13px;line-height:1.6}

/* ===================== (dawny blok „MAGNIFIC”: gradienty i szkło ZDJETE wg DESIGN.md §0.3 — zostaly tylko neutralne odpowiedniki) ===================== */
/* Marki, avatary = gradient */
.brand__mark,.assistant__mark{background:var(--accent);box-shadow:none}
.userbox__av,.prof__av{background:var(--accent-soft);color:var(--accent-text);border:none;box-shadow:none}
.nav__item{border-radius:10px;transition:background var(--tr),color var(--tr),box-shadow var(--tr)}
.search input{border-radius:11px}
.kpi--danger .kpi__val{color:var(--danger)}
.zadtblwrap,.tablewrap{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:none;background:var(--panel)}
th{background:var(--soft-2)}
/* Login = szklana karta na fioletowym tle */
.login{background:
  radial-gradient(1000px 600px at 80% -10%, rgba(196,181,253,.55), transparent 60%),
  radial-gradient(800px 600px at 10% 110%, rgba(165,180,252,.40), transparent 55%),
  var(--bg)}
.login__card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--sh-modal)}

/* ===== MAGNIFIC · rozszerzenie na widoki (Asystent / Administracja / Poczta / Kalendarz) ===== */
.mailrow.sel{background:var(--accent-soft)}
.integr,.cron{background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:none}
.asuggest button{background:var(--panel);border:1px solid var(--field-line);border-radius:13px;box-shadow:none}
.acard{background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:none}
.asuggest button:hover{color:var(--accent-text);border-color:var(--accent-text)}
.zadseg{border-radius:11px}
.zadseg__b.is-active,.acseg__b.is-active{background:var(--accent);color:var(--on-accent);box-shadow:none}
.zadseg__b.is-active+.zadseg__b,.zadseg__b.is-active{border-left-color:transparent}

/* ===================== (dawne §6 „tafla wody”: aurora i smugi ZDJETE wg DESIGN.md; .cbg zostaje ukryty) ===================== */
/* Warstwa tła CAŁEGO obszaru treści (Dashboard + listy). Aurora na .main, pod nią animowany decor (z-index:-1),
   nad nim treść widoków. Czysto-CSS (transform/opacity). NIE dotyka treści/logiki. Ciemny launcher wyłączony. */
.main{position:relative;isolation:isolate;background:var(--bg)}   /* referencja infografiki: ciepła kremowa baza + monochrom fiolet (bez błękitu) */
.cbg{display:none}   /* Paweł: wyłączone „pływanie" (smugi waterSheen + orbity) — zostaje samo statyczne piaskowe tło (aura na .main). Re-enable: position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden */
/* Ciemny launcher: bez aury i bez decoru (kafle mają własne ciemne tło) */
.app.view-launcher .main{background:none}
.app.view-launcher .cbg{display:none}
.zadtblwrap,.tablewrap{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none}
.maillist,.mailprev{position:relative}
/* cfg-listy: zewnętrzny .tablewrap opakowuje realną kartę .zadtblwrap → zneutralizuj (bez podwójnej karty/paska) */
.tablewrap:has(.zadtblwrap){background:none;border:none;box-shadow:none;border-radius:0}   /* potomek (nie tylko bezpośredni) — Projekty zagnieżdża .zadtblwrap w #vProjektyList; bez tego podwójne szkło */
.tablewrap:has(.zadtblwrap)::before{display:none}
/* mobilne karty (lista renderowana jako karty) — kontener bez chrome/paska (kartami są .mcard) */
.zadtblwrap.mcardwrap{background:none;border:none;box-shadow:none;border-radius:0}
.zadtblwrap.mcardwrap::before{display:none}

/* ===================== KALENDARZ (moduł spotkań) ===================== */
#vKalendarz{flex:1 1 auto;min-height:0;display:flex;overflow:hidden}
.cal{flex:1;min-height:0;display:grid;grid-template-columns:248px 1fr;gap:18px;overflow:hidden}
@media(max-width:1080px){#vKalendarz{overflow:auto}.cal{grid-template-columns:1fr;overflow:visible}}
.calrail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none;padding:14px;display:flex;flex-direction:column;gap:9px;overflow:auto}
.calnew{width:100%;justify-content:center}
.calrail__sec{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-top:4px}
.ccal{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;color:var(--txt);user-select:none}
.ccal:hover{background:var(--soft)}
.ccal input{display:none}
.ccal__dot{width:15px;height:15px;border-radius:5px;background:var(--cc);flex:none;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.ccal__dot:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),0 0 0 2px var(--cc)}
.ccal.is-hidden .ccal__dot{background:transparent;box-shadow:inset 0 0 0 2px var(--cc)}
.ccal.is-hidden .ccal__n{color:var(--muted)}
.ccal__n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;cursor:pointer}
.calcpick{padding:10px;width:210px}
.calcpick__t{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.calcpick__grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.calcpick__sw{width:20px;height:20px;border-radius:6px;border:0;cursor:pointer;padding:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.calcpick__sw:hover{transform:scale(1.12)}
.calcpick__sw.is-on{outline:2px solid var(--txt);outline-offset:1px}
.calcpick__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.calcpick__custom{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}
.calcpick__custom input[type=color]{width:26px;height:22px;border:1px solid var(--field-line);border-radius:6px;padding:0;background:none;cursor:pointer}
.calrail__tz{margin-top:auto;font-size:11px;color:var(--muted);padding-top:6px}
/* ⚠️ `margin-top:6px` bylo dobre, gdy mini-kalendarz stal na DOLE kolumny. Od `.1255` stoi na
   GORZE (zgloszenie Stefana), wiec odstep nalezy sie POD nim — inaczej przykleja sie do przycisku
   „＋ Nowe zdarzenie". Kreska oddziela wybor DNIA od reszty sterowania. */
.cmini{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cmini__hd{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:6px}
.cmini__nav{border:none;background:transparent;cursor:pointer;color:var(--muted);font-size:16px;border-radius:6px;width:22px;height:22px;line-height:1}
.cmini__nav:hover{background:var(--soft);color:var(--accent-text)}
.cmini__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;text-align:center}
.cmini__dow{font-size:10px;color:var(--muted);font-weight:700;padding:2px 0}
.cmini__d{font-size:11px;padding:4px 0;border-radius:6px;cursor:pointer}
.cmini__d:hover{background:var(--soft)}
.cmini__d.oth{color:var(--line-strong)}
.cmini__d.today{color:var(--on-accent);background:var(--accent);font-weight:700}
.cmini__d.sel:not(.today){box-shadow:inset 0 0 0 2px var(--accent);font-weight:700}
.calmain{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none;overflow:hidden}
.caltop{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);flex:none}
.calt__nav{font-size:18px}
.caltop__lab{font-size:16px;font-weight:800;margin-left:4px}
.calseg{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.calvb{border:none;background:var(--panel);padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.calvb+.calvb{border-left:1px solid var(--line)}
.calvb.is-active{background:var(--accent);color:var(--on-accent)}
.calgrid{display:flex;flex-direction:column;min-height:0;flex:1}
.calgrid__hd{display:flex;flex:none;border-bottom:1px solid var(--line)}
.calgutter__sp{width:56px;flex:none}
.calhd{flex:1;text-align:center;padding:7px 4px;border-left:1px solid var(--line)}
.calhd__dow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.calhd__d{display:inline-grid;place-items:center;min-width:30px;height:30px;font-size:16px;font-weight:800;margin-top:2px}
.calhd.is-today .calhd__d{background:var(--accent);color:var(--on-accent);border-radius:50%}
.calad{display:flex;flex:none;border-bottom:1px solid var(--line);background:var(--soft-2)}
.calad__lab{width:56px;flex:none;font-size:11px;color:var(--muted);padding:5px;text-align:right;text-transform:uppercase;letter-spacing:.3px}
.calad__cell{flex:1;border-left:1px solid var(--line);padding:3px;min-height:24px;display:flex;flex-direction:column;gap:2px}
.calad__ev{font-size:12.5px;font-weight:600;padding:2px 7px;border-radius:6px;background-color:color-mix(in srgb, var(--evc) 22%, var(--panel));border-left:3px solid var(--evc);color:var(--txt);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calgrid__body{flex:1;overflow-y:auto;display:flex;position:relative}
.calgutter{width:56px;flex:none}
.calhr{position:relative;border-top:1px solid var(--line)}
.calhr span{position:absolute;top:-8px;right:8px;font-size:12.5px;font-weight:600;color:var(--muted)}   /* .1315: godziny po lewej byly nieczytelne (10px) */
.calcol{flex:1;position:relative;border-left:1px solid var(--line)}
.calline{position:absolute;left:0;right:0;border-top:1px solid var(--soft)}
.calnow{position:absolute;left:0;right:0;border-top:2px solid #ef4444;z-index:5}
.calnow::before{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:#ef4444}
.calev{position:absolute;border-radius:8px;padding:5px 9px;font-size:13px;line-height:1.3;overflow:hidden;cursor:pointer;background-color:color-mix(in srgb, var(--evc) 20%, var(--panel));border-left:3px solid var(--evc);color:var(--txt);box-shadow:none;transition:box-shadow var(--tr),transform var(--tr)}
.calev:hover{box-shadow:none;z-index:6;transform:translateY(-1px)}
.calev__h{font-weight:800;color:var(--evc)}
.calev__t{font-weight:600}   /* .1318: powrot do rozmiaru z .calev (13 px) — 14 px rozpychalo kafelki */
.calev__s{display:block;font-size:11.5px;font-weight:600;color:var(--txt);   /* .1319 (Pawel: „mocniejszy kolor, moze czarny”): druga linia byla szara jak podpis, a niesie salke, klienta i numer zadania */overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calmonth{display:flex;flex-direction:column;flex:1;min-height:0}
.calmonth__hd{display:grid;grid-template-columns:repeat(7,1fr);flex:none;border-bottom:1px solid var(--line)}
.calmh{padding:7px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.calmonth__grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;flex:1;min-height:0;overflow-y:auto}
.calmc{border-left:1px solid var(--line);border-top:1px solid var(--line);padding:4px 5px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-height:84px}
.calmc:hover{background:var(--soft-2)}
.calmc.oth{background:rgba(15,23,41,.015)}
.calmc.oth .calmc__d{color:var(--line-strong)}
.calmc__d{font-size:12px;font-weight:700;align-self:flex-start;min-width:22px;height:22px;display:grid;place-items:center;border-radius:50%}
.calmc.is-today .calmc__d{background:var(--accent);color:var(--on-accent)}
.calchip{font-size:11px;padding:1px 6px;border-radius:5px;background-color:color-mix(in srgb, var(--evc) 20%, var(--panel));border-left:3px solid var(--evc);color:var(--txt);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calchip b{color:var(--evc)}
.calmore{font-size:10.5px;color:var(--muted);font-weight:600;cursor:pointer;padding:0 4px}
.calmore:hover{color:var(--accent-text)}
.cpop{width:340px;max-width:92vw;padding:0 16px 14px}
.cpop__bar{height:6px;margin:0 -16px 12px}
.cpop__x{position:absolute;top:9px;right:9px;border:none;background:transparent;cursor:pointer;font-size:13px;color:var(--muted);border-radius:6px;width:24px;height:24px}
.cpop__x:hover{background:var(--soft);color:var(--txt)}
.cpop__t{margin:2px 0 10px;font-size:16px;padding-right:24px}
.cpop__row{font-size:13px;color:var(--txt);margin:6px 0;display:flex;gap:7px;align-items:flex-start}
.cpop__int{color:var(--muted)}
.cpop__sec{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700;margin:11px 0 6px;border-top:1px solid var(--line);padding-top:9px}
.cpop__u{display:flex;align-items:center;gap:8px;font-size:13px;margin:5px 0}
.cpop__av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--on-accent);font-size:10px;font-weight:700;flex:none}
.cpop__org{font-size:11px;color:var(--muted);font-weight:600}
.cpop__op{font-size:13px;color:#374151;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);line-height:1.5}
.cpop__foot{margin-top:11px;padding-top:9px;border-top:1px solid var(--line);display:flex;gap:7px}
.cpop__rsvp{display:flex;gap:6px;margin:0 0 10px}
.rsvpb{flex:1;border:1px solid var(--field-line);background:var(--panel);border-radius:8px;padding:6px 4px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);transition:all var(--tr)}
.rsvpb:hover{border-color:var(--accent-text);color:var(--accent-text)}
.rsvpb--tak.is-on{background:#15a05a;border-color:#15a05a;color:var(--on-accent)}
.rsvpb--moze.is-on{background:#d97706;border-color:#d97706;color:var(--on-accent)}
.rsvpb--nie.is-on{background:#dc2626;border-color:#dc2626;color:var(--on-accent)}
.cpop__u{justify-content:flex-start}
.cpop__un{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsvp{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;white-space:nowrap;flex:none}
.rsvp--y{background:#f0fdf4;color:#15803d}
.rsvp--m{background:#fffbeb;color:#b45309}
.rsvp--n{background:#fef2f2;color:#b91c1c}
.rsvp--c{background:var(--soft);color:var(--muted)}
.cffind{width:100%;justify-content:center;margin-bottom:11px;color:var(--accent-text);border-color:var(--accent-soft);background:var(--accent-soft)}
.cffind:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
.cfslots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.cfslots:empty{display:none}
.cfslots__h{flex-basis:100%;font-size:12px;color:var(--muted);font-weight:600}
.cfslot{border:1px solid var(--accent-text);background:var(--panel);color:var(--accent-text);border-radius:8px;padding:4px 11px;font-size:13px;font-weight:600;cursor:pointer}
.cfslot:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
/* ===== EDYTOR ROLI — dluga formatka z WLASNYM przewijaniem i przyklejonym paskiem zapisu =====
   Zgloszenie Pawla 2026-08-10: "nawet na dol nie moge zejsc do zapisania ustawien". Lista modulow
   urosla do 24 pozycji w 7 grupach; przycisk "Zapisz" na koncu dlugiej tresci = formularz, ktorego
   NIE DA SIE zapisac. Naglowek i pasek akcji stoja, przewija sie WYLACZNIE srodek. */
.rolemodal{display:flex;flex-direction:column;max-height:min(88vh,880px);padding-bottom:0}
.rolemodal__body{overflow:auto;flex:1;min-height:0;padding-right:4px;margin-right:-4px}
.rolemodal__bar{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--soft);
  margin:0 -20px;padding:12px 20px;border-radius:0 0 16px 16px}
/* Siatka modulow: STALA kolumna kontrolki, zeby przelaczniki tworzyly rowna os, a nie schodki. */
.rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-top:8px}
.rolehd{grid-column:1/-1;margin:14px 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--soft);padding-bottom:4px}
.rolehd:first-child{margin-top:2px}
.rolerow{display:grid;grid-template-columns:1fr 112px;align-items:center;gap:10px;
  font-size:13px;font-weight:400;padding:3px 0;min-height:30px}
.rolerow__n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.rolerow__s{width:112px;box-sizing:border-box;border:1px solid var(--field-line);border-radius:8px;
  padding:4px 8px;font:inherit;font-size:12px;background:var(--panel);color:var(--txt);cursor:pointer}
.rolerow__s:focus{outline:none;border-color:var(--accent-text);box-shadow:var(--ring)}
.rolerow:hover .rolerow__s{border-color:var(--accent-text)}
/* Modul, o ktorym rola NIE decyduje (dostaje go kazdy zalogowany): pokazany, ale bez przelacznika
   i z podanym powodem. Samo pominiecie wygladalo jak brak/przeoczenie — pytanie Pawla o "Apki". */
.rolerow--info .rolerow__n{color:var(--muted)}
.rolerow__i{font-size:11.5px;color:var(--muted);text-align:center;border:1px dashed var(--line);
  border-radius:8px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.rolegrid{grid-template-columns:1fr}}

/* Formularz nowego/edycji zdarzenia (Faza 2) */
/* 680, NIE 540. Paweł 2026-08-18 prosił o SZERSZĄ formatkę, a ja ją WYDŁUŻYŁEM — przez co przycisk
   zapisu uciekł pod dolną krawędź ekranu. Szerzej = mniej wierszy = mniej przewijania. */
/* KARTA EDYCJI WPISU — szersza i wyzsza (zgloszenie Pawla 2026-08-19: „karta edycji wpisu troche
   wieksza"). 680 -> 840 px; przy nizszych ekranach okno i tak przewija sie w srodku, wiec zysk
   idzie w pola, nie w przewijanie. */
.calmodal__card{max-width:840px}
/* .1138: 48 px oddechu nad i pod oknem to na formatce zdarzenia czysta strata — okno i tak jest
   najwyzsze w aplikacji. 24 px wystarcza, zeby nie kleilo sie do krawedzi, i oddaje 48 px tresci. */
.calmodal{padding:24px 16px}
.calmodal__card .cfgrow{margin-bottom:11px}
.calmodal__card .cfgrow>label{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px;display:block}
.calmodal__card .nfinput,.calmodal__card .nftext{width:100%;box-sizing:border-box;border:1px solid var(--field-line);border-radius:9px;padding:8px 11px;font:inherit;font-size:14px;background:var(--panel);color:var(--txt)}
.calmodal__card .nftext{resize:vertical;line-height:1.5}
.calmodal__card .nfinput:focus,.calmodal__card .nftext:focus{outline:none;border-color:var(--accent-text);box-shadow:var(--ring)}
.calmodal__card .cfgrow--chk{display:flex;flex-direction:row;align-items:center;gap:8px}
.calmodal__card .cfgrow--chk>label{margin:0}
.calmodal__card .cfgrow--chk input{width:17px;height:17px;accent-color:var(--accent)}
.calmodal__when,.calmodal__r2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calmodal__dt{display:flex;gap:7px}
.calmodal__dt .nfinput{flex:1;min-width:0}
.calmodal__dt .cfTime{max-width:104px;flex:none}
.calmodal__opts{display:flex;flex-wrap:wrap;gap:7px 16px;padding:9px 11px;background:var(--soft);border:1px solid var(--line);border-radius:9px;max-height:128px;overflow:auto}
.calmodal__cb{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;font-weight:600;color:var(--txt)}
.calmodal__cb input{width:15px;height:15px;accent-color:var(--accent)}
.calmodal__cb small{color:var(--muted);font-weight:400}
/* Formularz zdarzenia — rozwijane listy (uczestnicy/sale) + tryb miejsca */
.cfdrop{border:1px solid var(--line);border-radius:9px;background:var(--panel);overflow:hidden}
.cfdrop>summary{cursor:pointer;list-style:none;padding:9px 11px;font-size:13px;font-weight:600;color:var(--txt);user-select:none}
.cfdrop>summary::-webkit-details-marker{display:none}
.cfdrop>summary::before{content:"▸ ";color:var(--muted)}
.cfdrop[open]>summary::before{content:"▾ "}
.cfdrop__list{display:flex;flex-direction:column;gap:8px;padding:4px 11px 11px;max-height:170px;overflow:auto;border-top:1px solid var(--line)}
.cfsale{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.calmodal__card .nfseg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:0}
.calmodal__dot{width:11px;height:11px;border-radius:4px;flex:none}
/* KOLIZJA TERMINU POD DATAMI (.1253, zgloszenie Stefana Ocetkiewicza) — „czerwony napis, ze podany
   zakres dat koliduje z jakims innym zdarzeniem". Nie blokuje zapisu: to OSTRZEZENIE, bo nakladajace
   sie wpisy bywaja swiadome (np. „cały dzień" konferencja + krotkie spotkanie w srodku). */
.cfkonf{margin:-2px 16px 10px;padding:8px 11px;border:1px solid #fecaca;background:#fef2f2;border-radius:9px;color:#b91c1c;font-size:12.5px;line-height:1.5}
.cfkonf[hidden]{display:none}
.cfkonf ul{margin:4px 0 4px 2px;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.cfkonf small{color:#9f1239;opacity:.85}
.cfkonf__l{background:none;border:none;padding:0;font:inherit;color:#b91c1c;text-decoration:underline;cursor:pointer}
.cfkonf__l:hover{color:#7f1d1d}
.cfkonf__kto{opacity:.8}
.cfavail{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.cfavail:empty{display:none}
.cfa{font-size:12px;padding:5px 9px;border-radius:8px;line-height:1.45}
.cfa--ok{background:#f0fdf4;color:#15803d;border:1px solid #dcfce7}
.cfa--bad{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.cfa--warn{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.cfa__sug{display:inline-flex;flex-wrap:wrap;gap:5px;margin-left:4px;align-items:center}
.cfa__sugb{border:1px solid var(--accent-text);background:var(--accent-soft);color:var(--accent-text);border-radius:7px;padding:1px 9px;font-size:12px;font-weight:600;cursor:pointer}
.cfa__sugb:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
.cfa__none{color:var(--muted);font-style:italic;margin-left:4px}

/* ===== CZAT natywny ===== */
.czat-split{display:grid;grid-template-columns:300px 1fr;gap:14px;height:calc(100vh - 150px);min-height:420px}
@media(max-width:760px){.czat-split{grid-template-columns:1fr;height:auto}}
.czat-contacts{border:1px solid var(--line);border-radius:12px;overflow-y:auto;background:var(--panel)}
.czat-c{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--line);cursor:pointer}
.czat-c:hover{background:var(--accent-soft)}
.czat-c.is-sel{background:var(--accent-soft)}
/* 129: dyskusje zamknięte razem z zadaniem — zwinięta sekcja na dole listy + rozmowa tylko do odczytu */
.czat-csec{display:flex;align-items:center;gap:8px;padding:8px 11px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--soft);font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.czat-csec:hover{background:var(--accent-soft)}
.czat-c--zamk{opacity:.72}
.czat-zamk{margin-left:6px;font-size:11px;color:var(--muted);white-space:nowrap}
.czat-zamkbar{margin:0 10px 6px;padding:7px 10px;border-radius:8px;background:var(--soft);border:1px solid var(--line);font-size:12px;color:var(--muted)}
.czat-input--zamk{opacity:.55}
.czat-c__m{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.czat-c__m b{font-size:13px}
.czat-c__m small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.czat-av{position:relative;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.czat-av.sm{width:30px;height:30px;flex-basis:30px;font-size:12px}
.czat-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid var(--panel)}
.czat-dot.on{background:#1D9E75}
.czat-dot.off{background:#c0392b}
.czat-unread{background:var(--accent);color:var(--on-accent);border-radius:10px;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.czat-conv{border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;background:var(--panel);overflow:hidden}
.czat-conv__h{display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line)}
.czat-conv__h small{margin-left:auto}
.czat-empty{margin:auto;color:var(--muted);padding:30px;text-align:center}
.czat-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:7px}
/* ⚠️ PASEK Z DNIEM USUNIETY (.1250). Wersja .1247 wstawiala miedzy wiadomosci przyklejona „pigulke"
   z dniem — przy przewijaniu paski NACHODZILY NA SIEBIE i robil sie nieczytelny bigos
   („piate Dzis pnia" na zrzucie Pawla). Decyzja Pawla: data stoi PRZY KAZDYM WPISIE, obok godziny
   (`.czat-b__c`), w formacie `24.08.2026 - 13:25`. Prosciej i bez nakladania. */
.czat-b{max-width:72%;align-self:flex-start;background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:12px;border-bottom-left-radius:3px;padding:7px 11px}   /* FIX 2026-07-02: było var(--soft-2) — motyw NIE definiuje --bg2, wchodził CIEMNY fallback = czarne dymki z czarnym tekstem */
.czat-b.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-color:transparent;border-radius:12px;border-bottom-right-radius:3px}   /* 2026-07-02: moje = wypełniony akcent + biały tekst (accent-soft zlewał się z tłem — strony rozmowy były nieodróżnialne) */
.czat-b__t{display:block;font-size:13px;white-space:pre-wrap;word-break:break-word}
.czat-b__c{display:block;text-align:right;color:var(--muted);font-size:10px;margin-top:2px}
.czat-input{display:flex;gap:10px;align-items:flex-end;padding:14px 16px;border-top:2px solid var(--accent-text);background:var(--accent-soft)}
.czat-input input[type=text],.czat-input input:not([type]){flex:1;min-width:0}
.czat-ta{flex:1;min-width:0;min-height:48px;max-height:140px;resize:none;font-family:inherit;font-size:14.5px;line-height:1.45;padding:12px 14px;border:2px solid var(--accent-text);border-radius:12px;background:var(--panel);color:inherit;box-shadow:none}
.czat-ta::placeholder{color:var(--muted)}
.czat-ta:focus{outline:none;box-shadow:none}
.czat-send{align-self:stretch;min-height:48px;padding:0 22px;font-size:14px;font-weight:700}
.czat-clip-btn{align-self:center;font-size:20px;line-height:1}
/* ===== PASEK FILTRÓW (wzór Airtable) — pigułki, spójna wysokość, czysto ===== */
.fbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;padding:9px 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.fbar__lbl{font-size:12px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:5px;padding-left:2px}
.fbar__sp{flex:1}
.fpill{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--field-line);border-radius:9px;background:transparent;color:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .12s,background .12s}
.fpill:hover{border-color:var(--accent-text)}
.fpill.is-on{border-color:var(--accent-text);background:var(--accent-soft);color:var(--accent-text)}
.fpill .fchev{opacity:.45;font-size:10px;margin-left:1px}
/* PASEK KART PRACY — porzadkowanie .950 (zgloszenie Pawla: „balagan przyciskow, wszystko rozstrzelone").
   TRZY GATUNKI KONTROLEK MAJA TERAZ TRZY WYGLADY, bo wczesniej filtr, tryb i akcja byly identyczna pigulka:
     .fmc   = przelacznik miesiaca (jedna kontrolka zamiast dwoch dat + dwoch przyciskow),
     .fchip = WLACZONY filtr z krzyzykiem (filtr wylaczony nie zajmuje juz miejsca — chowa sie pod „+ filtr"),
     .fpill.is-on (wypelniony) = TRYB, w ktorym jestes; .fico = akcja (ikona po prawej). */
.fmc{display:inline-flex;align-items:center;gap:2px;height:34px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.fmc button{height:32px;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0 9px;white-space:nowrap}
.fmc button:hover{background:var(--accent-soft);color:var(--accent-text)}
.fmc .fmc__t{min-width:118px;text-align:center;font-weight:700}
.fchip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--accent-text);border-radius:9px;background:var(--accent-soft);color:var(--accent-text);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit}
/* DESIGN 2.9 §8.5: rzad chipow filtrow POD paskiem narzedzi — jeden chip = jeden zalozony filtr,
   kazdy ze swoim krzyzykiem; „Wyczysc filtry" dopiero przy dwoch. */
.fchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 12px}
.fchips .fchip{margin:0}
.fchips__n{font-size:12px;color:var(--muted);margin-left:2px}
.fchip__x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.fchip__x:hover{background:var(--accent-ring)}
.fchip--all{background:transparent;color:var(--muted);border-color:var(--field-line);cursor:pointer;font-weight:600}
.fchip--all:hover{color:var(--txt);border-color:var(--txt)}
.fchip i{font-style:normal;opacity:.6;font-size:12px}
.fchip:hover i{opacity:1}
.fbar__sep{width:1px;height:22px;background:var(--line);margin:0 2px}
.fpill--tryb.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--field-line);border-radius:9px;background:transparent;color:var(--muted);font-size:15px;cursor:pointer;font-family:inherit}
.fico:hover{border-color:var(--accent-text);color:var(--accent-text)}
.fdate{height:34px;padding:0 10px;border:1px solid var(--field-line);border-radius:9px;background:var(--panel);color:inherit;font-size:13px;font-family:inherit}
.fdate:focus{outline:none;border-color:var(--accent-text)}
.fpop{position:fixed;z-index:600;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:none;min-width:256px;padding:8px;font-size:13px}
.fpop__o{display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:8px;cursor:pointer}
.fpop__o:hover{background:var(--accent-soft)}
.fpop__ft{display:flex;gap:6px;margin-top:6px;border-top:1px solid var(--line);padding-top:8px}
/* ===== PODSUMOWANIE KART (środek między filtrami a tabelą) — czysty pasek statystyk ===== */
.ksum{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px}
.ksum__l{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ksum__r{display:flex;align-items:center;gap:8px}
.kstat{font-size:13px;color:var(--muted)}
.kstat b{font-size:16px;color:inherit}
.kstat--h b{color:var(--accent-text)}
.kchip{font-size:12px;color:var(--muted);background:var(--accent-soft);border-radius:20px;padding:3px 10px;font-weight:500}
.ksum__wyk{font-size:12px;color:var(--muted);margin:-2px 2px 12px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
/* ===== BADGE WERSJI (topbar) — zielony=aktualna, czerwony=nieaktualna ===== */
/* ⛔ PIGUŁKA WERSJI ZOSTAJE W BELCE — NA TELEFONIE I NA KOMPUTERZE (decyzja Pawła 2026-09-19).
   To nie jest ozdoba chromu, tylko LAMPKA OSTRZEGAWCZA: zielona = ta karta ma aktualną wersję,
   czerwona = jest nowsza i trzeba odświeżyć. Schowana w menu konta nie ostrzega o niczym.
   Zdjąłem ją w PR #16 na podstawie §8.10 pkt 5 projektanta („dziewięć nieopisanych ikon plus pigułka”)
   — i był to błąd: rekomendacja konsultanta nie unieważnia decyzji właściciela. Odstępstwo w DESIGN §4.6a. */
.verbadge{font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.2px;cursor:pointer;white-space:nowrap;border:1px solid transparent}
.verbadge:empty{display:none}
/* §4.2: STAN NIE STOI NA SAMYM KOLORZE. Kropka niesie kolor, ale czerwona dostaje jeszcze
   slowo „Odśwież” — daltonista i ekran w slońcu mają to samo prawo do tej informacji. */
.verbadge{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:11px;font-weight:800;line-height:1}
.verbadge__k{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.verbadge:hover{filter:brightness(.94)}
.verbadge.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.verbadge.stale{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.czat-file{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:600;color:var(--accent-text);text-decoration:none;padding:3px 0;border-bottom:1px solid transparent}
.czat-file:hover{border-bottom-color:var(--accent-text)}
.czat-b.me .czat-file{color:var(--accent-text)}
.czat-fwrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.czat-fcrm{border:1px solid var(--field-line);background:transparent;color:var(--muted);border-radius:6px;font-size:11px;padding:1px 7px;cursor:pointer}
.czat-fcrm:hover{border-color:var(--accent-text);color:var(--accent-text)}
.czp-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.modalov.czatpl .modalbox{max-width:480px}
/* ROZLICZENIA E5 — tabela raportu miesięcznego */
.raptbl{border-collapse:collapse}
.raptbl th,.raptbl td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
.raptbl thead th{font-weight:600;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.raptbl tbody tr:hover{background:var(--accent-soft)}
/* Spotkania → kolumna Proces: „coś się właśnie tworzy" (krok workflow wykonywany teraz) */
.spo-working{display:inline-block;padding:2px 8px;border-radius:999px;background:#fef3c7;color:#92400e;font-size:11px;font-weight:600;animation:spoPulse 1.4s ease-in-out infinite}
@keyframes spoPulse{0%,100%{opacity:1}50%{opacity:.45}}
.spo-queued{display:inline-block;padding:2px 8px;border-radius:999px;background:#e6f1fb;color:#185fa5;font-size:11px;font-weight:600;animation:spoPulse 2.2s ease-in-out infinite}
/* Edytor harmonogramu crona — duży, czytelny builder (co ile · okno godzin · dni) */
.ce__big{display:flex;flex-direction:column;gap:10px;margin:8px 0;padding:12px 14px;background:var(--soft-2);border:1px solid var(--line);border-radius:12px}
.ce__big .ce__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px}
.ce__big .ce__lab{font-weight:700;min-width:118px;display:inline-flex;align-items:center;gap:5px}
.ce__big input[type=number]{width:66px;font-size:15px;padding:6px 8px;border:1px solid var(--field-line);border-radius:8px}
.ce__big select{font-size:15px;padding:6px 8px;border:1px solid var(--field-line);border-radius:8px;background:var(--panel)}
.ce__big label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.ce [hidden]{display:none!important}   /* tryb int/daily — ukrywanie ma działać mimo reguł display na .ce__int/.ce__daily */

/* ===== DZWONEK POWIADOMIEŃ (wnioski o dostęp do haseł + workflow) ===== */
.topbar__actions{position:relative}
.notifbadge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger);color:var(--on-accent);font-size:10px;font-weight:800;line-height:16px;text-align:center;box-shadow:none}
.notifbadge[hidden]{display:none}
.notifpanel{position:absolute;top:calc(100% + 8px);right:0;width:360px;max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-modal);z-index:120;padding:6px}
.notifpanel[hidden]{display:none}
/* .626: watek korespondencji mailowej na karcie zadania (oba kierunki, jak przy Zoho) */
.mailwatek{margin:6px 0 10px;max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.mailwatek__i{padding:7px 10px;border-bottom:1px solid var(--line);font-size:12.5px}
.mailwatek__i:last-child{border-bottom:0}
.mailwatek__i.is-out{background:var(--accent-soft)}
.mailwatek__h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.mailwatek__t{color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mailwatek__hd{cursor:pointer}                                  /* .666: cala pozycja watku klikalna -> tresc on-demand */
.mailwatek__hd:hover{background:var(--accent-soft)}
.mailwatek__hd:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px;border-radius:6px}
.mailwatek__ch{display:inline-block;width:11px;color:var(--muted);font-size:11px}
.mailwatek__b{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.mailwatek__tx{white-space:pre-wrap;max-height:240px;overflow:auto;font-size:12.5px;line-height:1.5;color:var(--txt)}
.mailwatek:has(.mailwatek__b:not([hidden])){max-height:520px}
/* .1368: naglowek ROZMOWY — pokazuje sie TYLKO gdy do zadania przypieto wiecej niz jedna korespondencje
   (zgloszenie Pawla: przy kilku watkach wiadomosci zlewaly sie w jedna liste po dacie). Przy jednym
   watku wyglad zostaje bez zmian — dlatego nie ma tu zadnych marginesow "na zapas". */
.mailwatek__grp{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin:10px 0 -4px;font-size:12px;font-weight:700;color:var(--muted)}
.mailwatek__grp .mailwatek__gt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ADR-0021 AKTYWNOSC rekordu — wzorowane na .mailwatek, ale z liczba porzadkowa i kolumna "kto".
   ⚠️ OSOBNE klasy, NIE rozszerzenie .tl__row: tamta jest stylowana dwa razy (tu i w motywie) i zyje
   takze na pulpicie oraz w kalendarzu — zmiana przeciekalaby poza karty. */
.aktlist{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.akt__i{display:grid;grid-template-columns:34px 9px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
.akt__i:last-child{border-bottom:0}
.akt__i[data-open],.akt__i[data-tlurl],.akt__i[data-mailuid]{cursor:pointer}
.akt__i:hover{background:var(--accent-soft)}
.akt__lp{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;font-size:11.5px}
.akt__m{min-width:0}
.akt__h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.akt__h b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akt__t{color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.akt__g--brak{color:var(--muted);cursor:help}
.akt__kto{color:var(--muted);font-size:11.5px;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.akt__err{margin-bottom:8px;font-size:12.5px;color:var(--danger)}
@media(max-width:640px){.akt__i{grid-template-columns:26px 9px 1fr}.akt__kto{display:none}}   /* na telefonie "kto" znika z osobnej kolumny — temat wazniejszy niz autor */   /* rozwinieta tresc potrzebuje miejsca; bez :has() zostaje przewijanie */
/* .1127: para przyciskow naglowka dzwonka (⚙ wybor rodzajow + 🔊 dzwiek).
   ⚠️ MUSI byc bardziej szczegolowe niz `.notifhd>span{flex:1}` — inaczej opakowanie rozpycha naglowek. */
/* ── EKRAN „Moje powiadomienia" (.1127): grupy per modul, wiersz = przelacznik + nazwa + powod. */
.pwd-grupa{margin-top:14px}
.pwd-grupa h4{margin:0 0 6px;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pwd-poz{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;cursor:pointer;background:var(--panel)}
.pwd-poz:hover{background:var(--soft)}
.pwd-poz.is-stale{cursor:default;opacity:.85;background:var(--soft)}
.pwd-poz input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}
.pwd-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pwd-txt b{font-size:13px}
.pwd-txt small{color:var(--muted);font-size:12px;line-height:1.45}
.pwd-txt i{color:var(--muted);font-style:italic}

/* ===== BRIEFING KLIENTA (moc ② — „Przygotuj mnie") ===== */
.briefov{position:fixed;inset:0;z-index:200;background:rgba(23,33,28,.45);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.briefbox{background:var(--panel);width:min(720px,96vw);border-radius:14px;box-shadow:var(--sh-modal);overflow:hidden}
.briefhd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font-size:15px;color:var(--txt)}
.briefclose{cursor:pointer;color:var(--muted);font-size:16px;padding:2px 8px;border-radius:6px;user-select:none}
.briefclose:hover{background:var(--soft)}
.briefbody{padding:18px;max-height:72vh;overflow:auto}
.briefmd{font-size:14px;line-height:1.6;color:var(--txt)}

/* ===== Q2: załączniki z korespondencji Zoho (screeny klienta) ===== */
.konw-atts{margin:10px 0;padding:9px 11px;border:1px dashed var(--line);border-radius:9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--soft)}
.konw-att{display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.konw-att a{color:var(--accent-text);text-decoration:none;font-weight:600}
.konw-att a:hover{text-decoration:underline}
/* inline screeny (obrazki) w wątku Zoho pod wiadomością + w pasku, oraz w czacie */
.konw-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.konw-imgw{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}
.konw-img,.czat-img{max-width:220px;max-height:200px;border-radius:8px;border:1px solid var(--line);cursor:pointer;display:block;object-fit:cover}
/* .1344 (zgloszenie Pawla: „w zoho desk dobre i mail klienta dobrze, a u nas..."): obrazek WKLEJONY
   W TRESC to czesc wiadomosci, nie zalacznik — u klienta i w Desku ma pelna szerokosc, a u nas byl
   znaczkiem 220x200 przycietym `object-fit:cover` (czyli jeszcze obcietym!). Zrzut ekranu w takiej
   miniaturze jest nieczytelny. Miniatury zalacznikow zostaja male — to inna rzecz. */
/* .1345: rozmiar czytelny, ale nie na pol ekranu — klikniecie i tak powieksza (zgloszenie Pawla).
   `contain` zamiast `cover`: zrzut ekranu ma byc CALY, tylko mniejszy — nie przyciety w kadrze. */
.konw-imgw>a>.konw-img{max-width:min(100%,460px);max-height:340px;width:auto;object-fit:contain}
.konw-img:hover,.czat-img:hover{opacity:.92}
.czat-fwrap--img{align-items:flex-start}
/* podgląd po najechaniu — powiększony obraz, fixed (nic nie przycina), nad wszystkim, nie łapie myszy */
#imgZoom{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:none;z-index:99999;max-width:min(92vw,1000px);max-height:92vh;border-radius:10px;border:1px solid var(--line);box-shadow:none;background:var(--panel);pointer-events:none}
/* reakcje emoji na wiadomości czatu */
.czat-res{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;align-items:center}
.czat-b.me .czat-res{justify-content:flex-end}
.czat-re{display:inline-flex;align-items:center;gap:3px;font-size:12px;line-height:1;padding:2px 8px;border:1px solid var(--field-line);border-radius:999px;background:var(--panel);color:var(--txt);cursor:pointer}
.czat-re:hover{background:var(--soft)}
.czat-re.on{border-color:var(--accent-text);background:#eef0ff;font-weight:600}
.czat-re__n{font-size:11px;color:var(--muted)}
.czat-re.on .czat-re__n{color:var(--accent-text)}
.czat-re--add{opacity:.55;padding:2px 6px}
.czat-re--add:hover{opacity:1}
.czat-repal{position:fixed;z-index:99999;display:flex;gap:2px;padding:5px 7px;background:var(--panel);border:1px solid var(--line);border-radius:999px;box-shadow:none}
.czat-repick{font-size:19px;line-height:1;background:none;border:none;cursor:pointer;padding:2px 5px;border-radius:8px}
.czat-repick:hover{background:var(--soft);transform:scale(1.15)}
/* most SMS↔grupa: uczestnicy-telefony (modal) + baner kosztu */
.cgsms-row{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.cgsms-row input{flex:1;min-width:130px}
.cgsms-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.cgsms-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:#eef0ff}
.cgsms-chip button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;padding:0 2px}
.cgsms-chip button:hover{color:var(--danger)}
.czat-smsbanner{font-size:12px;color:#9a3412;background:#fff7ed;border-bottom:1px solid #fed7aa;padding:6px 14px}

/* ===== KATALOG WIEDZY (W3) — widok „Wiedza": picker obszaru, karty, wyniki, joby ingestu ===== */
.wz{display:flex;flex-direction:column;gap:14px;padding:4px 2px}
.wz__bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* WIEDZA: katalogi główne (systemy) → obszary → obszar (breadcrumb + hero „Poradź się" + dokumenty pod rozwijaniem) */
.wzcrumb{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.wzcr{background:none;border:0;padding:5px 8px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;color:var(--accent-text);display:inline-flex;align-items:center;gap:5px}
.wzcr:hover{background:var(--accent-soft)}
.wzcr--cur{color:var(--txt);cursor:default}.wzcr--cur:hover{background:none}
.wzcr__sep{color:var(--muted)}
.wzcrumb__sp{flex:1}
.wzsys{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.wzsystile{display:flex;align-items:center;gap:15px;padding:22px 20px;border:1px solid var(--field-line);border-radius:16px;background:var(--panel);cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s}
.wzsystile:hover{border-color:var(--accent-text);box-shadow:none}
.wzsystile__ico{font-size:36px;flex:none;line-height:1}
.wzsystile__main{flex:1;min-width:0}
.wzsystile__main b{font-size:17px;display:block;margin-bottom:2px}
.wzsystile__main small{color:var(--muted);font-size:13px}
.wzsystile__go{font-size:24px;color:var(--muted);flex:none}
.wzhero{border:1px solid var(--line);border-radius:16px;background:var(--accent-soft);padding:18px 20px;margin-bottom:16px}
.wzhero__t{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.wzhero__ico{font-size:30px;line-height:1}
.wzhero__t b{font-size:18px;display:block}
.wzhero__t small{color:var(--muted);font-size:13px;display:block;margin-top:2px}
.wzhero__ask{display:flex;gap:10px;align-items:center}
.wzhero__in{flex:1;border:1px solid var(--field-line);border-radius:11px;padding:13px 15px;font-size:15px;background:var(--panel)}
.wzhero__in:focus{outline:none;border-color:var(--accent-text);box-shadow:var(--ring)}
.wzhero__ask .btn--primary{padding:12px 20px;font-size:15px;white-space:nowrap}
.wzhero__sub{margin-top:9px}
.wzlink{background:none;border:0;color:var(--accent-text);cursor:pointer;font-size:13px;font-weight:600;padding:0}
.wzlink:hover{text-decoration:underline}
.wzdetails{border:1px solid var(--line);border-radius:12px;margin-top:16px;background:var(--panel)}
.wzdetails>summary{cursor:pointer;padding:13px 15px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:9px;list-style:none;user-select:none}
.wzdetails>summary::-webkit-details-marker{display:none}
.wzdetails__lab::before{content:"▸ ";color:var(--muted)}
.wzdetails[open]>summary .wzdetails__lab::before{content:"▾ "}
.wzdetails__n{color:var(--muted);font-weight:600}
.wzdetails__adm{margin-left:auto;display:flex;gap:6px}
.wzdetails__bd{padding:0 15px 15px}
@media(max-width:640px){.wzhero__ask{flex-direction:column;align-items:stretch}.wzhero__ask .btn--primary{width:100%}}
.wz__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.wzcard{display:flex;gap:10px;align-items:center;padding:14px;border:1px solid var(--field-line);border-radius:12px;background:var(--panel);cursor:pointer;text-align:left}
.wzcard:hover{border-color:var(--accent-text);box-shadow:none}
.wzcard__ico{font-size:22px}
.wzcard small{display:block;color:var(--muted)}
.wz__ask{display:flex;gap:8px;align-items:center}
.wz__ask input{flex:1}
.wzhit{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:6px 0;background:var(--panel)}
.wzhit__head{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.wzhit__txt{color:var(--muted);font-size:13px;line-height:1.45}
.wz__dochead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wz__dochead h3{margin:0;flex:1}
.wzjob{padding:6px 10px;border-radius:8px;margin:4px 0;font-size:13px}
.wzjob--run{background:rgba(245,158,11,.14);color:#92600a}
.wzjob--ok{background:rgba(16,185,129,.12);color:#0b7a58}
.wzjob--err{background:rgba(226,75,74,.10);color:var(--danger)}
.wznote{display:flex;flex-direction:column;gap:8px;border:1px dashed var(--line);border-radius:10px;padding:12px;margin:6px 0;background:var(--soft)}
.wznote textarea{background:var(--panel);color:var(--txt);border:1px solid var(--field-line);border-radius:8px;padding:8px;font:inherit}

/* ===== W6: półka Koncepty + pasek precedensów na leadzie ===== */
.wzhit--click{cursor:pointer}
.wzhit--click:hover{border-color:var(--accent-text)}
.wzprec{margin:10px 0 2px;padding:9px 12px;border:1px dashed var(--accent-text);border-radius:10px;background:var(--accent-soft);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wzprec__it{border:1px solid var(--accent-text);background:var(--panel);color:var(--accent-text);border-radius:999px;padding:3px 10px;font-size:12.5px;cursor:pointer;font-weight:600}
.wzprec__it:hover{background:var(--accent);color:var(--on-accent)}

/* ===== CZAT: grupy + baner zaczepki (2026-07-02) ===== */
.czat-b__who{display:block;font-size:11px;font-weight:700;color:var(--accent-text);margin-bottom:2px}
.czat-cnew{padding:8px 10px;border-bottom:1px solid var(--line);background:var(--soft)}
.czat-cnew .btn{width:100%}
.czat-av--grp{background:var(--accent-soft);color:var(--accent-text);font-size:16px}
.czatping{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:1300;display:flex;align-items:center;gap:12px;background:var(--panel);border:2px solid var(--accent-text);border-radius:14px;padding:12px 14px;box-shadow:none;max-width:560px;min-width:320px;animation:czatping-in .25s ease}
.czatping__m{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.czatping__m b{font-size:13.5px}
.czatping__m small{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes czatping-in{from{opacity:0;transform:translateX(-50%) translateY(-14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* CZAT GRUPY: równa siatka wyboru osób w modalu (2026-07-02 — .wfappr z workflow się tu rozjeżdżał) */
.cgm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;max-height:280px;overflow-y:auto;padding:2px;margin-top:6px}
.cgm-o{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:13px;background:var(--panel)}
.cgm-o span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgm-o input{accent-color:var(--accent);flex:0 0 auto;margin:0;width:16px;height:16px;padding:0}   /* nadpisuje .addfld input{width:100%} — checkbox brał całą szerokość i zgniatał nazwisko do 0 */
.cgm-o:hover{border-color:var(--accent-text)}
.cgm-o:has(input:checked){border-color:var(--accent-text);background:var(--accent-soft)}

/* CZAT: kontrast wnętrza MOJEGO dymka (biały tekst na akcencie) */
.czat-b.me .czat-b__c{color:rgba(255,255,255,.78)}
.czat-b.me .czat-file{color:var(--on-accent);text-decoration:underline}
.czat-b.me .muted2{color:rgba(255,255,255,.72)}
.czat-b.me .czat-fcrm{background:rgba(255,255,255,.16);color:var(--on-accent);border-color:rgba(255,255,255,.4)}

/* F5.2 — EKRAN LOGOWANIA NA JEDNYM KOLORZE. Cala paleta wyprowadzona z `--accent` przez color-mix,
   wiec klient ustawia JEDEN kolor w manifescie i przemalowuje sie caly ekran powitalny — zamiast
   dwudziestu osobnych ustawien, ktorych nikt nie wypelni. Zmienne sa zakresowane do `.login`
   (zero wplywu na reszte panelu). Zielona kropka „online" i czerwien bledu ZOSTAJA — to znaczenia,
   nie marka: zielony pod czerwony motyw znaczylby nadal „dziala". */
.login{
  --log: var(--accent);
  --log-tlo-1: color-mix(in srgb, var(--log) 26%, #0b0817);
  --log-tlo-2: color-mix(in srgb, var(--log) 9%, #06040e);
  --log-jasny: color-mix(in srgb, var(--log) 45%, #ffffff);
  --log-rdzen: color-mix(in srgb, var(--log) 18%, #ffffff);
  --log-tekst: color-mix(in srgb, var(--log) 26%, #d8d4ea);
  --log-tekst-slaby: color-mix(in srgb, var(--log) 32%, #b6b1cc);
  --log-link: color-mix(in srgb, var(--log) 18%, #d9d5ec);
}
/* ===================== LOGOWANIE (Faza 3 — ciemny 3D, Wariant B). Na KOŃCU pliku → wygrywa nad regułami glass (.login/.login__card wyżej). ===================== */
@keyframes brainSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes corePulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.12);opacity:1}}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes loginGrid{from{background-position:0 0,0 0}to{background-position:0 44px,44px 0}}
@keyframes loginOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.login{position:fixed;inset:0;overflow:hidden;padding:0 9% 0 0;display:flex;align-items:center;justify-content:flex-end;background:radial-gradient(1100px 700px at 32% 32%,var(--log-tlo-1) 0%,var(--log-tlo-2) 62%)}
.login.hidden{display:none}
.login__grid{position:absolute;left:-15%;right:-15%;bottom:-32%;height:64%;background-image:linear-gradient(color-mix(in srgb, var(--log) 22%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--log) 22%, transparent) 1px,transparent 1px);background-size:44px 44px;transform:perspective(700px) rotateX(62deg);animation:loginGrid 3s linear infinite;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.8),transparent);mask-image:linear-gradient(to top,rgba(0,0,0,.8),transparent);pointer-events:none}
.login__brainwrap{position:absolute;left:34%;top:47%;width:0;height:0;transform:translate(-50%,-50%) rotateX(var(--brx,0deg)) rotateY(var(--bry,0deg));transform-style:preserve-3d;transition:transform .18s ease-out;pointer-events:none}
.login__sphere{position:absolute;left:-190px;top:-190px;width:380px;height:380px;transform-style:preserve-3d;animation:brainSpin 18s linear infinite}
.login__sphere span{position:absolute;inset:0;border:1.5px solid color-mix(in srgb, var(--log-jasny) 34%, transparent);border-radius:50%}
.login__core{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--log-rdzen),var(--log) 45%,color-mix(in srgb, var(--log) 8%, transparent) 75%);box-shadow:0 0 90px color-mix(in srgb, var(--log) 85%, transparent),0 0 180px color-mix(in srgb, var(--log) 40%, transparent);animation:corePulse 3.4s ease-in-out infinite}
.login__orbit{position:absolute;transform-style:preserve-3d;pointer-events:none}
.login__orbit--a{left:-235px;top:-235px;width:470px;height:470px;animation:loginOrbit 9s linear infinite}
.login__orbit--a i{position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--log-jasny);box-shadow:0 0 16px var(--log-jasny)}
.login__orbit--b{left:-205px;top:-205px;width:410px;height:410px;animation:loginOrbit 13s linear infinite reverse}
.login__orbit--b i{position:absolute;left:50%;bottom:-3px;width:7px;height:7px;margin-left:-3px;border-radius:50%;background:var(--log-jasny);box-shadow:0 0 14px var(--log-jasny)}
.login__chip{position:absolute;z-index:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:9px 14px;color:var(--log-link);font-size:12px;display:flex;align-items:center;gap:8px;animation:chipFloat 7s ease-in-out infinite}
.login__chip--1{left:9%;top:16%}
.login__chip--2{left:13%;bottom:20%;animation-duration:9s;animation-delay:1.2s}
.login__chip--3{left:42%;top:11%;animation-duration:8s;animation-delay:.6s}
.login__chip .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80}
.login__card{position:relative;z-index:2;width:392px;max-width:100%;background:rgba(255,255,255,.055);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:34px;box-shadow:0 34px 90px rgba(5,0,30,.6);display:flex;flex-direction:column;gap:18px}
.login__logo{display:flex;align-items:center;gap:12px}
.login__logo .brand__mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--log),var(--log-jasny));color:#fff;font-size:18px;font-weight:800;box-shadow:0 8px 24px color-mix(in srgb, var(--log) 50%, transparent)}
.login__logo b{font-size:17px;color:#fff;display:block;line-height:1.2}
.login__logo small{font-size:11.5px;color:var(--log-tekst)}
.login__hello h2{margin:0;font-size:23px;font-weight:800;color:#fff;letter-spacing:-.01em}
.login__hello p{margin:4px 0 0;font-size:13px;color:var(--log-tekst)}
.login .brand{color:#fff}
.login .login__sub{color:var(--log-tekst);margin:0}
.login .login__hint{color:var(--log-tekst-slaby);font-size:11.5px;margin:0}
.login .field{gap:6px;margin:0}
.login .field span{font-size:12.5px;color:var(--log-tekst)}
.login .field input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:12px;padding:13px 15px;font-size:13.5px}
.login .field input::placeholder{color:var(--log-tekst-slaby)}
.login .field input:focus{outline:none;border-color:color-mix(in srgb, var(--log-jasny) 65%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--log) 18%, transparent)}
.login .btn--primary{width:100%;margin-top:4px;background:linear-gradient(135deg,var(--log),var(--log-jasny));border:none;color:#fff;border-radius:12px;padding:14px;font-size:14px;font-weight:800;box-shadow:0 12px 30px color-mix(in srgb, var(--log) 45%, transparent)}
.login .btn--primary:hover{filter:brightness(1.1)}
.login__forgot{color:var(--log-link);font-size:12.5px;text-align:center}
.login__forgot:hover{color:#fff}
.login .login__err{color:#ffb4b4;font-size:12.5px;margin:0;text-align:center}
@media(max-width:820px){.login{justify-content:center;padding:0 20px}.login__brainwrap,.login__chip{display:none}}

/* ===================== EKRAN STARTOWY TELEFONU — KAFLE (ADR-0067 FAZA 2). Jezyk graficzny LAUNCHERA (ciemne tlo, szklo,
   gradientowa ramka, poswiata) — zgodny z makieta Pawla; ikony wektorowe z zestawu panelu (NAV_ICONS), nigdy sama ikona bez podpisu. */
.app.view-start .main{padding:0;display:flex;flex-direction:column}
.app.view-start #vStart{flex:1;min-height:0;display:block;background:var(--bg)}   /* DESIGN.md: ekran startowy jest JASNY */
.app.view-start .gcomposer{display:none}   /* pasek asystenta nie ma czego szukac pod kaflami (Pawel: „pod nimi stary interfejs") */

/* ===================== SZKIELET EKRANU TELEFONOWEGO (ADR-0067 FAZA 2, przeglad projektowy): tytul + tresc + JEDNO duze dzialanie na dole ===== */
.tel__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 6px;font-size:17px}
/* .1854 (zgloszenie Pawla): plywajacy przycisk ➕/✎ ZASLANIAL ostatnia pozycje listy.
   FAB stoi 76 px nad dolem ekranu i sam ma 64 px wysokosci, wiec tresc potrzebuje pod soba
   pasek dolnego menu + 140 px. Dotad bylo 96 px — czyli mniej niz sam przycisk. */
.tel__body{padding:0 12px calc(74px + env(safe-area-inset-bottom,0px) + 140px)}
.tel__lad{padding:24px;text-align:center;color:var(--muted)}
.tel__fab{position:fixed;right:18px;bottom:calc(74px + env(safe-area-inset-bottom,0px) + 12px);width:64px;height:64px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font-size:34px;line-height:1;display:grid;place-items:center;box-shadow:none;cursor:pointer;z-index:40}
.tel__fab:active{transform:scale(.94)}
@media (min-width:901px){.tel__fab{display:none}}
/* kalendarz — os dnia */
.caltel{display:flex;flex-direction:column;min-height:0;flex:1}
.caltel__pasek{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px 10px 4px}
.caltel__d{border:0;background:transparent;border-radius:14px;padding:6px 0;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;color:var(--txt);min-height:52px}
.caltel__d span{font-size:11px;color:var(--muted)}
.caltel__d b{font-size:17px;font-weight:700}
.caltel__d.is-dzis b{color:var(--accent-text)}
.caltel__d.is-on{background:var(--accent);color:var(--on-accent);box-shadow:none}
.caltel__d.is-on span,.caltel__d.is-on b{color:var(--on-accent)}
.caltel__tyt{padding:6px 14px 2px;font-size:18px;font-weight:700}
.caltel__lista{flex:1;overflow-y:auto;padding:4px 10px calc(74px + env(safe-area-inset-bottom,0px) + 140px)}   /* .1854: to samo co .tel__body — FAB ➕ nie moze zaslaniac ostatniego wpisu dnia */
.caltel__lista .calag__ev{margin:8px 0;padding:14px 12px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:none;min-height:56px}
.caltel__teraz{position:relative;height:2px;background:#ef4444;margin:10px 0}
.caltel__teraz span{position:absolute;left:0;top:-9px;font-size:11px;font-weight:700;color:var(--on-accent);background:#ef4444;border-radius:999px;padding:1px 7px}
.caltel__pusto{padding:40px 20px;text-align:center;color:var(--muted);font-size:15px;line-height:1.5}
@media (max-width:900px){.calmain .caltop .calt__nav,.calmain .caltop .calt__today,.calmain .caltop .caltop__lab{display:none}}   /* na telefonie nawigacja dni = pasek dat i gest; zostaje tylko wybor widoku */
/* zadania — ekran „Dzis" */

/* CZAT/NOTATNIK na telefonie (ADR-0067 .1848): otwarta rozmowa = caly ekran, lista wraca przez „‹ Rozmowy"; 🎙 dyktowanie w notatniku */
@media (max-width:900px){.czat-split{grid-template-columns:1fr;height:auto}.czat-split.is-conv > :first-child{display:none}.czat-split.is-conv .czat-conv{min-height:calc(100dvh - 140px)}}
.czat-mic-btn{font-size:20px;width:44px;height:44px;border-radius:12px}
@media (max-width:900px){.czat-conv__h small.muted2{display:none}}   /* na telefonie naglowek notatnika bez dlugiego objasnienia — zostaje nazwa i akcje */
.czat-mic-btn.is-rec{background:#ef4444;color:var(--on-accent);animation:kafelPuls 1s ease-in-out infinite}
@keyframes kafelPuls{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ZDJECIE-FILM z telefonu (ADR-0067 .1849): aparat -> miniatura -> klient -> opis -> jeden przycisk Zapisz */
.zdjtel{max-width:520px;max-height:calc(100dvh - 24px);overflow:auto}   /* okno wyzsze niz ekran telefonu przewija sie w srodku — naglowek i „Zapisz" zawsze do osiagniecia */
.zdjtel__apar{width:100%;min-height:56px;border:2px dashed var(--accent-text);border-radius:14px;background:var(--accent-soft);color:var(--accent-text);font:inherit;font-weight:700;font-size:16px;cursor:pointer;margin:10px 0}
.zdjtel__pod{display:flex;justify-content:center}
.zdjtel__pod img,.zdjtel__pod video{max-width:100%;max-height:38vh;border-radius:12px;box-shadow:none}
.zdjtel__lab{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:12px 0 6px}
.zdjtel__chips{display:flex;flex-wrap:wrap;gap:8px}
.zdjtel__chip{border:1px solid var(--field-line);background:var(--panel);border-radius:999px;padding:10px 14px;font:inherit;font-size:14px;cursor:pointer;min-height:44px}
.zdjtel__chip.is-on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.zdjtel__chip--szukaj{border-style:dashed}
.zdjtel__opis{display:flex;gap:8px;align-items:flex-end}
.zdjtel__opis textarea{flex:1;font:inherit;font-size:15px;padding:10px;border:1px solid var(--field-line);border-radius:12px;resize:vertical;min-height:56px}
.zdjtel__stan{min-height:20px;font-size:13px;color:var(--muted);margin-top:8px}
.zdjtel__zapisz{width:100%;min-height:52px;font-size:16px;margin-top:8px}

/* POCZTA na telefonie (ADR-0067 .1850): lista na caly ekran, Odebrane/Wyslane + szukajka na wierzchu, reszta pod „Wiecej", ✎ na dole, wiadomosc na caly ekran */
.mailtel__wiecej,.mailtel__back,.tel__fab--mail{display:none}
@media (max-width:900px){
  .mailtel__wiecej{display:inline-flex}
  .mailbar:not(.is-wiecej) .mailbar__r,.mailbar:not(.is-wiecej) .mailtagi,.mailbar:not(.is-wiecej) #mailNew,.mailbar:not(.is-wiecej) .mailtab[data-mbox="inne"],.mailbar:not(.is-wiecej) .mailtab[data-mbox="spam"],.mailbar:not(.is-wiecej) .mailtab[data-mbox="kosz"]{display:none}
  .mailtab{min-height:40px}
  .mailview{display:block}
  .maillist{max-height:none;height:calc(100dvh - 190px);overflow-y:auto;padding-bottom:calc(74px + env(safe-area-inset-bottom,0px) + 140px)}   /* .1854: FAB ✎ „Napisz” zaslanial ostatnia wiadomosc na liscie */
  .mailview.is-prev .maillist{display:none}
  .mailview:not(.is-prev) .mailprev{display:none}
  .mailview.is-prev .mailprev{display:block;min-height:calc(100dvh - 150px)}
  .mailtel__back{display:inline-flex;margin-bottom:8px}
  .tel__fab--mail{display:grid;font-size:26px}
  .mailview.is-prev ~ .tel__fab--mail{display:none}
}

/* DODAJ ZDARZENIE na telefonie (ADR-0067 .1851): tytul z 🎙, „kiedy" jako propozycje, klient; reszta pod „Wiecej" */
.cfkiedy{margin:8px 0 4px}
.cfkiedy__lab{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.cfkiedy__chips{display:flex;flex-wrap:wrap;gap:8px}
.cfmic{margin-left:6px;vertical-align:middle}
.cfwiecej{width:100%;margin:10px 0}
.calmodal--tel:not(.calmodal--pola) .cfgrow:has(#cfSd),.calmodal--tel:not(.calmodal--pola) .cfgrow:has(#cfEd){display:none}
.calmodal--tel:not(.is-wiecej) .cfgrow:has(#cfUczSum),.calmodal--tel:not(.is-wiecej) #cfUczInfo,.calmodal--tel:not(.is-wiecej) .cfgrow:has(#cfAllday),.calmodal--tel:not(.is-wiecej) #cfSeriaBox,.calmodal--tel:not(.is-wiecej) #cfPlaceBox,.calmodal--tel:not(.is-wiecej) .cfgrow:has(#cfPrzypBox),.calmodal--tel:not(.is-wiecej) .cfgrow:has(#cfTelBox),.calmodal--tel:not(.is-wiecej) .cfgrow:has(#cfMeetChk),.calmodal--tel:not(.is-wiecej) #cfMeetBox,.calmodal--tel:not(.is-wiecej) .cfgrow:has(#cfOpis){display:none}
.calmodal--tel .cfgrow:has(#cfTytul){display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap}
.calmodal--tel .cfgrow:has(#cfTytul) label{width:100%}
.calmodal--tel #cfTytul{flex:1;min-width:0}
/* 🎙 w kompozytorze asystenta */

/* EDYTOR UKLADU KAFLI (ADR-0067 krok 2): katalog i kolejnosc po lewej, makieta telefonu po prawej */
.kedit{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start}
@media (max-width:900px){.kedit{grid-template-columns:1fr}}
.kedit__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.kedit__ekran{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0;background:var(--panel)}
.kedit__eh{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:6px}.kedit__eh .iconbtn{margin-left:auto}
.kedit__k{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;margin:4px 0;background:var(--soft)}
.kedit__ki{width:22px;display:grid;place-items:center;color:var(--accent-text)}.kedit__kn{flex:1;font-size:14px}.kedit__ka{display:flex;gap:2px}
.kedit__dod{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kedit__save{margin-top:14px}.kedit__msg{font-size:13px;color:var(--muted);margin-left:8px}
.kedit__tel{width:300px;margin:0 auto;border-radius:36px;padding:12px;background:#111;box-shadow:none}
.kedit__telin{border-radius:26px;overflow:hidden;background:var(--bg);border:1px solid var(--line);height:560px;display:flex;flex-direction:column}
.kedit__telscr{flex:1;min-height:0;overflow:hidden}
.kedit__telscr .kafle{height:100%;min-height:0}
.kedit__telscr .kafel{min-height:0}
.kedit__telbar{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:10px;color:#cbd5e1;padding:8px 0;background:rgba(0,0,0,.35)}

/* ===================== MOBILE (Faza 4 — szuflada + dolny pasek). Lofi wg README; stylowanie wg desktopu. ===================== */
.topbar__burger{display:none;border:none;background:none;cursor:pointer;color:var(--muted);padding:6px;border-radius:8px;margin-right:2px}
.topbar__burger:hover{background:var(--soft);color:var(--accent-text)}
.navscrim{display:none}
.mtabs{display:none}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:284px;z-index:60;transform:translateX(-100%);transition:transform .25s ease;border-radius:0 18px 18px 0;box-shadow:var(--sh-modal)}
  .app.nav-open .sidebar{transform:translateX(0)}
  .nav__collapse{display:none}
  .navscrim{display:block;position:fixed;inset:0;background:rgba(23,33,28,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s}
  .app.nav-open .navscrim{opacity:1;pointer-events:auto}
  .topbar__burger{display:flex}
  .topbar__refresh{display:none}
  .gcomposer{display:none}
  .main{padding:16px 16px 90px}
  .app.view-launcher .main{padding:0}
  .launcher{padding:24px 16px 84px}
  .launcher__tiles{grid-template-columns:1fr}
  .mtabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--panel);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .mtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;cursor:pointer;color:var(--muted);font-size:10px;font-weight:600;border-radius:10px;padding:6px 0}
  .mtab svg{width:22px;height:22px}
  .mtab.is-active{color:var(--accent-text)}
}
/* MOBILE — responsywność WNĘTRZA (tabele/karty/siatki), uzupełnienie otoczki z Fazy 4 */
@media(max-width:900px){
  /* karty rekordu (lead/projekt/klient): kolumny gridu nie rozpychają się poza ekran (min-width:auto→0 → treść scrolluje/zawija zamiast wypychać track) */
  .prof{grid-template-columns:1fr}
  .prof > *{min-width:0}
  .pkpis{grid-template-columns:repeat(2,1fr)}
  .pdash{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  /* tabele: przewijanie w poziomie zamiast rozpychania strony + ciaśniejsze komórki */
  .tablewrap,.zadtblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table th,table td{padding:9px 10px;font-size:12.5px}
  /* nagłówek widoku: tytuł + akcje zawijają się zamiast wypychać */
  .view__head{flex-wrap:wrap;gap:10px}
  .view__head h2{font-size:17px}
  /* karty na mobile: „⚙ Kolumny"/resizery nieistotne; pasek filtrów przewija się w poziomie zamiast wystawać */
  .zadcolsbtn,.zadbar{display:none}
  .seg{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;max-width:100%}
  .seg::-webkit-scrollbar{height:0}
}
@media(max-width:400px){
  .kpis{grid-template-columns:1fr}   /* .pkpis zostaje 2 kolumny — DESIGN §4.3: cztery fakty 2×2 na jednej wysokosci ekranu */
}
/* MOBILE — listy jako KARTY (Część A). Karty renderuje JS tylko na ≤900px (cfgCardsHTML) */
.mcardwrap{overflow:visible;border:none;background:none;box-shadow:none}
.mcards{display:flex;flex-direction:column;gap:10px;padding:2px 2px 8px}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.mcard__top{display:flex;align-items:flex-start;gap:10px}
.mcard__title{flex:1;min-width:0;font-size:15px;font-weight:600;line-height:1.32;overflow:hidden}
.mcard__title .link{font-size:15px;font-weight:600}
.mcard__badge{flex:none;white-space:nowrap}
.mcard__meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px}
.mcard__m{font-size:12.5px;color:#374151;display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.mcard__m i{font-style:normal;color:var(--muted);opacity:.75;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
.mcard__m .cellpick{font-size:12.5px}
/* MOBILE — kalendarz jako AGENDA (Część B) */
/* .1583 (zgloszenie Pawla): AGENDA nie miala paska przewijania — `.calmain` ma `overflow:hidden`, a widoki dzien/tydzien/miesiac maja
   wlasny `.calgrid__body{overflow-y:auto}`; agenda takiego kontenera nie miala, wiec dluzsza lista byla po prostu UCINANA. */
.calag{padding:4px 2px 14px;display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;overflow-y:auto}
.calag__day{display:flex;flex-direction:column;gap:6px}
.calag__dhd{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:2px 2px 4px}
.calag__ev{display:flex;align-items:flex-start;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 13px;cursor:pointer;box-shadow:var(--shadow)}
.calag__ev:hover{border-color:var(--accent-text)}
.calag__dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px}
.calag__time{flex:none;font-size:12.5px;font-weight:700;color:var(--txt);min-width:54px}
.calag__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.calag__t{font-size:14px;font-weight:600;line-height:1.3}
.calag__sub{font-size:12px;color:var(--muted)}
.calag__empty{text-align:center;color:var(--muted);padding:40px 16px;font-size:13.5px;line-height:1.6}
@media(max-width:900px){
  .calrail{display:none}
  .caltop{flex-wrap:wrap;gap:6px;padding:8px 10px;height:auto}
  .calvb[data-calview="tydzien"]{display:none}
  #vKalendarz{overflow:auto}
  .cal{gap:0}
  .calmain{overflow:visible;background:none;border:none;box-shadow:none}
  .calag{flex:none;overflow:visible}   /* .1583: na waskim ekranie przewija sie cala strona — bez drugiego paska w srodku */
}
/* MOBILE — modale / poczta / dok Hermesa (Części C-E) */
@media(max-width:900px){
  .modalov,.acmodal{padding:14px 10px;align-items:flex-start}
  /* ⚠️ `overflow:auto` DOŁOŻONE 2026-08-18: było samo `max-height:92vh`, czyli treść wyższa niż
     ekran była PRZYCINANA bez możliwości przewinięcia — na telefonie przycisk zapisu stawał się
     nieosiągalny. Ta sama klasa, co zgłoszenie „to jak teraz mam zatwierdzić?" na dużym ekranie. */
  .modalbox,.acmodal__card,.calmodal__card{width:100%;max-width:100%;max-height:92vh;overflow:auto}
  .calmodal__when,.calmodal__r2{grid-template-columns:1fr}
  /* .1138 [ZMIERZONE na 375 px]: rzad „Ustawienia" ma flex-wrap:nowrap (celowo — na szerokim
     ekranie lista konca serii nie moze sie kurczyc), przez co Biuro/Wyjazd/Zdalnie wystawalo
     153 px poza karte i robilo pasek w bok. Na waskim ekranie zawijamy — desktop bez zmian. */
  .cfrow1{flex-wrap:wrap}
  .mailview{flex-direction:column;height:auto}
  .maillist{width:100%;min-width:0;max-height:42vh}
  .mailprev{min-height:50vh}
  .app.assist-open .mtabs{display:none}
  /* .1854 (zgloszenie Pawla): na Pulpicie tytul zadania lamal sie PO JEDNYM SLOWIE NA LINIE.
     Wiersz `.tl__row` to rzad z komputera: kolumna terminu ma `min-width:118px` (styl pisany
     w kodzie, wiec trzeba go przebic), z prawej stoi plakietka statusu — na tytul zostawalo
     [ZMIERZONE na 390 px] okolo 120 px. Zawijamy rzad: tytul bierze cala szerokosc obok
     zaznaczenia, a termin i status schodza pod niego. Komputer bez zmian. */
  .tl__row{flex-wrap:wrap;row-gap:6px;align-items:flex-start}   /* zaznaczenie rownamy do PIERWSZEJ linii tytulu, nie do srodka calej karty */
  .tl__row > .tl__main{order:1;flex:1 1 60%;min-width:0}
  .tl__row > .tl__time{order:2;min-width:0 !important;flex:0 0 auto}
  .tl__row > .badge,.tl__row > .cellpick{order:3;flex:none}
  /* .1853 (zgloszenie Pawla: "nie widac przycisku Wyslij") — [ZMIERZONE na 375 px] rzad kompozytora asystenta
     mial 438 px tresci w 375 px ekranu: <input> jako element flex trzyma SWOJA naturalna szerokosc (min-width:auto)
     i wypycha reszte rzedu poza krawedz. "Wyslij" bylo uciete w polowie, a 🧠 lezalo calkiem poza ekranem
     (.assist ma overflow:hidden, wiec nie dalo sie nawet przewinac). min-width:0 pozwala polu sie skurczyc,
     wezsze marginesy i odstepy oddaja miejsce przyciskom. Desktop bez zmian. */
  .assist__composer{padding-left:10px;padding-right:10px;gap:6px}
  .assist__composer input{min-width:0}
  .assist__attach{padding-left:10px;padding-right:10px}
}
/* MOBILE — widok ASYSTENTA = SAM asystent: dok Hermesa na całą wysokość, panele konfiguracyjne (przeglądarka skilli / ulubione / zarządzanie narzędziami) ukryte. Skille/agentów konfiguruje się z desktopu — na telefonie tylko rozmowa. Hook: klasa .view-asystent na #app (switchView). */
@media(max-width:900px){
  .app.view-asystent .main{display:none}                                   /* ukryj .asys3 (cały panel konfiguracyjny widoku Asystenta) */
  .app.view-asystent .assist{display:flex;flex:1;height:auto;min-height:0;border-top:none;box-shadow:none;margin-bottom:calc(74px + env(safe-area-inset-bottom))}  /* dok wypełnia obszar pod topbarem; margines = wysokość dolnego paska #mtabs (61px, fixed) + odstęp → kompozytor nad zakładkami */
  .app.view-asystent .assist__head .iconbtn{display:none}                  /* „✕ zamknij" zbędne — widok JEST asystentem, nie ma czego zamykać */
  .app.view-asystent.assist-open .mtabs{display:flex}                      /* na tym widoku dolny pasek zostaje (nawigacja) nawet po otwarciu rozmowy */
  .app.view-asystent ~ #pwypBar{display:none}                              /* pasek „wypożyczone pliki" (fixed, body-level) zasłaniałby kompozytor — na widoku SAMEGO asystenta go chowamy (widoczny na wszystkich innych widokach) */
}

/* ═══ TABLICA OGŁOSZEŃ (ADR-0017) — ściana firmowa. Strumień kart, nie tabela: jednokolumnowa z założenia,
   więc mobile działa bez osobnego wariantu. ⚠️ .tabkarta__tresc ZOSTAJE z pre-wrap: wpisy sprzed .1100 to
   CZYSTY TEKST z prawdziwymi znakami nowej linii i bez tego zlałyby się w jeden akapit. Wpisy nowe są
   HTML-em bez surowych nowych linii, więc pre-wrap ich nie rusza — jedna reguła obsługuje oba roczniki.
   ⚠️ .1100 (aneks do ADR-0017, decyzja Pawła): treść MA formatowanie, więc dawna reguła „nigdy innerHTML"
   ustąpiła LIŚCIE DOZWOLONYCH po stronie serwera (`_tablica_html`). */
.tabwrap{max-width:760px;margin:0 auto;padding:0 4px 40px}
.tabpisz{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:14px}
.tabpisz textarea{width:100%;border:1px solid var(--field-line);border-radius:10px;padding:9px 11px;font:inherit;resize:vertical;background:transparent;color:inherit}
/* .1100: pole pisania z formatowaniem (contenteditable) — wygląda i zachowuje się jak dotychczasowe
   pole tekstowe: ta sama ramka, ta sama wysokość startowa, rośnie z treścią. Podpowiedź przez ::before,
   bo `placeholder` działa tylko w <input>/<textarea>. */
.tabpisz__ed{width:100%;min-height:64px;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;background:transparent;color:inherit;line-height:1.55;overflow-wrap:anywhere}
.tabpisz__ed:focus{outline:none;border-color:var(--accent)}
.tabpisz__ed:empty::before{content:attr(data-ph);color:var(--muted)}
.tabpisz__ed a{color:var(--accent);text-decoration:underline}
.tabpisz__ed ul,.tabpisz__ed ol{margin:4px 0 4px 20px}
.tabedyt{margin:6px 0 2px}
/* .1102: wyodrebniony TYTUL wpisu (migracja 044). Wpis bez tytulu wyglada jak dotad — naglowka
   po prostu nie ma, nic sie nie przesuwa. */
.tabpisz__tyt{width:100%;border:1px solid var(--field-line);border-radius:10px;padding:9px 11px;margin-bottom:8px;font:inherit;font-weight:700;background:transparent;color:inherit}
.tabpisz__tyt:focus{outline:none;border-color:var(--accent)}
.tabkarta__tyt{margin:2px 0 4px;font-size:17px;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.tabkat--polka{margin-top:8px;border-top:1px solid var(--line);padding-top:10px}   /* polka archiwalna ODDZIELONA kreska od kategorii biezacych — widac, ze to inny rodzaj miejsca */
.tabkarta__tresc a{color:var(--accent);text-decoration:underline}
.tabkarta__tresc ul,.tabkarta__tresc ol{margin:6px 0 6px 22px}
.tabkarta__tresc b,.tabkarta__tresc strong{font-weight:700}
.tabpisz__row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tabpisz__row input[type=text]{flex:1 1 190px;min-width:150px;border:1px solid var(--field-line);border-radius:9px;padding:7px 10px;font:inherit;background:transparent;color:inherit}
.tabwazne{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);white-space:nowrap}
.tabfiltry{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.tabkarta{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:12px}
/* .1126: ogloszenie WSKAZANE z dzwonka — sciana ma dziesiatki kafelkow, wiec samo przewiniecie
   nie wystarczy: czlowiek musi zobaczyc, KTORY to. Podswietlenie gasnie samo po ~2,5 s. */
.tabkarta--wskaz{border-color:var(--accent-text);box-shadow:none;transition:box-shadow .3s,border-color .3s}
.tabkarta.is-pin{border-color:color-mix(in srgb, var(--accent) 33%, transparent);box-shadow:none}
.tabkarta--kom{margin:8px 0 0 14px;padding:10px 12px;background:var(--soft-2);border-radius:11px}
.tabkarta__h{display:flex;gap:10px;align-items:center}
.tabkarta__kto{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.tabkarta__kto small{color:var(--muted);font-size:11.5px}
.tabkarta__akcje{margin-left:auto;display:flex;gap:2px;opacity:.5;transition:opacity .15s}
.tabkarta:hover .tabkarta__akcje{opacity:1}
.tabkarta__odzn{margin:7px 0 0;display:flex;gap:5px;flex-wrap:wrap;empty-cells:hide}
.tabkarta__odzn:empty{display:none}
.tabkarta__tresc{margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55}
.tabfilm{position:relative;margin:11px 0 0;padding-bottom:56.25%;height:0;border-radius:11px;overflow:hidden;background:#000}
.tabfilm iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tabkarta__f{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.tabreakcje{display:flex;gap:4px;flex-wrap:wrap}
.tabreak{border:1px solid var(--line);background:transparent;border-radius:999px;padding:2px 9px;font-size:14px;cursor:pointer;line-height:1.5;color:inherit}
.tabreak:hover{border-color:var(--accent-text)}
.tabreak.is-on{background:color-mix(in srgb, var(--accent) 9%, transparent);border-color:var(--accent-text)}
.tabreak b{font-size:11.5px;font-weight:700;margin-left:2px}
.tabkom{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.tabkom__pisz{display:flex;gap:8px;align-items:flex-end;margin:9px 0 2px 14px;flex-wrap:wrap}
.tabkom__pisz .mailfmt{flex:1 1 100%}                       /* .1100: pasek formatowania nad polem, przycisk „Wyślij" zostaje obok pola */
.tabkom__pisz .tabpisz__ed{flex:1 1 200px;min-height:44px}
.tabkom__pisz textarea{flex:1;border:1px solid var(--field-line);border-radius:10px;padding:7px 10px;font:inherit;resize:vertical;background:transparent;color:inherit}
@media (max-width:900px){
  .tabwrap{padding:0 2px 30px}
  .tabkarta--kom{margin-left:8px}
  .tabkom__pisz{margin-left:8px;flex-direction:column;align-items:stretch}
}

/* ADR-0018 + uklad 3-kolumnowy tablicy (decyzja Pawla: lewy pasek = kategorie, prawy = przypiete/autorzy).
   Sciana zostaje WASKA celowo — dlugie linijki tekstu czyta sie zle. Paski to dodatek, nie tresc:
   przy waskim ekranie znikaja calkiem, zeby nie spychac sciany do rynienki. */
.tabuklad{display:grid;grid-template-columns:210px minmax(0,760px) 240px;gap:18px;justify-content:center;align-items:start;padding:0 8px 40px}
.tabuklad .tabwrap{max-width:none;padding:0;margin:0}
.tabrail{position:sticky;top:10px;display:flex;flex-direction:column;gap:12px}
.tabbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.tabbox h4{margin:0 0 8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tabkat{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;padding:6px 8px;border-radius:9px;cursor:pointer}
.tabkat:hover{background:var(--soft-2)}
.tabkat.is-on{background:color-mix(in srgb, var(--accent) 9%, transparent);color:var(--accent-text);font-weight:600}
.tabkat span{font-size:11.5px;color:var(--muted)}
.tabskrot{display:block;width:100%;text-align:left;border:0;background:transparent;color:inherit;font:inherit;padding:6px 8px;border-radius:9px;cursor:pointer;line-height:1.4}
.tabskrot:hover{background:var(--soft-2)}
.tabskrot b{font-weight:500;font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabosoba{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:12.5px}
.tabosoba .av{width:24px;height:24px;font-size:10px}
.tabkarta.is-blysk{animation:tabblysk 1.2s ease-out}
@keyframes tabblysk{0%,40%{box-shadow:none}100%{box-shadow:none}}
/* KARTA PODGLADU LINKU (ADR-0018) — obrazek leci WPROST z cudzego serwera, bez proxy; no-referrer w HTML */
.tablink{display:flex;gap:0;flex-direction:column;margin-top:11px;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;background:var(--soft-2)}
.tablink:hover{border-color:var(--accent-text)}
.tablink__img{display:block;max-height:240px;overflow:hidden;background:var(--line)}
.tablink__img img{width:100%;height:100%;object-fit:cover;display:block}
.tablink__txt{display:block;padding:9px 11px;min-width:0}
.tablink__txt b{display:block;font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tablink__txt small{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tablink__txt i{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:5px;text-transform:lowercase}
/* 🔴 ZGLOSZENIE PAWLA 2026-08-21: „po wejsciu na Tablice z telefonu nie ma mozliwosci wyboru
   kategorii tresci (ani kategorii edytowalnych, jak enova czy Hermes, ani kategorii przypisanej
   do info o zmianach)". Do .1142 obie szyny mialy tu `display:none` — czyli byly KASOWANE, nie
   przenoszone, mimo ze komentarz w app.js twierdzil: „na telefonie paski chowaja sie pod sciane".
   Kategorie to jedyne wejscie na polke „Opis wersji CRM", wiec z telefonu nie dalo sie przeczytac
   opisu zadnego wydania. Teraz: lewa szyna zamienia sie w PASEK KAFELKOW nad sciana (przewijany
   w bok), prawa schodzi POD sciane. Nic nie znika. */
@media (max-width:1280px){
  .tabuklad{grid-template-columns:minmax(0,760px) 240px;grid-template-areas:"kat kat" "sciana prawa"}
  .tabrail--l{grid-area:kat} .tabwrap{grid-area:sciana} .tabrail--r{grid-area:prawa}
  .tabrail--l{position:static;flex-direction:row}
  .tabrail--l .tabbox{width:100%;padding:8px 10px}
  .tabrail--l .tabbox h4{margin-bottom:6px}
  /* kategorie w jednym rzedzie, przewijalnym palcem — nie zabieraja ekranu na wysokosc */
  .tabrail--l .tabkat{width:auto;flex:0 0 auto;border:1px solid var(--field-line);white-space:nowrap}
  .tabrail--l .tabbox>*:not(h4){display:inline-flex;vertical-align:top;margin:0 6px 0 0}
  .tabrail--l .tabbox{overflow-x:auto;white-space:nowrap}
  .tabrail--l .tabkat--polka{margin-top:0;border-top:1px solid var(--line)}   /* w rzedzie kreska u gory nic nie oddziela — zostaje sama ramka */
}
@media (max-width:1040px){
  .tabuklad{grid-template-columns:minmax(0,1fr);grid-template-areas:"kat" "sciana" "prawa"}
  .tabrail--r{position:static}
}

/* Ekran polaczenia z YouTube (.648) — stan polaczenia zamiast formularza z sekretami */
.ytstan{border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--soft-2)}
.ytstan--ok{border-color:#1D9E7555;background:#1D9E7510}
.ytstan b{display:block;margin-bottom:2px}

/* Szybkie akcje na gornym pasku (.650). Na telefonie chowamy — tam jest dolny pasek i menu,
   a szesc ikon obok siebie w waskim naglowku to scisk, nie ergonomia. */
@media (max-width:820px){ .topbar__quick{display:none !important} }
/* .1143: ...a skoro chowamy je z belki, MUSZA byc gdzies indziej. Do .1142 nie byly NIGDZIE:
   ani dolny pasek, ani szuflada ich nie mialy, wiec z telefonu nie dalo sie dodac zadania,
   wyslac maila, zapisac notatki, nagrac ekranu, dodac instrukcji ani otworzyc drugiej zakladki.
   Tu jest ich mobilne wejscie — rzad kafelkow na gorze szuflady (Menu na dolnym pasku). */
/* .1144: zaznaczanie zadan na pulpicie (prosba Pawla) — ptaszek + podswietlony wiersz + pasek akcji.
   Pasek nosi TAKZE klase `.zadbulk`, wiec wyglada i chowa sie tak samo jak ten w module Zadania
   (razem z linia `.zadbulk[hidden]{display:none}` — bez niej `display:inline-flex` bilby `hidden`). */
.tlchk{flex:0 0 auto;display:inline-flex;align-items:center;padding:0 8px 0 2px;cursor:pointer}
.tlchk input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.tl__row.is-sel{background:var(--accent-soft)}
.dashbulk{margin:0 0 8px}
.navquick{display:none}
@media (max-width:820px){
  .navquick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 12px 4px}
  .navquick[hidden]{display:none}   /* rola bez zadnego z tych modulow — pusty rzad bylby smieciem */
}
.navquick__b{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;border:1px solid var(--field-line);
  border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:11px;cursor:pointer;line-height:1.2}
.navquick__b span{font-size:18px;line-height:1}
.navquick__b:active{background:var(--soft-2)}

/* ADR-0019 etap 1 — ZWIJANY KOMPOZYTOR (wzorzec Gmaila).
   ⚠️ Zwiniecie NIE niszczy DOM-u: to te samo okno, tylko przesuniete do belki na dole i przepuszczajace kliki.
   Dzieki temu tresc, adresat i wybrane zalaczniki zostaja nietkniete. */
/* .1580 (zgloszenie Pawla): „Zalacz plik" w STOPCE kompozytora — stopka jest sticky, wiec przycisk widac zawsze,
   takze gdy tresc (zestawienie godzin) rozciaga okno i reszta formularza chowa sie w przewijaniu. */
.modalov.mailcm .modalbox__f{flex-wrap:wrap}
.modalov.mailcm .cmatt{margin-right:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:58%}
.modalov.mailcm .cmatt .mailatts{display:flex;gap:6px;flex-wrap:wrap;max-height:64px;overflow:auto}
.modalov.mailcm .modalbox__h{display:flex;align-items:center;gap:10px}
/* .1273 (zgloszenie Pawla 2026-08-25: „moglaby byc szersza i przez to wygodniejsza — pod spodem i tak
   sie nic nie dzieje, a wystarczy widocznosc niewielkiego tla"): okno pisania maila rosnie do 1600 px
   (szerokosc ustawiona przy tworzeniu okna), a TUTAJ rosnie POLE TRESCI — bez tego szerokie okno bylo
   plaskie i dalej pisalo sie w szparze na 320 px. */
/* .1336 (zgloszenie Pawla: „czemu tak ograniczyles pole do pisania maila"): pole tresci w oknie
   odpowiedzi mialo tylko min-height:120px z `.mailedit--box` — przy krotkim cytacie zostawal
   pasek na trzy linijki i pisalo sie „przez dziurke od klucza". Teraz pole startuje od ~40%
   wysokosci ekranu i rosnie z trescia do polowy okna. */
.modalov.mailcm .mailedit--box{min-height:clamp(240px,40vh,520px);max-height:min(56vh,620px)}
/* .1277: lista podpowiadanych adresow (`.mailsug`) jest pozycjonowana ABSOLUTNIE wzgledem najblizszego
   rodzica z `position:relative`. W oknie pisania takiego rodzica nie bylo, wiec podpowiedzi wyladowalyby
   przy krawedzi okna zamiast pod polem. */
.modalov.mailcm .addfld{position:relative}
.cmzwin{margin-left:auto;border:1px solid var(--field-line);background:transparent;color:inherit;font:inherit;
        font-size:12.5px;padding:3px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.cmzwin:hover{border-color:var(--accent-text);color:var(--accent-text)}
/* stan zwiniety: kontener przestaje przyciemniac i lapac kliki, samo okno siada w prawym dolnym rogu */
.modalov.mailcm.is-min{background:transparent;pointer-events:none;align-items:flex-end;justify-content:flex-end;
        padding:0 0 88px;   /* nad paskiem asystenta (zmierzone 78px) + 10px luzu — zwiniety mail ma go NIE zaslaniac */
        /* .1278 (zgloszenie Pawla: „czy zwiniecie tej formatki umozliwialoby jednak prace w programie?"):
           klikniecia przechodzily JUZ WCZESNIEJ (`pointer-events:none`), ale `.modalov` ROZMYWA tlo
           (rozmycie tla), a zwiniecie tego nie kasowalo — caly panel wygladal na zablokowany
           i nikt nie probowal w niego kliknac. Rozmycie ma prawo istniec tylko przy oknie otwartym. */
        }
.modalov.mailcm.is-min .modalbox{pointer-events:auto;width:min(360px,92vw)!important;max-height:none;margin:0 18px 0 0;
        border-radius:12px 12px 0 0;box-shadow:none;overflow:hidden}
.modalov.mailcm.is-min .modalbox__h{cursor:pointer;padding:10px 14px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modalov.mailcm.is-min .modalbox__h::before{content:attr(data-min);overflow:hidden;text-overflow:ellipsis}
.modalov.mailcm.is-min .modalbox__h{font-size:0}          /* chowamy oryginalny tytul... */
.modalov.mailcm.is-min .modalbox__h::before{font-size:13.5px}   /* ...i pokazujemy skrocony z data-min */
.modalov.mailcm.is-min .cmzwin{font-size:12.5px}
.modalov.mailcm.is-min .addform__b,
.modalov.mailcm.is-min .modalbox__f,
.modalov.mailcm.is-min .cfgnote{display:none}
@media (max-width:900px){
  .modalov.mailcm.is-min{padding-bottom:150px}   /* telefon: nad paskiem asystenta ORAZ dolna nawigacja */
  .modalov.mailcm.is-min .modalbox{width:100%!important;margin:0;border-radius:12px 12px 0 0}
}

/* ADR-0019 etap 2 — PASEK ZAKLADEK. Chowa sie przy jednej zakladce (nie zabiera wysokosci bez powodu)
   i na telefonie (tam jest dolna nawigacja). Zakladka = zapamietane MIEJSCE, nie zywy ekran. */
.zakl{display:flex;align-items:center;gap:4px;padding:5px 14px 0;overflow-x:auto;scrollbar-width:none;flex:0 0 auto}
.zakl::-webkit-scrollbar{display:none}
.zakl[hidden]{display:none}
.zakl__it{display:flex;align-items:center;gap:6px;max-width:210px;min-width:0;border:1px solid var(--line);
          border-bottom:none;background:var(--soft-2);color:inherit;font:inherit;font-size:12.5px;
          padding:6px 8px 6px 10px;border-radius:9px 9px 0 0;cursor:pointer;white-space:nowrap}
.zakl__it:hover{background:var(--panel)}
.zakl__it.is-on{background:var(--panel);border-color:color-mix(in srgb, var(--accent) 33%, transparent);box-shadow:inset 0 2px 0 var(--accent);font-weight:600}
.zakl__ic{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--muted)}   /* DESIGN 2.7 §6 pkt 9a: ikona z zestawu, nie znak — wiec kolor tekstu, nie rozmiar czcionki */
.zakl__t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.zakl__x{flex:0 0 auto;opacity:.35;padding:0 2px;border-radius:5px;font-size:11px}
.zakl__x:hover{opacity:1;background:var(--danger);color:var(--on-accent)}
/* ── TRYB CIASNY od 7 zakladki (.1125). Przy 9 kafelkach w oknie 1024 px na nazwe zostawalo 11 px
   [ZMIERZONE] — sam krzyzyk zjadal miejsce. Na nieaktywnych chowamy go i pokazujemy DOPIERO na
   najechanie, NAKLADKA (position:absolute), zeby pasek nie drgal przy przesuwaniu myszy.
   Na aktywnej zakladce krzyzyk zostaje zawsze — zamkniecie ma byc jednym klikiem, nie polowaniem. */
.zakl--ciasno .zakl__it{position:relative}
.zakl--ciasno .zakl__it:not(.is-on) .zakl__x{display:none}
.zakl--ciasno .zakl__it:not(.is-on):hover .zakl__x{display:block;position:absolute;right:3px;top:50%;transform:translateY(-50%);
  opacity:1;background:var(--danger);color:var(--on-accent);box-shadow:none}
.zakl__add{border:1px dashed var(--field-line);background:transparent;color:var(--muted);font:inherit;
           padding:5px 11px;border-radius:9px 9px 0 0;cursor:pointer;line-height:1.3}
.zakl__add:hover{border-color:var(--accent-text);color:var(--accent-text)}
@media (max-width:900px){ .zakl{display:none!important} }

/* Wybor statusu przy odpowiedzi na zgloszenie Zoho (zgloszenie Sebastiana .661) */
.konwstat{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.konwstat select{font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--field-line);border-radius:7px;background:transparent;color:inherit;max-width:230px}

/* ⚠️ ZGLOSZENIE PAWLA 2026-08-11 ("nie moge rozwinac opcji wyslij z adresu, zeby wybrac adres"):
   reguly `display:` na tych klasach BIJA wbudowane w przegladarke [hidden]{display:none} (styl autora
   > styl przegladarki), wiec kontrolki chowane atrybutem `hidden` sterczaly na ekranie PUSTE i nie
   dawaly sie rozwinac. Zmierzone: .konwstat->flex, .nffield->flex, .zadbulk->inline-flex,
   .addfld->flex, .cronform->flex. Dotykalo 6 miejsc: wybor nadawcy Zoho (#konwFromWrap), pole "Od"
   w kompozytorze maila (#cmFromWrap, mial sie pokazywac dopiero przy 2+ aliasach), pasek operacji
   seryjnych zadan (#zadBulkBar, "Zaznaczono 0"), pole "Nr zrodla" (#nfRefWrap), pole "Plik"
   w formatce instrukcji, formularze dodawania crona i integracji (#cronForm/#integrForm).
   Ten sam patch stosowaly juz .ce [hidden], .notifbadge[hidden], .notifpanel[hidden], .zakl[hidden]. */
.konwstat[hidden],.nffield[hidden],.zadbulk[hidden],.addfld[hidden],.cronform[hidden]{display:none}
/* SIODMY raz ta sama pulapka (zgloszenie Pawla 2026-08-21, formatka „Nowe zdarzenie"): wiersz
   „Powtarzaj: bez konca" sterczal na formatce, mimo ze powtarzanie bylo ustawione na „Nie powtarza".
   `seriaSync()` ustawialo `hidden`, ale `.cfseria{display:flex}` je bilo. Kazde nowe `display:` na
   klasie chowanej atrybutem `hidden` MUSI dostac tu swoja linie. */
.cfseria[hidden]{display:none}

/* ...i druga polowa tego samego zgloszenia: pasek odpowiedzi ma trzy kontrolki (Wyslij + status + nadawca),
   a `.opisbar` jest `nowrap` — zmierzone przy karcie 365 px: wybor nadawcy konczyl sie 308 px ZA prawa
   krawedzia paska, czyli byl ucinany. Zawijamy zamiast ucinac (ten sam patch co `.plikakc` przy `.742`). */
#zadMailReply .opisbar{flex-wrap:wrap}

/* ADR-0023: dokupiony pakiet godzin widoczny PRZY PULI umowy (zgloszenie Pawla: "czemu nie widac pakietu") */
.umpakinfo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 4px;padding:8px 12px;
  background:var(--accent-soft);border-radius:8px;font-size:13px}
.umpakinfo .link{font-family:ui-monospace,Consolas,monospace;font-size:12px}

/* ADR-0023: kolumna "Dodatkowy pakiet" w rejestrze umow */
.pakpill{display:inline-block;padding:2px 9px;border-radius:999px;background:#e6f4f1;color:#0f8b7e;
  font-weight:700;font-size:12.5px;white-space:nowrap}

/* .740 (Pawel: "dalej nie wiem gdzie sa te aktywnosci") — przyciski akcji pliku ZAWIJAJA sie zamiast byc ucinane.
   Powod: 5 przyciskow potrzebuje ~470 px; przy wezszej kolumnie ostatni wychodzil poza komorke i znikal bez sladu.
   Wspolne dla rejestru Plikow, Raportow i list na kartach klienta/projektu/leada. */
.plikakc{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.plikakc>.btn{white-space:nowrap}

/* .743 PASEK PROPOZYCJI (szkic umowy czekajacy na podpis) — jedno miejsce zamiast szukania po przyciskach. */
.szkicbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  margin:10px 0 14px;padding:10px 14px;border-radius:12px;
  background:#fef6e7;border:1px solid #f0c674}
.szkicbar__l b{display:block;font-size:15px}
.szkicbar__l small{display:block;color:#6b5b3e;margin-top:2px}
.szkicbar__r{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (prefers-color-scheme: dark){
  .szkicbar{background:#3a2f18;border-color:#7a6330}
  .szkicbar__l small{color:#d8c9a5}
}

/* ── MARKETING (ADR-0030) — tasma produkcji tresci. Tablica etapow uzywa klas Kanbana zadan
   (.zadkanban/.zadkcol/.zadkcard) dla PARYTETU wygladu; tu tylko to, czego tam nie ma. ── */
.mkt-tresc{margin-top:14px}
.mkt-pusto{color:var(--muted);font-size:13px;padding:14px;text-align:center;border:1px dashed var(--line);border-radius:10px;background:var(--soft-2)}
.mkt-kalendarz{display:flex;flex-direction:column;gap:18px}
.mkt-mies h4{margin:0 0 8px;font-size:14px;color:var(--muted);text-transform:capitalize}
.mkt-mies{display:flex;flex-direction:column;gap:8px}
/* Ekran wyboru trybu — kwota MUSI byc widoczna zanim czlowiek kliknie "Utworz" (ADR-0033 d.9) */
.mkt-symulacja h4{margin:4px 0 10px;font-size:14px}
.mkt-tryby{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.mkt-tryb{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 12px;cursor:pointer}
.mkt-tryb:hover{border-color:var(--accent-text)}
.mkt-tryb input{grid-row:span 2;accent-color:var(--accent)}
.mkt-tryb b{font-size:13px}
.mkt-tryb span{font-size:12px;color:var(--muted)}
.mkt-koszt{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--soft-2)}
.mkt-koszt__suma{font-size:14px}
.mkt-koszt__suma b{font-size:17px;color:var(--accent-text)}
.mkt-koszt__blad{color:var(--danger);font-size:13px}
.mkt-koszt__szczegoly{margin-top:7px;font-size:12px}
.mkt-koszt__szczegoly summary{cursor:pointer;color:var(--muted)}
.mkt-etapy{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.table--mini td{padding:5px 8px;font-size:13px;border-bottom:1px solid var(--line)}
.mkt-kanal{padding:5px 0;font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ZADANIE UPGRADE (039) — dodatkowe zaznaczenie w oknie "Zamknij zadanie": NIEBIESKIE tlo odroznia je
   od zwyklych statusow rozliczeniowych (fiolet btn--primary); wlaczone = pelny niebieski + biale litery. */
.zkupgb{background:#e8f3ff;border-color:#9ccafd;color:#0b62c4}
.zkupgb.is-on{background:#0091ff;border-color:#0091ff;color:var(--on-accent)}
/* SORT PER KOLUMNA Kanbana (Pawel 2026-08-18): ↕ w naglowku kazdej kolumny; podswietlony (niebieski)
   = kolumna ma WLASNY porzadek, rozny od wspolnego "Sortuj". Wspolne dla zadan i plikow. */
.zadkcol__sortb{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;border-radius:6px}
.zadkcol__sortb:hover{background:var(--panel);color:var(--txt)}
.zadkcol__sortb.akt{color:#0091ff;font-weight:800}
/* KONTAKT SPRAWY (migracja 041, zgloszenie Pawla 2026-08-19): przypieta osoba na wierzchu,
   reszta pod rozwijaczem. Wyroznienie subtelne — to nadal ta sama lista, nie osobny modul. */
.keykont__i--pin{background:var(--accent-soft);border-radius:7px;padding:6px 7px;margin:2px -3px}
.keykont__i--pin+.keykont__i{border-top:0}
.keykont__akc{grid-row:1;grid-column:2;display:flex;gap:2px;align-items:center}
.keykont__pin{opacity:.45}
.keykont__pin:hover{opacity:1}
.keykont__pin.akt{opacity:1}
.keykont__wiecej{display:block;width:100%;text-align:left;background:none;border:0;padding:5px 0 2px;
  font:inherit;font-size:12px;color:var(--muted);cursor:pointer}
.keykont__wiecej:hover{color:var(--accent-text)}
/* SZUKAJKA PULPITU (zgloszenie Lukasza Zarzyckiego 2026-08-19; miejsce poprawione przez Pawla tego
   samego dnia): siedzi W WIERSZU NAGLOWKA „Zadania otwarte", zeby NIE zabierac wysokosci listy.
   Naglowek jest szeroki i pusty po prawej — pole wchodzi dokladnie tam. Na waskim ekranie zawija sie
   pod naglowek (flex-wrap), zamiast sciskac tytul do jednej litery. */
.dash-hrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-hrow .dash-h{margin:0;flex:0 0 auto}
.dash-hrow__q{flex:1 1 220px;min-width:0;max-width:420px;padding:6px 11px;border:1px solid var(--field-line);
  border-radius:8px;background:var(--panel);font:inherit;font-size:12.5px;color:var(--txt)}
.dash-hrow__q:focus{outline:none;border-color:var(--accent-text)}
.dash-hrow__i{font-size:12px;white-space:nowrap}
/* HISTORIA ZMIAN WPISU w dymku kalendarza (migracja 043) */
.cpop__hist{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--accent-text);cursor:pointer}
.cpop__hist:hover{text-decoration:underline}
.cpop__histbox{margin:2px 0 6px;max-height:190px;overflow-y:auto}
.cpop__histi{font-size:12px;color:var(--txt);padding:4px 0;border-top:1px solid var(--line)}
.cpop__histi small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
/* PRZECIAGANIE WPISOW KALENDARZA (zgloszenie Pawla 2026-08-19) */
.calev{touch-action:none}
.calev--drag{opacity:.85;box-shadow:none;z-index:40;cursor:grabbing}
body.cal-dragging{user-select:none;cursor:grabbing}
body.cal-dragging .calev:not(.calev--drag){pointer-events:none}   /* SASIEDNIE kafelki nie moga przechwytywac
   wskaznika, bo `elementFromPoint` musi trafic w KOLUMNE DNIA. ⚠️ Ciagniety kafelek zostaje klikalny —
   `pointer-events:none` na nim zerwaloby przechwycenie wskaznika i przeciaganie urwaloby sie w polowie. */
/* WIDOCZNY FILTR NA KOLUMNIE (zgloszenie Pawla 2026-08-19: „nie widac, czy filtr jest i na jakich
   kolumnach"). Naglowek filtrowanej kolumny dostaje BURSZTYNOWE tlo — kolor inny niz caly pasek,
   wiec widac go katem oka; do tego zapalony lejek i kreska u dolu, zeby dzialalo tez przy
   monochromatycznym widzeniu (nie opieramy sygnalu WYLACZNIE na kolorze). */
/* Kolor SELEDYNOWY liczony Z PALETY panelu, nie dobrany na oko: miekka miete miesza sie z akcentem
   (--accent), wiec siedzi w tej samej rodzinie co fioletowy pasek i nie krzyczy jak bursztyn
   (pierwsza wersja; Pawel: „kolor fatalny"). Napis ciemny — kontrast na jasnym tle. */
/* Linia pod tabela: ile kolumn schowano, bo w tym widoku sa puste (DESIGN 2.9 §8.5). */
.tblnote{display:flex;align-items:center;gap:8px;padding:8px 2px 0;font-size:12px;color:var(--muted)}
.zadtbl th.th--sort .thlab{font-weight:800}
.zadtbl th.th--filtr{background:var(--accent-soft);color:var(--accent-text);box-shadow:inset 0 -3px 0 var(--accent)}
.zadtbl th.th--filtr .thlab{font-weight:800}
.zadtbl th.th--filtr .thsort,.zadtbl th.th--filtr .thfilt{color:var(--accent-text)}
.zadtbl th.th--filtr .thfilt.is-on{background:var(--accent-ring)}
.zadtbl th.th--filtr .thsort:hover,.zadtbl th.th--filtr .thfilt:hover{background:var(--accent-ring)}

/* ═══ NOTATNIK I SZUKANIE W CZACIE (.1107) ═══════════════════════════════════════════════════
   Notatnik to BRUDNOPIS, nie rozmowa — stąd brak kropki obecności i licznika nieprzeczytanych
   (liczenie „nieprzeczytanych od samego siebie” nie miałoby sensu). Oddzielony kreską od ludzi,
   żeby było widać, że to inny rodzaj miejsca — ta sama zasada co półka z opisami wersji. */
.czat-c--notes{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:8px}
.czat-c--notes .czat-av{background:var(--accent-soft);color:var(--accent)}
.czat-find{padding:6px 8px 2px;position:relative}
.czat-find input{width:100%;border:1px solid var(--field-line);border-radius:9px;padding:7px 10px;font:inherit;background:transparent;color:inherit}
.czat-find input:focus{outline:none;border-color:var(--accent)}
.czat-find__out{max-height:320px;overflow:auto;margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.czat-find__it{display:block;width:100%;text-align:left;border:none;border-bottom:1px solid var(--line);background:none;color:inherit;font:inherit;padding:7px 10px;cursor:pointer}
.czat-find__it:last-child{border-bottom:none}
.czat-find__it:hover,.czat-find__it:focus-visible{background:var(--accent-soft);outline:none}
.czat-find__it b{font-size:12px}
.czat-find__it span{float:right;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.czat-find__it i{display:block;font-style:normal;font-size:12.5px;line-height:1.4;overflow-wrap:anywhere;margin-top:2px}
.czat-find__none{padding:8px 10px;font-size:13px;color:var(--muted)}
/* Zaznaczanie wiadomości TYLKO w notatniku — w rozmowie z człowiekiem checkboxy byłyby hałasem. */
.czat-zazn{display:none}
.czat-conv--notes .czat-zazn{display:inline-block;margin-right:6px;vertical-align:top;accent-color:var(--accent)}
.czat-notesbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:13px}
.czat-notesbar #czatZaznIle{font-weight:800}
/* NOTATKA, KTORA POSZLA DO POMYSLU (.1108, Pawel: „niech nie znikaja z czata, tylko niech sie zmieni
   kolor tla na jakis seledyn"). Do .1107 przeniesiona notatka ZNIKALA i nie dalo sie odroznic tych,
   ktore poszly, od tych, ktore czekaja. Seledyn = ten sam kolor co filtrowany naglowek kolumny
   (#7fd8c4 / napis #0d3b33) — jeden jezyk kolorow w calym panelu, nie druga zielen.
   ⚠️ Musi bic `.czat-b.me`: w notatniku KAZDA notatka jest „moja", wiec domyslnie ma wypelniony
   akcent i bialy tekst — sam `background` bez nadpisania koloru pisma dalby biale na seledynie. */
.czat-b.is-pomysl,.czat-b.me.is-pomysl{background:color-mix(in srgb, #7fd8c4 42%, var(--panel) 58%);
  color:#0d3b33;border-color:color-mix(in srgb, #7fd8c4 70%, #0d3b33 30%)}
.czat-b.me.is-pomysl .czat-b__c,.czat-b.me.is-pomysl .muted2{color:rgba(13,59,51,.72)}
.czat-b.me.is-pomysl .czat-file{color:#0d3b33}
.czat-b__pom{display:inline-block;margin-top:4px;border:1px solid rgba(13,59,51,.35);background:rgba(13,59,51,.10);
  color:#0d3b33;font:inherit;font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;cursor:pointer}
.czat-b__pom:hover,.czat-b__pom:focus-visible{background:rgba(13,59,51,.20);outline:none}

/* ═══ LICENCJE — zakładka karty klienta (.1110, zgłoszenia Pawła) ════════════════════════════════
   Seledyn (#7fd8c4) jest w tym panelu kolorem „patrz tutaj": filtrowany nagłówek kolumny, notatka
   przeniesiona do pomysłu, a teraz system główny i pola obowiązkowe. Jeden kolor = jedno znaczenie. */
/* SYSTEM GŁÓWNY — kafelek, nie pas przez cały ekran (.1111, Paweł: „ma na środku pełno miejsca,
   a na mniejszych ekranach też się nie mieści"). Rozciągnięty na 1600 px wiersz „Comarch ERP XL
   … Aktywna" to kilometr pustki w środku; ograniczamy szerokość do czytelnego kafla, a na wąskim
   ekranie `100%` i tak wygrywa, więc nic nie wystaje. */
.licsys{background:color-mix(in srgb, #7fd8c4 26%, var(--panel) 74%);border:1px solid color-mix(in srgb, #7fd8c4 60%, #0d3b33 40%);
  max-width:min(100%,560px);min-width:0}
.licsys h3{color:#0d3b33}
.licsys .dl__row{gap:12px;align-items:baseline}
.licsys .dl__row span{flex:0 0 auto}
.licsys .dl__row b{min-width:0;overflow-wrap:anywhere}
/* Kafelki: NIGDY pasek przewijania w bok (.1111, Pawel: „na mniejszych ekranach się nie mieszczą").
   `minmax(min(100%,360px),1fr)` = kolumna nie może być szersza od kontenera, więc przy wąskim ekranie
   siatka SAMA schodzi do jednej kolumny — bez progów w media query, ktore trzeba zgadywać.
   `auto-fit` na szerokim monitorze daje trzy/cztery kolumny, przez co kafelek robi się BARDZIEJ
   KWADRATOWY (prośba Pawła) zamiast rozciągać wiersz „etykieta — — — wartość" przez pół ekranu. */
.licgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;margin-top:10px;padding:0 2px;align-items:start}
.liccard{margin:0;min-width:0}
.liccard__h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
/* Długa wartość (np. „Serwerowa (dowolni użytkownicy)") ma się ZAWIJAĆ, a nie rozpychać kafelek —
   to ona wypychała siatkę poza ekran mimo elastycznych kolumn. */
.liccard .dl__row{gap:12px;align-items:baseline}
.liccard .dl__row span{flex:0 0 auto}
.liccard .dl__row b{min-width:0;overflow-wrap:anywhere}
.liccheck{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.liccheck input{accent-color:var(--accent);cursor:pointer}
.liccheck--all{font-size:13px;color:var(--muted)}
/* EDYCJA NA KLIK — wartość ma WYGLĄDAĆ na klikalną, inaczej nikt nie zgadnie, że nią jest.
   Podkreślenie kropkowane zamiast przycisku: nie zabiera miejsca w gęstym wierszu. */
.licinl{cursor:pointer;border-bottom:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);border-radius:3px;padding:0 2px}
.licinl:hover{background:color-mix(in srgb, #7fd8c4 30%, transparent)}
.licinl__f{font:inherit;border:1px solid var(--accent);border-radius:7px;padding:2px 6px;max-width:100%;background:var(--panel);color:var(--txt)}
/* POLA OBOWIĄZKOWE w formularzu — tło seledynowe + kropka przy etykiecie; `is-bad` po nieudanym zapisie. */
.cfgrow--req>label::after{content:" •";color:#0d3b33;font-weight:900}
.cfgrow--req input,.cfgrow--req select,.cfgrow--req textarea{background:color-mix(in srgb, #7fd8c4 22%, var(--panel) 78%);border-color:color-mix(in srgb, #7fd8c4 65%, #0d3b33 35%)}
.cfgrow input.is-bad,.cfgrow select.is-bad{border-color:var(--danger);box-shadow:none}
.cfgnote--req{background:color-mix(in srgb, #7fd8c4 20%, var(--panel) 80%);border:1px solid color-mix(in srgb, #7fd8c4 55%, #0d3b33 45%);color:#0d3b33;border-radius:10px;padding:8px 11px;font-size:13px}
/* SZERSZE OKNO FORMULARZA + koniec poziomego paska przewijania: pola w wierszach flex nie mogły
   zejść poniżej swojej treści (brak `min-width:0`), więc dwie kolumny rozpychały okno na 660 px.
   .1111 (Paweł: „dalej za wąska — przecież pod spodem nie pracujemy"): okno bierze niemal całą
   szerokość ekranu, bo w czasie wypełniania formularza i tak nic za nim nie robimy. Poniżej 820 px
   dwie kolumny przestają się mieścić po ludzku → schodzimy do JEDNEJ. Dzięki temu pasek przewijania
   w bok nie pojawia się na ŻADNEJ szerokości — przewijamy tylko w pionie, jak w każdym formularzu. */
.modalbox.addform--wide{width:min(1180px,97vw)}
/* .1120: okno JEDNOKOLUMNOWE — dla formatek, ktore nie sa formularzem o dwoch kolumnach pol,
   tylko krotkim wyborem z objasnieniem (nagrywanie ekranu, zapis nagrania). W siatce 2-kolumnowej
   objasnienia ladowaly obok pol i zjadaly polowe okna — zglosil Pawel: „jest ucieta, a napisy
   po lewej sa niepotrzebne, bo tu raczej nikt sie nie zgubi". */
.modalbox.addform--1kol .addform__b{grid-template-columns:minmax(0,1fr)}
.modalbox.addform--1kol{width:min(560px,94vw)}
.modalbox.addform .cfgrow input,.modalbox.addform .cfgrow select,.modalbox.addform .cfgrow textarea{min-width:0;max-width:100%}
.modalbox.addform .cfgrow>div{min-width:0}
.modalbox.addform .addform__b{overflow-x:hidden}
@media (max-width:820px){
  .modalbox.addform .addform__b{grid-template-columns:minmax(0,1fr)}
  .modalbox.addform--wide{width:min(1180px,98vw)}
}

/* ADR-0044 — POLE WGRYWANIA FAKTURY (Finanse → Zakupy). Zgloszenie Pawla 2026-08-21: "czy to jest
   ladne intuicyjne pole? Gdzie to mam wkleic poza ekranem???" — pierwsza wersja miala TYLKO zdanie
   w pasku ("przeciagnij plik w to okno"), czyli obiecywala cel, ktorego nie bylo widac. Tu jest
   WIDOCZNY obszar: mowi co upusc, przyjmuje klikniecie (wybor pliku) i podswietla sie przy
   przeciaganiu. Wersja --duza to pusty rejestr (glowny element ekranu), zwykla — pasek nad tabela. */
.fzdrop{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:12px;cursor:pointer;
  border:2px dashed var(--line-strong);border-radius:14px;background:var(--soft);
  transition:border-color .12s,background .12s,box-shadow .12s}
.fzdrop:hover{border-color:var(--accent-text);background:var(--accent-soft)}
.fzdrop:focus-visible{outline:none;border-color:var(--accent-text);box-shadow:none}
.fzdrop.is-drag{border-color:var(--accent-text);background:var(--accent-soft);box-shadow:none}
.fzdrop__ikona{font-size:30px;line-height:1;flex:0 0 auto}
.fzdrop__t{font-weight:700;font-size:15px;color:var(--txt)}
.fzdrop__s{color:var(--muted);font-size:13px;margin-top:2px}
.fzdrop--duza{flex-direction:column;text-align:center;padding:34px 18px;gap:8px}
.fzdrop--duza .fzdrop__ikona{font-size:44px}
.fzdrop--duza .fzdrop__t{font-size:17px}
@media (max-width:820px){
  .fzdrop{flex-direction:column;text-align:center;padding:18px}
  .fzdrop--duza{padding:26px 14px}
}
/* .1355 (zgloszenie Lukasza Zarzyckiego): numer ticketu Zoho na karcie tablicy — ma byc widoczny
   od razu, ale NIE przykrywac tytulu: mniejszy, w kolorze akcentu, w jednej linii z nazwa. */
.zadkcard__zoho{font-weight:700;font-size:11px;color:var(--accent-text);text-decoration:none;white-space:nowrap}
a.zadkcard__zoho:hover{text-decoration:underline}
/* .1359 (prosba Pawla): skad pochodzi mail w zakladce „Inne" — znacznik folderu obok klienta i zadania.
   Ten sam jezyk wizualny co `pchip`, ale w innym kolorze: to nie jest przypisanie w CRM, tylko miejsce
   w skrzynce uzytkownika. Pelna sciezke („B2B/ExactSystems/ESKLEP") pokazujemy w podpowiedzi. */
.mailfld{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;white-space:nowrap;margin-left:4px}
/* .1364 (prosba Pawla): katalog z choc jednym NIEPRZECZYTANYM mailem — delikatnie inaczej.
   Nie krzykliwie: pogrubiona nazwa + cieply akcent obwodki i kropka. Wybrany katalog (.akt)
   zachowuje swoje wyroznienie — te dwa stany musza dac sie rozroznic naraz. */
.mailtag.ma-nowe{font-weight:700;border-color:var(--accent);background:var(--accent-soft)}
.mailtag.ma-nowe::before{content:"●";color:var(--accent);font-size:9px;margin-right:5px;vertical-align:1px}
/* .1365 (prosba Pawla: „ten na ktorym jestem tez powinien sie wyrozniac — moze seledyn?"): WYBRANY
   katalog dostaje seledyn — TEN SAM `#7fd8c4`, co pola obowiazkowe w formularzach, zeby panel mowil
   jednym jezykiem kolorow. Regula stoi PO `.ma-nowe`, wiec wybor wygrywa wizualnie nad „sa nowe" —
   ale kropka nieprzeczytanych zostaje, bo te dwa stany trzeba widziec naraz. */
#mailFoldery .mailtag.akt{background:color-mix(in srgb, #7fd8c4 30%, var(--panel) 70%);border-color:color-mix(in srgb, #7fd8c4 70%, #0d3b33 30%);color:#0d3b33;font-weight:700}
#mailFoldery .mailtag.akt.ma-nowe::before{color:#0d3b33}

/* ===== PYTANIA I ODPOWIEDZI (.1445) — jeden WYSOKI wiersz: pytanie na gorze, rozwiazanie pod nim.
   Zgloszenie Pawla 2026-08-30: „wyzszy wiersz i w tym samym wierszu na gorze pytanie na dole
   rozwiazanie — jedna szersza kolumna to pokaze". Wspolna regula tabel (`.zadtbl--cfg td`) tnie
   kazda komorke do JEDNEJ linii z wielokropkiem, wiec zdejmujemy ja WYLACZNIE dla tej kolumny
   i WYLACZNIE na tym ekranie — pozostale dziesiec rejestrow zostaje nietknietych.
   ⚠️ PRZYCINAMY STYLEM, NIE W JS: pelna tresc musi zostac w DOM-ie, bo szukajka listy czyta
   `tr.textContent`. Ucinanie w JS zwezilo by wyszukiwanie do poczatkow zdan. */
#vPytania .zadtbl--cfg td[data-col="para"]{white-space:normal;padding-top:11px;padding-bottom:11px;line-height:1.45}
#vPytania .qapyt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
#vPytania .qarozw{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:4px;color:var(--muted);font-weight:400}
/* TAGI — pigulki tematow wyznaczone slownikiem po stronie serwera. Komorka musi zawijac,
   bo wpis miewa trzy tagi; wspolna regula tabel tnie do jednej linii, wiec ja tu zdejmujemy. */
#vPytania .zadtbl--cfg td[data-col="tagi"]{white-space:normal;overflow:hidden}
.qatag{display:inline-block;margin:1px 4px 1px 0;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent-text);
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);white-space:nowrap}
/* Przelacznik starych wpisow — ta sama waga wizualna co `.cfgnote`, ale klikalny. */
.qastare{display:inline-flex;align-items:center;gap:7px;margin-top:8px;padding:6px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--soft);font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
.qastare:hover{border-color:var(--accent-text);color:var(--txt)}
.qastare input{cursor:pointer;margin:0}

/* ===== FLOTA — „Zarządzanie instalacjami" (ADR-0053; redesign po uwadze Pawła 2026-09-01:
   „kokpit pilota XXII wieku — wchodzę i wszystko widzę, zarządzam", nie tabelka drobnym druczkiem).
   Estetyka = ekran startowy (.launcher): ciemna chroma + perspektywiczna siatka + poświaty. ===== */
.fl-kokpit{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:26px 28px 22px;
  background:color-mix(in srgb, var(--accent) 28%, #14111f);color:var(--on-accent);box-shadow:none}
.fl-kokpit::after{display:none}
.fl-kokpit>*{position:relative;z-index:1}
.fl-tyt{margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.fl-sub{margin:6px 0 0;font-size:14px;color:color-mix(in srgb, var(--accent) 24%, #b3aecb);max-width:860px}
.fl-wiek{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12.5px;color:color-mix(in srgb, var(--accent) 18%, #dcd9ea)}
/* ORB statusu — świecąca kula */
.fl-orb{width:58px;height:58px;border-radius:50%;flex:none;position:relative}
.fl-orb--sm{width:44px;height:44px}
.fl-orb--ok{background:var(--ok);box-shadow:none}
.fl-orb--warn{background:var(--warn);box-shadow:none}
.fl-orb--err{background:var(--danger);box-shadow:none}
.fl-orb--off{background:var(--muted-2);box-shadow:none}
/* Pas wielkich wskaźników w hero */
.fl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:18px}
.fl-stat{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;cursor:default;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13)}
.fl-stat__num{font-size:36px;font-weight:800;line-height:1;letter-spacing:-.02em}
.fl-stat__lab{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb, var(--accent) 24%, #b3aecb)}
.fl-stat__sub{font-size:12.5px;color:color-mix(in srgb, var(--accent) 18%, #dcd9ea);margin-top:3px}
.fl-stat--err{border-color:rgba(220,38,38,.55);background:rgba(220,38,38,.14)}
.fl-stat--warn{border-color:rgba(217,119,6,.5);background:rgba(217,119,6,.12)}
/* Wielkie piguły-zakładki */
.fl-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.fl-tab{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font:inherit;
  font-size:15px;font-weight:700;padding:11px 24px;border-radius:999px;cursor:pointer;transition:all var(--tr)}
.fl-tab:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.fl-tab.is-active{background:var(--accent);border-color:transparent;box-shadow:none}
/* „Do zerknięcia" — bursztynowa karta w kokpicie */
.fl-alert{margin-top:18px;padding:16px 20px;border-radius:16px;background:rgba(217,119,6,.14);
  border:1px solid rgba(217,119,6,.45)}
.fl-alert__tyt{font-size:15px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
.fl-alert ul{margin:10px 0 0;padding-left:4px;list-style:none}
.fl-alert li{font-size:14.5px;line-height:1.45;padding:7px 0;border-top:1px solid rgba(255,255,255,.09);display:flex;gap:10px}
.fl-alert li:first-child{border-top:0}
.fl-ok-linia{margin-top:18px;font-size:15px;color:#7cf2b0;display:flex;align-items:center;gap:9px;font-weight:600}
/* Jasna strefa treści pod kokpitem */
.fl-body{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;margin-top:16px;box-shadow:none}
/* Tabela floty — nadpisania rozmiarów silnika CFG TYLKO w tej strefie (parytet kontrolek zostaje) */
.fl-body .cfgtable td{padding:13px 14px;font-size:14.5px;vertical-align:middle}
.fl-body .cfgtable th{font-size:12px;letter-spacing:.06em;padding:11px 14px}
.fl-body .cfg-grp td{padding:10px 14px;font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--soft)}
.fl-body .link b{font-size:15.5px}
/* Piguła statusu — kolorowe tło, nie sama kropka */
.fl-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap}
.fl-pill::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:none}
.fl-pill--ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,#fff)}
.fl-pill--warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,#fff)}
.fl-pill--err{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,#fff)}
.fl-pill--off{color:#64748b;background:#f1f5f9}
/* Kafle karty instalacji (Przegląd) */
.fl-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.fl-tile{border-radius:16px;padding:16px 18px;border:1px solid var(--line);background:var(--panel);border-left:5px solid var(--line-strong)}
.fl-tile--ok{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 5%,#fff)}
.fl-tile--warn{border-left-color:var(--warn);background:color-mix(in srgb,var(--warn) 6%,#fff)}
.fl-tile--err{border-left-color:var(--danger);background:color-mix(in srgb,var(--danger) 5%,#fff)}
.fl-tile__lab{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.fl-tile__val{font-size:19px;font-weight:800;margin-top:7px;letter-spacing:-.01em;line-height:1.25}
.fl-tile__sub{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.45}
/* Wielkie przyciski akcji (hero karty) — rysowane ZAWSZE; nieczynne wyłączone z powodem (wzorzec Promptów) */
.fl-akcje{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.fl-btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:15px;font-weight:700;padding:12px 22px;
  border-radius:14px;cursor:pointer;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:var(--on-accent);transition:all var(--tr)}
.fl-btn:hover:not(:disabled){background:rgba(255,255,255,.18);transform:translateY(-1px)}
.fl-btn--primary{background:var(--accent);border-color:transparent;box-shadow:none}
.fl-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.fl-btn__tag{font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.18)}
/* Chipy typu/RODO w hero */
.fl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:color-mix(in srgb, var(--accent) 18%, #dcd9ea)}
.fl-chip--rodo{background:rgba(220,38,38,.16);border-color:rgba(220,38,38,.5);color:#ffb4b4}
/* Karty serwerów — maszynownia */
.fl-srvy{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.fl-srv{border-radius:18px;border:1px solid var(--line);background:var(--panel);padding:20px 22px;box-shadow:none}
.fl-srv--milczy{outline:2px solid var(--danger);opacity:.85}
.fl-srv__glowa{display:flex;align-items:center;gap:14px}
.fl-srv__nazwa{font-size:18px;font-weight:800;letter-spacing:-.01em}
.fl-srv__typ{font-size:12.5px;color:var(--muted)}
.fl-gauge{margin-top:12px}
.fl-gauge__lab{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px}
.fl-gauge__tor{height:14px;border-radius:999px;background:var(--soft);overflow:hidden}
.fl-gauge__pas{height:100%;border-radius:999px;transition:width .4s ease}
.fl-gauge--ok .fl-gauge__pas{background:var(--ok)}
.fl-gauge--warn .fl-gauge__pas{background:var(--warn)}
.fl-gauge--err .fl-gauge__pas{background:var(--danger)}
.fl-srv__meta{margin-top:12px;font-size:14px;display:flex;gap:16px;flex-wrap:wrap}
.fl-srv__meta b{font-size:16px}
.fl-srv details{margin-top:12px}
.fl-srv summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--accent-text)}
/* Potwierdzenie akcji (etap 2): modal w estetyce kokpitu; na kliencie/produkcji — przepisanie nazwy */
.fl-modal{position:fixed;inset:0;z-index:600;display:grid;place-items:center;background:rgba(23,33,28,.45)}
.fl-modal__okno{width:min(480px,92vw);border-radius:20px;padding:24px 26px;color:#fff;
  background:color-mix(in srgb, var(--accent) 28%, #14111f);box-shadow:var(--sh-modal);border:1px solid rgba(255,255,255,.12)}
.fl-modal__tyt{font-size:19px;font-weight:800;display:flex;align-items:center;gap:10px;margin:0 0 8px}
.fl-modal__txt{font-size:14px;color:color-mix(in srgb, var(--accent) 18%, #dcd9ea);line-height:1.5}
.fl-modal input{width:100%;margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:var(--on-accent);font:inherit;font-size:15px}
.fl-modal input::placeholder{color:color-mix(in srgb, var(--accent) 24%, #b3aecb)}
.fl-modal__stopka{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
/* Ślad poleceń na karcie */
.fl-pol{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.fl-pol:first-child{border-top:0}
.fl-pol__typ{font-weight:800;min-width:110px}
@media (max-width:900px){
  .fl-kokpit{padding:20px 18px}
  .fl-tyt{font-size:22px}
  .fl-stat__num{font-size:30px}
  .fl-tab{padding:10px 16px;font-size:14px}
}

/* .1495: pozycja watku przypisana do INNEGO klienta (porwany watek) — ekran ma o tym powiedziec */
.mailwatek__obcy{display:inline-block;margin-left:6px;padding:0 6px;border-radius:8px;font-size:11px;font-weight:700;background:#fdf0d5;color:#8a5a00;border:1px solid #e6c98a}

/* ===== PROPOZYCJE ASYSTENTA (ADR-0058 etap 5) — karta do zatwierdzenia w doku czatu i w widoku Asystent ===== */
.propk { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; background: var(--panel); font-size: 13px; }
.propk__h { font-weight: 600; margin-bottom: 4px; }
.propk__row { display: flex; gap: 8px; justify-content: space-between; padding: 1px 0; }
.propk__row span { color: var(--muted); }
.propk__why { color: var(--muted); font-size: 12px; margin-top: 4px; }
.propk__btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.propk__hint { color: var(--muted); font-size: 12px; }
.propsek { margin-top: 14px; text-align: left; }

/* ANALIZA PRZEDWDROZENIOWA (ADR-0062) — jedna lista ustalen, czytelna dla prowadzacego */
.anpasek{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.anlista{display:flex;flex-direction:column;gap:8px}
.anpoz{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel)}
.anpoz__h{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.anpoz__t{flex:1;min-width:220px;outline:none;border-bottom:1px dashed transparent;cursor:text}
.anpoz__t:hover,.anpoz__t:focus{border-bottom-color:var(--accent)}
.anpoz__o{margin-top:6px;font-size:13px;padding:6px 8px;border-radius:6px;background:var(--soft-2)}
.anpoz__a{display:flex;gap:8px;margin-top:6px}
.anpoz__a input{flex:1}
.anpoz__x{margin-left:auto}
.andodaj{display:flex;gap:8px;margin-top:12px}

/* POZYCJE ANALIZY W KARCIE ZADANIA (ADR-0062) — wdrozeniowiec odhacza u siebie, ustalenie wraca do Analizy */
.anzad{margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.anzad__h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.anzad__p{display:flex;gap:8px;align-items:flex-start;padding:3px 0;font-size:13px}
.anzad__add{display:flex;gap:6px;margin-top:8px}
.anzad__add input{flex:1;font:inherit;padding:5px 8px;border:1px solid var(--field-line);border-radius:8px}

/* PRZYGOTOWANIE WDROZENIA (ADR-0062) — material gotowy do spotkania zespolu */
.wdrprzyg{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;margin:0 0 10px;border:1px solid var(--accent);border-radius:8px;background:var(--panel)}
.wdrprzyg.is-ok{border-color:#bfe3cf;background:#f2faf5}

/* PTASZKI BUDOWANIA (ADR-0062, uproszczenie 2026-09-12) — co juz powstalo w projekcie, jednym rzutem oka */
.wdrptaszki{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.wdrptaszki__p{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;border:1px solid var(--field-line);background:var(--panel);color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
.wdrptaszki__p:hover{border-color:var(--accent);color:var(--accent)}
.wdrptaszki__p.ok{color:#2f8f63;border-color:#bfe3cf;background:#f2faf5}

/* ZAKRES NA ZARZADZANIU PROJEKTEM: po dodaniu modulow zwiniety do jednej linijki (Pawel 2026-09-12) */
.zak--zwiniety .zak__m{display:none}
.zak--zwiniety .zak__add{margin-top:4px}
.zak--zwiniety .cfgnote{display:none}

/* ETAP W PLANIE: naglowek z nazwa, datami i usuwaniem + zwijanie listy pozycji (Pawel 2026-09-12) */
.planw__e--zwiniety .planw__p{display:none}
/* ADR-0065 E2: zadania POD zagadnieniem (zwijane), licznik zamkniętych, kropka stanu zadania */
.planw__zadlist{margin:6px 0 2px 22px;border-left:2px solid var(--line);padding-left:8px}
.planw__p--zw>.planw__zadlist{display:none}
.planw__z{padding:4px 0 4px 8px;border-bottom:1px dashed var(--line);font-size:13px}   /* prawa krawedz = jak wiersz zagadnienia (kontrolki w jednej linii) */
.planw__z:last-child{border-bottom:0}
.planw__zkropka{color:var(--muted);font-size:11px;flex:0 0 auto}
.planw__p--gotowa>.planw__ph .planw__zkropka,.planw__z.planw__p--gotowa .planw__zkropka{color:#16a34a}
.planw__pzwin{width:16px;text-align:center;flex:0 0 auto}
.planw__pzwin--brak{color:var(--line);cursor:default}
.planw__zlicz{font-size:11px;border-radius:999px;padding:1px 7px;border:1px solid var(--line);color:var(--muted);flex:0 0 auto}
.planw__zlicz--zolte{background:#fdf1b8;color:#92400e;border-color:#f3d77a}
.planw__zlicz--zielone{background:#d7f0df;color:#166534;border-color:#9ad4ae}
.planw__nowezad{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 2px 22px;padding:6px 10px;border:1px dashed var(--accent-text);border-radius:8px;background:var(--panel)}
.planw__nowezad[hidden]{display:none!important}
/* ADR-0065 E3: pytania i odpowiedzi POD ETAPEM (zwijana sekcja) */
.planw__qsek{background:var(--soft);padding-right:0}
.planw__qsek>.planw__ph{padding-right:10px}
.planw__pyt{padding-right:0}   /* prawa krawedz kontrolek = jak wiersz zagadnienia */
.planw__qsek>.planw__zadlist{margin-left:14px;margin-right:10px}
.planw__pyt .anodp__box{margin-left:24px}
/* ⚠️ PASEK, KTORY NIE MIESCI SIE NA EKRANIE, ODCINA OSTATNI PRZYCISK — a ostatni jest ten,
   ktory KONCZY CZYNNOSC. Zgloszenie Pawla 2026-09-21: nie widac przycisku do przeksztalcenia
   pytan w zadanie. `planw__eakcje` ma `flex:0 0 auto` i nie zawija, wiec przy szesciu kontrolkach
   (wykonawca, etap, zagadnienie, nazwa nowego, termin, guzik) wyjezdza poza prawa krawedz
   RAZEM z guzikiem. Pasek zawija sie teraz do drugiego rzedu zamiast chowac czynnosc poza ekranem
   (par. 8.4: pasek nigdy nie jest uciety; przy braku miejsca ustepuje WYSOKOSCIA, nie trescia). */
/* Tytul sekcji i licznik NIE daja sie sciskac — to one mowia, na co patrzysz. Do 2026-09-21 pasek
   z szescioma kontrolkami wyciskal je do ZERA szerokosci, wiec napis lamal sie po jednej literze
   i zlewal z licznikiem w nieczytelny slupek (zgloszenie Pawla: zlewajace sie napisy po lewej). */
.planw__ph>b,.planw__ph>small{flex:0 0 auto;white-space:nowrap}
.anbar{flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:6px}
.anbar>*{flex:0 1 auto;min-width:0}
.anbar .btn{flex:0 0 auto}
.anbar .nfinput{max-width:220px}
.planw__zwin{border:0;background:none;cursor:pointer;font:inherit;color:var(--muted);padding:0 2px}
.planw__enazwa{outline:none;border-bottom:1px dashed transparent;cursor:text}
.planw__enazwa:hover,.planw__enazwa:focus{border-bottom-color:var(--accent)}
.planw__edata{width:140px;font-size:12px;padding:2px 6px}
.planw__et{max-width:220px;font-size:12px}
.planw__ex{color:#b45309}

/* ETAP ZERO: zagadnienia analizy w tym samym planie co reszta pracy (Pawel 2026-09-12) */
.planw__e--zero{box-shadow:inset 3px 0 0 var(--accent)}

/* STAN PRACY KOLOREM TLA (Pawel 2026-09-12): nieprzydzielone biale, w realizacji zolte, zamkniete zielone */
.planw__p--wtoku{background:#fffbeb}
.planw__p--gotowa{background:#e6f7ec}
/* ADR-0065 (Paweł 2026-09-17): trzy kolory z ZADAŃ — białe (nic zamknięte), żółte (część), zielone (wszystkie); te same na etapie */
.planw__p--zolta{background:#fef6c7}
.planw__e--zolte>.planw__eh{background:#fdf1b8}
.planw__e--zielone>.planw__eh{background:#d7f0df}
.planw__e--zielone .planw__bar i{background:#16a34a}
.planw__e--zolte .planw__bar i{background:#d97706}

/* ZAKLADKI MODULOW przy zakresie — zawezaja plan i zagadnienia do jednego obszaru (Pawel 2026-09-12) */
.zak__add{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.zakmod{display:flex;flex-wrap:wrap;gap:4px}
/* Paweł 2026-09-17: góra planu (chipsy modułów + nagłówek z „＋ Miesiąc” i 🧠) trzyma się przy przewijaniu; przewija `.main` */
.railsec.zak.zak--zwiniety{position:sticky;top:0;z-index:6}
.railsec.planw>h3{position:sticky;top:var(--plan-top,0px);z-index:5;background:var(--panel);margin:-14px -14px 11px;padding:14px 14px 10px;border-radius:12px 12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.zakmod__t{padding:4px 12px;border-radius:999px;border:1px solid var(--field-line);background:var(--panel);color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.zakmod__t:hover{border-color:var(--accent);color:var(--accent)}
.zakmod__t.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}

.planw__nowy{margin:10px 0;text-align:center}

/* PODZAKLADKI KARTY (Pawel 2026-09-12): Przeglad niesie Harmonogram/Oferty/Wiedze, Zadania dziela sie na nasze i klienta */
.podzak{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.podzak__t{padding:5px 14px;border-radius:8px;border:1px solid transparent;background:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.podzak__t:hover{color:var(--accent)}
.podzak__t.is-active{background:var(--soft);border-color:var(--accent);color:var(--accent);font-weight:600}   /* obrys w akcencie: --line na --soft = 1,08:1, akcent = 4,45:1 (DESIGN §8.8, Paweł 2026-10-01: „ma być coś widać”) */
.planw__enr{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;font-size:11px;background:var(--soft-2);color:var(--muted);flex:0 0 auto}

/* ZAKRES W JEDNEJ LINII: naglowek + przycisk + zakladki modulow (Pawel 2026-09-12: mniej rozstrzelonych elementow) */
.zak__h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.zak--zwiniety .zak__lab,.zak--zwiniety .zak__std-row,.zak--zwiniety .zak__dok{display:none}

.planw__zrob{padding:6px 10px;font-size:12px;color:var(--muted)}
.planw__zrob summary{cursor:pointer}

/* ═══════════════════ DESIGN.md §2–4 — KOMPONENTY WSPOLNE (etap B, 2026-09-18) ═══════════════════
   Jedna klasa = jeden komponent na wszystkich ekranach. Blok stoi NA KONCU pliku, wiec przy rownej sile selektora
   wygrywa z dawnymi regulami tych samych klas. Wymiary dotykowe z DESIGN.md (44/40 px) obowiazuja na telefonie
   (<=900 px); na komputerze te same warianty maja zwarte wysokosci (36/32 px) — patrz DESIGN.md §4.6a. */
/* §2 typografia */
.h-screen{margin:0;font:800 22px/1.2 var(--font-display);letter-spacing:-.2px}
.h-record{margin:0;font:800 20px/1.2 var(--font-display);letter-spacing:-.2px}
.num{font:800 26px/1 var(--font-display)}
.t-card{font-size:16px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t-meta{font-size:14px;color:var(--muted)}
.t-sem{font-size:13px;font-weight:600}
.t-label{font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--font-display)}
.ico{flex:none;vertical-align:middle}
.ico--warn{color:var(--warn)}   /* DESIGN 1.5 §5: trojkat ostrzegawczy w naglowku panelu alarmowego — jedyne miejsce, gdzie ikona ma kolor semantyczny */
.nav__svg,.mtab svg{stroke-width:1.8}
/* §4.1 przyciski — jedna hierarchia, piec wariantow */
.btn,.btn--primary,.btn--secondary,.btn--neutral,.btn--ghost,.btn--danger{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 16px;border-radius:var(--radius);font:600 15px/1 var(--font);cursor:pointer;white-space:nowrap;text-decoration:none;box-shadow:none;transition:background var(--tr),color var(--tr),border-color var(--tr)}
.btn{background:var(--panel);border:1px solid var(--field-line);color:var(--txt)}                 /* bez wariantu = neutral */
.btn:hover{background:var(--soft-2);border-color:var(--field-line)}
.btn--primary{background:var(--accent);border:1px solid var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn--secondary{background:var(--panel);border:1px solid var(--accent-text);color:var(--accent-text)}
.btn--secondary:hover{background:var(--accent-soft)}
.btn--neutral{background:var(--panel);border:1px solid var(--field-line);color:var(--txt)}
.btn--neutral:hover{background:var(--soft-2)}
.btn--ghost{background:transparent;border:1px solid transparent;color:var(--accent-text);padding:0 12px}
.btn--ghost:hover{background:var(--accent-soft)}
.btn--danger{background:var(--danger);border:1px solid var(--danger);color:var(--on-accent)}
.btn--danger:hover{background:color-mix(in srgb, var(--danger) 85%, #000);color:var(--on-accent)}
.btn:active,.btn--primary:active,.btn--secondary:active,.btn--neutral:active,.btn--ghost:active,.btn--danger:active{transform:translateY(1px)}
.btn--sm{height:40px;padding:0 16px;font-size:14px;border-radius:var(--radius-sm)}
.btn:disabled,.btn[disabled],.btn--primary:disabled{background:var(--soft);color:var(--muted-2);border-color:transparent;cursor:not-allowed;transform:none}
.btn .ico,.iconbtn .ico{width:18px;height:18px}
.iconbtn{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--field-line);border-radius:var(--radius);background:var(--panel);color:var(--txt);cursor:pointer;font-size:15px;line-height:1;flex:none}
.iconbtn:hover{background:var(--soft-2);color:var(--txt)}
.iconbtn .ico{width:22px;height:22px}
/* §4.2 chipy, plakietki, liczniki, priorytet */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.2;padding:4px 10px;border-radius:var(--radius-pill);background:var(--soft-2);color:var(--muted);border:1px solid transparent;white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1.2;padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap}   /* ksztalt jak .chip; kolory zostaja w wariantach .b-* */
.chip--neutral{background:var(--soft-2);color:var(--muted)}
.chip--accent{background:var(--accent-soft);color:var(--accent-text)}
.chip--ok{background:var(--ok-soft);color:var(--ok)}
.chip--warn{background:var(--warn-soft);color:var(--warn)}
.chip--danger{background:var(--danger-soft);color:var(--danger)}
.chip--info{background:var(--info-soft);color:var(--info)}
/* tryb ciemny: tekst KAZDEGO chipa rozjasniony wzgledem wlasnego tla (DESIGN 1.3 §1) */
/* Stare plakietki .b-* maja wlasne kolory (DESIGN 1.4 4.6a). Te, ktore mialy TLO wpisane na sztywno,
   w trybie ciemnym zostawaly jasna latka albo traca kontrast (np. .b-otwarty: jasny --warn na #fffbeb).
   W ciemnym przechodza na te same pary token-tlo/token-tekst, co chipy (DESIGN 1.4 1). */
:root[data-theme="dark"] .b-email{background:var(--info-soft);color:var(--chip-info-txt);border-color:transparent}
:root[data-theme="dark"] .b-telefon{background:var(--ok-soft);color:var(--chip-ok-txt);border-color:transparent}
:root[data-theme="dark"] .b-otwarty{background:var(--warn-soft);color:var(--chip-warn-txt);border-color:transparent}
:root[data-theme="dark"] .b-prop{background:var(--warn-soft);color:var(--chip-warn-txt);border-color:transparent}
:root[data-theme="dark"] .b-open{background:var(--ok-soft);color:var(--chip-ok-txt);border-color:transparent}
:root[data-theme="dark"] .b-spotkanie{background:var(--soft);color:var(--spotkanie-text);border-color:transparent}
:root[data-theme="dark"] .chip--ok{color:var(--chip-ok-txt)}
:root[data-theme="dark"] .chip--warn{color:var(--chip-warn-txt)}
:root[data-theme="dark"] .chip--danger,:root[data-theme="dark"] .cnt--danger{color:var(--chip-danger-txt)}
:root[data-theme="dark"] .chip--info{color:var(--chip-info-txt)}
:root[data-theme="dark"] .kafel__n{background:var(--on-accent)}   /* plakietka kafla zostaje biala — kafel ma pelny akcent takze w ciemnym */
.chip--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.chip--ref{background:var(--accent-soft);color:var(--accent-text);padding:2px 8px}
.chip--add{background:transparent;border:1px dashed var(--field-line);color:var(--muted);padding:3px 10px;cursor:pointer;font:600 12px var(--font)}
.chip--add.is-cta{border-color:var(--accent-text);color:var(--accent-text)}
/* §4.9 ADR-0108 R2: pole z wczesniejszego elementu obiegu (zeton w tekscie, usuwany w calosci) i edytor tekstu z polami */
.chip--pole{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 4px;max-width:100%;padding:1px 8px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-text);font:600 12px var(--font);border:1px solid transparent;line-height:1.5;vertical-align:baseline;cursor:default;user-select:none}
.chip--pole small{font-weight:400;color:var(--muted)}
.chip--pole.is-zgubione{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.chip--pole.is-puste{background:transparent;border:1px dashed var(--accent-text)}
.obpole-tekst{min-height:38px;border:1px solid var(--field-line);border-radius:var(--radius);padding:7px 10px;background:var(--panel);color:var(--txt);font-size:14px;line-height:1.9;overflow-wrap:anywhere;white-space:pre-wrap}
.obpole-tekst:focus{outline:2px solid var(--accent);outline-offset:1px}
.obpole-tekst--zetony{white-space:normal;background:var(--soft-2)}
.obtpole{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:4px 8px;align-items:start;margin-bottom:12px}
.obtpole__lab{grid-column:1 / -1;font:600 13px var(--font);color:var(--txt);overflow-wrap:anywhere}
.obtpole__wart{min-width:0}
.obtpole__akcje{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.cnt{display:inline-block;font-size:12px;font-weight:600;line-height:1.4;padding:1px 7px;border-radius:var(--radius-pill);background:var(--soft-2);color:var(--txt);margin:0}
.cnt--danger{background:var(--danger-soft);color:var(--danger)}
.cnt--accent{background:var(--accent-soft);color:var(--accent-text)}
.prio{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:0;border:0;background:none;border-radius:0;white-space:nowrap}
.prio::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.prio--high,.prio--wysoki{color:var(--danger)}
.prio--mid,.prio--sredni{color:var(--warn)}
.prio--low,.prio--niski{color:var(--muted)}
.prio--low::before,.prio--niski::before{background:var(--muted-2)}
/* §4.4 pola */
.field input,.field select,.nfinput,select.ntkat{height:44px;padding:0 14px;background:var(--panel);border:1px solid var(--field-line);border-radius:var(--radius);font:400 16px var(--font);color:var(--txt);box-shadow:none}
.field input:focus,.field select:focus,.nfinput:focus,select.ntkat:focus,.field--search:focus-within{outline:none;border-color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-ring)}
.field span{font-size:13px;font-weight:600;color:var(--txt)}
.field--search{position:relative;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--panel);border:1px solid var(--field-line);border-radius:var(--radius);color:var(--muted)}
.field--search input{flex:1;min-width:0;height:auto;border:0;background:transparent;padding:0;font-size:16px;color:var(--txt)}
.field--search input:focus{outline:none;box-shadow:none}
.field--search .ico{width:18px;height:18px}
/* §4.5 segment, chip filtra */
.seg,.zadseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;height:44px;padding:4px;background:var(--soft);border:0;border-radius:var(--radius);overflow:hidden;margin-bottom:12px;width:100%}
.seg button,.zadseg__b{border:0;border-radius:9px;background:transparent;font:600 14px var(--font);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button:hover,.zadseg__b:hover{border-color:transparent;color:var(--txt)}
.seg button.is-active,.zadseg__b.is-active{background:var(--panel);box-shadow:var(--sh-seg);color:var(--txt);border:0}
.zadseg__b+.zadseg__b{border-left:0}
.fpill{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;border:1px solid var(--field-line);border-radius:var(--radius-pill);background:var(--panel);color:var(--txt);font:600 14px var(--font);cursor:pointer;white-space:nowrap}
.fpill:hover{border-color:var(--accent-text)}
.fpill.is-on{border-color:var(--accent-text);background:var(--accent-soft);color:var(--accent-text)}
.fpill .fchev{opacity:1;font-size:12px;margin-left:0}
/* §4.3 karty i wiersze */
.card,.pcard,.railsec,.admin-card,.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none}
.card{padding:14px}
.mcards{gap:10px;padding:0}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px;box-shadow:none;display:flex;flex-direction:column;gap:8px}
.mcard__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mcard__title{flex:1;min-width:0;font-size:16px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard__title .link{font-size:16px;font-weight:600;color:var(--txt)}
.mcard__client{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);min-width:0}
.mcard__client span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard__meta{gap:6px 14px;margin-top:0}
.mcard__m{font-size:14px;color:var(--muted)}
.mcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:4px}
.mlist{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:0;overflow:hidden;display:flex;flex-direction:column}
.mrow{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;cursor:pointer;background:var(--panel)}
.mrow:last-child{border-bottom:0}
.mrow__av{width:40px;height:40px;border-radius:50%;background:var(--soft-2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex:none}
.mrow__av.is-klient{background:var(--accent-soft);color:var(--accent-text)}
.mrow__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.mrow__hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mrow__od{display:flex;align-items:center;gap:6px;min-width:0;font-size:15px}
.mrow__od>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow__czas{font-size:13px;color:var(--muted);flex:none}
.mrow__temat{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow__zaj{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow__chipy{display:flex;gap:6px;padding-top:2px;flex-wrap:wrap}
.mrow.is-nowy .mrow__od,.mrow.is-nowy .mrow__temat{font-weight:600}
.mrow.is-nowy .mrow__czas{color:var(--accent-text);font-weight:600}
.mrow.is-nowy .mrow__od::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.arow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.arow:last-child{border-bottom:0}
.arow__ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;background:var(--soft-2);color:var(--muted)}
.arow__ico--mail{background:var(--info-soft);color:var(--info)}
.arow__ico--zadanie{background:var(--accent-soft);color:var(--accent-text)}
.arow__ico--spotkanie{background:var(--warn-soft);color:var(--warn)}
.arow__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.arow__t{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow__m{font-size:13px;color:var(--muted)}
.arow__czas{font-size:13px;color:var(--muted);flex:none}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fact{display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.fact__l{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.fact__v{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fact__v--warn{color:var(--warn)}
.fact__v--danger{color:var(--danger)}
.fact__s{font-size:13px;color:var(--muted)}
/* §4.3 kafel ekranu startowego — pelny akcent, bialy tekst, ikona-znak wodny; HTML docelowy przepina etap D */
.kafel{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:0;height:104px;min-height:0;padding:12px 14px 14px;border:0;border-radius:var(--radius-lg);background:var(--accent);color:var(--on-accent);text-align:left;box-shadow:none;transition:transform .12s;font:inherit;cursor:pointer}
.kafel--czynnosc{background:var(--accent-deep)}
.kafel:active{transform:scale(.98)}
.kafel__glow{display:none}
.kafel__wm{position:absolute;right:-26px;bottom:-34px;color:var(--on-accent);opacity:.16;pointer-events:none;line-height:0}
.kafel__wm svg{width:120px;height:120px;stroke-width:1.4}
.kafel__hd{position:relative;display:flex;align-items:flex-start;justify-content:space-between}
.kafel__ico{position:relative;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:var(--on-accent);box-shadow:none;flex:none}
.kafel__ico svg,.kafel__ico .nav__svg{width:22px;height:22px;stroke-width:1.8}
.kafel__lab{position:relative;font-size:15px;font-weight:600;text-align:left;line-height:1.2;letter-spacing:0;text-shadow:none}
.kafel__n{position:absolute;top:12px;right:14px;min-width:0;height:auto;line-height:1.4;padding:3px 8px;border-radius:var(--radius-pill);background:var(--on-accent);color:var(--accent-text);font-size:12px;font-weight:600}
.kafel__n--zal{color:var(--danger)}
.kafel__n--info{background:rgba(255,255,255,.18);color:var(--on-accent)}
/* §4.5 nawigacja: pasek gorny, dolne zakladki, zakladki karty rekordu */
.topbar__title{font:800 22px/1.2 var(--font-display);letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;margin:0}
.topbar__actions{gap:8px}
.notifbadge{background:var(--danger);border:2px solid var(--panel)}
.ptabs{display:flex;gap:12px;height:44px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;scrollbar-width:none;padding:0}
.ptabs::-webkit-scrollbar{display:none}
.ptab{height:44px;padding:0 4px;font:600 15px var(--font);color:var(--muted);border:0;border-bottom:2px solid transparent;background:transparent;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex:none}
.ptab:hover{color:var(--txt)}
.ptab.is-active{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.ptab .cnt{margin-left:0}
.ptabs-wrap{position:relative;padding-right:calc(var(--ptabs-pig, 56px) + 8px);border-bottom:1px solid var(--line);margin-bottom:14px}   /* DESIGN 1.4 4.5: pas konczy sie PRZED pigulka w KAZDYM stanie przewiniecia */
.ptabs-wrap .ptabs{border-bottom:0;margin-bottom:0;padding-right:64px}   /* linia po rodzicu (biegnie tez pod pigulka); 64 px zapasu, zeby ostatnia zakladka wyszla spod wygaszenia */
.ptabs-wrap::after{content:"";position:absolute;top:0;right:calc(var(--ptabs-pig, 56px) + 8px);width:64px;height:44px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg))}   /* DESIGN 1.3 §4.5: wygaszenie 64 px */   /* wygaszenie z makiety Klient.html (DESIGN §4.5) */
.ptabs__all{position:absolute;right:0;top:6px;z-index:1;height:32px;padding:0 10px;border-radius:var(--radius-pill);font-size:13px;gap:4px}
/* §4.7 arkusz dolny + przelacznik + stan pusty */
.sheet-ov{position:fixed;inset:0;background:rgba(23,33,28,.45);z-index:950;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;background:var(--panel);border-radius:16px 16px 0 0;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom));box-shadow:var(--sh-modal);max-height:86vh;overflow:auto}
.sheet::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 12px}
.sheet__hd{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.sheet__t{flex:1;font-size:16px;font-weight:600;margin:0}
.sheet__x{flex:none;margin:-4px -4px 0 0}
.sheet__p{font-size:15px;margin:0 0 14px}
.sheet__akc{display:flex;gap:8px}
.sheet__akc>*{flex:1}
.toggle{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--field-line);background:var(--panel);font:600 14px var(--font);color:var(--txt);cursor:pointer}
.toggle[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-text);color:var(--accent-text)}
.iconbtn.toggle{width:44px;height:44px;padding:0}   /* DESIGN 1.7 5a: przelacznik w ksztalcie ikony-przycisku zostaje kwadratem 44 px (§0.7: cel dotykowy), stan niesie aria-pressed */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:var(--panel);border:1px dashed var(--line-strong);border-radius:var(--radius-lg);text-align:center}
.empty-state__ico{width:44px;height:44px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-text);display:flex;align-items:center;justify-content:center}
.empty-state__t{font-size:16px;font-weight:600}
.empty-state__p{font-size:14px;color:var(--muted)}
.topbar__wiecej{display:none}
.sheet__lista{display:flex;flex-direction:column;gap:2px;margin:0 -4px}
.sheet__poz{display:flex;align-items:center;gap:12px;height:48px;padding:0 10px;border:0;border-radius:var(--radius-sm);background:transparent;font:600 15px var(--font);color:var(--txt);cursor:pointer;text-align:left;width:100%}
.sheet__poz:hover{background:var(--soft-2)}
.sheet__poz .ico{color:var(--muted)}
/* TELEFON (<=900 px): uklad paska gornego/dolnego i okien; wymiary dotykowe sa BAZA (wyzej) */
@media(max-width:900px){
  .topbar{height:60px;padding:8px 16px 0;background:var(--bg);border-bottom:0;gap:8px}
  .topbar__burger{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:0 0 0 -8px;padding:0;color:var(--txt)}
  /* wysokosc paska JEDNA LICZBA w jednym miejscu (`--mtabs-h`): pasek jest `position:fixed`, wiec
     ekrany musza sobie o nia zmniejszyc wysokosc. Wpisana dwa razy rozjedzie sie po cichu — a objawem
     bedzie tresc schowana POD paskiem, dokladnie jak na ekranie Start przed 2026-09-21. */
  .mtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;height:var(--mtabs-h,74px);box-sizing:border-box;padding:8px 8px max(12px,env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line)}
  .mtab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:0;background:none;padding:0;border-radius:10px;font:600 11px var(--font);color:var(--muted);cursor:pointer}
  .mtab svg{width:24px;height:24px;stroke-width:1.8}
  .mtab.is-active{color:var(--accent-text)}
  .mtab.is-active svg{stroke-width:2}
  .modalov{align-items:flex-end;padding:0}
  .topbar__refresh,#tablicaBtn,#wnioskiBtn,#zaklNowaBtn,.topbar__quick{display:none !important}   /* pod „…” (DESIGN §4.5) */
  .topbar__wiecej{display:inline-flex}
  .modalbox{border-radius:16px 16px 0 0;width:100%;max-width:100%;max-height:92vh;box-shadow:var(--sh-modal)}
}
.acard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl) var(--radius-xl) var(--radius-xl) 4px;padding:12px 14px;max-width:320px;align-self:flex-start;box-shadow:none}
.acard::before{content:"HERMES";display:block;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--accent-text);margin-bottom:6px}
.acard p{margin:0;font-size:15px;line-height:1.4;color:var(--txt)}
.acard__t{display:none}
/* ═══ ETAP H — Pulpit: lista zadan przez silnik kart (.mcard), nie tabela ═══ */
#dashZadLista,#dashZatwLista,#dashObsLista{display:flex;flex-direction:column;gap:10px}
#dashZadLista .tlchk{display:flex;align-items:center;flex:none}
/* KARTA ZADANIA NA PULPICIE W DWOCH RZEDACH (Pawel 2026-09-22). Gap 10 px — „odstep miedzy liniami
   delikatnie zwiekszyc, i tak wysokosc elementu sie zmniejszy". Reguly TYLKO pod modyfikatorem: gole .mcard__*
   sa wspolne z lista Zadan na telefonie, kartami list mobilnych i Kontaktami. */
.mcard--pulpit{gap:10px;padding:12px 14px}
.mcard--pulpit .mcard__l1,.mcard--pulpit .mcard__l2{display:flex;align-items:center;gap:10px;min-width:0}
.mcard--pulpit .mcard__l1 .mcard__title{flex:1;min-width:0}
.mcard--pulpit .mcard__l1 .prio,.mcard--pulpit .mcard__l1 .t-sem{flex:none}
.mcard--pulpit .mcard__l2 .mcard__client{flex:1}
.mcard--pulpit .mcard__l2 .cellpick,.mcard--pulpit .mcard__l2 .chip,.mcard--pulpit .mcard__l2 .listdate{flex:none}
.mcard.is-sel{border-color:var(--accent-text);background:var(--accent-soft)}
.mcard__title .chip{vertical-align:middle;margin-left:6px}
/* ═══ ETAP G — Asystent (DESIGN §4.6, makieta Asystent.html) ═══ */
.assist__body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:8px 16px 0}   /* rozmowa kotwiczona U DOLU przez margin-top:auto pierwszego dziecka (nizej) — NIE justify-content:flex-end: ten ucina tresc wystajaca w GORE i znika przewijanie (zgloszenie Pawla 2026-09-23, regresja aaf5b1e6 z 18.09) */
.assist__body > :first-child{margin-top:auto}
.assist__body{scrollbar-width:auto;scrollbar-color:var(--accent) var(--soft-2)}   /* Paweł 2026-09-23: „grubszy pasek przewijania — prawie go nie widać” (ten sam wzorzec co .maillist) */
.assist__body::-webkit-scrollbar{width:14px}
.assist__body::-webkit-scrollbar-track{background:var(--soft-2);border-radius:8px}
.assist__body::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.assist__title{font-weight:600;font-size:16px;font-family:var(--font-display)}
.amsg{font-size:15px;line-height:1.4;padding:12px 14px;border-radius:var(--radius-xl) var(--radius-xl) var(--radius-xl) 4px;border:1px solid var(--line);background:var(--panel);max-width:min(100%,960px);white-space:pre-wrap;word-wrap:break-word}
.amsg--u{background:var(--accent);color:var(--on-accent);border-color:transparent;align-self:flex-end;border-radius:var(--radius-xl) var(--radius-xl) 4px var(--radius-xl);max-width:min(70%,640px)}   /* Paweł 2026-09-23: odpowiedź idzie WSZERZ (było 320 px = w dół i znów pasek) */
.amsg__glebiej{margin-top:8px;white-space:normal}
.amsg--b{align-self:flex-start;background:var(--panel)}
.amsg--b::before{content:"HERMES";display:block;font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--accent-text);margin-bottom:6px}
.amsg--think::before{content:"HERMES"}
.aprop{background:var(--accent-soft);border-radius:var(--radius-sm);padding:12px;margin-top:10px;display:flex;flex-direction:column;gap:10px}
.aprop__akc{display:flex;gap:8px}
.aprop__akc>.btn{flex:1;height:40px}
.assist__sug{display:flex;gap:8px;padding:12px 16px 0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.assist__sug::-webkit-scrollbar{display:none}
.assist__sugb{flex:none;height:36px;padding:0 12px;background:var(--panel);border:1px solid var(--field-line);color:var(--txt);font:400 14px var(--font);cursor:pointer}
.assist__sugb:hover{border-color:var(--accent-text);color:var(--accent-text)}
.assist__composer{display:flex;flex-direction:row;align-items:center;gap:8px;margin:10px 16px 12px;padding:6px 8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-xl)}   /* Paweł 2026-09-23: JEDEN rząd — spinacz · pole · mikrofon · Wyślij */
.assist__row1{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.assist__composer input{flex:1;min-width:0;height:44px;padding:0 8px;border:0;background:transparent;font-size:16px;color:var(--txt);box-shadow:none}
.assist__clip{width:40px;height:40px;flex:none}
.assist__send{width:44px;height:44px;padding:0;flex:none}
.assist__mic{width:44px;height:44px;flex:none}
.assist__mic.is-rec{background:var(--danger);border-color:var(--danger);color:var(--on-accent)}
.assist__ctx2{display:inline-flex;align-items:center;font-size:12px;font-weight:600;color:var(--muted);background:var(--soft);border-radius:var(--radius-pill);padding:4px 10px}
.assist__ctx2 b{font-weight:600}
/* ═══ ETAP F — karta rekordu na telefonie (makieta Klient.html) ═══ */
.topbar__back{display:none}
.iconbtn--plain{border-color:transparent;background:transparent}
.cardbannerwrap{display:none}   /* DESIGN §6 p.5: pigulka „Karta kontrahenta” zdjeta (tytul karty mowi to samo) */
@media(max-width:900px){
  .topbar__back{display:flex;align-items:center;margin-left:-8px}
  .topbar.has-back .topbar__burger{display:none}
  .topbar.has-back .topbar__title{font-size:16px;font-weight:600;font-family:var(--font)}
  #vKontrahent,#vRecord{display:flex;flex-direction:column}
  #vKontrahent .prof__back,#vRecord .prof__back{display:none}   /* „←” jest w pasku gornym */
  #vKontrahent .prof__hd{order:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0 0}
  #vKontrahent .tagstrip{order:2;margin:12px 0 0}   /* pasek tagow (klasa .tagstrip) — pod naglowkiem, jak w makiecie */
  #vKontrahent .prof{order:4}
  .prof__hd .prof__av{width:52px;height:52px;border-radius:var(--radius-lg);background:var(--accent-soft);color:var(--accent-text);font:800 18px var(--font-display);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:none}
  .prof__id{min-width:0;flex:1}
  .prof__id h2{font:800 20px/1.2 var(--font-display);letter-spacing:-.2px;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .prof__sub{font-size:14px;color:var(--muted);margin:4px 0 0}
  .prof__acts{display:flex;gap:8px;margin:14px 0 0;flex-wrap:nowrap;flex:1 0 100%;order:3}   /* pelna szerokosc pod naglowkiem (`.prof__acts` siedzi W `.prof__hd`) */
  .prof__acts > *{display:none}                                   /* reszta akcji siedzi pod „…” w pasku gornym */
  .prof__acts > #actTask,.prof__acts > #actWiedza{display:inline-flex;flex:1;min-width:0}
  .prof__acts > #actTask{order:1 !important}
  .prof__acts > #actWiedza{order:2 !important}
  .prof__acts > #actWiedza.btn{background:var(--panel);border:1px solid var(--accent-text);color:var(--accent-text)}
  .prof__acts .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* fakty 2×2 wg §4.3 (.pkpi w roli .fact) */
  .pkpis{gap:8px;margin:0 0 14px}
  .pkpi{padding:12px;border-radius:var(--radius);box-shadow:none}
  .pkpi__lab{font-size:11px;letter-spacing:.6px}
  .pkpi__val{font-size:16px;font-weight:600;margin-top:4px}
  .pkpi__sub{font-size:13px;font-weight:400;margin-top:4px}
}
/* ═══ ETAP E — Poczta na telefonie (makieta Poczta.html) ═══ */
.mailtel{display:none;flex-direction:column;gap:10px;padding:8px 0 10px}
/* DESIGN 2.9 §8.4: segment W PASKU NARZEDZI jest kontrolka, nie przelacznikiem na cala szerokosc.
   Bazowy `.seg` (§4.5) rozciaga sie na 100% i ma 44 px — w pasku wypychal szukajke do drugiego rzedu
   (ZMIERZONE: pasek 94 px zamiast 36). W pasku: szerokosc z tresci, wysokosc rzedu, bez marginesu. */
.zadbar > .seg,.zadbar > .zadseg{grid-auto-columns:max-content;width:max-content;max-width:100%;height:36px;margin-bottom:0;flex:0 0 auto}
.zadbar > .seg button,.zadbar > .zadseg .zadseg__b{padding:0 12px;font-size:13px;white-space:nowrap}
.mailtel .seg{margin-bottom:0}
.mailtel__info{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);padding:0 2px;min-height:24px}
.mailtel__info span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.mailtel__info .btn--ghost{height:32px;padding:0 8px;font-size:14px}
.mrow__chipy .chip .ico{width:12px;height:12px}
@media(max-width:900px){
  .mailtel{display:flex}
  .mailbar,.tel__fab--mail{display:none !important}   /* pasek komputera zostaje w DOM (kontrolki telefonu klikaja jego przyciski); FAB zastapiony „Napisz” w pasku gornym */
  .maillist{border:0;background:none;padding:0;height:auto;max-height:none;overflow:visible}
  .maillist.mlist{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;padding-bottom:0;margin-bottom:24px}
  .view[data-view="poczta"] .view__head{display:none}
}
/* ═══ POWIADOMIENIA (DESIGN 1.2 §4.7): komputer = popover 360 px pod dzwonkiem, telefon = arkusz dolny ═══ */
.notifpanel{position:absolute;top:calc(100% + 8px);right:0;width:360px;max-height:70vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--sh-modal);z-index:80;padding:8px 8px 12px;text-align:left}
.notifhd{display:flex;align-items:center;gap:8px;padding:6px 8px 10px}
.notifhd__t{flex:1;font-size:16px;font-weight:600;color:var(--txt)}
.notifhd__b{display:flex;gap:6px}
.notifhd__ib{width:36px;height:36px}
.notifhd__ib.is-on{background:var(--accent-soft);border-color:var(--accent-text);color:var(--accent-text)}
.notifempty{margin:4px 0}
.notifitem{align-items:flex-start;padding:12px 8px}
.notifitem .arow__t{white-space:normal}
.notifitem .arow__t.is-nowy::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}
.notifitem .arow__m{white-space:normal;line-height:1.4}
.notifitem__act{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.notifitem__act .hwn-date,.notifitem__act .wnd-powod{height:32px;padding:0 8px;border:1px solid var(--field-line);border-radius:var(--radius-sm);font:inherit;font-size:13px}
.notifitem__act .wnd-powod{flex:1 1 140px;min-width:120px}   /* ADR-0076: powód odmowy wniosku wpisywany w wierszu dzwonka (bez okienka przeglądarki) */
@media(max-width:900px){
  .notifpanel{position:fixed;top:auto;right:0;left:0;bottom:0;width:100%;max-height:86vh;border-radius:16px 16px 0 0;border-bottom:0;padding:16px 16px max(16px,env(safe-area-inset-bottom));z-index:960}
  .notifpanel::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 12px}
  body.notif-open::after{content:"";position:fixed;inset:0;background:rgba(23,33,28,.45);z-index:950}
  .app.view-start .notifpanel{position:fixed;top:auto;left:0;right:0}
}
/* „×” czyszczenia szukajki (DESIGN 1.2): 44×44, --muted, aria-label */
.field__clear{width:44px;height:44px;margin-right:-10px;border:0;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--radius);flex:none}
.field__clear:hover{color:var(--txt)}
@media (min-width:901px){.field__clear{width:36px;height:36px;margin-right:-8px}}
/* ═══ ETAP D — ekran Start telefonu (makieta Main.html) ═══ */
.start{display:flex;flex-direction:column;gap:16px;padding:24px 0 0}
.start__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px}
.start__hd .t-meta{margin-top:2px}
.start__bell{position:relative}
.start__kropka{position:absolute;top:10px;right:11px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--panel)}
.start__dzis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.start__lnk{display:flex;flex-direction:column;gap:2px;padding:14px 12px;border:0;border-right:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0}
.start__lnk:last-child{border-right:0}
.start__lnk .num{color:var(--txt)}
.start__lnk small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num--danger{color:var(--danger)}
.num--accent{color:var(--accent-text)}
.start__ask{display:flex;align-items:center;gap:12px;height:52px;margin:0 16px;padding:0 8px 0 14px;background:var(--panel);border:1px solid var(--field-line);border-radius:var(--radius-pill);color:var(--muted);font:400 15px var(--font);cursor:pointer;text-align:left}
.start__ask>.ico{color:var(--accent-text)}
.start__ask>span:not(.start__mic){flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.start__mic{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent-text);flex:none}
.start__sek{display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin-bottom:-6px}
.kafle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 16px 24px}
.kafle__strona{display:contents}
/* „Ułóż" jako mały napis WKOMPONOWANY POD kaflami, nie osobny rząd nagłówka nad nimi
   (Paweł 2026-09-21: „co najwyżej mały ułóż napis gdzieś na dole, ale ładnie wkomponowane w całość").
   Rząd „SZYBKIE AKCJE + Ułóż" zabierał 40 px z wysokości, którą mają dostać kafle. */
.start__stopka{display:flex;align-items:center;justify-content:center;gap:2px;padding:0 16px 10px;margin-top:-4px}
.start__kropkasep{color:var(--muted);font-size:13px;opacity:.6}
.start__uloz{border:0;background:none;color:var(--muted);font:600 13px var(--font);letter-spacing:.2px;padding:6px 10px;border-radius:var(--radius-pill);cursor:pointer}
.start__uloz:hover{color:var(--accent-text);background:var(--accent-soft)}
@media (min-width:901px){.start{max-width:520px;margin:0 auto}}
/* ⚠️⚠️ KAFLE WYPEŁNIAJĄ EKRAN — TO JEST CAŁY SENS STAŁEJ LICZBY 2/4/6/8.
   Plan telefonu (`docs/design/telefon-pwa-ergonomia.md`, wiersz „Wielkość kafla"): „kafle ZAWSZE
   wypełniają ekran… (siatka CSS na wysokość ekranu)". Kod miał to nawet w komentarzu, a arkusz nie:
   `.kafel{height:104px}` + siatka bez wysokości rzędów = osiem kafli zajmuje ZAWSZE 476 px,
   niezależnie od telefonu. [ZMIERZONE @412x730] ostatni rząd schodził 94 px POD dolny pasek;
   @412x915 zostawało 165 px pustki. Czyli raz ucięte, raz za małe — nigdy dopasowane.
   ⚠️ DLACZEGO NIKT TEGO NIE ZŁAPAŁ PRZY PROJEKTOWANIU: makieta w edytorze „Mój telefon" ma własną
   regułę `.kedit__telscr .kafle{height:100%}` i wypełniała ekran poprawnie. Podgląd pokazywał co
   innego niż telefon — dwa mechanizmy zamiast jednego. Teraz wypełnianie jest TU, a makieta
   dziedziczy tę samą zasadę. Zgłoszenie Pawła 2026-09-21: „ikony miały zajmować całość ekranu". */
@media (max-width:900px){
  :root{--mtabs-h:74px}
  /* ⚠️ MIEJSCE NA PRZYKLEJONY DOLNY PASEK. Bez tego siatka wypelniala okno CO DO PIKSELA, ale pasek
     `position:fixed` lezy NA NIEJ i zjadal ostatnie 74 px — czyli dolny rzad dalej byl ucienty,
     mimo poprawnego wypelniania. [ZMIERZONE @412x730] stopka konczyla sie na 730, pasek zaczynal 656. */
  /* ⚠️ NA STARCIE DOLNEGO PASKA NIE MA (decyzja Pawla 2026-09-21). Trzy z czterech jego pozycji
     powtarzaly kafle, a kosztowal 74 px — czyli 18 px z KAZDEGO kafla (143 -> 161 px @412x730).
     Jedyna pozycja bez odpowiednika na kaflach, „Menu", zeszla do stopki obok „Uloz".
     Na POZOSTALYCH ekranach telefonu pasek zostaje bez zmian — dlatego regula jest zawezona do Startu. */
  .app.view-start .mtabs{display:none}
  .app.view-start #vStart{display:flex;flex-direction:column;padding-bottom:0}
  /* ekran Start to SAME KAFLE — gora bez powitania i licznikow, wiec odstep jest maly i rowny bokom */
  .start{flex:1 1 auto;min-height:0;gap:10px;padding-top:max(10px,env(safe-area-inset-top,0px))}
  .kafle{flex:1 1 auto;min-height:0;grid-auto-rows:1fr;padding-bottom:0}
  .kafel{height:auto;min-height:0}
  /* ⚠️ NIE MA TU reguly „niski kafel sie sciska". Byla napisana, gdy nad kaflami stalo powitanie,
     liczniki i pole asystenta — wtedy na 320x568 kafel miat 54 px i podpis byl przyciety. Po zdjeciu
     tamtego chromu [ZMIERZONE] ten sam telefon daje kafel 102 px i 14 px zapasu pod podpisem, wiec
     regula nie mialaby czego naprawiac. Martwy kod udaje zabezpieczenie — skasowany swiadomie. */
  /* stopka jest teraz ostatnia rzecza na ekranie (paska nie ma), wiec sama dba o bezpieczny margines */
  .start__stopka{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
}
@media (max-width:900px){   /* na Starcie pasek gorny znika (powitanie + dzwonek sa w tresci), zostaje tylko panel powiadomien */
  .app.view-start .topbar{height:0;min-height:0;padding:0;border:0;overflow:visible}
  .app.view-start .topbar > :not(.topbar__actions){display:none}
  .app.view-start .topbar__actions > :not(#notifPanel){display:none !important}
}
/* ═══ ETAP C — Zadania na telefonie (makieta Zadania.html) ═══ */
.topbar__va{display:none;align-items:center;gap:8px}
.zadtel{padding:8px 0 0}
.zadtel .seg{margin-bottom:12px}
.zadtel__filtry{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.zadtel__filtry::-webkit-scrollbar{display:none}
.zadtel__filtry .fpill{flex:none}
.zadtel__szukaj{margin:0 0 12px}
.zadtel__lista{display:flex;flex-direction:column;gap:10px;padding-bottom:24px}
.t-sem.is-danger{color:var(--danger)}
.iconbtn.is-on{background:var(--accent-soft);border-color:var(--accent-text);color:var(--accent-text)}
.sheet__poz.is-on{color:var(--accent-text)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mcard__client .ico{color:var(--muted)}
.mcard__foot .btn .ico{width:16px;height:16px}
@media(max-width:900px){
  .topbar__va{display:flex}
  .topbar.has-va .topbar__wiecej,.topbar.has-va #notifBell{display:none}   /* DESIGN §4.5: lupa + primary = dwie kontrolki, reszta pod Start/Menu */
  .view[data-view="zadania"]:has(.zadtel) .view__head{display:none}     /* tytul i „+ Zadanie” sa w pasku gornym */
}
/* DESIGN 1.1 §7: zaden .card/.mcard/.mrow/wiersz nie ma kolorowego lewego paska — stan pokazuje chip albo kropka priorytetu */
.card,.mcard,.mrow,.tl__row,.zadtel__k,.pcard{border-left:1px solid var(--line)}
/* ═══ SKALA KOMPUTERA (DESIGN.md §3 „Skala komputera”): te same klasy, jeden blok nadpisan wysokosci ═══ */
@media (min-width:901px){
  .btn,.btn--primary,.btn--secondary,.btn--neutral,.btn--ghost,.btn--danger{height:36px;padding:0 14px;font-size:14px}
  .btn--ghost{padding:0 10px}
  .btn--sm{height:32px;padding:0 12px;font-size:13px}
  .iconbtn{width:36px;height:36px}
  .iconbtn.toggle{width:36px;height:36px}   /* skala komputera §3 — ta sama co reszta ikon-przyciskow */
  .iconbtn .ico{width:20px;height:20px}
  .field input,.field select,.nfinput,select.ntkat{height:36px;padding:0 12px;font-size:14px}
  .field--search{height:36px;padding:0 12px}
  .field--search input{font-size:14px}
  .seg,.zadseg{height:36px}
  .fpill{height:32px}
  th,td{padding:8px 12px}
  .h-screen,.topbar__title{font-size:24px}
}

/* ===== PAS PRZEWIJANY: wygaszenie krawedzi, po ktorej jest ciag dalszy =====
   DESIGN §0 pkt 9, §8.5, §7 poz. 42. Jeden wyglad dla tabeli, tablicy, zakladek i chipow.
   ⚠️ WYJATEK OD §0 pkt 3 („zero gradientow"): wygaszenie krawedzi JEST gradientem i musi nim byc —
   ostra kreska w miejscu uciecia wyglada jak element interfejsu, a nie jak „tresc idzie dalej".
   Dotad jedynym dozwolonym gradientem poza logowaniem bylo `.ptabs-wrap::after` (§4.6a); teraz
   dochodzi maska pasa. Lista wyjatkow zamiast zera — uzgodnione z projektantem (DESIGN 2.24).
   ⚠️ MASKA, NIE NAKLADKA: gradient w masce nie wymaga ani opakowania, ani pseudoelementu, wiec pas
   dostaje wygaszenie niezaleznie od tego, gdzie w drzewie siedzi element, ktory naprawde przewija. */
/* Dwie NIEZALEZNE warstwy maski: pozioma i pionowa, skladane przez `intersect`. Jedna warstwa
   nie wystarczy, bo pas bywa przewijany w obu osiach naraz (tabela Klientow: 1604 px w pionie
   i 947 px w poziomie ZMIERZONE). Brak flagi = warstwa pelna czern, czyli nic nie wygasza. */
/* §7 poz. 68: PAS CHROMU (pasek narzedzi) zostaje nieprzezroczysty — trzecia warstwa skladana
   przez `add`, wiec rampy dzialaja WYLACZNIE ponizej niego. Wysokosc mierzy JS z paska. */
[data-pas-on]{-webkit-mask-image:linear-gradient(180deg,#000 0 var(--pas-chrom,0px),transparent var(--pas-chrom,0px)),var(--pas-x,linear-gradient(#000,#000)),var(--pas-y,linear-gradient(#000,#000));mask-image:linear-gradient(180deg,#000 0 var(--pas-chrom,0px),transparent var(--pas-chrom,0px)),var(--pas-x,linear-gradient(#000,#000)),var(--pas-y,linear-gradient(#000,#000));-webkit-mask-composite:source-over,source-in;mask-composite:add,intersect}
/* §7 poz. 68 (2.28): rampa konczy sie PRZED kolumna dzialan i wraca do pelnej nieprzezroczystosci
   na jej szerokosci (--pas-akcje, mierzona z komorki). Kolumna dzialan jest przyklejona, wiec
   tresc przewija sie ZA nia, a wygaszenie dalej mowi prawde o ciagu dalszym tabeli. */
[data-pas-p]{--pas-x:linear-gradient(90deg,#000 calc(100% - 56px - var(--pas-rez,0px)),transparent calc(100% - var(--pas-rez,0px)),#000 calc(100% - var(--pas-rez,0px)))}
[data-pas-l][data-pas-p]{--pas-x:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 56px - var(--pas-rez,0px)),transparent calc(100% - var(--pas-rez,0px)),#000 calc(100% - var(--pas-rez,0px)))}
th[data-col='akcje'],td[data-col='akcje']{position:sticky;right:0;z-index:4;background:var(--panel)}
/* §7 poz. 68 (2.30): W SPOCZYNKU KOLUMNA POKAZUJE AKCJE OTWIERAJACA REKORD I WIELOKROPEK.
   Rozwiniecie NIE rozpycha wiersza — wychodzi w LEWO, nad sasiednie komorki, na wlasnym tle,
   bo to chwilowa warstwa nad rejestrem, a nie staly zabor 176-510 px szerokosci. */
/* §8.1: zakladki ZASTEPUJA pasek narzedzi — jeden rzad chromu zamiast dwoch. Zakladki kurcza sie
   pierwsze, bo maja wlasne przewijanie; pasek narzedzi trzyma szerokosc swoich kontrolek. */
/* ⚠️ ZAWIJA SIE, NIE UCINA (zgloszenie Pawla 2026-09-21: „czesc przyciskow uciete - dedykowane,
   wszystkie"). Bylo `nowrap` + `flex:0 1 auto`: gdy pasek filtrow byl szeroki (Licencje maja pigulke
   miesiaca, chip, „Wiecej", szukajke i „Kolumny"), zakladki kurczyly sie PIERWSZE i konczyly na
   „Dedykow…", a dalszych („Wszystkie", „Zakonczone") nie bylo jak dosiegnac - pasek przewijania jest
   tu ukryty. Jeden rzad chromu (§8.1) to BUDZET, nie prawo do chowania sterowania: gdy sie nie miesci,
   pasek filtrow schodzi do wlasnego rzedu, a zakladki zostaja w calosci. Gdy sie miesci - jeden rzad
   jak dotad, wiec ekrany w budzecie nic nie traca. */
.chromrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.chromrow > .ptabs{flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.chromrow > .ptabs::-webkit-scrollbar{display:none}
.chromrow > .zadbar{flex:1 0 auto;margin-left:auto}
td[data-col='akcje'] .akc{display:inline-flex;align-items:center;gap:6px}
td[data-col='akcje'] .akc__r{display:none;align-items:center;gap:6px}
/* [ZMIERZONE 2026-09-20 @1280] bez tego `.plikakc` (flex-wrap:wrap) zawijal piec przyciskow
   do szerokosci ZWINIETEJ kolumny i panel wchodzil na sasiednie wiersze. Rozwiniecie wychodzi
   poza komorke, wiec zawijanie do jej szerokosci niczego nie chroni — rzad ma byc jednolinijkowy. */
td[data-col='akcje'] .akc__r,td[data-col='akcje'] .akc__r>*{flex-wrap:nowrap;white-space:nowrap}
td[data-col='akcje'] .akc__w{border:1px solid var(--field-line);background:var(--panel);color:var(--txt);border-radius:8px;min-width:32px;height:28px;padding:0 6px;font:inherit;font-size:15px;line-height:1;cursor:pointer}
td[data-col='akcje'] .akc__w:hover{background:var(--soft)}
/* [ZMIERZONE 2026-09-20] rozwiniecie chowalo sie pod PRZYKLEJONE komorki pozostalych wierszy
   (kazda ma z-index 4, a pozniejszy wiersz rysuje sie nad potomkiem wczesniejszego). */
tr:hover td[data-col='akcje'],td[data-col='akcje'][data-otwarte]{z-index:8;overflow:visible}   /* komorka normalnie PRZYCINA tresc (l. 1616) — rozwiniety panel ma z niej wyjsc */
/* Na czas rozwiniecia rezerwa rampy rosnie do szerokosci CALEGO panelu (mierzonej w silniku),
   inaczej wygaszenie zjada przyciski, ktore wlasnie odslonilismy. */
/* REZERWA RAMPY MIESZKA W ARKUSZU, NIE W ATRYBUCIE STYLU: `--pas-akcje` i `--pas-akcje-otw`
   podaje JS (styl wpisany w element bije kazda regule), a wybiera miedzy nimi kaskada. */
[data-pas-on]{--pas-rez:var(--pas-akcje,0px)}
[data-pas-on]:has(td[data-col='akcje'][data-otwarte]),[data-pas-on]:has(tr:hover td[data-col='akcje']){--pas-rez:var(--pas-akcje-otw,0px)}
tr:hover td[data-col='akcje'] .akc,td[data-col='akcje'] .akc[data-otwarte]{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:var(--panel);padding-left:10px;z-index:6}
tr:hover td[data-col='akcje'] .akc__r,td[data-col='akcje'] .akc[data-otwarte] .akc__r,td[data-col='akcje'] .akc:focus-within .akc__r{display:inline-flex}
tr:hover td[data-col='akcje']{background:var(--soft-2)}
[data-pas-l]{--pas-x:linear-gradient(90deg,transparent,#000 40px)}
/* PION: dol zawsze, gora TYLKO gdy pas nie ma przyklejonego naglowka — przyklejony naglowek sam
   jest sygnalem „jestes nizej", a wygaszenie wyprałoby mu litery (DESIGN §8.5). */
[data-pas-d]{--pas-y:linear-gradient(180deg,#000 calc(100% - 40px),transparent)}
[data-pas-g]{--pas-y:linear-gradient(180deg,transparent,#000 32px)}
[data-pas-g][data-pas-d]{--pas-y:linear-gradient(180deg,transparent,#000 32px,#000 calc(100% - 40px),transparent)}
/* Sygnal gornej krawedzi tam, gdzie rampy byc nie moze: cien pod PRZYKLEJONYM naglowkiem,
   zapalany dopiero po pierwszym pikselu przewiniecia (2.25, doprecyzowanie projektanta).
   Rampa wyprałaby litery naglowka, a sam naglowek stoi tam takze przy scrollTop = 0. */
[data-pas-cien] thead th{box-shadow:inset 0 -1px 0 var(--line-strong),0 6px 8px -6px rgba(17,24,20,.18)}

/* Licznik kolumn poza zestawem domyslnym (ranga, DESIGN 2.12) NA przycisku, nie obok niego.
   Pozycja bezwzgledna = ZERO szerokosci w ukladzie: chodzik zmierzyl w CI, ze doklejenie
   „+N" do napisu zawijalo pasek narzedzi w drugi rzad i lamalo budzet chromu na Spotkaniach. */
.zadcolsbtn{position:relative;overflow:visible}
/* §7 poz. 68: plakietka NIE wychodzi poza przycisk — wychylona o 7 px byla przycinana przez
   prostokat pasa dokladnie na prawej krawedzi panelu (ZMIERZONE: widoczne 11 px z 18). */
/* §7 poz. 68 (2.28): element, ktory przestal byc PRZYCINANY, nie moze zaczac ZASLANIAC.
   [ZMIERZONE] plakietka wchodzila na ostatnia litere „Kolumny" o 4-5 px — na Instrukcjach
   „y" nie bylo w ogole i przycisk czytal sie „Kolumn2". Przycisk dostaje zapas z prawej,
   a plakietka staje W TYM ZAPASIE, nie nad napisem. */
.zadcolsbtn{padding-right:28px !important}
.zadcolsbtn__n{position:absolute;top:50%;transform:translateY(-50%);right:5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--accent);color:#fff;font-size:11px;line-height:17px;font-weight:700;text-align:center;pointer-events:none}

/* ===== STAN PUSTY I STAN LADOWANIA — jeden ksztalt (DESIGN 8.6) =====
   Jeden odstep, jedna typografia, opcjonalna JEDNA akcja glowna. Bez emoji (0 pkt 11). */
.empty[data-pusty],.empty[data-laduje]{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 24px;text-align:center;color:var(--muted)}
/* §7 poz. 69: tytul bierze --txt, zdanie --muted. ZMIERZONE: tytul mial token poboczny
   (rdzen piksela rgb(91,107,99)) i czytal sie razem ze zdaniem jako jeden szary blok. */
.empty__t{font-size:15px;font-weight:700;color:var(--txt,var(--text))}
.empty__p{font-size:13px;color:var(--muted);max-width:44ch}
.empty__a{margin-top:4px}
.empty[data-laduje]{flex-direction:row;justify-content:center;gap:10px;padding:24px}
.empty__sp{width:14px;height:14px;border:2px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:pasSpin .7s linear infinite}
@keyframes pasSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.empty__sp{animation:none;border-top-color:var(--line-strong)}}

/* ===== WIERSZ TYTULU (DESIGN 8.3, par. 7 poz. 67) =====
   Jeden tytul, podpowiedz POD nim w --muted, akcja glowna na PRAWYM koncu.
   [ZMIERZONE na zrzutach partii C] podpowiedz `.colcfg` miala `margin-left:auto` i spychala
   przycisk glowny na srodek wiersza - czytalo sie to jak dwa rownorzedne elementy. */
.view__head{flex-wrap:wrap}
.view__head > .colcfg,.view__head > .vhint,.view__head > .hint{flex:0 0 100%;order:90;margin-left:0;margin-top:2px;color:var(--muted)}
.view__head > .btn--primary{margin-left:auto;order:50}

/* Awaria pobierania transkrypcji na Spotkaniach — JEDNO zdanie, tylko gdy naprawde nie dziala.
   Pas diagnostyczny („ostatnio / nastepny / dzis pobrano") zdjety z ekranu decyzja projektanta:
   to przyrzad NASZ, nie uzytkownika, a lampka swiecaca zawsze nie mowi nic. */
.spo-awaria{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 12px;border-radius:10px;
  background:var(--danger-soft,#fdeceb);color:var(--danger);font-size:13px}
.spo-awaria a{color:inherit;text-decoration:underline}

/* Ikona stanu pustego w kwadracie --accent-soft (DESIGN 0 pkt 10). */
.empty__i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent-text);margin-bottom:2px}

/* ═══ NAUCZ HERMESA PROCESU (ADR-0075) — pasek nagrywania, karta przeglądu, „Poprowadź mnie” ═══ */
#naukaPasek{position:fixed;left:0;right:0;top:0;z-index:2147483000;display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--accent-soft);border-bottom:2px solid var(--accent);font-size:13px}
body.nauka-on .mainwrap,body.nauka-on .sidebar{padding-top:40px}
.nauka-kropka{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:nauka-puls 1.2s ease-in-out infinite}
@keyframes nauka-puls{0%,100%{opacity:1}50%{opacity:.25}}
.nauka-krok{margin-bottom:10px}
.nauka-opis{font:inherit;padding:6px 8px;border:1px solid var(--field-line);border-radius:8px;resize:vertical}
#gmOverlay .gm-ring{position:absolute;border:3px solid var(--accent);border-radius:10px;box-shadow:0 0 0 4px rgba(0,0,0,.08),0 0 0 9999px rgba(0,0,0,.18);pointer-events:none;z-index:2147482000;transition:all .25s}
#gmOverlay .gm-label{position:absolute;z-index:2147482001;max-width:360px;background:var(--surface,#fff);color:var(--text,#1f2937);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:13px;line-height:1.4}
#gmOverlay .gm-nr{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:1px 8px;font-weight:700;margin-right:6px;font-size:12px}

/* ADR-0093: ASYSTENT = WSPÓLNE OKNO PRACY AI (makieta komputer/K-Asystent-Okno.html; DESIGN §4.6a). Telefon bez zmian (widok = dok). */
.asokno .asys3__cols{grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(260px,320px);gap:20px}
.asokno__bok{display:flex;flex-direction:column;gap:10px;min-width:0}
.asokno__prawa{gap:14px}
.asokno__h{display:flex;align-items:center;gap:8px;font-size:14px}
.asokno__h b{flex:1}
.asokno .cnt:empty{display:none}
.asokno__szukaj{width:100%}
.asokno__lista{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto}
.asokno__grp{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:8px 0 0;display:flex;align-items:center;gap:6px}
.asokno__sk{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.asokno__sktxt{flex:1;min-width:0}
.asokno__sk b{display:block;font-size:14px;word-break:break-word}
.asokno__sk small{display:block;color:var(--muted);font-size:12px}
.asokno__wt{display:flex;align-items:center;gap:6px;justify-content:space-between}
.asokno__przyc{display:flex;flex-direction:column;gap:6px}
.asokno__form{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.asokno__tekst{min-height:120px;height:auto;padding:10px 14px;font-family:inherit}
.asokno__maly{font-size:12px}
.asokno__srodek{display:flex;flex-direction:column;height:calc(100vh - 190px);min-height:520px;padding:14px}
.asokno__nag{border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
.asokno__nagrz{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.asokno__nagrz + .asokno__nagrz{margin-top:8px}
.asokno__tyt{flex:1;font-size:16px}
.asokno__sel{width:auto;min-width:200px;height:40px;padding:0 11px;border:1px solid var(--field-line);border-radius:10px;background:var(--panel);color:var(--txt);font:inherit;font-size:14px;cursor:pointer}
.asokno__sel:focus{outline:none;border-color:var(--accent-text)}
.asokno__rozm{flex:1;display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0;padding:4px 2px}
.asokno__rozm > :first-child{margin-top:auto}   /* DESIGN §4.6: kotwica u dołu przez margin-top:auto pierwszej wiadomości (nigdy justify-content:flex-end) */
.asokno__pusto{text-align:center;color:var(--muted);padding:24px 12px}
.asokno__ktomowi{font-size:12px;font-weight:700;color:var(--accent-text);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px}
.asokno__narz{font-size:12px;color:var(--muted)}
.asokno__komp{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line);border-radius:16px;padding:6px 8px;margin-top:12px;background:var(--panel)}
.asokno__pole{flex:1;border:0;resize:none;font:inherit;font-size:15px;padding:10px 6px;min-height:44px;max-height:180px;background:transparent;color:var(--txt);outline:0}
.asokno__wyslij{width:44px;padding:0;justify-content:center}
.asokno__komp[hidden]{display:none}
.asokno__kto{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--field-line);border-radius:12px;margin-top:8px;width:100%;text-align:left;font:inherit;color:var(--txt);background:var(--panel);cursor:pointer}
.asokno__kto:hover{background:var(--soft-2)}
.asokno__kto.is-cur{border-color:var(--accent);background:var(--accent-soft)}
.asokno__ktotxt{flex:1;min-width:0}
.asokno__ktotxt small{display:block;color:var(--muted);font-size:12px}
.asokno__moje{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:240px;overflow:auto}
.asokno__rozmwiersz{display:block;text-align:left;border:1px solid var(--field-line);border-radius:10px;background:var(--panel);padding:8px 10px;cursor:pointer;font:inherit;color:var(--txt)}
.asokno__rozmwiersz:hover{background:var(--soft-2)}
.asokno__rozmwiersz small{display:block;color:var(--muted);font-size:12px}
.aozgoda{background:var(--accent-soft);border-radius:10px;padding:12px}
.aozgoda__opis{font-size:14px;margin:4px 0 8px;word-break:break-word}
.aozgoda__btn{display:flex;gap:8px}
.aozgoda__btn .btn{flex:1;justify-content:center}
.hresasys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
@media(max-width:1280px){.asokno .asys3__cols{grid-template-columns:1fr}.asokno__srodek{order:-1}.hresasys{grid-template-columns:1fr}}
/* ADR-0106: moduł BI — ramka pulpitu Metabase na całą szerokość panelu; stała wysokość okna, pulpit przewija się w środku (renderBI) */
.bi-ramka{display:block;width:100%;height:calc(100vh - 150px);min-height:480px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
/* D-2026-10-05-bi-wyglad-panelu: pulpit „Godziny zespołu” rysowany w panelu — układ z prototypu zaakceptowanego przez Pawła
   (filtry przyklejone, zakładki analiz, karty w siatce 12 kolumn). Kolory rodzajów pracy = tokeny --bi-* (oba motywy). */
:root{--bi-zdalne:#2a7f74;--bi-wizyta:#c27d22;--bi-projekt:#4b5fb5;--bi-wewn:#8b958f}
:root[data-theme="dark"]{--bi-zdalne:#4fb3a6;--bi-wizyta:#e0a24f;--bi-projekt:#8396e6;--bi-wewn:#9aa49e}
.bi{display:block;min-width:0}
.bi-filtry{position:sticky;top:0;z-index:5;background:var(--bg);padding-block:10px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.bi-fgr{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bi-flab{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bi-filtry select{font:inherit;font-size:14px;color:var(--txt);background:var(--panel);border:1px solid var(--field-line);border-radius:8px;padding:6px 10px;min-height:36px}
.bi-tog{font:600 13px var(--font);border:1px solid var(--field-line);background:var(--panel);color:var(--muted);border-radius:999px;padding:5px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.bi-tog[aria-pressed="true"]{color:var(--txt);border-color:var(--txt)}
.bi-tog[aria-pressed="false"] .bi-kropka{opacity:.3}
.bi-kropka{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.bi-kw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.bi-reset{font:600 13px var(--font);background:none;border:0;color:var(--accent-text,var(--accent));cursor:pointer;padding:4px}
.bi-okres{margin-left:auto;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:var(--warn-soft);color:var(--txt)}
.bi-zakl{display:flex;gap:4px;margin:16px 0 14px;overflow-x:auto;border-bottom:1px solid var(--line)}
.bi-zak{font:600 14px var(--font);background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);padding:10px 12px;cursor:pointer;white-space:nowrap}
.bi-zak[aria-selected="true"]{color:var(--accent-text,var(--accent));border-bottom-color:var(--accent)}
.bi-siatka{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.bi-karta{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.bi-karta h3{font-size:15px;font-weight:700;margin:0 0 2px;color:var(--txt)}
.bi-h3dod{margin-top:14px!important}
.bi-hint{font-size:13px;color:var(--muted);margin:0 0 10px}
.bi-siatka .s3{grid-column:span 3}.bi-siatka .s4{grid-column:span 4}.bi-siatka .s5{grid-column:span 5}.bi-siatka .s6{grid-column:span 6}.bi-siatka .s7{grid-column:span 7}.bi-siatka .s8{grid-column:span 8}.bi-siatka .s12{grid-column:span 12}
@media (max-width:980px){.bi-siatka .s3{grid-column:span 6}.bi-siatka .s4,.bi-siatka .s5,.bi-siatka .s6,.bi-siatka .s7,.bi-siatka .s8{grid-column:span 12}}
@media (max-width:520px){.bi-siatka .s3{grid-column:span 12}}
.bi-lab{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bi-val{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px;color:var(--txt)}
.bi-note{font-size:13px;color:var(--muted)}
.bi-wyk{position:relative;height:340px}.bi-wyk--wys{height:560px}.bi-wyk--nis{height:260px}.bi-wyk--d{height:220px}
.bi-tabwrap{overflow-x:auto}
.bi-tabela{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
.bi-tabela th,.bi-tabela td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.bi-tabela th:first-child,.bi-tabela td:first-child{text-align:left}
.bi-tabela th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.bi-tabela tbody tr[data-bio]{cursor:pointer}
.bi-tabela tr.is-sel td{background:var(--accent-soft)}
.bi-tabela tr.bi-razem td{font-weight:700}
.bi-tabela .bi-lewo{text-align:left;max-width:24ch;overflow:hidden;text-overflow:ellipsis}   /* ADR-0107: kolumny tekstowe tabel z opisów — do lewej, jedna linia, pełny tekst w podpowiedzi */
.bi-tabela--opis th{white-space:normal;vertical-align:bottom}   /* ADR-0107: nagłówki tabel z opisów zawijają się (nazwy kolumn pytań bywają długie) */
.bi-heat{border-radius:6px;padding:3px 8px;display:inline-block;min-width:92px}
.bi-mut{color:var(--muted)}
.bi-donuty{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:980px){.bi-donuty{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.bi-donuty{grid-template-columns:1fr}}
.bi-donut h4{margin:0 0 4px;font-size:14px;display:flex;align-items:center;gap:8px;color:var(--txt)}
.bi-top{list-style:none;margin:8px 0 0;padding:0;font-size:13px}
.bi-top li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line);padding:3px 0}
.bi-odstep{margin-bottom:14px}.bi-odstep-g{margin-top:14px}
.bi-selbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.bi-wnioski{display:grid;gap:10px}
.bi-wniosek{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.bi-wniosek p{margin:0;max-width:95ch;color:var(--txt)}
.bi-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:6px;padding:3px 8px;white-space:nowrap;color:var(--txt)}
.bi-tag--info{background:var(--accent-soft)}.bi-tag--warn{background:var(--warn-soft)}.bi-tag--bad{background:var(--danger-soft)}.bi-tag--ok{background:var(--ok-soft)}
.bi-stopka{margin-top:24px;font-size:13px;color:var(--muted);max-width:110ch}