/* Centrum treści – wspólny wygląd panelu i strony klienta (Arimo + Tinos, kolor firmy w --firma) */
:root {
  --bg: #F2F5FA; --card: #FFFFFF; --fg: #14223A; --muted: #5C6B80; --line: #DCE3EE;
  --firma: #1B2A4A; --sel: #E9F0FB; --ok: #12813A; --ok-soft: #E2F3E7; --warn: #A15C00; --warn-soft: #FDF1DD;
  --serif: "Tinos", "Times New Roman", Times, serif; --sans: "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --bg: #0D1626; --card: #142036; --fg: #E5ECF6; --muted: #9AABC0; --line: #263550; --sel: #1A2C49;
  --ok: #46B866; --ok-soft: #173826; --warn: #E0A04A; --warn-soft: #3A2A12; color-scheme: dark } }
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.5 var(--sans) }
.wrap { max-width: 980px; margin: 0 auto; padding-block: 24px 140px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.eyebrow { font: 700 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--firma) }
@media (prefers-color-scheme: dark) { .eyebrow { filter: brightness(1.6) } }
h1 { font: 700 clamp(28px, 6vw, 42px)/1.08 var(--serif); margin: 8px 0 4px; text-wrap: balance }
h2 { font: 700 23px/1.15 var(--serif); margin: 0; text-wrap: balance }
.muted { color: var(--muted) }
.btn { font: 700 15px var(--sans); border: 0; border-radius: 999px; padding: 12px 22px; background: var(--ok); color: #fff; cursor: pointer }
.btn.sec { background: transparent; color: var(--fg); border: 2px solid var(--line) }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--firma); outline-offset: 2px }
.chip { display: inline-block; font: 700 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--sel); color: var(--fg) }
.chip.mocny { background: var(--firma); color: #fff }
.chip.ok { background: var(--ok-soft); color: var(--ok) }
.chip.warn { background: var(--warn-soft); color: var(--warn) }
.lista { display: grid; gap: 14px }
.temat { display: grid; grid-template-columns: 180px 1fr; gap: 18px; background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 14px; transition: border-color .2s ease-out }
.temat.on { border-color: var(--firma); background: linear-gradient(0deg, var(--sel), var(--sel)) padding-box }
.temat.bez-grafiki { grid-template-columns: 1fr }
.temat img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; display: block; background: var(--line) }
.tresc { min-width: 0; display: flex; flex-direction: column; gap: 8px }
.chips { display: flex; flex-wrap: wrap; gap: 6px }
details { border-top: 1px solid var(--line); padding-top: 6px }
summary { cursor: pointer; font-weight: 700; color: var(--muted) }
.post { white-space: pre-wrap; font-size: 14.5px; margin-top: 8px; overflow-wrap: anywhere }
.zrodlo { white-space: pre-wrap; font-size: 13.5px; background: var(--bg); border-radius: 10px; padding: 9px 12px; margin-top: 8px; overflow-wrap: anywhere }
.zrodlo b, .haslo b { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px }
.haslo { font-size: 14px; border-left: 3px solid var(--firma); padding: 4px 10px }
.wybory { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px }
.tog { display: inline-flex; align-items: center; gap: 8px; font: 700 14.5px var(--sans); border: 2px solid var(--line); border-radius: 999px; padding: 8px 15px; background: var(--card); color: var(--fg); cursor: pointer }
.tog input { width: 18px; height: 18px; accent-color: var(--firma); margin: 0 }
.tog:has(input:checked) { border-color: var(--firma) }
.tog:has(input:disabled) { opacity: .45; cursor: not-allowed }
.info { padding: 13px 16px; border-radius: 14px; background: var(--sel); font-weight: 600 }
.info.ok { background: var(--ok-soft) }
.pusto { text-align: center; padding: 48px 20px; background: var(--card); border: 2px dashed var(--line); border-radius: 18px; color: var(--muted) }
.pasek { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(20,34,58,.08);
  padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.pasek-in { max-width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center }
.licznik { font: 700 18px var(--sans); font-variant-numeric: tabular-nums }
.licznik small { display: block; font: 400 13px var(--sans); color: var(--muted) }
textarea, input[type=password], input[type=text] { font: 400 15px/1.4 var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px }
textarea { flex: 1 1 220px; min-width: 0; resize: vertical; min-height: 42px }
.potw { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 600 }
.komunikat { flex-basis: 100%; font-size: 14px }
@media (max-width: 640px) { .temat { grid-template-columns: 1fr } .temat img { max-width: 300px } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* tematy przeniesione z poprzedniego tygodnia */
.sekcja-zal{margin:28px 0 4px;font-size:18px;color:var(--muted,#5B6B7D);grid-column:1/-1}
.chip.zal{background:#FDF1DD;color:#7A4600}

/* własna propozycja klienta (post / rolka + opis + zdjęcia lub wideo) */
.propozycja { margin-top: 26px; background: var(--card); border: 2px dashed var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 12px }
.propozycja.on { border-style: solid; border-color: var(--firma) }
.propozycja h2 { font-size: 22px }
.propozycja p { margin: 0 }
.propozycja textarea { width: 100%; min-height: 96px; flex: none }
.formy { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0 }
.formy legend { font-weight: 700; margin-bottom: 6px; padding: 0 }
.dodaj-plik { display: inline-flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer }
.dodaj-plik input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.dodaj-plik:has(input:focus-visible) { outline: 3px solid var(--firma); outline-offset: 2px }
.pliki { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.pliki li { display: flex; align-items: center; gap: 10px; background: var(--bg); border-radius: 12px; padding: 8px 12px; font-size: 14.5px; overflow-wrap: anywhere }
.pliki li span { flex: 1; min-width: 0 }
.pliki li small { color: var(--muted); white-space: nowrap }
.pliki button { font: 700 13px var(--sans); background: transparent; border: 0; color: var(--warn); cursor: pointer; padding: 4px 6px }

/* ── stały harmonogram (20.10.2026): panel właściciela i link tylko do odczytu (p.html) ── */
.harm-lista { display: grid; gap: 8px }
.harm { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 14px }
.harm summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center }
.harm summary .kiedy, .harm-nastepny .kiedy { font-variant-numeric: tabular-nums; white-space: nowrap }
.harm-tresc { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 16px; margin-top: 12px }
.harm-tresc.bez-grafiki { grid-template-columns: minmax(0, 1fr) }
.harm-tresc img { width: 100%; height: auto; border-radius: 8px; display: block }
.harm-tresc > div { display: grid; gap: 8px; align-content: start; min-width: 0 }
.harm-slajdy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start }
.harm-cykl > summary { cursor: pointer; display: grid; gap: 6px; list-style: none; color: var(--fg) }
.harm-cykl > summary::-webkit-details-marker { display: none }
.harm-cykl > summary h2::after { content: '▸'; display: inline-block; margin-left: 10px; font-size: .8em; color: var(--muted); transition: transform .15s }
.harm-cykl[open] > summary h2::after { transform: rotate(90deg) }
.harm-nastepny { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center }
@media (prefers-reduced-motion: reduce) { .harm-cykl > summary h2::after { transition: none } }
@media (max-width: 640px) { .harm-tresc { grid-template-columns: minmax(0, 1fr) } }
/* opis właściciela do terminu (Polonia: opis meczu do 22:00 w dniu meczu + zdjęcia) */
.opis-wl { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--sel) }
.opis-wl textarea { font: 400 15px/1.45 var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px; width: 100%; box-sizing: border-box; resize: vertical }
.opis-wl label.btn { cursor: pointer }
.opis-wl label.btn:has(input:focus-visible) { outline: 2px solid var(--firma); outline-offset: 2px }
.opis-zdjecia { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px }
.opis-zdj { margin: 0; display: grid; gap: 4px }
.opis-zdj img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block }
.opis-zdj .btn { padding: 4px 8px; font-size: 13px }

/* strona klienta: decyzja przy każdym temacie (20.10.2026) */
.decyzja { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px }
.decyzja .btn { padding: 11px 18px }
.btn.maly { padding: 5px 12px; font-size: 13px; margin-left: 4px }
.temat.pozniej { opacity: .78 }
.temat.pozniej img { filter: grayscale(.35) }
.wiersz-prop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
#licznik { margin: 14px 0 }

/* gotowe rolki (WorkVolume: oferty pracy) */
.rolki { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px }
.rolka { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-content: start }
.rolka .kadr { width: 96px; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; background: var(--line); border: 0; padding: 0; cursor: pointer; position: relative }
.rolka .kadr img, .rolka .kadr video { width: 100%; height: 100%; object-fit: cover; display: block }
.rolka .kadr span { position: absolute; inset: auto 0 6px; text-align: center; font: 700 11px var(--sans); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6) }
.rolka.gra { grid-template-columns: 1fr } .rolka.gra .kadr { width: 100%; max-width: 320px; margin: 0 auto; cursor: default }
.rolka b.t { font-size: 15.5px; line-height: 1.25 } .rolka .m { font-size: 13.5px; color: var(--muted) }
.rolka details { grid-column: 1 / -1 } .rolka .akcje { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px }
.rolka .akcje .btn, .rolka .akcje a.btn { padding: 7px 13px; font-size: 13.5px; text-decoration: none }
/* opis dla klienta na górze widoku firmy (Rolki.info) */
.info-firmy { border-left: 4px solid var(--firma); background: var(--sel) }
/* odliczanie do meczu (Polonia, 22.10.2026): sekcja podzielona na kolejki, w każdej posty 2 dni / 1 dzień / match day */
.harm-mecz { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 10px 14px }
.harm-mecz > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center }
.harm-mecz .harm { background: var(--card) }
/* cykle stałego harmonogramu jako osobne karty (23.10.2026, prośba właściciela: tytuły „Poniedziałek: podsumowanie meczu”,
   „Wtorek z trenerem…” zlewały się) – kolorowy pasek z lewej, nagłówek na lekkim tle w kolorze firmy, odstęp między cyklami */
