/* BigOS – wygląd. Identyfikacja z procedury 0066, „Wygląd systemu”: szyld (garnek) w górnym pasku, napis krojem Fraunces, interfejs IBM Plex Sans,
 * liczby IBM Plex Mono, paleta szyldu i pełne kolory trzech modułów (zakładka, pasek widoków, panel w odcieniu modułu), statusy ▲ ● ▼ ze słowem.
 * Z pillDrive pochodzi mechanika i dopracowanie komponentów: przyciski, pola, listy wyboru, menu, okna, komunikaty, szkielety ładowania,
 * logowanie na rozmytym szkielecie aplikacji, odstępy i responsywność. Kolory i kroje pillDrive tu nie występują. */
:root {
  --ink: #2B1D14; --muted: #6f6257; --line: #e8dfd2; --line2: #d9cdbb; --bg: #fffdf9; --side: #fbf6ee; --hover: #f5eee3; --pole: #f3ece1;
  --red: #b3261e; --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --liczby: 'IBM Plex Mono', ui-monospace, monospace; --szyld: 'Fraunces', Georgia, serif; --r: 8px;
  --garnek: #2B1D14; --kapusta: #C8863A; --papryka: #E07A3F; --miska: #F6EEE1;
  --zgodnie: #2f7d3a; --zagrozony: #b46b00; --ponizej: #b3261e;
  /* moduł (procedura 0066): ciemny = zakładka i pasek widoków, akcent = przyciski główne i zaznaczenia, tło = panel */
  --m-ciemny: #B8551F; --m-akcent: #C8863A; --m-tlo: #F6EEE1; --m-mocny: #B8551F; --m-jasny: #f6e0cf;
}
body[data-modul="planerowy"] { --m-ciemny: #5B2C4F; --m-akcent: #B07AA1; --m-tlo: #F7EFF4; --m-mocny: #5B2C4F; --m-jasny: #efdfe9; }
body[data-modul="marketingowy"] { --m-ciemny: #B8551F; --m-akcent: #C8863A; --m-tlo: #F6EEE1; --m-mocny: #B8551F; --m-jasny: #f6e0cf; }
body[data-modul="reklamowy"] { --m-ciemny: #5E7A2E; --m-akcent: #E2A93F; --m-tlo: #EEF2E3; --m-mocny: #5E7A2E; --m-jasny: #e2ead0; }

[hidden] { display: none !important; } * { box-sizing: border-box; } html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--m-mocny); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1 { margin: 0; font: 700 26px/1.2 var(--szyld); letter-spacing: -.01em; }
h2 { font-size: 17px; letter-spacing: -.01em; margin: 28px 0 10px; font-weight: 700; }
h3 { font-size: 15px; margin: 0; font-weight: 700; }
.ik { flex: none; vertical-align: -3px; }
.liczba, .mono { font-family: var(--liczby); font-variant-numeric: tabular-nums; }
.mono { font-size: 12px; }
.cicho, .meta { color: var(--muted); } .maly-tekst { font-size: 12.5px; } .blad-tekst { color: var(--red); }

/* przyciski i pola (pillDrive) */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r); border: 1px solid transparent; background: var(--pole); color: var(--ink); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: #eadfce; text-decoration: none; }
.btn.pri { background: var(--m-mocny); border-color: var(--m-mocny); color: #fff; } .btn.pri:hover { filter: brightness(.92); }
.btn.red { color: var(--red); } .btn.sm { height: 30px; padding: 0 10px; font-size: 13px; } .btn:disabled { opacity: .45; cursor: default; }
.btn.bez { background: transparent; } .btn.bez:hover { background: var(--hover); }
.btn.on { background: var(--m-jasny); color: var(--m-mocny); }
.link { background: none; border: 0; padding: 0 2px; text-align: left; color: var(--m-mocny); font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; } .link.red { color: var(--red); }
input[type=text], input[type=email], input[type=search], input[type=date], input[type=number], input:not([type]), select, textarea { height: 38px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r); background: #fff; width: 100%; }
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--m-akcent); outline-offset: 0; border-color: var(--m-mocny); }
button:focus-visible, a:focus-visible, .ls:focus-visible { outline: 2px solid var(--m-akcent); outline-offset: 1px; }
.pole { display: grid; gap: 6px; margin: 0 0 14px; }
.pole > span { font-size: 13px; font-weight: 600; }
.pole.wiersz { display: flex; align-items: center; gap: 8px; font-size: 13.5px; } .pole.wiersz input { width: auto; } .pole.wiersz > span { font-weight: 500; }
.przyciski { display: flex; gap: 6px; flex-wrap: wrap; }
/* lista wyboru zamiast przeglądarkowego <select> (pillDrive: ladneListy) */
.ls { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 10px 0 12px; border: 1px solid var(--line2); border-radius: var(--r); background: #fff; color: var(--ink); cursor: pointer; font: inherit; width: 100%; text-align: left; white-space: nowrap; }
.ls span { overflow: hidden; text-overflow: ellipsis; } .ls:hover { background: var(--hover); } .ls .ik { color: var(--muted); } .ls:disabled { opacity: .55; cursor: default; }

/* menu, okna, komunikaty (pillDrive) */
.menu { position: fixed; z-index: 95; min-width: 220px; max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font-weight: 500; cursor: pointer; text-align: left; font-size: 14px; text-decoration: none; }
.menu button:hover, .menu a:hover { background: var(--hover); text-decoration: none; } .menu button:disabled { opacity: .45; cursor: default; }
.menu .red { color: var(--red); } .menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.menu .kto { display: flex; gap: 11px; align-items: center; padding: 8px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .menu .kto b { display: block; } .menu .kto small { color: var(--muted); word-break: break-all; }
.menu .ptaszek { width: 16px; display: inline-grid; place-items: center; color: var(--m-mocny); }
.mod { position: fixed; inset: 0; background: rgba(43,29,20,.45); display: grid; place-items: center; z-index: 80; padding: 16px; }
.mod .okno { background: #fff; border-radius: 14px; padding: 22px 24px; width: min(540px,100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.mod h3 { margin: 0 0 14px; font-size: 18px; letter-spacing: -.01em; } .mod .stopa { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }
.tost { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #2B1D14; color: #fff; padding: 11px 18px; border-radius: 10px; z-index: 90; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 90vw; }
.tost.blad { background: var(--red); }

/* szkielet ładowania (pillDrive) */
.szk { padding-top: 4px; } .szk i { display: block; border-radius: 6px; background: linear-gradient(90deg,#f1e9dd 0,#faf6f0 40%,#f1e9dd 80%); background-size: 200% 100%; animation: szk 1.2s linear infinite; }
.szk-t { width: 240px; height: 24px; margin: 4px 0 22px; } .szk-w { display: flex; align-items: center; gap: 14px; height: 48px; border-bottom: 1px solid var(--line); }
.szk-i { width: 90px; height: 12px; flex: none; } .szk-n { height: 12px; width: 55%; } .szk-w:nth-child(3n) .szk-n { width: 38%; } .szk-w:nth-child(3n+1) .szk-n { width: 68%; }
@keyframes szk { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .szk i { animation: none; } }

/* górny pasek: kolor garnka, znak BigOS i zakładki modułów (procedura 0066) */
.gora { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 16px 0 14px; background: var(--garnek); color: var(--miska); }
.marka { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.marka:hover { text-decoration: none; }
.marka-n { font: 700 23px/1 var(--szyld); letter-spacing: -.01em; color: var(--miska); } .marka-n b { color: var(--papryka); font-weight: 700; }
.moduly { display: flex; gap: 4px; height: 100%; align-items: flex-end; flex: 1; min-width: 0; overflow-x: auto; }
.modul { display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 10px 10px 0 0; color: #d8cab5; font-weight: 600; white-space: nowrap; }
.modul:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.modul.on { color: #fff; }
.modul.m-planerowy.on { background: #5B2C4F; } .modul.m-marketingowy.on { background: #B8551F; } .modul.m-reklamowy.on { background: #5E7A2E; }
.awatar { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--kapusta); color: var(--garnek); font-weight: 800; font-size: 13px; cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; position: relative; }
.awatar.duzy { width: 44px; height: 44px; font-size: 15px; cursor: default; }
.kropka { position: absolute; right: -1px; top: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--papryka); border: 2px solid var(--garnek); }

/* układ: pasek widoków w kolorze modułu, panel w jasnym odcieniu modułu, obszar roboczy */
.uklad { display: grid; grid-template-columns: 196px 248px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.widoki { background: var(--m-ciemny); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.widoki-t { color: rgba(255,255,255,.66); font-size: 12px; font-weight: 600; padding: 4px 12px 6px; }
.widoki-t.wsp { margin-top: 16px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 14px; }
.widoki a { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: var(--r); color: #fff; font-weight: 600; opacity: .9; }
.widoki a:hover { background: rgba(255,255,255,.12); opacity: 1; text-decoration: none; }
.widoki a.on { background: var(--m-tlo); color: var(--m-ciemny); opacity: 1; }
.widoki a.on::after { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--m-akcent); margin-left: auto; }
.panel { background: var(--m-tlo); padding: 16px 12px; border-right: 1px solid var(--line); }
.panel-t { font-size: 12px; font-weight: 600; color: var(--muted); margin: 18px 4px 6px; }
.lista-el { display: grid; gap: 2px; }
.lista-el a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: var(--r); color: var(--ink); font-weight: 500; }
.lista-el a:hover { background: rgba(0,0,0,.04); text-decoration: none; }
.lista-el a.on { background: #fff; font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.robocze { padding: 20px 28px 80px; min-width: 0; }
.robocze:focus { outline: none; }

.naglowek { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.naglowek .opis { margin: 6px 0 0; color: var(--muted); max-width: 760px; line-height: 1.5; }
.akcje { display: flex; gap: 8px; flex-wrap: wrap; }
.plakietka { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px; background: var(--m-jasny); color: var(--m-mocny); white-space: nowrap; }
.plakietka.szara { background: #eef0f2; color: #4a5058; }
.wkrotce { border: 1px dashed var(--line2); border-radius: 12px; padding: 28px; max-width: 680px; background: var(--side); }
.wkrotce p { margin: 12px 0 0; line-height: 1.55; }

/* statusy: kolor, kształt i słowo (procedura 0066) */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.status-znak { font-size: 11px; }
.s-zgodnie { color: var(--zgodnie); } .s-zagrozony { color: var(--zagrozony); } .s-ponizej { color: var(--ponizej); } .s-brak { color: var(--muted); }
.statusy-leg { display: grid; gap: 8px; } .statusy-leg .status { white-space: normal; align-items: flex-start; font-weight: 500; }

/* tabele (pillDrive: .pliki, .tbl) */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.tabela-wrap.waska { max-width: 760px; }
.tabela { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.tabela th { text-align: left; font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--side); white-space: nowrap; }
.tabela th button { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: #fdf9f3; }
.tabela .liczba { text-align: right; white-space: nowrap; }
.tabela tr.suma th, .tabela tr.suma td { background: var(--garnek); color: var(--miska); font-weight: 700; font-size: 13.5px; }
.tabela td.duza { font-size: 15px; font-weight: 700; }
.tabela .mono.cicho { word-break: break-all; }
.tabela td:last-child { white-space: nowrap; }
.k-najlepszy { background: #2e7d4f !important; color: #fff; } .k-75 { background: #dcf0e3 !important; } .k-50 { background: #fdebd2 !important; }
.legenda { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin: 0 0 10px; color: var(--muted); }
.legenda i { font-style: normal; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink); }
.stopka-zrodla { margin-top: 18px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.uwaga-do { background: #fff3df; color: #8a5a00; padding: 8px 12px; border-radius: 8px; display: inline-block; margin: 0 0 10px; }
.wersje { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.wersje li { color: var(--muted); } .wersje li.on { color: var(--ink); font-weight: 600; } .wersje li.przyszla { font-style: italic; }

/* słownik i formularze */
.hasla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.haslo { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.haslo-g { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.haslo-akcje { margin-left: auto; display: flex; gap: 6px; }
.haslo p { margin: 8px 0; line-height: 1.5; }
.haslo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; }
.haslo dt { color: var(--muted); } .haslo dd { margin: 0; }
.formularz { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin: 0 0 18px; max-width: 760px; background: #fff; }
.formularz h2 { margin-top: 0; }
.siatka2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* historia zmian (pillDrive) */
.zmiany { list-style: none; margin: 6px 0 0; padding: 0; max-width: 900px; }
.zw { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.zw-b { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; background: var(--garnek); color: #fff; border-radius: 6px; padding: 2px 9px; }
.zw time { display: block; color: var(--muted); font-size: 12.5px; margin-top: 7px; }
.zw ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .zw li { display: flex; gap: 12px; align-items: baseline; line-height: 1.5; }
.zr { flex: none; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 1px 8px; min-width: 104px; text-align: center; }
.zr.nowe { background: #e3f4ea; color: #2e7d4f; } .zr.lepiej { background: #f6e0cf; color: #B8551F; } .zr.szybciej { background: #fff3df; color: #8a5a00; } .zr.poprawka { background: #fdecea; color: var(--red); } .zr.bezpiecznie { background: #ece9f8; color: #5b47b0; } .zr.zmiana { background: #eef0f2; color: #4a5058; }

/* logowanie (1:1 z pillDrive, znak i napis BigOS) */
.lg-body { margin: 0; min-height: 100vh; background: #efe6d8; position: relative; overflow-x: hidden; }
.lg-tlo { position: fixed; inset: 0; filter: blur(3px); opacity: .5; pointer-events: none; }
.lg-gora { position: absolute; left: 0; right: 0; top: 0; height: 56px; background: var(--garnek); }
.lg-bok { position: absolute; left: 0; top: 56px; bottom: 0; width: 196px; background: #B8551F; padding: 24px 18px; }
.lg-bok b { display: block; height: 12px; border-radius: 6px; background: rgba(255,255,255,.35); margin-bottom: 18px; }
.lg-lst { margin-left: 196px; padding: 76px 32px 20px; } .lg-sz { height: 32px; border-radius: 10px; background: #e6dccd; max-width: 420px; margin-bottom: 22px; }
.lg-w { display: flex; align-items: center; gap: 14px; height: 48px; border-bottom: 1px solid #e6dccd; color: #4b3a2c; font-size: 14px; }
.lg-w i { width: 22px; height: 18px; border-radius: 4px; background: #e8a476; flex: none; } .lg-w i.p { background: #d9cdbb; } .lg-w span { flex: 1; } .lg-w em { width: 90px; height: 9px; border-radius: 5px; background: #e6dccd; }
.lg { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px 72px; }
.lg-k { width: min(400px,100%); background: #fff; border-radius: 18px; padding: 28px; box-shadow: 0 24px 70px rgba(43,29,20,.22); }
.lg-k .marka-n { color: var(--garnek); font-size: 28px; }
.lg-k h1 { font-size: 24px; margin: 18px 0 12px; } .lg-o { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: -4px 0 12px; }
.lg-od { display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; border: 1px solid #d6d2cc; border-radius: 10px; color: var(--garnek); font-weight: 700; }
.lg-od:hover { background: #faf8f5; text-decoration: none; } .lg-od svg { flex: none; border-radius: 5px; }
.lg-lub { display: flex; align-items: center; gap: 10px; color: #9a8c7e; font-size: 12.5px; margin: 14px 0 6px; } .lg-lub::before, .lg-lub::after { content: ''; flex: 1; height: 1px; background: #e7e5e1; }
.lg-kto { display: flex; align-items: center; gap: 12px; border: 1px solid #e7e5e1; border-radius: 12px; padding: 10px 12px; margin-top: 8px; } .lg-kto small { display: block; color: var(--muted); }
.lg-aw { width: 38px; height: 38px; border-radius: 50%; background: #f6e3d6; color: #B8551F; font-weight: 700; display: grid; place-items: center; flex: none; }
.lg-l { display: block; font-size: 13.5px; font-weight: 600; margin: 10px 0 6px; } .lg-k input#email { height: 46px; }
.lg-b { width: 100%; height: 46px; margin-top: 12px; border: 0; border-radius: 10px; background: #B8551F; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.lg-b:hover { background: #9e4718; } .lg-b:disabled { opacity: .7; }
.lg-x { display: block; margin: 10px auto 0; background: none; border: 0; color: #B8551F; font-weight: 600; cursor: pointer; font-size: 14px; padding: 8px; }
.lg-kody { display: flex; gap: 8px; } .lg-kody input { width: 100%; min-width: 0; height: 54px; text-align: center; font-family: var(--liczby); font-size: 24px; font-weight: 500; padding: 0; border-radius: 10px; }
.lg-mal { margin-top: 12px; } .lg-ln { background: none; border: 0; padding: 0; color: #B8551F; font-weight: 600; cursor: pointer; font-size: inherit; } .lg-ln:disabled { color: var(--muted); cursor: default; font-weight: 500; }
.lg-msg { color: var(--red); min-height: 1.2em; margin: 10px 0 0; font-size: 13.5px; }
.lg-zab { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6f6257; margin-top: 6px; }
.lg-kl { font-size: 12.5px; color: var(--muted); border-top: 1px solid #eeebe7; margin-top: 14px; padding-top: 12px; line-height: 1.5; } .lg-kl b { color: var(--garnek); }
.lg-st { position: absolute; left: 0; right: 0; bottom: 16px; padding: 0 28px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #6f6257; }
.lg-st a { color: #6f6257; margin-left: 14px; } .lg-bld { font: 11.5px var(--liczby); }

/* dokumentacja (app-docs, wzór pillDrive i Flow) */
.dok-uklad { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: 36px; align-items: start; max-width: 1320px; }
.dok-nav { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 14px; }
.dok-grupa { margin-bottom: 16px; } .dok-grupa-t { font-weight: 700; margin: 0 0 6px 10px; font-size: 13.5px; }
.dok-nav a { display: block; color: var(--muted); padding: 5px 10px; border-radius: 6px; line-height: 1.35; }
.dok-nav a:hover { color: var(--ink); background: var(--hover); text-decoration: none; } .dok-nav a.on { color: var(--m-mocny); background: var(--m-jasny); font-weight: 600; }
.dok { min-width: 0; max-width: 780px; line-height: 1.65; font-size: 15px; overflow-wrap: anywhere; }
.dok h1 { font-size: 30px; margin: 4px 0 14px; } .dok-okruch { color: var(--m-mocny); font-size: 13px; font-weight: 600; }
.dok h4 { font-size: 19px; margin: 32px 0 10px; scroll-margin-top: 76px; }
.dok p, .dok ul, .dok ol, .dok pre, .dok .tab-wrap, .dok .notka { margin: 0 0 14px; } .dok ul, .dok ol { padding-left: 22px; } .dok li { margin: 3px 0; }
.dok code { font: 12.5px var(--liczby); background: var(--side); padding: 1px 5px; border-radius: 4px; }
.adm-zn { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 11px; font-weight: 700; color: #8a5a00; background: #fff3df; border-radius: 10px; padding: 1px 8px; }
.tab-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.dok table { border-collapse: collapse; width: 100%; font-size: 13.5px; } .dok th, .dok td { border-bottom: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.dok tr:last-child td { border-bottom: 0; } .dok th { color: var(--muted); font-weight: 600; background: var(--side); font-size: 12.5px; }
.dok pre { background: var(--side); border: 1px solid var(--line); padding: 14px 16px; border-radius: 10px; overflow-x: auto; } .dok pre code { background: none; padding: 0; }
.notka { display: flex; gap: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--side); }
.notka p { margin: 0 0 8px; } .notka p:last-child { margin: 0; }
.notka-ik { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 12px; border: 1.5px solid currentColor; color: var(--muted); }
.notka.tip .notka-ik { color: var(--zgodnie); } .notka.warning { background: #fff8ec; border-color: #f0dcb6; } .notka.warning .notka-ik { color: #a8641a; }
.kroki { list-style: none; padding: 0 !important; margin: 10px 0 18px; counter-reset: krok; }
.kroki > li { position: relative; padding: 0 0 20px 50px; counter-increment: krok; }
.kroki > li::before { content: counter(krok); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--pole); display: grid; place-items: center; font-weight: 600; }
.kroki > li::after { content: ""; position: absolute; left: 15.5px; top: 38px; bottom: 4px; width: 1px; background: var(--line2); } .kroki > li:last-child::after { display: none; }
.kroki h5 { font-size: 16.5px; margin: 5px 0 8px; }
.karty { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 20px; }
.karta { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); } .karta:hover { border-color: var(--m-mocny); text-decoration: none; }
.karta span { color: var(--muted); font-size: 13.5px; }
.dok-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.dok-pn a { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-weight: 600; } .dok-pn a.nast { text-align: right; } .dok-pn small { color: var(--muted); font-size: 12px; font-weight: 400; }
.dok-toc { position: sticky; top: 76px; font-size: 13.5px; display: grid; gap: 2px; } .dok-toc-t { font-weight: 700; margin-bottom: 8px; }
.dok-toc a { color: var(--muted); padding: 4px 0 4px 12px; border-left: 2px solid var(--line); } .dok-toc a.pod { padding-left: 22px; font-size: 13px; }

/* wąskie okna i telefon: pasek widoków nad treścią, bez przewijania strony w bok */
@media (max-width: 1100px) { .uklad { grid-template-columns: 170px 220px minmax(0, 1fr); } .dok-uklad { grid-template-columns: 200px minmax(0, 1fr); } .dok-toc { display: none; } }
@media (max-width: 820px) {
  .gora { gap: 10px; padding: 0 12px; } .marka-n { font-size: 20px; } .modul span { display: none; } .modul { padding: 0 12px; }
  .uklad { grid-template-columns: 1fr; }
  .widoki { flex-direction: row; overflow-x: auto; padding: 8px; } .widoki-t { display: none; } .widoki a { white-space: nowrap; flex: none; } .widoki a.on::after { display: none; }
  .panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .robocze { padding: 16px 16px 48px; }
  .dok-uklad { grid-template-columns: 1fr; } .dok-nav { position: static; max-height: none; }
  .siatka2 { grid-template-columns: 1fr; } .zw { grid-template-columns: 1fr; gap: 10px; } .zw li { flex-direction: column; gap: 4px; } .zr { min-width: 0; }
}
@media (max-width: 700px) {
  .lg-tlo { display: none; } .lg-body { background: #fff; } .lg { justify-content: flex-start; padding: 16px 16px 24px; } .lg-k { box-shadow: none; padding: 0; } .lg-k h1 { font-size: 22px; margin: 14px 0 10px; }
  .lg-st { position: static; padding: 22px 0 0; width: min(400px,100%); flex-direction: column; gap: 4px; } .lg-st a { margin: 0 14px 0 0; }
}
.panel .btn { background: #fff; border-color: var(--line2); } .panel .btn.on { background: var(--m-jasny); border-color: var(--m-akcent); }

/* Etap 1: kafle, wykres, zakładki okresów PDCA, pasek realizacji, siatka planów */
.s-zakonczony { color: #1f5f2b; }
.kafle { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.kafel { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; display: grid; gap: 4px; }
.kafel span { font-size: 12px; color: var(--muted); } .kafel b { font: 600 16px var(--liczby); }
.wykres-ramka { margin: 10px 0 0; max-width: 760px; } .wykres { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.w-siatka { stroke: var(--line); stroke-width: 1; } .w-opis { font: 11px var(--liczby); fill: var(--muted); }
.w-wynik { fill: none; stroke: var(--m-mocny); stroke-width: 2.5; stroke-linejoin: round; } .w-plan { fill: none; stroke: var(--garnek); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .65; }
.legenda i.l-wynik::before, .legenda i.l-plan::before { content: ''; display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 2.5px solid var(--m-mocny); }
.legenda i.l-plan::before { border-top: 1.5px dashed var(--garnek); }
.zakladki { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 14px; }
.zakladka { height: 32px; padding: 0 10px; border: 1px solid var(--line2); border-radius: var(--r); background: #fff; color: var(--ink); font-weight: 500; font-size: 13px; cursor: pointer; }
.zakladka:hover { background: var(--hover); } .zakladka.on { background: var(--m-mocny); border-color: var(--m-mocny); color: #fff; font-weight: 600; } .zakladka.szersza { font-weight: 600; }
.tabela.pdca tr.grupa th { background: var(--m-tlo); color: var(--m-ciemny); font-size: 13px; padding: 7px 12px; }
.tabela tr.brak-zrodla td { color: var(--muted); }
.pasek-real { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.pr-tlo { position: relative; flex: 1; height: 8px; border-radius: 4px; background: var(--pole); max-width: 160px; }
.pr-tlo i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--muted); }
.pasek-real.s-zgodnie i { background: var(--zgodnie); } .pasek-real.s-zagrozony i { background: var(--zagrozony); } .pasek-real.s-ponizej i { background: var(--ponizej); }
.pr-strzalka { position: absolute; right: -10px; top: -6px; font-size: 13px; color: var(--zgodnie); }
.mod .okno.duze { width: min(1180px, 100%); }
.plany-siatka { max-height: 62vh; overflow: auto; }
.plany-siatka input { height: 32px; min-width: 84px; text-align: right; font-family: var(--liczby); padding: 0 8px; }
.plany-siatka th[scope=row] { position: sticky; left: 0; background: #fff; min-width: 210px; z-index: 1; }
.plany-siatka thead th { position: sticky; top: 0; z-index: 2; }
.tabela.pdca td:nth-child(2) { min-width: 120px; }
.tabela .liczba .cicho { font-family: var(--font); }
.kafel b .status { font-family: var(--font); font-size: 14px; }
.tabela tbody td:first-child { min-width: 200px; }