.harm-cykl { border: 1px solid var(--line); border-left: 6px solid var(--firma); border-radius: 16px; padding: 0; margin: 0 0 14px; background: var(--card); overflow: hidden }
.harm-cykl > summary { padding: 14px 16px 12px; background: color-mix(in srgb, var(--firma) 7%, var(--card)) }
.harm-cykl[open] > summary { border-bottom: 1px solid var(--line) }
.harm-cykl > summary h2 { font-size: 18px; color: var(--fg) }
.harm-cykl > summary .harm-nastepny { margin-top: 4px }
.harm-cykl > div, .harm-cykl > details { margin-left: 16px; margin-right: 16px }
.harm-cykl > .harm-lista { margin-top: 10px; margin-bottom: 14px }
.harm-cykl > div.muted:first-of-type { margin-top: 10px }
.harm-cykl > details:last-child { margin-bottom: 14px }
/* liczniki obserwujących FB/IG + kalendarz przyrostów (23.10.2026, obserwujacy.js) – portal klienta i panel właściciela */
.obserwujacy { display: grid; gap: 12px; margin: 18px 0 }
.obs-naglowek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; justify-content: space-between }
.obs-naglowek h2 { margin: 0; font-size: 20px }
.obs-naglowek .muted { font-size: 13px }
.obs-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px }
.obs-kafel { display: grid; gap: 3px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--k, var(--line)) }
.obs-kafel.fb { --k: #1877F2 } .obs-kafel.ig { --k: #E1306C } .obs-kafel.tt { --k: #888; opacity: .7 }
.obs-kafel .etyk { font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.obs-kafel .liczba { font: 800 28px/1.1 var(--sans); font-variant-numeric: tabular-nums }
.obs-kafel.tt .liczba { font-size: 20px; color: var(--muted) }
.obs-kafel .opis { font-size: 13px; color: var(--muted) }
.obs-przyr { font-size: 12.5px; color: var(--muted); margin-top: 4px }
.obs-zm { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted) }
.obs-zm.plus { color: var(--ok) } .obs-zm.minus { color: #C0352B }
.obs-historia { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 10px 14px }
.obs-historia > summary { font-weight: 700; color: var(--fg) }
.obs-kal-glowa { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 8px; text-transform: capitalize }
.obs-kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.obs-tyg { text-align: center; font: 700 11.5px var(--sans); color: var(--muted); padding: 2px 0 }
.obs-dzien { min-height: 58px; border-radius: 10px; border: 1px solid var(--line); padding: 4px 6px; display: grid; align-content: start; gap: 1px; font-size: 12px; min-width: 0 }
.obs-dzien.inny { opacity: .4 } .obs-dzien.jest { background: color-mix(in srgb, var(--ok) 5%, var(--card)) }
.obs-dzien .nr { font-weight: 700; color: var(--muted); font-size: 11.5px }
.obs-fb, .obs-ig { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden }
.obs-fb::before, .obs-ig::before, .obs-leg i { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block }
.obs-fb::before, .obs-leg i.fb { background: #1877F2 } .obs-ig::before, .obs-leg i.ig { background: #E1306C }
.obs-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; color: var(--muted) }
.obs-leg span { display: inline-flex; align-items: center; gap: 6px }
@media (max-width: 640px) { .obs-dzien { min-height: 46px; padding: 3px; font-size: 10.5px } .obs-kafel .liczba { font-size: 23px } }
/* każdy cykl ma własny wyraźny kolor (23.10.2026: kolor firmy, np. granat Polonii, ginął w ciemnym motywie) */
.harm-cykl { --cykl: #B98F48 }
.harm-cykl:nth-of-type(5n+2) { --cykl: #2E67FB }
.harm-cykl:nth-of-type(5n+3) { --cykl: #0E9F6E }
.harm-cykl:nth-of-type(5n+4) { --cykl: #8B5CF6 }
.harm-cykl:nth-of-type(5n+5) { --cykl: #E8603C }
.harm-cykl { border-left-color: var(--cykl) }
.harm-cykl > summary { background: color-mix(in srgb, var(--cykl) 12%, var(--card)) }
.harm-cykl > summary h2 { display: flex; align-items: center; gap: 10px }
.harm-cykl > summary h2::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--cykl); flex: none }

/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   24.10.2026: moduły wspólne (front-wspolne) – akordeon firm (gf-), dzień per firma (kgr-), kalendarz tematów (hk-),
   karty błędów (bl-), kampanie (rk-), diagnoza powiadomień (pd-), notatki (nt-), obserwujący (obs-), drużyna (kd-),
   „Jak publikujemy?” (ri-). Telefon najpierw (412 px), cele dotyku ≥ 44 px, jasny i ciemny motyw przez zmienne gospodarza
   (panel-b.css, panel.css, klient.css, app.css); --w-* to zapas dla p.html, który ładuje tylko ten plik.
   Błąd nigdy samym kolorem – zawsze trójkąt „!” albo „✕” i słowo. Ruch 200 ms ease-out, bez ruchu przy prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root { --w-zle: #C0352B; --w-zle-soft: #FDECEA; --w-pc: #B45309; --w-zloto: #B98F48; --w-glowny: #02377A; --w-glowny-t: #02377A; --w-r: 16px }
/* --w-glowny-t (24.10.2026, recenzja): kolor TEKSTU linków i obrysów, gdy gospodarz nie ma --akcent-t (portal, p.html) – w ciemnym jasny, kontrast ≥ 4,5:1 */
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) { --w-zle: #F07167; --w-zle-soft: #3B1715; --w-pc: #F0A54A; --w-zloto: #D3AF78; --w-glowny: #2F63C7; --w-glowny-t: #8FB1F3 } }
:root[data-motyw="ciemny"] { --w-zle: #F07167; --w-zle-soft: #3B1715; --w-pc: #F0A54A; --w-zloto: #D3AF78; --w-glowny: #2F63C7; --w-glowny-t: #8FB1F3 }

/* wspólne: zwijane sekcje bez domyślnego trójkąta, własna strzałka obracana 200 ms */
:is(.gf, .kgr, .hk-poz, .bl-tech, .bl-hist, .rk-sekcja, .pd-w, .nt, .nt-fakty, .nt-stare, .obs-kompakt, .kd-zw, .ri-info) { border-top-width: 1px; padding-top: 0 }
:is(.gf, .kgr, .bl-tech, .bl-hist, .rk-sekcja, .pd-w, .nt, .nt-fakty, .nt-stare, .obs-kompakt, .kd-zw, .ri-info) > summary { list-style: none; cursor: pointer; color: var(--fg); font-weight: 400 }
:is(.gf, .kgr, .bl-tech, .bl-hist, .rk-sekcja, .pd-w, .nt, .nt-fakty, .nt-stare, .obs-kompakt, .kd-zw, .ri-info) > summary::-webkit-details-marker { display: none }
.bl-tech, .nt-fakty { border-top: 0 }
.gf-strz, .kgr-strz, .rk-strz, .nt-strz, .ri-strz { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--muted); transition: transform .2s ease-out }
.gf-strz svg, .kgr-strz svg, .rk-strz svg, .nt-strz svg, .ri-strz svg { width: 16px; height: 16px }
.gf[open] > summary .gf-strz, .kgr[open] > summary .kgr-strz, .rk-sekcja[open] > summary .rk-strz, .nt[open] > summary .nt-strz, .ri-info[open] > summary .ri-strz { transform: rotate(180deg) }
:is(.bl-tech, .bl-hist, .nt-fakty, .nt-stare, .kd-zw) > summary::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .2s ease-out }
:is(.bl-tech, .bl-hist, .nt-fakty, .nt-stare, .kd-zw)[open] > summary::after { transform: translateY(1px) rotate(-135deg) }
:is(.gf-g, .kgr-g, .rk-g, .nt-g, .hk-dz, .gf-w, .bl-btn, .rk-btn, .rk-rodz, .pd-btn, .pd-karta, .nt-btn, .hk-widoki button, .hk-tematy button, .hk-nav, .hk-dzis):focus-visible { outline: 3px solid var(--akcent-t, var(--w-glowny-t)); outline-offset: 2px }

/* ── Kalendarz.grupyFirm + wierszKrotki (gf-): „Najbliższe publikacje” ── */
.gf-lista { display: grid; gap: 8px }
.gf { background: var(--card); border: 1px solid var(--line); border-radius: var(--r, var(--w-r)); overflow: hidden }
.gf-g { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 10px }
.gf[open] > .gf-g { background: color-mix(in srgb, var(--k, var(--line)) 7%, var(--card)); border-bottom: 1px solid var(--line) }
.gf-kw { width: 36px; height: 36px; border-radius: 8px; background: var(--k, #94A3B8); color: #fff; display: grid; place-items: center; font: 700 13px/1 var(--sans); flex: none; letter-spacing: .02em }
.gf-t { flex: 1; min-width: 0; display: grid; gap: 1px }
.gf-t b { font-size: 15px; line-height: 1.25 }
.gf-t small { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.gf-t small svg, .gf-pc svg { width: 14px; height: 14px; flex: none }
.gf-nast { min-width: 0; overflow: hidden; text-overflow: ellipsis } /* wielokropek zamiast uciętej godziny (24.10.2026) */
.gf-pc { color: var(--pc, var(--w-pc)); display: inline-flex }
.gf-alarm { width: 22px; height: 22px; border-radius: 50%; background: var(--zle, var(--w-zle)); color: #fff; display: grid; place-items: center; font: 800 13px/1 var(--sans); flex: none }
.gf-ile { display: grid; justify-items: end; line-height: 1; flex: none }
.gf-ile b { font: 700 17px/1 var(--sans); font-variant-numeric: tabular-nums }
.gf-ile small { font-size: 11px; color: var(--muted); margin-top: 3px }
.gf-l { padding: 6px 12px 12px; display: grid; gap: 2px }
.gf-stan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 4px }
.gf-stan a { font-weight: 600; font-size: 14px; color: var(--akcent-t, var(--w-glowny-t)); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center }
.gf-chip { font: 600 12px/1.2 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--sel); color: var(--fg) }
.gf-chip.ok { background: var(--ok-soft); color: var(--ok) } .gf-chip.warn { background: var(--warn-soft); color: var(--warn) } .gf-chip.zle { background: var(--zle-soft, var(--w-zle-soft)); color: var(--zle, var(--w-zle)) }
.gf-dz { font: 700 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 0 4px }
.gf-w { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; color: var(--fg); text-decoration: none; cursor: pointer }
.gf-w:hover { background: var(--sel) }
.gf-w.po { opacity: .6 }
.gf-godz { font: 700 14.5px/1 var(--sans); font-variant-numeric: tabular-nums }
.gf-tyt { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere }
.gf-ik { display: inline-flex; align-items: center; gap: 4px; color: var(--muted) }
.gf-ik svg { width: 15px; height: 15px; flex: none }
.gf-zle { display: inline-flex; align-items: center; gap: 3px; color: var(--zle, var(--w-zle)); font: 600 12px/1 var(--sans); white-space: nowrap }
.gf-wiecej { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 6px; border-radius: 999px; border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--akcent-t, var(--w-glowny-t)); text-decoration: none }
.gf-wiecej:hover { background: var(--sel) }
.gf-pusto { color: var(--muted); font-size: 14px; padding: 8px 0 }

/* ── Kalendarz.dzienFirm (kgr-): dzień „Wszyscy klienci” pogrupowany per firma ── */
.kgr-lista { display: grid; gap: 6px; margin-top: 8px }
.kgr { border: 1px solid var(--line); border-left: 4px solid var(--k, var(--line)); border-radius: 12px; background: var(--card) }
.kgr-g { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 6px 10px }
.kgr-kr { width: 12px; height: 12px; border-radius: 50%; background: var(--k, #94A3B8); flex: none }
.kgr-n { font-size: 15px }
.kgr-ile { font: 700 12px/1 var(--sans); padding: 4px 8px; border-radius: 999px; background: var(--sel); font-variant-numeric: tabular-nums }
.kgr-st { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px }
.kgr-st svg, .kgr-pc svg { width: 14px; height: 14px }
.kgr-st.ok { color: var(--ok) } .kgr-st.zle { color: var(--zle, var(--w-zle)); font-weight: 700 }
.kgr-pc { font-size: 12.5px; color: var(--pc, var(--w-pc)); display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums }
.kgr-strz { margin-left: auto }
.kgr-l { padding: 0 10px 8px }
.znacznik.zle svg { width: 13px; height: 13px; vertical-align: -2px }

/* ── Harmonogram.kalendarz (hk-): kalendarz miesięczny tematów ── */
.hk { display: grid; gap: 12px; margin: 8px 0 18px; min-width: 0 }
.hk-widoki { display: inline-flex; width: fit-content; padding: 3px; border-radius: 999px; background: var(--sel); gap: 2px }
.hk-widoki button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 14px var(--sans); cursor: pointer }
.hk-widoki button[aria-pressed="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgba(15, 27, 45, .12) }
.hk-tematy { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; min-width: 0 }
.hk-tematy button { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 500 13.5px var(--sans); cursor: pointer; white-space: nowrap }
.hk-tematy button i { width: 10px; height: 10px; border-radius: 50%; background: var(--hk, var(--muted)) }
.hk-tematy button[aria-pressed="true"] { border-color: var(--hk, var(--fg)); background: color-mix(in srgb, var(--hk, var(--fg)) 12%, var(--card)); font-weight: 700 }
.hk-uklad { display: grid; gap: 14px; align-items: start; min-width: 0 }
.hk-lewa, .hk-prawa { min-width: 0 }
@media (min-width: 900px) { .hk-uklad { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) } }
.hk-mies { display: flex; align-items: center; gap: 6px; margin-bottom: 8px }
.hk-mies b { flex: 1; text-align: center; font-size: 16px; text-transform: capitalize }
.hk-nav, .hk-dzis { min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 600 18px var(--sans); cursor: pointer }
.hk-dzis { font-size: 14px; padding: 0 12px }
.hk-siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.hk-tyg { text-align: center; font: 700 11.5px var(--sans); color: var(--muted); padding: 2px 0 }
.hk-dz { position: relative; min-height: 52px; padding: 5px 2px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); display: grid; justify-items: center; align-content: start; gap: 4px; cursor: pointer; font: inherit; transition: opacity .2s ease-out }
.hk-dz.inny { opacity: .45 } .hk-dz.przygas { opacity: .28 }
.hk-dz.dzis { border: 2px solid var(--zloto, var(--w-zloto)) }
.hk-dz.wybrany { background: color-mix(in srgb, var(--akcent-t, var(--w-glowny-t)) 12%, var(--card)); border-color: var(--akcent-t, var(--w-glowny-t)) }
.hk-dz.dzis.wybrany { border-color: var(--zloto, var(--w-zloto)) }
.hk-nr { font: 700 13px/1 var(--sans); font-variant-numeric: tabular-nums }
.hk-kropki { display: flex; align-items: center; width: 100%; min-width: 0; min-height: 10px; padding: 0 4px; box-sizing: border-box }
/* pasek dnia (25.10.2026): cienka linia podzielona na kolory klientów (flex-grow = liczba publikacji) + mała liczba; Kalendarz.pasekDnia() */
.dz-pw { display: flex; align-items: center; gap: 3px; width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden }
.dz-pw.pusta { min-height: 10px }
.dz-pasek { flex: 1 1 0; min-width: 0; height: 4px; display: flex; border-radius: 999px; overflow: hidden; background: transparent }
.dz-pasek i { display: block; flex: 1 1 0; min-width: 1px; height: 100%; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent) }
.dz-ile { flex: none; font: 700 10px/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums }
.hk-pilka { display: inline-grid; color: var(--fg) } .hk-pilka svg { width: 14px; height: 14px }
.hk-dz .hk-pilka { position: absolute; top: 3px; right: 3px } .hk-dz .hk-pilka svg { width: 12px; height: 12px }
.hk-opis { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--zloto, var(--w-zloto)) }
.hk-dz .hk-opis { position: absolute; top: 4px; left: 4px }
.hk-blad { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--zle, var(--w-zle)); color: #fff; font: 800 10px/1 var(--sans) }
.hk-dz .hk-blad { position: absolute; top: 3px; left: 3px } /* nie przykrywa liczby publikacji przy pasku */
.hk-dz .hk-opis:has(~ .hk-blad) { left: 20px }
.hk-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted) }
.hk-leg > span { display: inline-flex; align-items: center; gap: 6px }
.hk-dzien { background: var(--card); border: 1px solid var(--line); border-radius: var(--r, var(--w-r)); padding: 14px; display: grid; gap: 8px; scroll-margin-top: 80px; min-width: 0 }
.hk-dzien-g { display: flex; align-items: baseline; justify-content: space-between; gap: 8px }
.hk-dzien-g h3 { margin: 0; font-size: 17px }
.hk-pusto { margin: 0; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.hk-nast { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--akcent-t, var(--w-glowny-t)); font: 600 14px var(--sans); cursor: pointer }
.hk-seria { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 500 }
.hk-seria::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--hk, var(--muted)) }
.hk-poz > summary { min-height: 44px }
.hk .post.hk-skrot, .nt-tekst.nt-skrot { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden }
.hk-caly, .nt-link { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--akcent-t, var(--w-glowny-t)); font: 600 14px var(--sans); cursor: pointer }
.hk-zew-tresc { display: grid; gap: 6px; margin-top: 8px; font-size: 14px }
.hk-temat-opis { margin: 8px 2px 0; font-size: 13.5px; color: var(--muted); display: flex; gap: 8px; align-items: baseline }
.hk-temat-opis::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--hk, var(--muted)); flex: none; transform: translateY(1px) }
@media (max-width: 760px) { .hk-dz { min-height: 48px } .hk-dzien { padding: 12px } .hk-dzien .harm-tresc { grid-template-columns: minmax(0, 1fr) } }

/* ── Bledy (bl-): karta błędu po ludzku ── */
.bl-lista { display: grid; gap: 12px }
.bl-karta { background: var(--card); border: 1px solid color-mix(in srgb, var(--zle, var(--w-zle)) 35%, var(--line)); border-left: 5px solid var(--zle, var(--w-zle)); border-radius: var(--r, var(--w-r)); padding: 14px 16px; display: grid; gap: 8px; scroll-margin-top: 90px; min-width: 0 }
.bl-karta.bl-otwarta { box-shadow: 0 0 0 3px color-mix(in srgb, var(--zle, var(--w-zle)) 30%, transparent) }
.bl-karta.bl-wtoku { border-color: var(--line); border-left-color: var(--muted); background: color-mix(in srgb, var(--muted) 6%, var(--card)) }
.bl-g { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted) }
.bl-ik { display: inline-grid; color: var(--zle, var(--w-zle)) } .bl-ik svg { width: 20px; height: 20px }
.bl-wtoku .bl-ik { color: var(--muted) }
.bl-kto { font-weight: 700; color: var(--fg) }
.bl-kiedy { margin-left: auto; font-variant-numeric: tabular-nums }
.bl-tyt { margin: 0; font: 700 17px/1.3 var(--sans) }
.bl-poz { margin: 0; font-size: 13.5px; color: var(--muted) }
.bl-opis, .bl-rada { margin: 0; font-size: 14.5px; line-height: 1.45 }
.bl-rada { font-weight: 600 }
.bl-ponow { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--zle-soft, var(--w-zle-soft)); color: var(--zle, var(--w-zle)); font-size: 14px; font-weight: 600 }
.bl-drugi { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; color: var(--akcent-t, var(--w-glowny-t)); text-decoration: none }
.bl-akcje { display: grid; gap: 8px; margin-top: 2px }
.bl-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 600 15px var(--sans); cursor: pointer }
.bl-btn.bl-glowny { width: 100%; background: var(--akcent, var(--w-glowny)); border-color: transparent; color: #fff; min-height: 48px }
.bl-btn:disabled { opacity: .55; cursor: default }
.bl-male { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.bl-male .bl-btn { font-size: 14px; padding: 0 8px }
.bl-pyta .bl-akcje > .bl-glowny, .bl-pyta .bl-male { display: none }
.bl-potw { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--sel) }
.bl-potw p { margin: 0; font-weight: 600; font-size: 14.5px } .bl-potw p.bl-blad { color: var(--zle, var(--w-zle)) }
.bl-potw-p { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px } .bl-potw-p .bl-glowny { width: auto }
.bl-wtoku-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; color: var(--muted) }
.bl-wtoku-info svg { width: 18px; height: 18px }
.bl-cofnij { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 600 13.5px var(--sans); cursor: pointer; margin-left: auto }
.bl-male-info { margin: 0; font-size: 12.5px; color: var(--muted) }
.bl-tech > summary { font-size: 13px; color: var(--muted); min-height: 44px; display: flex; align-items: center }
.bl-tech code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; padding: 8px 10px; border-radius: 8px; background: var(--bg); color: var(--muted) }
.bl-pusto { margin: 0; display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: var(--r, var(--w-r)); background: var(--ok-soft); color: var(--ok); font-weight: 600 }
.bl-pusto svg { width: 20px; height: 20px; flex: none }
.bl-hist { background: var(--card); border: 1px solid var(--line); border-radius: var(--r, var(--w-r)); padding: 0 14px }
.bl-hist > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600 }
.bl-hist ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px }
.bl-hist li { display: grid; gap: 1px; font-size: 13.5px; border-top: 1px solid var(--line); padding-top: 8px }
.bl-hist li small { color: var(--muted) }

/* ── Reklamy (rk-): kampanie i zgłoszenia per kampania ── */
.rk-sekcja { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--kk, var(--line)); border-radius: var(--r, var(--w-r)); margin-bottom: 10px; min-width: 0 }
.rk-g { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px }
.rk-kr { width: 12px; height: 12px; border-radius: 50%; background: var(--kk, #94A3B8); flex: none; align-self: flex-start; margin-top: 6px }
.rk-t { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px }
.rk-tyt { flex-basis: 100%; font: 700 17px/1.3 var(--sans); overflow-wrap: anywhere }
.rk-linia { flex-basis: 100%; font-size: 13px; color: var(--muted) }
.rk-rodzaj { font: 600 11.5px/1 var(--sans); letter-spacing: .04em; padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--kk, var(--muted)) 14%, var(--card)); color: var(--fg) }
.rk-auto { font: 600 11.5px/1 var(--sans); padding: 5px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn) }
.rk-nowe { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--zle, var(--w-zle)); color: #fff; font: 700 12px/24px var(--sans); text-align: center; flex: none }
.rk-l { padding: 0 12px 12px; display: grid; gap: 10px }
.rk-zgl { display: grid; gap: 8px }
.rk-pusto { margin: 0; color: var(--muted); font-size: 14px }
.rk-wiecej, .rk-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 600 14px var(--sans); cursor: pointer }
.rk-admin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px }
.rk-admin small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; flex: 1 1 200px }
.rk-nazwa { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--sel) }
.rk-nazwa-t { margin: 0; font-weight: 700 }
.rk-rodzaje { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.rk-rodz { min-height: 48px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 600 14px/1.2 var(--sans); cursor: pointer }
.rk-rodz[aria-pressed="true"] { border: 2px solid var(--akcent-t, var(--w-glowny-t)); background: color-mix(in srgb, var(--akcent-t, var(--w-glowny-t)) 10%, var(--card)) }
.rk-pole { display: grid; gap: 4px; font-size: 13px; color: var(--muted) }
.rk-pole input { min-height: 44px; font: 400 16px var(--sans); color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px }
.rk-podglad { margin: 0; font-size: 14px } .rk-blad { margin: 0; color: var(--zle, var(--w-zle)); font-weight: 600 }
.rk-przyc { display: flex; flex-wrap: wrap; gap: 8px }
.rk-btn.rk-glowny { background: var(--akcent, var(--w-glowny)); color: #fff; border-color: transparent }
.rk-btn.rk-link { border: 0; background: none; color: var(--muted); padding: 0 6px }
@media (min-width: 640px) { .rk-rodzaje { grid-template-columns: repeat(3, 1fr) } }

/* ── PushDiagnoza (pd-): sprawdzenie powiadomień ── */
.pd-karta { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; margin-bottom: 12px; border-radius: var(--r, var(--w-r)); border: 1px solid color-mix(in srgb, var(--zle, var(--w-zle)) 35%, var(--line)); background: var(--card); color: var(--fg); font: inherit; text-align: left; cursor: pointer }
.pd-dzw { position: relative; display: inline-grid; color: var(--fg) } .pd-dzw svg { width: 24px; height: 24px }
.pd-dzw i { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--zle, var(--w-zle)); border: 2px solid var(--card) }
.pd-kt { flex: 1; display: grid; gap: 1px } .pd-kt b { font-size: 15px } .pd-kt small { font-size: 13px; color: var(--muted) }
.pd-strz { font-size: 22px; color: var(--muted) }
.pd-arkusz { display: grid; gap: 8px }
.pd-w { border: 1px solid var(--line); border-radius: 12px; background: var(--card) }
div.pd-w, .pd-w > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px }
.pd-znak { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: var(--muted) }
.pd-znak svg { width: 16px; height: 16px }
.pd-ok .pd-znak { background: var(--ok) } .pd-zle .pd-znak { background: var(--zle, var(--w-zle)) } .pd-czeka .pd-znak, .pd-wyl .pd-znak { background: color-mix(in srgb, var(--muted) 55%, var(--card)) }
/* ciemny motyw (24.10.2026, recenzja): biały znak na jasnym czerwonym (#F07167) / zielonym (#4CC38A) ma kontrast < 3:1 – znak ciemny */
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]) :is(.gf-alarm, .hk-blad, .rk-nowe, .dz-zle, .leg-zle, .pl-kr.zle, .kal-blad, .pd-ok .pd-znak, .pd-zle .pd-znak) { color: #0B1220 } }
:root[data-motyw="ciemny"] :is(.gf-alarm, .hk-blad, .rk-nowe, .dz-zle, .leg-zle, .pl-kr.zle, .kal-blad, .pd-ok .pd-znak, .pd-zle .pd-znak) { color: #0B1220 }
.pd-zle { border-color: color-mix(in srgb, var(--zle, var(--w-zle)) 40%, var(--line)) }
.pd-wt { flex: 1; min-width: 0; display: grid; gap: 1px } .pd-wt b { font-size: 14.5px } .pd-wt small { font-size: 13px; color: var(--muted); overflow-wrap: anywhere }
.pd-rada { padding: 0 12px 12px 52px; display: grid; gap: 8px; font-size: 14px }
.pd-rada > b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.pd-rada p { margin: 0 } .pd-kroki { margin: 0; padding-left: 20px; display: grid; gap: 6px }
.pd-btn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 600 14.5px var(--sans); cursor: pointer }
.pd-btn.pd-glowny { background: var(--akcent, var(--w-glowny)); color: #fff; border-color: transparent; min-height: 48px }
.pd-btn:disabled { opacity: .55 }
.pd-dol { display: grid; gap: 8px; margin-top: 6px }
.pd-test { width: 100% } .pd-uwaga { color: var(--muted); font-size: 12.5px; text-align: center }
.pd-wynik { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere }
.pd-wynik.zle { background: var(--zle-soft, var(--w-zle-soft)); color: var(--zle, var(--w-zle)) }
.pd-male { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px }
.pd-link { min-height: 44px; border: 0; background: none; color: var(--akcent-t, var(--w-glowny-t)); font: 600 13.5px var(--sans); cursor: pointer; padding: 0 4px }
.pd-info { color: var(--muted) }
@media (max-width: 400px) { .pd-rada { padding-left: 12px } }

/* ── Notatki (nt-): notatki tygodnia i zamówienia z notatek ── */
.nt-sekcja { display: grid; gap: 8px; margin: 18px 0 }
.nt-nagl { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px } .nt-nagl b { font-size: 17px } .nt-nagl small { color: var(--muted); font-size: 13px }
.nt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r, var(--w-r)) }
.nt.pilne { border-left: 4px solid var(--warn) }
.nt-g { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 10px 12px; min-height: 56px; align-items: center }
.nt-chipy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px } .nt-chipy small { color: var(--muted); font-size: 12.5px }
.nt-chip { font: 600 11.5px/1 var(--sans); padding: 5px 8px; border-radius: 999px; background: var(--sel); color: var(--fg) }
.nt-chip.pilne { background: var(--warn-soft); color: var(--warn) } .nt-chip.jasny { background: none; border: 1px solid var(--line); color: var(--muted) }
.nt-tyt { font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.nt-l { padding: 0 12px 12px; display: grid; gap: 10px }
.nt-blok { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--sel) }
.nt-blok > b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.nt-blok p, .nt-stresz { margin: 0; font-size: 14.5px; line-height: 1.5 }
.nt-blok p.nt-meta { font-size: 13px; color: var(--muted) }
.nt-fakty > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 14px }
.nt-fakty ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px }
.nt-fakty a { color: var(--akcent-t, var(--w-glowny-t)); font-weight: 600; white-space: nowrap }
.nt-zam { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px }
.nt-st { margin: 0; font-size: 14px; font-weight: 600 } .nt-st.ok { color: var(--ok) } .nt-st.szary { color: var(--muted); font-weight: 500 }
.nt-zle { color: var(--zle, var(--w-zle)) }
.nt-plan { margin: 0; padding-left: 18px; font-size: 14px }
.nt-przyc { display: grid; gap: 8px }
.nt-btn { width: 100%; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 600 14.5px var(--sans); cursor: pointer }
.nt-btn.nt-glowny { background: var(--akcent, var(--w-glowny)); color: #fff; border-color: transparent }
.nt-btn.nt-kontur { border: 2px solid var(--zle, var(--w-zle)); color: var(--zle, var(--w-zle)) }
.nt-btn.nt-cichy { color: var(--muted) }
.nt-btn:disabled { opacity: .55 }
.nt-potw { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--sel) }
.nt-potw p { margin: 0; font-weight: 600; font-size: 14.5px }
.nt-potw-p { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.nt-ostrz { margin: 0; padding: 8px 12px 8px 30px; border-radius: 10px; background: var(--zle-soft, var(--w-zle-soft)); color: var(--zle, var(--w-zle)); font-weight: 600; font-size: 14px }
.nt-pod { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; min-width: 0 }
.nt-img { width: 100%; max-width: 240px; border-radius: 10px; display: block; background: var(--line) }
.nt-pod-t { display: grid; gap: 6px; min-width: 0 }
.nt-kiedy { font-size: 13.5px; color: var(--muted); font-weight: 600 }
.nt-tekst { white-space: pre-wrap; font-size: 14px; overflow-wrap: anywhere }
.nt-kom { font-size: 13px; background: var(--bg); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere } .nt-kom b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.nt-stare { border: 1px dashed var(--line); border-radius: var(--r, var(--w-r)); padding: 0 12px }
.nt-stare > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--muted) }
.nt-stare > .nt { margin-bottom: 8px; opacity: .85 }
.nt-pusto { color: var(--muted); margin: 0 }
@media (min-width: 640px) { .nt-przyc { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) } .nt-pod { grid-template-columns: 200px minmax(0, 1fr) } }

/* ── Obserwujący (obs-, 24.10.2026): wczoraj → dziś, ostatnie 3 dni, 7/30 dni małą linijką ── */
.obs-kafel .obs-wczoraj { font-size: 14px; margin-top: 6px; font-variant-numeric: tabular-nums }
.obs-3dni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px }
.obs-pig { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; border-radius: 999px; background: var(--sel); font-size: 13px; line-height: 1.15 }
.obs-pig small { font-size: 11px; color: var(--muted) } .obs-pig b { font-variant-numeric: tabular-nums }
.obs-pig.plus b { color: var(--ok) } .obs-pig.minus b { color: var(--zle, var(--w-zle)) } .obs-pig.zero b, .obs-pig.brak b { color: var(--muted) }
.obs-maly { font-size: 12px; color: var(--muted); margin-top: 4px }
.obs-tt { margin: 0; font-size: 13px; color: var(--muted) }
.obs-zm.minus { color: var(--zle, var(--w-zle)) }
.obs-kompakt { background: var(--card); border: 1px solid var(--line); border-radius: var(--r, var(--w-r)); padding: 0 12px; margin: 0 0 12px }
.obs-kompakt > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 14px }
.obs-kompakt > summary b { flex: 1; font-variant-numeric: tabular-nums } .obs-k-t { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700 }
.obs-strz { color: var(--muted); font-size: 20px; transition: transform .2s ease-out } .obs-kompakt[open] .obs-strz { transform: rotate(90deg) }
.obs-kompakt[open] { padding-bottom: 12px } .obs-kompakt .obs-kafle { margin-top: 4px }
@media (max-width: 640px) { .obs-kafle { grid-template-columns: minmax(0, 1fr) } }

/* ── Kibice – drużyna i sztab (kd-) ── */
.kd { display: grid; gap: 12px; margin-bottom: 14px }
.kd-kafle { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) }
@media (min-width: 640px) { .kd-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1000px) { .kd-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.kd-kafel { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--sel) }
.kd-kafel .etyk { font: 700 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.kd-kafel .liczba { font: 800 26px/1.1 var(--sans); font-variant-numeric: tabular-nums } .kd-kafel .liczba small { font-size: 15px; font-weight: 600; color: var(--muted) }
.kd-kafel .opis { font-size: 13px; color: var(--muted) }
.kd-pasek { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 22%, var(--card)); overflow: hidden }
.kd-pasek i { display: block; height: 100%; border-radius: 999px; background: var(--ok) }
.kd-zw { border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: var(--card); margin-bottom: 10px; min-width: 0 }
.kd-zw > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600 }
.kd-zw[open] { padding-bottom: 10px }
.kd-zw > .karta { border: 0; box-shadow: none; padding: 0; background: none }
.kd-gr { display: block; margin: 8px 0 4px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.kd-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px }
.kd-akt li { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding: 6px 0 }
.kd-kiedy { white-space: nowrap; font-variant-numeric: tabular-nums }
.kd-uwaga { margin: 0; font-size: 12.5px }

/* ── Rolki.info (ri-): „Jak publikujemy?” zwinięte ── */
.ri-info { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--zloto, var(--w-zloto)); border-radius: var(--r, var(--w-r)); padding: 0 14px; margin-bottom: 14px }
.ri-info > summary { display: flex; align-items: center; gap: 10px; min-height: 48px }
.ri-info > summary b { flex: 1; font-size: 15px }
.ri-pyt { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--sel); color: var(--fg); font: 800 13px/1 var(--sans); flex: none }
.ri-info ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px }

@media (prefers-reduced-motion: reduce) {
  .gf-strz, .kgr-strz, .rk-strz, .nt-strz, .ri-strz, .obs-strz, .hk-dz,
  :is(.bl-tech, .bl-hist, .nt-fakty, .nt-stare, .kd-zw) > summary::after { transition: none !important }
}

/* ikonka „i” z wyjaśnieniem (24.10.2026, info.js): dymek po najechaniu, fokusie albo dotknięciu (.otwarte) */
.info-i { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 5px; padding: 0; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: var(--muted, #627089); font: 700 11px/1 Georgia, 'Times New Roman', serif; font-style: italic; cursor: help; vertical-align: middle; opacity: .8 }
.info-i::before { content: ""; position: absolute; inset: -13px } /* większy cel dotyku (44 px) */
.info-i:hover, .info-i.otwarte, .info-i:focus-visible { opacity: 1; color: var(--akcent-t, var(--dkte, #02377A)) }
.info-i::after { content: attr(data-info); position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(280px, 78vw);
  padding: 10px 12px; border-radius: 10px; background: #0F1B2D; color: #F5F7FB; font: 500 13px/1.45 var(--sans, Inter, system-ui, sans-serif); font-style: normal; text-align: left; white-space: normal; letter-spacing: 0; text-transform: none;
  box-shadow: 0 10px 30px rgba(2, 10, 30, .3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease-out }
.info-i.lewo::after { left: auto; right: -8px; transform: none }
.info-i.prawo::after { left: -8px; transform: none }
.info-i:hover::after, .info-i.otwarte::after, .info-i:focus-visible::after { opacity: 1; visibility: visible }
@media (prefers-color-scheme: dark) { .info-i::after { background: #F5F7FB; color: #0F1B2D } }
:root[data-theme="dark"] .info-i::after, [data-motyw="ciemny"] .info-i::after { background: #F5F7FB; color: #0F1B2D }
:root[data-theme="light"] .info-i::after, [data-motyw="jasny"] .info-i::after { background: #0F1B2D; color: #F5F7FB }

/* obserwujący – czytelniejsze oznaczenia (24.10.2026): plakietka zmiany przy liczbie, lista dni bez kresek */
.obs-liczba-wiersz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px }
.obs-plak { display: inline-flex; align-items: center; font: 700 13px/1 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--sel); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.obs-plak.plus { background: var(--ok-soft, #E3F4EA); color: var(--ok, #0E7A43) }
.obs-plak.minus { background: var(--zle-soft, #FDECEA); color: var(--zle, #C0352B) }
.obs-dni { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line) }
.obs-dni li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 14px }
.obs-dni li span { color: var(--muted) }
.obs-dni b { font-variant-numeric: tabular-nums; color: var(--muted) }
.obs-dni b.plus { color: var(--ok, #0E7A43) } .obs-dni b.minus { color: var(--zle, #C0352B) }

/* „Czy wszystko działa?” (24.10.2026, public/zycie.js): kropka zielona/czerwona/żółta + wiersze; kolory z motywu (jasny i ciemny) */
.zycie-karta { padding: 14px 16px; margin-bottom: 12px }
.zycie-g { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px }
.zycie-w { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); flex-wrap: wrap }
.zycie-n { font-weight: 600; flex: 1 1 150px; min-width: 0 }
.zycie-t { color: var(--muted); font-size: 12.5px }
.zycie-k { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--zle) }
.zycie-k.ok { background: var(--ok) }
.zycie-k.blad { background: var(--warn, #B45309) }

/* Strażnik kampanii i uwagi klienta (24.10.2026, public/straznik.js, reklamy-wspolne.js, klient.js): kolory z motywu (jasny i ciemny) */
.straz-karta { padding: 14px 16px; margin-bottom: 12px }
.straz-g { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px }
.straz-pusto { margin: 4px 0 0; font-size: 14px }
.straz-w { border-top: 1px solid var(--line); padding: 8px 0 }
.straz-w > summary { display: flex; align-items: flex-start; gap: 10px; list-style: none; color: var(--fg); font-weight: 400 }
.straz-w > summary::-webkit-details-marker { display: none }
.straz-t { display: flex; flex-direction: column; min-width: 0; flex: 1 }
.straz-t b { font-size: 14.5px } .straz-t small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere }
.straz-k { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; flex: none; background: var(--zle) }
.straz-k.ok { background: var(--ok) }
.straz-in { padding: 8px 0 2px 20px; display: grid; gap: 8px }
.straz-opis, .straz-ai p, .straz-uw p { margin: 0; font-size: 14px }
.straz-ai, .straz-uw { background: var(--bg); border-radius: 12px; padding: 9px 12px }
.straz-ai b, .straz-uw b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px }
.straz-czeka { color: var(--muted); font-size: 13px }
.straz-uw small, .rk-uwagi small, .uwagi-k small.uw-d { color: var(--muted); font-size: 12px; margin-left: 6px }
.straz-hist { margin-top: 8px } .straz-hist > summary { font-size: 13px }
/* Strażnik 2.0 (24.10.2026): przegląd „3 możliwości na 3 dni” – public/straznik.js → przeglad() */
.straz-k.prz { background: var(--sel) }
.straz-ai ul { margin: 0 0 4px; padding-left: 18px; font-size: 14px } .straz-ai small { color: var(--muted) }
.straz-3 { margin: 6px 0 0; font-size: 14px }
.straz-mos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.straz-mo { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--card) }
.straz-mo.pol { border-color: var(--ok); background: var(--ok-soft) }
.straz-mo-g { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px } .straz-mo-g b { font-size: 14px; flex: 1 1 100% }
.straz-mo-g small { color: var(--muted); font-size: 12px }
.straz-ryz { letter-spacing: 2px; font-size: 13px; color: var(--fg) } .straz-ryz i { font-style: normal; color: var(--muted) }
.straz-mo-d { margin: 6px 0 0; font-size: 13.5px }
.straz-mo dl { margin: 6px 0 0; display: grid; gap: 5px }
.straz-mo dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) } .straz-mo dd { margin: 0; font-size: 13.5px }
.straz-wiek > b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px }
.straz-wiek-p { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden }
.straz-wiek-p span { background: var(--muted); opacity: .45 } .straz-wiek-p span.tani { opacity: 1 } .straz-wiek-p span.tani { background: var(--ok) }
.straz-wiek-l { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: 12.5px; color: var(--muted) } .straz-wiek-l .tani { color: var(--fg) } .straz-wiek-l b { color: var(--fg) }
.straz-uwaga { margin: 0; font-size: 12px; color: var(--muted) }
/* 26.10.2026: widok kampanii w aplikacji – kafelki + grupy po klientach (public/straznik.js → widok()) */
.sz-kafle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px }
.sz-kafel { min-width: 0; border: 1.5px solid var(--line); border-radius: 16px; padding: 10px 12px; background: var(--bg); display: grid; gap: 2px }
.sz-kafel .sz-l { font-size: 28px; line-height: 1.1; color: var(--fg) } .sz-kafel span { font-size: 13px; color: var(--muted) }
.sz-kafel.uw { border-color: var(--warn); background: var(--warn-soft) } .sz-kafel.uw .sz-l, .sz-kafel.uw span { color: var(--warn) }
.sz-g { border: 1px solid var(--line); border-left: 6px solid var(--kl, var(--line)); border-radius: 16px; padding: 10px 10px 10px 12px; margin-top: 14px; background: var(--card); min-width: 0 }
.sz-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px }
.sz-gh b { font-size: 16px; color: var(--fg); overflow-wrap: anywhere } .sz-n { font-size: 12.5px; color: var(--muted) }
.sz-nu { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn) }
.sz-k { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-top: 8px; background: var(--bg); min-width: 0 }
.sz-k.uw { border: 2px solid var(--warn); background: var(--warn-soft) }
.sz-kh { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px }
.sz-kh b { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; color: var(--fg) }
.sz-st { flex: none; font-size: 11.5px; font-weight: 700; color: var(--ok) } .sz-k.uw .sz-st { color: var(--warn) }
.sz-k .straz-w { border-top: 1px solid var(--line); margin-top: 6px }
.sz-k .straz-in { padding-left: 0 }
.rk-uwagi, .uwagi-k { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px }
.rk-uwagi b, .uwagi-k > b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.rk-uwagi p, .uwagi-k .uw-k { margin: 0; font-size: 14px; overflow-wrap: anywhere }
.uwagi-k .uw-k small { color: var(--muted); font-size: 12px; margin-left: 6px }
.uwagi-k textarea { width: 100%; box-sizing: border-box; resize: vertical }
.uwagi-k .btn { justify-self: start }

/* ── lista zgłoszeń ze statusami (24.10.2026, zgloszenia-wspolne.js): duże cele dotyku, plakietki, podsumowanie lejka ── */
.zg-przyciski { display: flex; flex-wrap: wrap; gap: 8px }
.zg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 12px; font: 700 16px var(--sans); text-decoration: none; color: var(--fg); background: var(--card); border: 1px solid var(--line); flex: 1 1 96px }
.zg-btn.zg-tel { background: var(--firma, #1B2A4A); color: #fff; border-color: transparent }
.zg-plakietki { display: flex; flex-wrap: wrap; gap: 6px }
.zg-plakietki:empty { display: none }
.zg-plak { font: 600 13px var(--sans); padding: 4px 10px; border-radius: 999px; background: var(--sel); color: var(--fg) }
.zg-plak.zg-uwaga, .zg-plak.zg-dup { background: var(--warn-soft); color: var(--warn) }
.zg-lejek { display: grid; gap: 4px; margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: var(--sel); font-size: 15px; line-height: 1.4 }
.zgl-numer { font: 600 15px var(--sans) }
.zgl-notatka [hidden] { display: none }
.zgl-notatka select { min-height: 44px }

/* Dział „AI” (24.10.2026, public/ai-research.js): dni rozwijane, pozycje z linkami; kolory z motywu (jasny i ciemny) */
.ai-lista { display: grid; gap: 10px }
.ai-dzien { padding: 12px 16px }
.ai-dzien > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; cursor: pointer; font-size: 15px }
.ai-n { color: var(--muted); font-size: 12.5px }
.ai-n.jest { color: var(--ok); font-weight: 600 }
.ai-poz { padding: 12px 0 4px; border-top: 1px solid var(--line); margin-top: 10px }
.ai-poz h4 { margin: 0 0 6px; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere }
.ai-poz p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere }
.ai-dkte { color: var(--muted) }
.ai-link { display: inline-block; padding: 6px 0; font-size: 13.5px; font-weight: 600; color: var(--w-glowny-t, var(--fg)); overflow-wrap: anywhere }
.ai-cena { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); vertical-align: 2px }

/* dział AI – kalendarz miesięczny i „koniecznie przeczytaj” (24.10.2026) */
.ai-kartakal { padding: 12px 14px }
.ai-kal-glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px }
.ai-kal-glowa b { text-transform: capitalize }
.ai-kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px }
.ai-tyg { text-align: center; font: 600 11.5px var(--sans); color: var(--muted); padding: 2px 0 }
.ai-dz { position: relative; min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--muted); font: 600 13px var(--sans); display: grid; place-items: center; align-content: center; gap: 1px; padding: 4px 2px; cursor: default }
.ai-dz.inny { opacity: .45 }
.ai-dz.jest { color: var(--fg); cursor: pointer; background: color-mix(in srgb, var(--dkte, #02377A) 8%, var(--card)) }
.ai-dz.waz { background: color-mix(in srgb, #D92D20 14%, var(--card)); border-color: #D92D20; color: #B42318 }
.ai-dz.wyb { box-shadow: inset 0 0 0 2px var(--dkte, #02377A) }
.ai-dz.waz.wyb { box-shadow: inset 0 0 0 2px #D92D20 }
.ai-dz:disabled { cursor: default }
.ai-kr { font: 700 10.5px/1 var(--sans); color: var(--muted) }
.ai-dz.waz .ai-kr { color: #B42318 }
.ai-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted) }
.ai-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; background: color-mix(in srgb, var(--dkte, #02377A) 22%, var(--card)); border: 1px solid var(--line) }
.ai-leg i.waz { background: color-mix(in srgb, #D92D20 25%, var(--card)); border-color: #D92D20 }
.ai-wybrany { margin-top: 12px }
.ai-dzien-t { font: 700 16px var(--sans); margin: 0 0 6px; text-transform: capitalize }
.ai-poz.ai-wazne { border: 2px solid #D92D20; border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; background: color-mix(in srgb, #D92D20 8%, var(--card)) }
.ai-etyk { display: inline-block; font: 700 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #D92D20; border-radius: 999px; padding: 5px 10px; margin-bottom: 8px }

/* dział AI: „Zobacz artykuł”, przeczytane i licznik (24.10.2026) */
.ai-gora { display: flex; justify-content: flex-end; margin-bottom: 6px }
.ai-licz { font: 600 13px var(--sans); padding: 5px 11px; border-radius: 999px; background: color-mix(in srgb, #D92D20 12%, var(--card)); color: #B42318 }
.ai-licz.zero { background: var(--ok-soft, #E3F4EA); color: var(--ok, #0E7A43) }
.ai-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: var(--dkte, #02377A); color: #fff !important; font: 600 14px var(--sans); text-decoration: none }
.ai-poz.ai-wazne .ai-btn { background: #D92D20 }
.ai-zrodlo { margin-left: 10px; font-size: 12.5px; color: var(--muted) }
.ai-czyt { margin-left: 10px; font: 600 12.5px var(--sans); color: var(--ok, #0E7A43) }
.ai-poz.przeczytane { opacity: .72 }
.ai-poz.przeczytane .ai-btn { background: transparent; color: var(--muted) !important; border: 1px solid var(--line) }

/* karta dnia: gdzie wychodzi publikacja i jej tekst (24.10.2026) */
.hk-gdzie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 8px }
.hk-tekst { margin: 0 0 8px; padding: 9px 12px; border-radius: 10px; background: var(--sel, #EEF3FB); font-size: 14px }
.hk-tekst b { display: block; font: 600 12px var(--sans); color: var(--muted); margin-bottom: 3px }
.hk-tekst p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere }
.zg-przyciski { gap: 14px 12px; margin-top: 8px }

/* decyzja klienta przy notatce (24.10.2026, notatki.js) */
.nt-akc { margin: 8px 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; background: var(--sel) }
.nt-akc.tak { background: var(--ok-soft); color: var(--ok) }
.nt-chip.ok { background: var(--ok-soft); color: var(--ok) }

/* „Opublikuj teraz” (24.10.2026): przycisk, odliczanie 5 s z dużym „Cofnij”, stan zlecenia; tylko panel właściciela i aplikacja (teraz.js) */
.teraz { display: grid; gap: 8px; margin-top: 8px; width: 100% }
.tz-btn { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: 600 15px var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px }
.tz-btn svg { width: 20px; height: 20px; flex: none }
.tz-btn:disabled { opacity: .55; cursor: default }
.tz-glowny { width: 100%; background: var(--akcent, var(--w-glowny)); border-color: transparent; color: #fff }
.tz-glowny.tz-krotko { min-height: 44px; font-size: 14px }
.tz-stan, .tz-odlicza { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sel); font-weight: 600; font-size: 14.5px; line-height: 1.35 }
.tz-tekst { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 160px; min-width: 0 }
.tz-tekst svg { width: 20px; height: 20px; flex: none }
.tz-odlicza { background: var(--warn-soft); color: var(--fg); border: 2px solid var(--warn) }
.tz-odlicza .tz-tekst { font: 700 20px/1.2 var(--sans) }
.tz-cofnij-duze { min-height: 56px; flex: 1 1 100%; font-size: 18px; font-weight: 700; border-width: 2px; border-color: var(--warn); background: var(--card) }
.tz-ok { background: var(--ok-soft); color: var(--ok) }
.tz-blad { background: var(--zle-soft, var(--w-zle-soft)); color: var(--zle, var(--w-zle)) }
.tz-link { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; color: var(--akcent-t, var(--w-glowny-t)); text-decoration: none }
.tz-stan .tz-btn { margin-left: auto }
.tz-btn:focus-visible { outline: 3px solid var(--akcent-t, var(--w-glowny-t)); outline-offset: 2px }

/* liczniki kanałów dnia (24.10.2026): „Facebook 6 · Instagram 5 · TikTok 0 wkrótce” pod nagłówkiem karty dnia */
.kn-dnia { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 10px; font-size: 13.5px; color: var(--fg) }
.kn-k { display: inline-flex; align-items: center; gap: 5px; min-height: 24px }
.kn-k svg { width: 17px; height: 17px; flex: none }
.kn-k b { font-weight: 700 }
.kn-k small { font-size: 11.5px; font-weight: 500 }
.kn-0 { color: var(--muted) }

/* ── 26.10.2026: logo klienta przy nazwie (logo-klienta.js) i filtr klientów w arkuszu (wybor-klientow.js) ── */
.lk { position: relative; display: inline-grid; place-items: center; flex: none; overflow: hidden; background: var(--k, #94A3B8); color: #fff; vertical-align: middle; font: 700 11px/1 var(--sans); letter-spacing: .02em }
.lk-28 { width: 28px; height: 28px; border-radius: 8px } .lk-20 { width: 20px; height: 20px; border-radius: 6px; font-size: 8.5px }
.lk-i { position: absolute; inset: 0; display: grid; place-items: center }
.lk-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--card) }
.lk-wiersz { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100% }
.lk-wiersz b { font: 600 14.5px/1.25 var(--sans); overflow-wrap: anywhere }
.sz-gh .lk { margin-right: 2px }
.wk-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); font: 600 14.5px var(--sans); cursor: pointer; text-align: left; margin-bottom: 10px }
.wk-btn > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wk-btn svg { width: 16px; height: 16px; flex: none }
.wk-btn.czesc { border-color: var(--fg) }
.wk-ov { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(15, 27, 45, 0); transition: background .25s ease-out }
.wk-ov.otwarty { background: rgba(15, 27, 45, .45) }
.wk-okno { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; background: var(--card); color: var(--fg); border-radius: 22px 22px 0 0; padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .25s ease-out; box-sizing: border-box }
.wk-ov.otwarty .wk-okno { transform: none }
.wk-uchwyt { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 8px; flex: none; touch-action: none }
.wk-glowa { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none }
.wk-glowa h2 { font: 700 19px/1.25 var(--sans); margin: 4px 0 }
.wk-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--sel); color: var(--fg); font: 400 24px/1 var(--sans); cursor: pointer; flex: none }
.wk-szukaj { width: 100%; box-sizing: border-box; min-height: 44px; margin: 6px 0 8px; font: 400 16px var(--sans); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; flex: none }
.wk-lista { overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; margin: 0 -4px; padding: 0 4px }
.wk-w { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 6px; border-radius: 12px; cursor: pointer; border-bottom: 1px solid var(--line) }
.wk-w:last-child { border-bottom: 0 }
.wk-w input { width: 24px; height: 24px; flex: none; margin: 0; accent-color: var(--fg) }
.wk-w .wk-n { flex: 1; min-width: 0; font: 600 14.5px/1.25 var(--sans); overflow-wrap: anywhere }
.wk-w small { color: var(--muted); font: 500 12.5px var(--sans); flex: none; text-align: right }
.wk-wszyscy { background: var(--sel); margin-bottom: 4px; border-bottom: 0 }
.wk-pusto { padding: 18px 6px; color: var(--muted); text-align: center }
.wk-pokaz { flex: none; min-height: 48px; margin-top: 10px; border: 0; border-radius: 999px; background: var(--fg); color: var(--card); font: 700 15.5px var(--sans); cursor: pointer; width: 100% }
@media (prefers-reduced-motion: reduce) { .wk-ov, .wk-okno { transition: none } }

/* 26.10.2026: „już opublikowano wcześniej” – przygaszone, z ✓ i linkiem „Zobacz” */
/* cały wiersz „już opublikowano wcześniej” wyszarzony (26.10.2026), ale widoczny i klikalny; bez przekreślenia */
.pub.wczesniej, .b-os-el.wczesniej, .gf-w.wczesniej { opacity: .55; filter: grayscale(1) }
.wczesniej-ramka { margin: 12px 0; font-weight: 500; font-size: 14px }
.wczesniej-ramka .wiersz-btn { margin-top: 8px }
.znacznik.wczesniej { background: var(--sel); color: var(--muted); border-color: transparent }
a.znacznik.wczesniej { text-decoration: none; font-weight: 700; color: var(--fg) }
.podswietl { animation: podswietl 1.5s ease-out }
@keyframes podswietl { 0%, 60% { background: var(--sel); box-shadow: 0 0 0 8px var(--sel); border-radius: 12px } 100% { background: transparent; box-shadow: 0 0 0 8px transparent } }
@media (prefers-reduced-motion: reduce) { .podswietl { animation: none; background: var(--sel) } }
.dopisek { font-weight: 500; font-size: .8em }

/* „Ostatnio w portalu” przy kliencie (26.10.2026, aktywnosc.js): linijka + rozwijana lista 10 wizyt; telefon 320 px, jasny i ciemny motyw */
.aktyw { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 12px; font-size: 14px; line-height: 1.4; min-width: 0 }
.akt-glowa { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 14px; color: var(--fg); font-weight: 600; list-style: none; cursor: pointer }
div.akt-glowa { cursor: default }
.akt-glowa::-webkit-details-marker { display: none }
.akt-tekst { min-width: 0; overflow-wrap: anywhere }
details.aktyw > summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease-out }
details.aktyw[open] > summary::after { transform: translateY(2px) rotate(-135deg) }
.akt-lista { list-style: none; margin: 0; padding: 0 14px; border-top: 1px solid var(--line) }
.akt-lista li { padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0 }
.akt-gora { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.akt-gora span, .akt-wyszedl, .akt-stopka { color: var(--muted); font-size: 13px }
.akt-sciezka { overflow-wrap: anywhere; margin-top: 2px }
.akt-sciezka i { font-style: normal; color: var(--muted) }
.akt-wyszedl { margin-top: 1px }
.akt-stopka { padding: 9px 14px 11px }

/* dział AI: karty „Nowinki AI” / „Harmonogram researchów” (26.10.2026, ai-harmonogram.js) */
.ai-karty { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; padding: 4px; border-radius: 999px; background: var(--sel); width: fit-content; max-width: 100% }
.ai-karty button { border: 0; background: transparent; color: var(--fg); font: 600 14px var(--sans); padding: 9px 16px; border-radius: 999px; cursor: pointer; min-height: 40px }
.ai-karty button .muted { font-weight: 500; font-size: 12.5px }
.ai-karty button[aria-selected="true"] { background: var(--dkte, #02377A); color: #fff }
.ai-karty button[aria-selected="true"] .muted { color: rgba(255,255,255,.75) }
.ah-filtr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px }
.ah-filtr label { font: 600 13px var(--sans); color: var(--muted) }
.ah-filtr select { min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); padding: 0 10px; font: 500 14px var(--sans) }
.ah-leg { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto }
.ah-firma { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; color: #fff; background: var(--ah-k); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); white-space: nowrap }
.ah-ai { display: inline-block; font: 600 11.5px/1 var(--sans); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap }
.ah-claude { background: color-mix(in srgb, #D97757 16%, var(--card)); border-color: #D97757; color: var(--fg) }
.ah-chatgpt { background: color-mix(in srgb, #10A37F 16%, var(--card)); border-color: #10A37F; color: var(--fg) }
.ah-skrypt { background: var(--card); color: var(--muted) }
.ah-tydz { padding: 12px 14px }
.ah-tydz h3, .ah-sek { font: 700 16px var(--sans); margin: 0 0 6px }
.ah-sek { margin: 18px 0 8px }
.ah-dzien { font: 700 13px var(--sans); color: var(--muted); margin: 12px 0 4px }
.ah-os { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.ah-wiersz { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--fg); padding: 8px 10px; cursor: pointer; font: 500 14px var(--sans) }
.ah-wiersz:hover { border-color: var(--dkte, #02377A) }
.ah-godz { font: 700 14px var(--mono, ui-monospace, monospace); min-width: 44px }
.ah-nazwa { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere }
.ah-aiw { display: flex; gap: 4px; flex-wrap: wrap }
.ah-os li.minelo .ah-wiersz { opacity: .55 }
.ah-karty { display: grid; gap: 8px }
.ah-karta { padding: 10px 14px; border-top: 0 }
.ah-karta > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; color: var(--fg); scroll-margin-top: 80px }
.ah-glowa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.ah-kiedy { font: 600 13px var(--sans); color: var(--muted) }
.ah-dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 10px 0 2px; font-size: 14px; line-height: 1.45 }
.ah-dl dt { font: 600 12.5px var(--sans); color: var(--muted); padding-top: 1px }
.ah-dl dd { margin: 0; overflow-wrap: anywhere }
.ah-dl ul { margin: 0; padding-left: 18px }
.ah-zkim { list-style: none; padding-left: 0 !important; display: grid; gap: 4px }
@media (max-width: 600px) { .ah-dl { grid-template-columns: 1fr } .ah-dl dd { margin-bottom: 4px } .ah-leg { margin-left: 0 } }

/* ── 26.10.2026: obsłużone zgłoszenia = jedna zwarta linijka, pod separatorem „Obsłużone (N)” (zgloszenia-wspolne.js) ──
   Linijka ≤ 56 px także na 320 px: dwa mikrowiersze bez zawijania (tekst ucinany „…”). „Nie odbiera” nie jest obsłużone (zostaje rozwinięte). */
:root { --zg-nieb: #1D4ED8; --zg-nieb-t: #E3ECFF; --zg-ziel: #0E7A43; --zg-ziel-t: #E3F4EA; --zg-ciem: #fff; --zg-ciem-t: #0B5C34; --zg-szary: #475467; --zg-szary-t: #E6EAF1 }
@media (prefers-color-scheme: dark) { :root:not([data-motyw="jasny"]):not([data-theme="light"]) { --zg-nieb: #A9C4FF; --zg-nieb-t: #1B2C55; --zg-ziel: #6FD3A0; --zg-ziel-t: #13301F; --zg-ciem: #fff; --zg-ciem-t: #1B7A4B; --zg-szary: #C2CBDA; --zg-szary-t: #2A3650 } }
:root[data-motyw="ciemny"], :root[data-theme="dark"] { --zg-nieb: #A9C4FF; --zg-nieb-t: #1B2C55; --zg-ziel: #6FD3A0; --zg-ziel-t: #13301F; --zg-ciem: #fff; --zg-ciem-t: #1B7A4B; --zg-szary: #C2CBDA; --zg-szary-t: #2A3650 }
.zg-linia { display: none }
.zg-obsl > .zg-linia { display: grid; grid-template-columns: minmax(0, 1fr) 16px; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 0; align-items: center; box-sizing: border-box; width: 100%; min-height: 48px; max-height: 54px; overflow: hidden;
  padding: 3px 0; margin: 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent }
.zg-obsl > .zg-linia:focus-visible { outline: 2px solid var(--firma, #2E67FB); outline-offset: 2px }
.zg-obsl:not(.zg-zwiniete) > .zg-linia { border-bottom: 1px solid var(--line); border-radius: 0; padding-bottom: 8px; margin-bottom: 2px }
.zg-karta.zg-zwiniete { padding: 0 12px 0 14px !important; gap: 0 !important; min-height: 0 }
.zg-karta.zg-zwiniete > :not(.zg-linia) { display: none !important }
.zg-w1, .zg-w2, .zg-w3 { grid-column: 1; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap }
.zg-w1 { font: 700 14.5px/1.2 var(--sans) }
.zg-w2 { font: 500 11.5px/1.2 var(--sans); color: var(--muted); gap: 6px }
.zg-w3 { display: block; overflow: hidden; text-overflow: ellipsis; font: 600 11.5px/1.2 var(--sans); color: var(--muted) }
.zg-l-imie { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: inherit }
.zg-l-tel { flex: 0 0 auto; font: 600 11.5px var(--sans); color: var(--fg) }
.zg-st { flex: none; max-width: 62%; margin-left: auto; overflow: hidden; text-overflow: ellipsis; padding: 1px 9px; border-radius: 999px; font: 700 11px/1.3 var(--sans); background: var(--zg-szary-t); color: var(--zg-szary) }
.zg-st-kontakt { background: var(--zg-nieb-t); color: var(--zg-nieb) }
.zg-st-umowione { background: var(--zg-ziel-t); color: var(--zg-ziel) }
.zg-st-klient { background: var(--zg-ciem-t); color: var(--zg-ciem) }
.zg-l-not { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.zg-l-not::before { content: "· " }
.zg-l-tel:only-child + .zg-l-not::before, .zg-w2 > .zg-l-not:first-child::before { content: none }
.zg-strz { grid-column: 2; grid-row: 1 / 4; width: 16px; height: 16px; color: var(--muted); transition: transform .2s ease-out }
.zg-obsl:not(.zg-zwiniete) .zg-strz { transform: rotate(180deg) }
.zg-sep { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 12px 0 2px; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.zg-sep::after { content: ""; flex: 1; height: 1px; background: var(--line) }
@keyframes zg-wejscie { from { opacity: 0; transform: translateY(-10px) } to { opacity: 1; transform: none } }
.zg-wchodzi { animation: zg-wejscie .26s ease-out }
@media (prefers-reduced-motion: reduce) { .zg-wchodzi { animation: none } .zg-strz { transition: none } }