/* aplikacje/wspolne/wspolne.css - system projektowy LangFlo (opis: docs/design.md).
   Tokeny, typografia i komponenty wspólne dla panelu biura i aplikacji lektora. */
/* CZ 23.10.2026: krój Gantari z własnych plików (fonty/gantari.css), cyfry z kroju systemowego (tabelaryczne). */
@import url("fonty/gantari.css");
*{margin:0;padding:0;box-sizing:border-box}
/* Kolory (18.10.2026, jak panel Live): trzy kolory szkoły z marka.js, domyślnie paleta Live.
   --akcent* (kolor główny, zieleń): akcje, czyli przyciski, linki, aktywne menu i zakładki, fokus, przełączniki.
   --marka2* (kolor dodatkowy, limonka): tła i delikatne akcenty, ikony w kafelkach, wykresy.
   --wyr* (kolor akcentu, róż): liczniki, "Pilne", alarmy, plakietki.
   --ok / --uwaga / --zle: stany, stałe i niezależne od marki. */
/* pola liczbowe bez strzałek (zmieniały kwotę o grosz); wpisuje się z klawiatury */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
:root{
  --tlo:#F5F5F3;--pow:#FFFFFF;--pow2:#F7F7F5;--pow3:#EDEDEA;--linia:#E5E5E2;--linia2:#CFCFCA;--tekst:#444444;--tekst2:#626262;--tekst3:#8C8C88;
  --akcent:#32843B;--akcent-pelny:#32843B;--akcent-tekst:#2C7635;--akcent-tlo:#E7F2E8;--akcent-mocny:var(--wyr-pelny);
  --marka2:#A0C823;--marka2-tlo:#EAF3CF;--marka2-ciemny:#76941A;--marka2-tekst:#5A7014;--marka2-napis:#1D1D1F;
  --wyr:#FC516E;--wyr-pelny:#CA4158;--wyr-tekst:#BA3C51;--wyr-tlo:#FFEAEE;--marka3:var(--wyr-tekst);
  --szkola:#379342;--szkola-tekst:color-mix(in srgb,var(--szkola) 82%,#000);--szkola-tlo:color-mix(in srgb,var(--szkola) 12%,#fff);--szkola-linia:color-mix(in srgb,var(--marka2,#A0C823) 55%,#fff);
  --ok:#1E7A3E;--ok-tlo:#E3F3E7;
  --uwaga:#855A00;--uwaga-tlo:#FFF4CC;
  --zle:#B42318;--zle-tlo:#FEE4E2;
  --toast:#4B4576;--toast-tekst:#FFFFFF;
  --hover:rgba(0,0,0,.035);--cien-pop:0 6px 24px rgba(40,40,30,.10),0 1px 3px rgba(40,40,30,.06);--cien-arkusz:0 20px 60px rgba(30,28,40,.18),0 2px 8px rgba(30,28,40,.08);
  --r-lista:12px;--r-btn:8px;--r-arkusz:20px;
  --font:"Gantari",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--tlo:#17161F;--pow:#211F2D;--pow2:#292739;--pow3:#322F44;--linia:#35324A;--linia2:#4B4766;--tekst:#ECEBF2;--tekst2:#B3B0C4;--tekst3:#8A86A0;
    --akcent:#77B67E;--akcent-pelny:#32843B;--akcent-tekst:#77B67E;--akcent-tlo:#263B32;
    --marka2-tlo:#383D2B;--marka2-ciemny:#A0C823;--marka2-tekst:#A0C823;--wyr-tekst:#FD778E;--wyr-tlo:#512A3B;
    --szkola-tekst:color-mix(in srgb,var(--marka2,#A0C823) 75%,#fff);--szkola-tlo:color-mix(in srgb,var(--szkola) 26%,var(--pow));--szkola-linia:color-mix(in srgb,var(--marka2,#A0C823) 40%,var(--pow));
    --ok:#7BD08F;--ok-tlo:color-mix(in srgb,#2FA35A 20%,var(--pow));
    --uwaga:#F0C24F;--uwaga-tlo:color-mix(in srgb,#E8B828 16%,var(--pow));--zle:#FF8F86;--zle-tlo:color-mix(in srgb,#F04438 20%,var(--pow));
    --toast:#ECEBF2;--toast-tekst:#211F2D;--hover:rgba(255,255,255,.05);--cien-pop:0 8px 28px rgba(0,0,0,.45);--cien-arkusz:0 20px 60px rgba(0,0,0,.6)}
}
:root[data-theme="dark"]{--tlo:#17161F;--pow:#211F2D;--pow2:#292739;--pow3:#322F44;--linia:#35324A;--linia2:#4B4766;--tekst:#ECEBF2;--tekst2:#B3B0C4;--tekst3:#8A86A0;
  --akcent:#77B67E;--akcent-pelny:#32843B;--akcent-tekst:#77B67E;--akcent-tlo:#263B32;
  --marka2-tlo:#383D2B;--marka2-ciemny:#A0C823;--marka2-tekst:#A0C823;--wyr-tekst:#FD778E;--wyr-tlo:#512A3B;
  --szkola-tekst:color-mix(in srgb,var(--marka2,#A0C823) 75%,#fff);--szkola-tlo:color-mix(in srgb,var(--szkola) 26%,var(--pow));--szkola-linia:color-mix(in srgb,var(--marka2,#A0C823) 40%,var(--pow));
  --ok:#7BD08F;--ok-tlo:color-mix(in srgb,#2FA35A 20%,var(--pow));
  --uwaga:#F0C24F;--uwaga-tlo:color-mix(in srgb,#E8B828 16%,var(--pow));--zle:#FF8F86;--zle-tlo:color-mix(in srgb,#F04438 20%,var(--pow));
  --toast:#ECEBF2;--toast-tekst:#211F2D;--hover:rgba(255,255,255,.05);--cien-pop:0 8px 28px rgba(0,0,0,.45);--cien-arkusz:0 20px 60px rgba(0,0,0,.6)}

html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:15px;line-height:1.4;color:var(--tekst);background:var(--tlo);min-height:100vh;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
/* tło strony: delikatne plamy marki u góry (róż z prawej, limonka z lewej, odrobina zieleni), jak w panelu Live */
body{background-color:var(--tlo);background-repeat:no-repeat;background-image:
  radial-gradient(760px 320px at 100% 0%,color-mix(in srgb,var(--wyr) 5%,transparent),transparent 70%),
  radial-gradient(620px 300px at 22% 0%,color-mix(in srgb,var(--marka2) 8%,transparent),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--akcent-pelny) 4%,var(--tlo)) 0,var(--tlo) 360px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body{background-image:
  radial-gradient(760px 320px at 100% 0%,color-mix(in srgb,var(--wyr) 5%,transparent),transparent 70%),
  radial-gradient(620px 300px at 22% 0%,color-mix(in srgb,var(--marka2) 4%,transparent),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--akcent-pelny) 6%,var(--tlo)) 0,var(--tlo) 360px)}}
:root[data-theme="dark"] body{background-image:
  radial-gradient(760px 320px at 100% 0%,color-mix(in srgb,var(--wyr) 5%,transparent),transparent 70%),
  radial-gradient(620px 300px at 22% 0%,color-mix(in srgb,var(--marka2) 4%,transparent),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--akcent-pelny) 6%,var(--tlo)) 0,var(--tlo) 360px)}
a{color:var(--akcent-tekst);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--akcent);outline-offset:2px;border-radius:6px}
.ukryty{display:none!important}
.drugi-tekst{color:var(--tekst2)}
.maly{font-size:13px}

/* typografia */
.tytul{font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
/* tytuł okna (arkusza): jeden rozmiar (audyt 3 U23) */
.tytul-okna{font-size:24px}
.podtytul{color:var(--tekst2);margin-top:4px}
.sekcja{margin-top:32px}
.sekcja-tytul{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px 1px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sekcja-tytul .drugi-tekst{font-size:13px;font-weight:400}
@media (max-width:600px){.sekcja-tytul{flex-wrap:wrap;row-gap:4px}.sekcja-tytul .drugi-tekst{min-width:0;overflow-wrap:anywhere}}

/* przyciski i pola */
.btn{font:inherit;font-weight:500;font-size:15px;border:1px solid transparent;border-radius:var(--r-btn);padding:9px 16px;background:var(--akcent-pelny);color:#fff;cursor:pointer;min-height:40px;transition:background .12s,border-color .12s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:color-mix(in srgb,var(--akcent-pelny) 88%,#000)}
.btn:active{background:color-mix(in srgb,var(--akcent-pelny) 80%,#000)}
.btn:disabled{opacity:.45;cursor:default}
.btn:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}
.btn-drugi{background:var(--pow);color:var(--tekst);border-color:var(--linia2)}
.btn-drugi:hover,.btn-drugi:active{background:var(--pow2)}
.btn-tekst{background:none;color:var(--akcent-tekst);padding:8px 10px;min-height:36px}
.btn-tekst:hover,.btn-tekst:active{background:var(--akcent-tlo)}
.btn-duzy{width:100%;min-height:50px;font-size:17px;border-radius:12px}
.pole{font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--linia2);border-radius:var(--r-btn);background:var(--pow);color:var(--tekst);min-height:40px;width:100%}
.pole::placeholder{color:var(--tekst3)}
.pole:focus{outline:none;border-color:var(--akcent);box-shadow:0 0 0 2px var(--pow),0 0 0 4px color-mix(in srgb,var(--akcent) 55%,transparent)}
.pole[aria-invalid=true]{border-color:var(--zle)}
select.pole{width:auto;padding-right:28px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2386868b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.etykieta{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tekst2)}

/* znaczek stanu: zawsze z tekstem */
.znak{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:12.5px;font-weight:500;white-space:nowrap;background:var(--pow3);color:var(--tekst2)}
.znak-ok{background:var(--ok-tlo);color:var(--ok)}
.znak-uwaga{background:var(--uwaga-tlo);color:var(--uwaga)}
.znak-zle{background:var(--zle-tlo);color:var(--zle)}
.znak-akcent{background:var(--wyr-tlo);color:var(--wyr-tekst)}

/* lista zgrupowana */
.lista{background:var(--pow);border:1px solid var(--linia);border-radius:var(--r-lista);overflow:hidden}
.wiersz{display:flex;align-items:center;gap:14px;padding:13px 18px;min-height:56px;position:relative;color:inherit}
.wiersz + .wiersz::before{content:"";position:absolute;top:0;left:0;right:0;border-top:1px solid var(--linia)}
a.wiersz:hover,.wiersz.klik:hover{background:var(--hover);text-decoration:none;cursor:pointer}
.wiersz .glowne{flex:1;min-width:0}
.wiersz .nazwa{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiersz .opis{font-size:13px;color:var(--tekst2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiersz .prawo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--tekst2);font-size:14px}
@media (max-width:640px){
  .wiersz:has(.prawo .btn + .btn),.wiersz:has(.prawo .btn + .znak),.wiersz:has(.prawo .znak + .btn){flex-wrap:wrap}
  .wiersz:has(.prawo .btn + .btn) .prawo,.wiersz:has(.prawo .btn + .znak) .prawo,.wiersz:has(.prawo .znak + .btn) .prawo{flex-basis:100%;justify-content:flex-end;padding-left:64px}
  .wiersz .nazwa,.wiersz .opis{white-space:normal;overflow-wrap:anywhere}
  .wiersz .prawo{flex-wrap:wrap;min-width:0;max-width:100%}   /* A4-B17: długie nazwy grup nie poszerzają strony */
  .tytul{overflow-wrap:anywhere}
}
.wiersz .godzina{width:56px;flex-shrink:0;font-weight:500;font-size:14.5px}
.wiersz .godzina small{display:block;font-weight:400;color:var(--tekst2);font-size:12px}
.strzalka{width:8px;height:13px;flex-shrink:0;color:var(--tekst2);opacity:.6}
/* pusty stan: zdanie z następnym krokiem w ramce; w liście i tabeli bez drugiej ramki (audyt 3 U30) */
.pusto{padding:28px 20px;text-align:center;color:var(--tekst2);background:var(--pow);border:1px solid var(--linia);border-radius:var(--r-lista)}
.lista .pusto,.tabela .pusto,td.pusto,.kafel .pusto,.wnetrze .pusto{background:none;border:none;border-radius:0}

/* tabela (tam, gdzie porównuje się kolumny) */
.tabela{width:100%;border-collapse:separate;border-spacing:0;background:var(--pow);border:1px solid var(--linia);border-radius:var(--r-lista);overflow:hidden}
.tabela th{text-align:left;font-size:13px;font-weight:400;color:var(--tekst2);padding:12px 16px;border-bottom:1px solid var(--linia);white-space:nowrap;background:var(--pow)}
.tabela td{padding:12px 16px;border-bottom:1px solid var(--linia);vertical-align:middle}
.tabela tr:last-child td{border-bottom:none}
.tabela tr.klik{cursor:pointer}
.tabela tr.klik:hover td{background:var(--hover)}
.tabela .num{text-align:right}
.tabela .slabe{color:var(--tekst2)}

/* przełącznik segmentowy */
.segmenty{display:inline-flex;background:var(--pow3);border-radius:10px;padding:3px;gap:2px}
.segmenty button{font:inherit;font-size:14px;font-weight:400;border:none;background:none;color:var(--tekst);padding:6px 14px;border-radius:8px;cursor:pointer;min-height:32px;white-space:nowrap}
.segmenty button.wl{background:var(--pow);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px color-mix(in srgb,var(--akcent) 22%,transparent);font-weight:600;color:var(--akcent-tekst)}
/* Zakładki ponad limit (5) chowają się pod "Więcej" (audyt UX, 15.10) */
.segmenty details.seg-wiecej{position:relative;display:inline-block}
.segmenty details.seg-wiecej summary{list-style:none;font-size:13.5px;font-weight:500;padding:6px 12px;border-radius:8px;cursor:pointer;min-height:32px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:var(--tekst)}
.segmenty details.seg-wiecej summary::-webkit-details-marker{display:none}
.segmenty details.seg-wiecej summary:empty{padding:4px 8px;min-height:28px}
.segmenty details.seg-wiecej summary:empty::before{content:"\2022\2022\2022";letter-spacing:1px;font-weight:700;line-height:1}
.segmenty details.seg-wiecej summary:empty::after{display:none}
.segmenty details.seg-wiecej summary::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7}
.segmenty details.seg-wiecej[open] summary,.segmenty details.seg-wiecej summary:hover{background:var(--pow)}
.segmenty .seg-lista{position:absolute;top:calc(100% + 6px);right:0;background:var(--pow);border:1px solid var(--linia);border-radius:12px;padding:6px;display:flex;flex-direction:column;min-width:190px;z-index:40;box-shadow:0 8px 28px rgba(0,0,0,.12)}
.segmenty .seg-lista button{text-align:left;border-radius:8px;width:100%}
.segmenty .seg-lista button:hover{background:var(--hover)}
@media (max-width:600px){.segmenty,.zak-linia,.ps-zak{flex-wrap:wrap;max-width:100%}}

/* arkusz (okno) */
/* arkusz wysuwany z prawej (komputer) albo od dołu (telefon) */
.arkusz-tlo{position:fixed;inset:0;background:rgba(30,28,40,.28);z-index:100;display:flex;align-items:stretch;justify-content:flex-end;padding:0;animation:pojaw .18s ease-out}
.arkusz{background:var(--pow);border-radius:var(--r-arkusz) 0 0 var(--r-arkusz);box-shadow:var(--cien-arkusz);width:100%;max-width:560px;height:100vh;height:100dvh;overflow:auto;animation:zprawej .24s cubic-bezier(.2,.8,.2,1)}
.arkusz .lista{background:var(--pow)}
.arkusz-uchwyt{position:fixed;top:0;bottom:0;width:10px;cursor:ew-resize;z-index:101}
.arkusz-uchwyt:hover,.przeciaganie .arkusz-uchwyt{background:linear-gradient(90deg,transparent 4px,var(--akcent) 4px,var(--akcent) 6px,transparent 6px);opacity:.6}
.przeciaganie{user-select:none;cursor:ew-resize!important}.przeciaganie-kol,.przeciaganie-kol *{cursor:col-resize!important}
th.kol-krawedz{cursor:col-resize}
@media (max-width:640px){.arkusz-uchwyt{display:none}}
@media (max-width:640px){.arkusz-tlo{align-items:flex-end}.arkusz{height:auto;max-height:92vh;border-radius:var(--r-arkusz) var(--r-arkusz) 0 0;animation:wjedz .22s cubic-bezier(.2,.8,.2,1)}}
@keyframes zprawej{from{transform:translateX(28px);opacity:0}}
@keyframes pojaw{from{opacity:0}}
@keyframes wjedz{from{transform:translateY(16px);opacity:0}}
/* KP 23.10: okienko (otworzOkienko): krótki formularz na środku, na telefonie krótki arkusz od dołu */
.okienko-tlo{align-items:center;justify-content:center;padding:24px}
.okienko{width:100%;height:auto;max-height:min(88vh,760px);border-radius:var(--r-arkusz);animation:wjedz .2s cubic-bezier(.2,.8,.2,1)}
.okienko > form, .okienko > div{padding:20px 20px 18px!important}
@media (max-width:640px){.okienko-tlo{align-items:flex-end;padding:0}.okienko{max-width:none!important;max-height:92vh;border-radius:var(--r-arkusz) var(--r-arkusz) 0 0}}
/* KP 23.10: tekst krótszy na telefonie (np. przycisk "Sposób płatności i rabaty" / "Rabaty i raty") */
.na-tel{display:none}
/* KP 23.10: kwoty kursu w Płatnościach kursanta i podgląd rat w oknie "Sposób płatności i rabaty" */
.zapis-kwoty{margin-top:6px}
.zapis-suma{font-weight:700;color:var(--tekst-mocny);font-size:15px;display:flex;align-items:center;gap:2px}
.platn-razem{margin:0 2px 10px;font-size:15px;display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px}
.platn-razem b{font-weight:700;color:var(--tekst-mocny)}
.pod-rat{margin-top:6px}
.pod-linia{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:400;padding:3px 2px;color:var(--tekst)}
.pod-linia b{font-weight:700;color:var(--tekst-mocny)}
.pod-suma{border-top:1px solid var(--linia);margin-top:4px;padding-top:7px}
@media (max-width:640px){.na-tel{display:inline}.na-komp{display:none}}
@media (prefers-reduced-motion: reduce){.arkusz-tlo,.arkusz,.toast{animation:none!important}}

/* komunikat po akcji */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--toast);color:var(--toast-tekst);padding:12px 20px;border-radius:12px;box-shadow:var(--cien-pop);font-weight:500;font-size:14px;z-index:200;animation:wjedz .2s ease-out;display:flex;align-items:center;gap:8px}

/* stany */
.blad{background:var(--zle-tlo);color:var(--zle);padding:12px 14px;border-radius:var(--r-btn);font-size:14px}
.ladowanie{padding:48px 20px;text-align:center;color:var(--tekst2)}
.ladowanie::before{content:"";display:block;width:22px;height:22px;margin:0 auto 10px;border:2.5px solid var(--linia);border-top-color:var(--tekst2);border-radius:50%;animation:krec .8s linear infinite}
@keyframes krec{to{transform:rotate(360deg)}}
/* znacznik środowiska: pasek u góry z zarezerwowanym miejscem, nic nie zasłania (audyt 3 U17) */
.srodowisko{position:fixed;top:0;left:0;right:0;height:16px;line-height:16px;text-align:center;background:#FFD60A;color:#000;font-weight:700;font-size:10.5px;z-index:300;pointer-events:none;white-space:nowrap;overflow:hidden}
body:has(> .srodowisko){padding-top:16px}
body:has(> .srodowisko) .arkusz-tlo{top:16px}
body:has(> .srodowisko) .bok,body:has(> .srodowisko) .pasek-edycji{top:16px}
body:has(> .srodowisko) .pasek-masowy{top:24px}
@media (min-width:861px){body:has(> .srodowisko) .bok{height:calc(100vh - 16px);height:calc(100dvh - 16px)}}

/* logowanie */
.logowanie{max-width:340px;margin:14vh auto 0;padding:0 20px;text-align:center}
.logowanie .logo{width:56px;height:56px;border-radius:14px;background:var(--akcent-pelny);color:#fff;display:grid;place-items:center;font-weight:700;font-size:22px;margin:0 auto 18px}
.logowanie form{display:flex;flex-direction:column;gap:10px;margin-top:24px;text-align:left}

/* edytor obecności */
.obec-gora{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 8px}
.obec-wiersz{display:flex;align-items:center;gap:6px;padding:0 6px 0 16px;min-height:56px;position:relative;user-select:none}
.obec-wiersz + .obec-wiersz::before{content:"";position:absolute;top:0;left:16px;right:0;border-top:1px solid var(--linia)}
.obec-osoba{flex:1;display:flex;align-items:center;gap:12px;min-height:56px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.obec-kolko{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;border:1.6px solid var(--linia2);transition:background .12s,border-color .12s}
.obec-wiersz[data-s=obecny] .obec-kolko{background:var(--ok-tlo);border-color:var(--szkola)}
.obec-wiersz[data-s=nieobecny] .obec-kolko{background:var(--zle-tlo);border-color:var(--zle)}
.obec-wiersz[data-s=spozniony] .obec-kolko{background:var(--uwaga-tlo);border-color:var(--uwaga)}
.obec-kolko svg{width:15px;height:15px;color:var(--szkola-tekst)}
.obec-wiersz[data-s=nieobecny] .obec-kolko svg{color:var(--zle)}
.obec-wiersz[data-s=spozniony] .obec-kolko svg{color:var(--uwaga)}
.obec-wiersz[data-s=nieobecny] .obec-imie{text-decoration:line-through}
.obec-wiersz[data-s=nieobecny] .obec-imie{color:var(--tekst2)}
.obec-stan{font-size:13px;color:var(--tekst2)}
.obec-wiecej{width:40px;height:40px;border-radius:50%;border:none;background:none;color:var(--tekst2);cursor:pointer;display:grid;place-items:center}
.obec-wiecej:hover{background:var(--hover)}
.obec-wiecej:has(.obec-pod){width:58px;height:48px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;flex-shrink:0}
.obec-wiecej svg{width:20px;height:20px}
.obec-pod{font-size:10.5px;line-height:1.1;font-weight:500;white-space:nowrap}
.obec-wiersz[data-s=spozniony] .obec-sp{color:var(--uwaga);background:var(--uwaga-tlo)}
.obec-poprzedni{display:block;width:100%;text-align:left;margin-top:8px;padding:8px 2px;border:none;background:none;font:inherit;font-size:13px;color:var(--tekst2);cursor:pointer}
.obec-poprzedni b{font-weight:600;color:var(--tekst)}
.obec-program{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--akcent-tlo);font-size:13px}
.obec-program-nag{display:flex;align-items:center;gap:8px;color:var(--tekst2)}.obec-program-nag b{color:var(--tekst)}
.obec-program-nav{margin-left:auto;display:flex;gap:2px}.obec-program-nav button{width:32px;height:30px;border:none;border-radius:8px;background:var(--pow);color:var(--tekst);font-size:18px;line-height:1;cursor:pointer}
.obec-program-nav button:disabled{opacity:.35;cursor:default}
.obec-program-temat{font-weight:600;color:var(--tekst);margin-top:6px;font-size:14px;white-space:pre-wrap}.obec-program-opis{color:var(--tekst2);margin-top:3px;white-space:pre-wrap}
.blad.obec-ostrz{background:var(--uwaga-tlo);color:var(--uwaga)}
.obec-stopka:has(.obec-dalej){display:flex;gap:8px}
.obec-stopka:has(.obec-dalej) .btn{flex:1 1 0;min-width:0;font-size:15.5px;padding-left:8px;padding-right:8px}
.obec-dalej{flex-direction:column;line-height:1.15;gap:1px}
.obec-dalej small{font-size:12px;font-weight:500;color:var(--tekst2)}
/* TM3 (0239): mały przycisk "Zapisz obecność" (tematyka później) obok głównego zapisu; "Zapisz i następne" wtedy w drugim rzędzie */
.obec-stopka:has(.obec-sama){display:flex;flex-wrap:wrap;gap:8px}
.obec-stopka:has(.obec-sama) .btn{flex:1 1 0;min-width:0;font-size:15.5px;padding-left:8px;padding-right:8px}
.obec-stopka .obec-sama{flex:0 1 40%;flex-direction:column;line-height:1.15;gap:1px}
.obec-sama small{font-size:12px;font-weight:500;color:var(--tekst2)}
.obec-stopka:has(.obec-sama) .obec-dalej{flex-basis:100%}
.obec-wiersz[data-pd=brak] .obec-pd{color:var(--zle);background:var(--zle-tlo)}
.obec-wiersz[data-pd=ok] .obec-pd{color:var(--ok);background:var(--ok-tlo)}
.obec-stopka{position:sticky;bottom:0;padding:14px 0 calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,transparent,var(--tlo) 30%)}

/* formularze w arkuszu */
.formularz{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.dwa-pola{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dwa-pola>*{min-width:0}.dwa-pola .pole{min-width:0;max-width:100%}   /* audyt 5 P6: pole daty nie rozpycha kolumny na telefonie */
.formularz select.pole{width:100%}
.akcje-formularza{display:flex;gap:10px;align-items:center;margin-top:22px}
.btn.usun{color:var(--zle)}
.btn.usun:hover{background:var(--zle-tlo)}
.btn svg{width:18px;height:18px}
.karta-akcji{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--pow);border:1px solid var(--linia);border-radius:var(--r-lista);padding:16px 18px;margin-top:16px}

/* kafle z liczbami */
.kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:22px}
.kafel{background:var(--pow);border:1px solid var(--linia);border-radius:var(--r-lista);padding:18px 20px}
.kafel-liczba{font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.kafel-opis{color:var(--tekst2);font-size:13.5px;margin-top:4px}
input[type=checkbox],input[type=radio]{accent-color:var(--akcent-pelny);width:18px;height:18px;flex-shrink:0}
label.wiersz{cursor:pointer}
.wariant{padding:14px 16px;position:relative}
.wariant + .wariant{border-top:1px solid var(--linia)}
.wariant-pola{display:grid;grid-template-columns:2fr 1fr 1.2fr 1.6fr 1fr;gap:10px}
.wariant-dol{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
@media (max-width:700px){.wariant-pola{grid-template-columns:1fr 1fr}}
.obec-uwaga{font-size:12.5px;color:var(--uwaga);margin-top:2px}
/* audyt 6 L (0152): informacja zamiast błędu, przywrócony szkic, nagłówki kolumn, notatki */
.obec-info{background:var(--pow2);color:var(--tekst2);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.4}
.obec-przywr{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--tekst)}
.obec-przywr .btn{flex-shrink:0}
.obec-zablokowane .obec-osoba,.obec-zablokowane .obec-wiecej,.obec-zablokowane #obWszyscy{opacity:.55;cursor:default}
.obec-kolumny{display:flex;justify-content:flex-end;gap:6px;padding:0 6px 4px 0;font-size:11px;color:var(--tekst2)}
.obec-kolumny span{width:58px;text-align:center}
.obec-notatka{white-space:normal}
.obec-osoba{-webkit-touch-callout:none}
.arkusz .logowanie{min-height:0;padding:20px 16px;margin:0 auto}

/* oś kontaktu (panel/kontakty.js): punkt rodzaju wpisu */
.punkt-osi{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px;background:var(--tekst3,#aeaeb2)}
.punkt-osi.n{background:var(--akcent)}.punkt-osi.r{background:var(--marka3,var(--akcent))}.punkt-osi.w{background:var(--tekst2)}.punkt-osi.s{background:var(--marka2,var(--akcent))}

/* zakładki sekcji nad stroną (Rekrutacja: Zapisy, Leady, Spotkania) */
.zak-sekcji{display:flex;gap:4px;border-bottom:1px solid var(--linia);margin-bottom:18px;overflow-x:auto}
.zak-sekcji a{font-size:14.5px;color:var(--tekst2);padding:10px 14px;text-decoration:none;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap}
.zak-sekcji a:hover{color:var(--tekst)}.zak-sekcji a.wl{color:var(--tekst);font-weight:600;border-bottom-color:var(--linia2)}

.toast.toast-blad{background:var(--zle,#B3261E);color:#fff;cursor:pointer;max-width:min(560px,90vw)}

/* menu "Więcej" przy rzadkich działaniach (karta kursanta) */
details.menu-wiecej{position:relative;display:inline-block}
details.menu-wiecej>summary{list-style:none;cursor:pointer}
details.menu-wiecej>summary::-webkit-details-marker{display:none}
details.menu-wiecej>summary::after{content:"";display:inline-block;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;vertical-align:middle}
.menu-wiecej-lista{position:absolute;right:0;top:calc(100% + 6px);min-width:260px;background:var(--pow);border:1px solid var(--linia);border-radius:12px;box-shadow:var(--cien-pop);padding:6px;z-index:60;display:flex;flex-direction:column}
.menu-wiecej-lista .pozycja{font:inherit;font-size:14px;text-align:left;background:none;border:none;color:var(--tekst);padding:10px 12px;border-radius:8px;cursor:pointer}
.menu-wiecej-lista .pozycja:hover,.menu-wiecej-lista .pozycja:focus-visible{background:var(--hover)}
.menu-wiecej-lista .pozycja.usun{color:var(--zle)}

/* Jeden wzór strony (audyt 3 U6/U7): tytuł i opis po lewej, akcje po prawej (główna czerwona ostatnia),
   zakładki-pigułki w nowym wierszu pod opisem, po lewej. Działa też, gdy zakładki stoją w nagłówku obok przycisku. */
.naglowek > div:has(> .segmenty){display:contents!important}
.naglowek > :first-child{flex:1 1 320px;min-width:0}
.naglowek:has(.segmenty)::after{content:"";order:1;flex-basis:100%;height:0;margin-top:-8px}
.naglowek > .segmenty,.naglowek > div > .segmenty{order:2;align-self:flex-start;max-width:100%;overflow-x:auto}
.naglowek .btn{white-space:nowrap}

/* Akcenty marki (18.10.2026, jak panel Live): tytuł strony z miękkim zakreśleniem limonka-róż,
   ikony w kółkach w kafelkach Dziś, Przegląd i Biuro (zieleń: nauka, limonka: spotkania i wpłaty, róż: sprzedaż i alarmy).
   Bez kolorowych pasków na krawędziach kart. */
#tresc .tytul:not(.tytul-okna){width:fit-content;max-width:100%;padding-right:.12em;background-repeat:no-repeat;background-size:100% .2em;background-position:0 92%;
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--marka2) 32%,transparent),color-mix(in srgb,var(--wyr) 22%,transparent))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #tresc .tytul:not(.tytul-okna){background-image:linear-gradient(90deg,color-mix(in srgb,var(--marka2) 24%,transparent),color-mix(in srgb,var(--wyr) 20%,transparent))}}
:root[data-theme="dark"] #tresc .tytul:not(.tytul-okna){background-image:linear-gradient(90deg,color-mix(in srgb,var(--marka2) 24%,transparent),color-mix(in srgb,var(--wyr) 20%,transparent))}
:root{--ik-osoba:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E");--ik-osoba-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0M19 8v6M16 11h6'/%3E%3C/svg%3E");--ik-osoby:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0M16 4.8a3.2 3.2 0 0 1 0 6.3M17.6 14.3A6 6 0 0 1 21 20'/%3E%3C/svg%3E");--ik-kalendarz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='16' rx='3'/%3E%3Cpath d='M3.5 9.5h17M8 2.8v3.4M16 2.8v3.4M8 14h3'/%3E%3C/svg%3E");--ik-kalendarz-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='16' rx='3'/%3E%3Cpath d='M3.5 9.5h17M8 2.8v3.4M16 2.8v3.4M10 13l4 4M14 13l-4 4'/%3E%3C/svg%3E");--ik-umowa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4v12.5a.5.5 0 0 1-.5.5h-10.5a.5.5 0 0 1-.5-.5V4a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M14 3.5V8h4M9.5 12.5h5M9.5 16h5'/%3E%3C/svg%3E");--ik-obecnosc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.3 12.3l2.5 2.5 5-5.2'/%3E%3C/svg%3E");--ik-lista:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.5' y='4.5' width='13' height='16' rx='2.5'/%3E%3Cpath d='M9 4.5V3h6v1.5M9 10h6M9 14h4'/%3E%3C/svg%3E");--ik-portfel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='6' width='17' height='13' rx='3'/%3E%3Cpath d='M3.5 10h17M15.5 14.5h2'/%3E%3C/svg%3E");--ik-sala:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20.5V4.5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v16M3.5 20.5h17M14 12v1'/%3E%3C/svg%3E");--ik-uwaga:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l8.8 15.5H3.2z'/%3E%3Cpath d='M12 10v4.2M12 17.1v.2'/%3E%3C/svg%3E");--ik-wykres:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16M8.5 16v-4M12.5 16V8M16.5 16v-6'/%3E%3C/svg%3E");--ik-trend:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17l5-5 4 3 7-7M15 8h5v5'/%3E%3C/svg%3E")}
.kafle-d .kafel-d,.pw-kafel,.bk-kafel{--ik-tlo:var(--akcent-tlo);--ik-kolor:var(--akcent-tekst);--ik:var(--ik-wykres)}
.kafle-d .kafel-d .k-naz{position:relative;padding-left:36px;min-height:28px;align-items:center}
.kafle-d .kafel-d.maly .k-naz{padding-left:30px;min-height:22px}
.kafle-d .kafel-d .k-naz::before,.pw-kafel::before,.bk-kafel::before{content:"";position:absolute;border-radius:50%;background:var(--ik-tlo)}
.kafle-d .kafel-d .k-naz::after,.pw-kafel::after,.bk-kafel::after{content:"";position:absolute;background:var(--ik-kolor);-webkit-mask:var(--ik) center/contain no-repeat;mask:var(--ik) center/contain no-repeat}
.kafle-d .kafel-d .k-naz::before{left:0;top:50%;width:28px;height:28px;margin-top:-14px}.kafle-d .kafel-d .k-naz::after{left:6px;top:50%;width:16px;height:16px;margin-top:-8px}
.kafle-d .kafel-d.maly .k-naz::before{width:22px;height:22px;margin-top:-11px}.kafle-d .kafel-d.maly .k-naz::after{left:4px;width:14px;height:14px;margin-top:-7px}
.pw-kafel,.bk-kafel{position:relative}.pw-kafel{padding-right:64px}.bk-kafel .t{padding-right:34px}
.pw-kafel::before{top:16px;right:16px;width:36px;height:36px}.pw-kafel::after{top:25px;right:25px;width:18px;height:18px}
.bk-kafel::before{top:10px;right:10px;width:28px;height:28px}.bk-kafel::after{top:16px;right:16px;width:16px;height:16px}
.bk-kafel:nth-child(even){--ik-tlo:var(--marka2-tlo);--ik-kolor:var(--marka2-ciemny)}.bk-kafel.alarm{--ik-tlo:var(--wyr-tlo);--ik-kolor:var(--wyr-tekst);--ik:var(--ik-uwaga)}
.kafle-d .kafel-d[data-kafel="spotkania"]{--ik-tlo:var(--marka2-tlo);--ik-kolor:var(--marka2-ciemny);--ik:var(--ik-kalendarz)}
.kafle-d .kafel-d[data-kafel="leady"]{--ik-tlo:var(--wyr-tlo);--ik-kolor:var(--wyr-tekst);--ik:var(--ik-osoba-plus)}
.kafle-d .kafel-d[data-kafel="umowy"]{--ik-tlo:var(--akcent-tlo);--ik-kolor:var(--akcent-tekst);--ik:var(--ik-umowa)}
.kafle-d .kafel-d[data-kafel="grupy"]{--ik-tlo:var(--akcent-tlo);--ik-kolor:var(--akcent-tekst);--ik:var(--ik-osoby)}
.kafle-d .kafel-d[data-kafel="frekwencja"]{--ik-tlo:var(--akcent-tlo);--ik-kolor:var(--akcent-tekst);--ik:var(--ik-obecnosc)}
.kafle-d .kafel-d[data-kafel="bez_obecnosci"]{--ik-tlo:var(--wyr-tlo);--ik-kolor:var(--wyr-tekst);--ik:var(--ik-lista)}
.kafle-d .kafel-d[data-kafel="zaleglosci"]{--ik-tlo:var(--wyr-tlo);--ik-kolor:var(--wyr-tekst);--ik:var(--ik-portfel)}
.kafle-d .kafel-d[data-kafel="sala"]{--ik-tlo:var(--marka2-tlo);--ik-kolor:var(--marka2-ciemny);--ik:var(--ik-sala)}
.kafle-d .kafel-d[data-kafel="wplaty"]{--ik-tlo:var(--marka2-tlo);--ik-kolor:var(--marka2-ciemny);--ik:var(--ik-trend)}
.kafle-d .kafel-d[data-kafel="ryzyko"]{--ik-tlo:var(--wyr-tlo);--ik-kolor:var(--wyr-tekst);--ik:var(--ik-uwaga)}
.kafle-d .kafel-d[data-kafel="aktywni"]{--ik-tlo:var(--akcent-tlo);--ik-kolor:var(--akcent-tekst);--ik:var(--ik-osoba)}
.pw-kafel[href="#uczniowie"]{--ik-tlo:var(--akcent-tlo);--ik-kolor:var(--akcent-tekst);--ik:var(--ik-osoba)}
.pw-kafel[href="#raporty/rocznik"]{--ik-tlo:var(--akcent-tlo);--ik-kolor:var(--akcent-tekst);--ik:var(--ik-osoba-plus)}
.pw-kafel[href="#raporty/rezygnacje"]{--ik-tlo:var(--wyr-tlo);--ik-kolor:var(--wyr-tekst);--ik:var(--ik-uwaga)}
.pw-kafel[href="#leady"]{--ik-tlo:var(--wyr-tlo);--ik-kolor:var(--wyr-tekst);--ik:var(--ik-osoba-plus)}
.pw-kafel[href="#spotkania/skutecznosc"]{--ik-tlo:var(--marka2-tlo);--ik-kolor:var(--marka2-ciemny);--ik:var(--ik-kalendarz)}
.pw-kafel[href="#raporty/frekwencja"]{--ik-tlo:var(--akcent-tlo);--ik-kolor:var(--akcent-tekst);--ik:var(--ik-obecnosc)}
.pw-kafel[href="#kalendarz"]{--ik-tlo:var(--akcent-tlo);--ik-kolor:var(--akcent-tekst);--ik:var(--ik-kalendarz)}
.pw-kafel[href="#raporty/statusy_zajec"]{--ik-tlo:var(--wyr-tlo);--ik-kolor:var(--wyr-tekst);--ik:var(--ik-kalendarz-x)}
.pw-kafel[href="#platnosci/wplaty"]{--ik-tlo:var(--marka2-tlo);--ik-kolor:var(--marka2-ciemny);--ik:var(--ik-trend)}
.pw-kafel[href="#platnosci"]{--ik-tlo:var(--wyr-tlo);--ik-kolor:var(--wyr-tekst);--ik:var(--ik-portfel)}
.pw-kafel[href="#finanse"]{--ik-tlo:var(--marka2-tlo);--ik-kolor:var(--marka2-ciemny);--ik:var(--ik-wykres)}
/* Szybkie akcje: kolory obszarów pracy, blok KO na końcu pliku */

/* Telefon: szeroka tabela (4 kolumny i więcej) jako karty, bez przewijania w bok (audyt 3 U18).
   Nazwy kolumn dopisuje marka.js (data-etyk). Tabela w .tabela-przewin i .macierz zostaje przewijana. */
@media (max-width:600px){
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela){display:block;border-radius:var(--r-lista)}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) thead{display:none}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) tbody{display:block}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:12px 14px;border-bottom:1px solid var(--linia)}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) tr:last-child{border-bottom:none}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td{display:block;padding:0;border:none;text-align:left;width:auto!important;max-width:100%;min-width:0;overflow-wrap:anywhere;white-space:normal}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td:first-child{flex-basis:100%;font-weight:500}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td:empty{display:none}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td[data-etyk]:not(:first-child)::before{content:attr(data-etyk) ": ";color:var(--tekst2);font-size:13px;font-weight:400}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td[colspan]{flex-basis:100%}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td.zazn{order:-1;flex-basis:auto}
  /* UI2 28.10 (przegląd wyglądu A5): w tabeli z kolumną zaznaczania komórka po niej (nazwisko, nazwa grupy) jest tytułem karty:
     cała pierwsza linia obok pola wyboru, bez etykiety "Kursant:"; reszta komórek w kolejnych liniach; menu "•••" przy prawej krawędzi bez etykiety. */
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td.zazn + td{flex:1 1 60%;font-weight:500}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td.zazn + td[data-etyk]::before,.tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td[data-menu][data-etyk]::before{content:none}
  .tabela:has(tr > :nth-child(4)):not(.macierz):not(.tabela-przewin .tabela) td[data-menu]{margin-left:auto}
}
[data-zak] [draggable=true]{cursor:pointer}[data-zak] .zak-ciagniety{opacity:.45}
/* 0159: zakładki sekcji (Zapisy) też przestawiane; na telefonie przytrzymanie bez menu linku i zaznaczania tekstu */
[data-zak] a,[data-zak] button{-webkit-touch-callout:none}.zak-przestawianie,.zak-przestawianie *{-webkit-user-select:none;user-select:none}
/* Dymek informacyjny (22.10): ikonka "i" z wspolne.js dymek(); okno jedno na stronę, pozycja liczona tak, by nie wyszło poza ekran */
button.dymek{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;min-height:0;padding:0;margin:0 0 0 5px;border:1.5px solid currentColor;border-radius:50%;background:none;color:var(--tekst3);font:600 10.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;cursor:help;vertical-align:-2px;flex:none;opacity:.85;-webkit-tap-highlight-color:transparent}
button.dymek::before{content:"i";font-style:normal;letter-spacing:0}
button.dymek::after{content:"";position:absolute;inset:-14px}
button.dymek:hover,button.dymek[aria-expanded="true"]{color:var(--akcent-tekst);opacity:1}
button.dymek:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}
.dymek-okno{position:fixed;z-index:1000;box-sizing:border-box;width:max-content;padding:9px 12px;border-radius:10px;background:var(--pow);color:var(--tekst);border:1px solid var(--linia2,var(--linia));box-shadow:0 8px 28px rgba(0,0,0,.16);font-size:13px;font-weight:400;line-height:1.4;letter-spacing:0;text-align:left;white-space:normal;text-transform:none;overflow-wrap:anywhere}
.dymek-okno[hidden]{display:none}
.dymek-okno::before{content:"";position:absolute;left:calc(var(--dymek-x,50%) - 5px);width:9px;height:9px;background:inherit;border:inherit;border-width:1px 0 0 1px;transform:rotate(45deg)}
.dymek-okno[data-strona="dol"]::before{top:-5.5px}
.dymek-okno[data-strona="gora"]::before{bottom:-5.5px;transform:rotate(225deg)}
@media (prefers-reduced-motion:no-preference){.dymek-okno:not([hidden]){animation:dymekWejscie .12s ease-out}}
@keyframes dymekWejscie{from{opacity:0}to{opacity:1}}
@media (max-width:600px){button.dymek{margin-left:6px}}
/* D3: podpowiedzi wyłączone przez osobę (wspolne.js ustawDymki) */
html.bez-dymkow button.dymek,html.bez-dymkow .dymek-okno{display:none!important}

/* ===== W 23.10.2026: jakość wyglądu jak panel PE (raport-WY.md), bez marki PE. Jeden blok na końcu pliku, opis: docs/design.md. =====
   Hierarchia przez grubość i kolor, nie przez rozmiar: tekst prawie czarny, tytuły, nazwy i liczby jeszcze mocniejsze (--tekst-mocny),
   jeden pełny akcent koloru szkoły tylko na "tu jestem" (aktywne menu, aktywny filtr), ciepłe płaskie tło, większa gęstość.
   Napis na kolorze szkoły: --akcent-napis (biały albo prawie czarny), dobiera marka.js wg kontrastu WCAG. */
/* Cyfry: w tekście, tytułach i kafelkach z Gantari (zgrane z literami), w tabelach i kolumnach liczb z kroju systemowego
   (tabelaryczne, kolumny się nie przesuwają). "Gantari Cyfry" to ten sam plik kroju, tylko z zakresem 0-9. */
@font-face{font-family:"Gantari Cyfry";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonty/gantari-latin.woff2") format("woff2");unicode-range:U+0030-0039}
:root{
  --tlo:#F7F6F2;--pow2:#F6F5F1;--pow3:#EDECE7;--linia:#E7E5DE;--linia2:#D2CFC6;
  --tekst:#1F1F1C;--tekst-mocny:#0E0E0C;--tekst2:#5F5E59;--tekst3:#6E6D67;
  --akcent-napis:#FFFFFF;
  --r-btn:10px;--r-lista:14px;
  --font:"Gantari","Gantari Cyfry",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-liczby:"Gantari",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tekst:#F1F0F5;--tekst-mocny:#FFFFFF;--tekst2:#B6B3C6;--tekst3:#9692AB}}
:root[data-theme="dark"]{--tekst:#F1F0F5;--tekst-mocny:#FFFFFF;--tekst2:#B6B3C6;--tekst3:#9692AB}

/* tło: płaskie i ciepłe; zostaje tylko delikatny gradient koloru szkoły u góry (decyzja Kacpra 20.10), bez plam */
body{line-height:1.45;background-image:linear-gradient(180deg,color-mix(in srgb,var(--akcent-pelny) 3%,var(--tlo)) 0,var(--tlo) 280px)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body{background-image:linear-gradient(180deg,color-mix(in srgb,var(--akcent-pelny) 6%,var(--tlo)) 0,var(--tlo) 280px)}}
:root[data-theme="dark"] body{background-image:linear-gradient(180deg,color-mix(in srgb,var(--akcent-pelny) 6%,var(--tlo)) 0,var(--tlo) 280px)}

/* cyfry systemowe tylko tam, gdzie liczby stoją w kolumnach */
.tabela td,.tabela th,.num,.wiersz .godzina,.kwota-kol{font-family:var(--font-liczby);font-variant-numeric:tabular-nums}

/* 1. tytuły i nagłówki: mniejsze, ale mocniejsze */
.tytul{font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.15;color:var(--tekst-mocny)}
.tytul-okna{font-size:22px}
.podtytul{font-size:14.5px}
.sekcja{margin-top:26px}
.sekcja-tytul{font-size:17px;font-weight:700;letter-spacing:-.005em;color:var(--tekst-mocny)}
.wiersz .nazwa{font-weight:600;color:var(--tekst-mocny)}
.wiersz .godzina{font-weight:700;color:var(--tekst-mocny)}

/* 2. kafelki z liczbami: liczba mocna i ciemna, podpis półgruby */
.kafle{gap:10px}
.kafel{padding:14px 16px}
.kafel-liczba,#tresc .kafel-d .k-war,#tresc .bk-kafel .l,#tresc .trzy-liczby .v{font-weight:700;letter-spacing:-.01em;color:var(--tekst-mocny)}
.kafel-liczba,#tresc .kafel-d:not(.maly) .k-war{font-size:26px;line-height:1.15}
.kafel-opis{font-size:13px;font-weight:600;color:var(--tekst2);margin-top:2px}
#tresc .bk-kafel .t{font-weight:600}

/* 3. przyciski i pola */
.btn{font-weight:600;font-size:14.5px;min-height:38px;padding:8px 15px;color:var(--akcent-napis)}
.btn-drugi{color:var(--tekst-mocny)}
.btn-tekst{font-weight:600;color:var(--akcent-tekst)}
.btn.usun{color:var(--zle)}
.pole{font-size:14.5px;min-height:38px}
.logowanie .logo{color:var(--akcent-napis)}
/* UI2 28.10 (przegląd wyglądu B16): logo szkoły z ostatniego logowania na urządzeniu, nazwa szkoły pod nim, nazwa produktu na dole */
.logowanie .logo.z-obrazkiem{background:none;width:auto;max-width:180px;height:56px}.logowanie .logo.z-obrazkiem img{max-height:56px;max-width:180px;object-fit:contain;display:block}
.logowanie .szkola-logowania{font-size:14px;font-weight:600;color:var(--tekst2);margin:-8px 0 10px}
.logowanie .logo-produkt{font-size:26px}
.logowanie .produkt-stopka{margin-top:44px;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--tekst3)}
input[type=checkbox],input[type=radio]{accent-color:var(--akcent)}

/* 4. zakładki i filtry: osobne pigułki, aktywna wypełniona kolorem szkoły */
.segmenty{background:transparent;padding:0;gap:6px;flex-wrap:wrap}
.segmenty button{background:var(--pow);border:1px solid var(--linia);border-radius:10px;font-weight:600;font-size:14px;color:var(--tekst);padding:7px 14px}
.segmenty button:hover{border-color:var(--linia2)}
.segmenty button.wl{background:var(--akcent-pelny);border-color:var(--akcent-pelny);color:var(--akcent-napis);box-shadow:none;font-weight:700}
.segmenty details.seg-wiecej summary{background:var(--pow);border:1px solid var(--linia);border-radius:10px;font-weight:600}
.segmenty .seg-lista button{border:none}
#tresc .zak-linia{background:transparent;padding:0;gap:6px}
#tresc .zak-linia button{background:var(--pow);border:1px solid var(--linia);border-radius:10px;font-weight:600;color:var(--tekst)}
#tresc .zak-linia button.wl{background:var(--akcent-pelny);border-color:var(--akcent-pelny);color:var(--akcent-napis);box-shadow:none;font-weight:700}
.zak-sekcji a{font-weight:600}
.zak-sekcji a.wl{color:var(--tekst-mocny);font-weight:700;border-bottom:2px solid var(--akcent-pelny)}

/* 5. znaczki i tabele */
.znak{font-size:12px;font-weight:700}
.tabela th{font-size:12px;font-weight:700;color:var(--tekst2);padding:10px 14px}
.tabela td{padding:11px 14px}

/* 6. dolny pasek (aplikacja lektora, portal rodzica): ten sam akcent, mocniejsza aktywna pozycja */
body .dol a{font-weight:600}
body .dol a.wl{color:var(--akcent-tekst);font-weight:700}

/* 7. Biuro: nazwy spraw i liczniki mocniej, wybrany licznik wypełniony jak aktywny filtr */
#tresc .bz-poz .tresc-p b{font-weight:600;color:var(--tekst-mocny)}
/* UI2 28.10 (przegląd wyglądu B7): koszyk (licznik-pigułka), wspólny komponent (było .bz-chip tylko w Biurze; nazwa .licznik zajęta przez kropki w menu). Rząd liczników zamiast rzędu kafli KPI
   nad listą: ta sama informacja (liczba + nazwa + klik filtruje) w 40 px zamiast 90 px. Użycie: <button class="koszyk" aria-pressed="true|false"><b>12</b>nazwa</button>,
   klasa .pilne = liczba w kolorze wyróżnienia. W Leadach i Biurze. */
.koszyk,.bz-chip{display:inline-flex;align-items:baseline;gap:6px;background:var(--pow);border:1px solid var(--linia);border-radius:99px;padding:7px 14px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--tekst2);min-height:40px}
.koszyk b,.bz-chip b{font-size:16px;font-weight:700;color:var(--tekst-mocny)}
.koszyk.pilne b,.bz-chip.pilne b{color:var(--wyr-tekst)}
.koszyk:hover,.bz-chip:hover{background:var(--pow2)}
.koszyk[aria-pressed=true],.bz-chip[aria-pressed=true]{background:var(--pow3);color:var(--tekst);border-color:var(--linia2)}
.koszyk:focus-visible,.bz-chip:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}
.koszyki{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#tresc .bz-chip[aria-pressed=true]{background:var(--akcent-pelny);border-color:var(--akcent-pelny);color:var(--akcent-napis)}
#tresc .bz-chip[aria-pressed=true] b{color:var(--akcent-napis)}

/* telefon: cele dotyku (design.md p. 9) */
@media (max-width:600px){
  .btn{min-height:40px}
  .segmenty button,#tresc .zak-linia button{min-height:40px}
  .kafel{padding:12px 14px}
}

/* DP 23.10.2026: ikonka "i" nigdy w tekście ani nad liczbą.
   Kafel / karta: dymek(t, {rog:true}) jako pierwsze dziecko kafla, prawy górny róg; pierwszy wiersz kafla ma odstęp z prawej.
   Tytuł, nagłówek kolumny, etykieta: na końcu tekstu, mniejsza i przygaszona, wyrównana do linii. */
.kafel{position:relative}
button.dymek{width:15px;height:15px;font-size:10px;margin-left:6px;opacity:.7;vertical-align:-1px}
button.dymek.dymek-rog{position:absolute;top:12px;right:12px;margin:0;z-index:3;vertical-align:0}
button.dymek-rog + *{padding-right:22px}
@media (max-width:600px){button.dymek.dymek-rog{top:10px;right:10px}button.dymek-rog + *{padding-right:20px}}
/* kafel z piktogramem w rogu (Przegląd .pw-kafel, Biuro .bk-kafel): róg zostaje dla "i", piktogram przesuwa się w lewo obok niego */
.pw-kafel:has(> .dymek-rog){padding-right:88px}
.pw-kafel:has(> .dymek-rog)::before{right:38px}.pw-kafel:has(> .dymek-rog)::after{right:47px}
.bk-kafel:has(> .dymek-rog)::before{right:34px}.bk-kafel:has(> .dymek-rog)::after{right:40px}

/* LY 24.10.2026 (design.md zasada 10 "Bez nadmiernej pustej przestrzeni"): klocki obok siebie, nie jeden pod drugim.
   .siatka-sekcji = kontener sekcji-kart; sekcje stoją w rzędach po min. 320 px i wypełniają szerokość (auto-fit: bez pustych kolumn
   na końcu rzędu, gdy sekcji jest mało; telefon: jedna kolumna).
   .siatka-sekcji.upakowana = sekcje różnej wysokości ułożone w kolumnach jedna pod drugą bez dziur (jak gazeta), np. boczne sekcje Biura.
   Szersze klocki (np. sekcja z 3 kaflami): style="--siatka-min:600px" (w panelu dwie obok siebie od ok. 1560 px okna).
   Strona z siatką może być szersza (1760 px) niż zwykła (1480 px, panel/index.html .tresc). */
.siatka-sekcji{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--siatka-min,320px),100%),1fr));column-gap:20px;align-items:start}
.siatka-sekcji > *{min-width:0}
.siatka-sekcji.upakowana{display:block;columns:var(--siatka-min,320px);column-gap:20px;margin-top:26px}
.siatka-sekcji.upakowana > *{break-inside:avoid;margin-top:0;margin-bottom:22px}
.siatka-sekcji.upakowana > * > :first-child,.siatka-sekcji.upakowana > * > .sekcja{margin-top:0}
.siatka-sekcji.upakowana > * > .sekcja + .sekcja{margin-top:22px}
.siatka-sekcji.upakowana > :last-child{margin-bottom:0}
.siatka-sekcji.upakowana > .akcje-formularza{column-span:all}   /* przycisk Zapisz pod wszystkimi kolumnami */
.siatka-sekcji > :empty{display:none}
/* tylko jedna niepusta sekcja (np. inna rola widzi mniej): bez kolumn, cała szerokość, żeby nie zostawała wąska kolumna z pustym obok */
.siatka-sekcji.upakowana:not(:has(> :not(:empty) ~ :not(:empty))){columns:auto}
.siatka-sekcji:not(.upakowana):not(:has(> :not(:empty) ~ :not(:empty))){grid-template-columns:minmax(0,1fr)}
.tresc:has(.siatka-sekcji){max-width:1760px}
/* nagłówek sekcji: tytuł zawsze w jednej linii; licznik i link przechodzą niżej dopiero, gdy naprawdę brak miejsca */
.sekcja-tytul{flex-wrap:wrap;row-gap:2px;column-gap:10px}
@media (min-width:701px){.sekcja-tytul > .btn-tekst,.sekcja-tytul > span > .btn-tekst{min-height:30px;padding:4px 8px}}
/* telefon: jedna kolumna, odstęp między sekcjami max 20 px */
@media (max-width:700px){
  .sekcja{margin-top:18px}
  .kafle{margin-top:16px}
  .siatka-sekcji.upakowana{margin-top:18px}
  .siatka-sekcji.upakowana > *{margin-bottom:18px}
  .siatka-sekcji.upakowana > :last-child{margin-bottom:0}
  .siatka-sekcji.upakowana > * > .sekcja + .sekcja{margin-top:18px}
}

/* ===== KO 24.10.2026: kolor = obszar pracy (decyzja Kacpra, docs/design.md zasada 11) =====
   Pięć obszarów: pieniądze, zajęcia, zapisy, komunikacja, zadania biura. Kolory liczy marka.js z zestawu szkoły
   (Ustawienia > Wygląd; tu wartości zapasowe = paleta Live). --o-X: ikony, paski, kropki (min. 3:1); --o-X-tekst: napisy (min. 4,5:1);
   --o-X-tlo: jasne tło. Element z data-o="X" ustawia --o, --o-t, --o-tl dla siebie i środka.
   Kolor szkoły (--akcent-pelny) tylko "tu jestem" i główny przycisk formularza. Czerwony (ceglasty) i pomarańczowy tylko dla stanów. */
:root{--o-pieniadze:#379342;--o-pieniadze-tekst:#2E7B37;--o-pieniadze-tlo:#F2F7DB;--o-zajecia:#586FCE;--o-zajecia-tekst:#4F64B9;--o-zajecia-tlo:#EBEEF9;--o-zapisy:#ED4C67;--o-zapisy-tekst:#BA3C51;--o-zapisy-tlo:#FFE8EC;--o-komunikacja:#4B4576;--o-komunikacja-tekst:#4B4576;--o-komunikacja-tlo:#E9E9EF;--o-zadania:#76941A;--o-zadania-tekst:#5D7414;--o-zadania-tlo:#F1F7DE;
  /* stan "źle" (zaległe, pilne, błąd): ceglasty czerwony, wyraźnie inny niż różowy obszaru Zapisy */
  --zle:#A8341A;--zle-tlo:#FBE6DF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--o-pieniadze:#379342;--o-pieniadze-tekst:#5FA968;--o-pieniadze-tlo:#253230;--o-zajecia:#5B72CF;--o-zajecia-tekst:#8394DB;--o-zajecia-tlo:#2A2C47;--o-zapisy:#FC516E;--o-zapisy-tekst:#FC667F;--o-zapisy-tlo:#442737;--o-komunikacja:#767297;--o-komunikacja-tekst:#938FAD;--o-komunikacja-tlo:#282539;--o-zadania:#A0C823;--o-zadania-tekst:#A0C823;--o-zadania-tlo:#353A2B;
  --zle:#FF7B66;--zle-tlo:color-mix(in srgb,#E5402E 24%,var(--pow))}}
:root[data-theme="dark"]{--o-pieniadze:#379342;--o-pieniadze-tekst:#5FA968;--o-pieniadze-tlo:#253230;--o-zajecia:#5B72CF;--o-zajecia-tekst:#8394DB;--o-zajecia-tlo:#2A2C47;--o-zapisy:#FC516E;--o-zapisy-tekst:#FC667F;--o-zapisy-tlo:#442737;--o-komunikacja:#767297;--o-komunikacja-tekst:#938FAD;--o-komunikacja-tlo:#282539;--o-zadania:#A0C823;--o-zadania-tekst:#A0C823;--o-zadania-tlo:#353A2B;
  --zle:#FF7B66;--zle-tlo:color-mix(in srgb,#E5402E 24%,var(--pow))}
[data-o="pieniadze"]{--o:var(--o-pieniadze);--o-t:var(--o-pieniadze-tekst);--o-tl:var(--o-pieniadze-tlo);--o-ik:var(--ik-portfel)}
[data-o="zajecia"]{--o:var(--o-zajecia);--o-t:var(--o-zajecia-tekst);--o-tl:var(--o-zajecia-tlo);--o-ik:var(--ik-kalendarz)}
[data-o="zapisy"]{--o:var(--o-zapisy);--o-t:var(--o-zapisy-tekst);--o-tl:var(--o-zapisy-tlo);--o-ik:var(--ik-osoba-plus)}
[data-o="komunikacja"]{--o:var(--o-komunikacja);--o-t:var(--o-komunikacja-tekst);--o-tl:var(--o-komunikacja-tlo);--o-ik:var(--ik-lista)}
[data-o="zadania"]{--o:var(--o-zadania);--o-t:var(--o-zadania-tekst);--o-tl:var(--o-zadania-tlo);--o-ik:var(--ik-obecnosc)}

/* 1. menu boczne panelu, menu na telefonie, dolny pasek lektora i rodzica: ikona w kolorze obszaru, napis szary, aktywna pozycja jak dotąd */
:is(.bok,.menu-arkusz) a.poz:is([data-s=platnosci],[data-s=dluznicy],[data-s=finanse]){--o:var(--o-pieniadze)}
:is(.bok,.menu-arkusz) a.poz:is([data-s=uczniowie],[data-s=grupy],[data-s=kalendarz],[data-s=lektorzy],[data-s=egzaminy],[data-s=ksiazki],[data-s=podreczniki],[data-s=biblioteka]){--o:var(--o-zajecia)}
:is(.bok,.menu-arkusz) a.poz:is([data-s=zgloszenia],[data-s=zapisy],[data-s=umowy],[data-s=wydarzenia]){--o:var(--o-zapisy)}
:is(.bok,.menu-arkusz) a.poz:is([data-s=wiadomosci],[data-s=ankiety]){--o:var(--o-komunikacja)}
:is(.bok,.menu-arkusz) a.poz[data-s=zadania]{--o:var(--o-zadania)}
:is(.bok,.menu-arkusz) a.poz:not(.wl) svg{color:var(--o,currentColor)}
.dol a:is([data-s=zajecia],[data-s=grupy],[data-s=kalendarz]){--o:var(--o-zajecia)}
.dol a[data-s=platnosci]{--o:var(--o-pieniadze)}
.dol a[data-s=wiadomosci]{--o:var(--o-komunikacja)}
.dol a:not(.wl) svg{color:var(--o,currentColor)}

/* 2. najczęstsze akcje: przycisk z jasnym tłem obszaru i ikoną (Dodaj wpłatę, Odwołaj zajęcia, Umów spotkanie, Nowe zgłoszenie, Napisz do rodziców, Nowe zadanie) */
.btn.btn-o{background:var(--o-tl);color:var(--o-t);border-color:color-mix(in srgb,var(--o) 34%,transparent);font-weight:600}
.btn.btn-o svg{color:var(--o)}
.btn.btn-o:hover,.btn.btn-o:active{background:var(--o-tl);border-color:var(--o);box-shadow:inset 0 0 0 1px var(--o)}
/* Szybkie akcje: karta zostaje biała, kolor tylko w kwadraciku ikony (bez kolorowych kafli) */
.szybkie button[data-o] > .ik.ik{background:var(--o-tl);color:var(--o)}
.szybkie button[data-o]:hover{border-color:color-mix(in srgb,var(--o) 45%,var(--linia))}

/* 3. Biuro: pasek 3 px z lewej w kolorze obszaru sprawy, znaczek typu sprawy w kolorze obszaru, kropka obszaru przy liczniku */
.bz-poz[data-o]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--o)}
.bz-poz[data-o] .bz-tag{background:var(--o-tl);color:var(--o-t)}
.bz-chip[data-o]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--o);align-self:center;flex:none}
.bz-chip.pilne b{color:var(--zle)}
/* "pilne" to nie kolor obszaru: ceglasta kropka z wykrzyknikiem (nie myli się z różowym paskiem Zapisów) */
.pil.czerwony{position:relative;width:15px;height:15px;background:var(--zle)}
.pil.czerwony::after{content:"!";position:absolute;inset:0;color:var(--pow);font:800 11px/15px var(--font);text-align:center}
.bz-poz .pil.czerwony{margin-top:4px}

/* 4. kafle z liczbami: ikona na jasnym tle obszaru (Przegląd, Biuro, Płatności, Dłużnicy, Finanse, Spotkania) */
.kafle[data-o] > .kafel{padding-right:58px}
.kafle[data-o] > .kafel::before{content:"";position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:50%;background:var(--o-tl)}
.kafle[data-o] > .kafel::after{content:"";position:absolute;top:21px;right:21px;width:16px;height:16px;background:var(--o);-webkit-mask:var(--o-ik) center/contain no-repeat;mask:var(--o-ik) center/contain no-repeat}
.kafle[data-o] > .kafel:has(> .dymek-rog){padding-right:76px}
.kafle[data-o] > .kafel:has(> .dymek-rog)::before{right:36px}.kafle[data-o] > .kafel:has(> .dymek-rog)::after{right:44px}
.kafle[data-o] > .kafel > .dymek-rog + *{padding-right:0}
@media (max-width:600px){.kafle[data-o] > .kafel{padding-right:50px}.kafle[data-o] > .kafel:has(> .dymek-rog){padding-right:66px}
  .kafle[data-o] > .kafel::before{width:28px;height:28px;top:11px;right:11px}.kafle[data-o] > .kafel::after{width:14px;height:14px;top:18px;right:18px}
  .kafle[data-o] > .kafel:has(> .dymek-rog)::before{right:32px}.kafle[data-o] > .kafel:has(> .dymek-rog)::after{right:39px}}
.pw-kafel:is([href="#uczniowie"],[href="#raporty/frekwencja"],[href="#kalendarz"],[href="#raporty/statusy_zajec"]){--ik-tlo:var(--o-zajecia-tlo);--ik-kolor:var(--o-zajecia)}
.pw-kafel:is([href="#raporty/rocznik"],[href="#raporty/rezygnacje"],[href="#leady"],[href="#spotkania/skutecznosc"]){--ik-tlo:var(--o-zapisy-tlo);--ik-kolor:var(--o-zapisy)}
.pw-kafel:is([href="#platnosci/wplaty"],[href="#platnosci"],[href="#dluznicy"],[href="#finanse"]){--ik-tlo:var(--o-pieniadze-tlo);--ik-kolor:var(--o-pieniadze)}
.pw-kafel[href="#dluznicy"]{--ik:var(--ik-portfel)}
.kafle-d .kafel-d:is([data-kafel=grupy],[data-kafel=frekwencja],[data-kafel=bez_obecnosci],[data-kafel=sala],[data-kafel=aktywni]){--ik-tlo:var(--o-zajecia-tlo);--ik-kolor:var(--o-zajecia)}
.kafle-d .kafel-d:is([data-kafel=spotkania],[data-kafel=leady],[data-kafel=umowy],[data-kafel=ryzyko]){--ik-tlo:var(--o-zapisy-tlo);--ik-kolor:var(--o-zapisy)}
.kafle-d .kafel-d:is([data-kafel=zaleglosci],[data-kafel=wplaty]){--ik-tlo:var(--o-pieniadze-tlo);--ik-kolor:var(--o-pieniadze)}
.bk-kafel,.bk-kafel:nth-child(even){--ik-tlo:var(--o-zadania-tlo);--ik-kolor:var(--o-zadania)}
.bk-kafel.alarm{--ik-tlo:var(--zle-tlo);--ik-kolor:var(--zle)}

/* 5. nagłówki sekcji w Biurze: mała kropka obszaru */
/* 24.10 (Kacper: "aligned"): kropka obszaru wisi przed tytułem, więc tytuł, podtytuł i karty mają tę samą lewą krawędź */
:is(.bz-bok > [data-o],.bz-b[data-o]) .sekcja-tytul{position:relative;padding-left:0}
:is(.bz-bok > [data-o],.bz-b[data-o]) .sekcja-tytul::before{content:"";position:absolute;left:-14px;top:calc(.7em - 4px);width:8px;height:8px;border-radius:50%;background:var(--o)}
@media (max-width:700px){:is(.bz-bok > [data-o],.bz-b[data-o]) .sekcja-tytul{padding-left:14px}:is(.bz-bok > [data-o],.bz-b[data-o]) .sekcja-tytul::before{left:0}:is(.bz-bok > [data-o],.bz-b[data-o]) .sekcja-tytul + .drugi-tekst{padding-left:14px}}

/* BK 24.10.2026, AL 24.10.2026: ulozKolumny() z wspolne.js (design.md zasady 10 i 12): sekcje w RZĘDACH (kontener > .uloz-r > .uloz-k),
   sekcje jednego rzędu zaczynają się na tej samej wysokości; krótsze stoją jedna pod drugą w komórce. Jeden odstęp między sekcjami i rzędami. */
.uloz-kol,.siatka-sekcji.upakowana.uloz-kol{display:flex;flex-direction:column;gap:var(--uloz-odstep,22px);columns:auto}
.uloz-kol > .uloz-r{display:flex;align-items:flex-start;gap:var(--uloz-przerwa,36px);min-width:0;margin:0!important}
.uloz-r > .uloz-k{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--uloz-odstep,22px);margin:0!important}
.uloz-r > .uloz-k > *{margin-top:0!important;margin-bottom:0!important;min-width:0}
.uloz-r > .uloz-k > * > :first-child,.uloz-r > .uloz-k > * > .sekcja:first-child{margin-top:0!important}   /* AL: także wpisane w element (np. Zgody i pola) */
.uloz-r > .uloz-k > * > .sekcja + .sekcja{margin-top:var(--uloz-odstep,22px)}   /* dwie sekcje w jednym klocku (np. Biuro: faktury i pakiety): ten sam odstęp */
.uloz-r > .uloz-k > :empty{display:none}
.uloz-kol > :not(.uloz-r){margin-top:0!important;margin-bottom:0!important}
.tresc:has(.uloz-kol){max-width:1760px}   /* strona z kolumnami szersza, jak z .siatka-sekcji */
/* AL 24.10.2026 zasada 12 "Wyrównanie" (Kacper: "niech będzie aligned"): w układzie z ulozKolumny nagłówek sekcji ma stałą wysokość
   i tytuł zawsze na górze (link albo przycisk w nagłówku go nie przesuwa), więc nagłówki sekcji jednego rzędu stoją na jednej linii;
   nagłówek -> karta i podtytuł -> karta to zawsze ten sam odstęp; podtytuł (szary) jednolicie 13 px. Test: tools/pustka.mjs. */
@media (min-width:701px){
  .uloz-kol .sekcja-tytul{min-height:30px;align-items:baseline;margin:0 0 8px}
  .uloz-kol .sekcja-tytul > :is(.btn,.btn-tekst,.segmenty),.uloz-kol .sekcja-tytul > span > :is(.btn,.btn-tekst){margin-block:-8px}
}
.uloz-kol .sekcja-tytul + *{margin-top:0!important}   /* nagłówek -> karta zawsze ten sam odstęp (margines nagłówka) */
.uloz-kol .sekcja-tytul + :is(.drugi-tekst,.sekcja-pod){display:block;font-size:13px;line-height:1.45;font-weight:400;color:var(--tekst2);margin:0 0 8px!important}
@media (max-width:700px){.uloz-kol .sekcja-tytul{margin-bottom:8px}}

/* 24.10 (Kacper: "aligned"): znaczek typu sprawy nad tytułem, więc tytuły wszystkich spraw w Biurze zaczynają się w tej samej linii */
.bz-poz .tresc-p > .bz-tag{display:inline-block;margin:0 0 4px}
.bz-poz .tresc-p > b{display:block}

/* ===== UI1 25.10.2026: kolory obszarów "mocniej" (decyzja Kacpra 25.10, docs/design.md zasada 11) =====
   Sekcje obszaru (Biuro, Przegląd) stoją na bardzo jasnym tle obszaru, nagłówek sekcji ma kwadracik w pełnym kolorze obszaru z białą ikoną.
   Sekcje neutralne (Do załatwienia, Szybkie akcje, Szczegóły) mają to samo tło w neutralnym odcieniu, więc wszystkie sekcje rzędu są równe.
   Wiersze spraw w Biurze: delikatne tło obszaru, pasek 5 px, znaczek w pełnym kolorze z białym napisem (4,5:1 liczy marka.js: --o-X-pelny).
   Karty z treścią (.lista, kafle), menu i kolor szkoły "tu jestem" bez zmian. Nadal bez pełnych kolorowych kafli i nagłówków-pasków. */
:root{--o-pieniadze-pelny:#32843B;--o-pieniadze-sek:#F0F3DC;--o-pieniadze-wiersz:#F8FBED;--o-zajecia-pelny:#566DCA;--o-zajecia-sek:#EAEBEF;--o-zajecia-wiersz:#F5F6FC;--o-zapisy-pelny:#CA4158;--o-zapisy-sek:#F9E8E7;--o-zapisy-wiersz:#FFF3F5;--o-komunikacja-pelny:#4B4576;--o-komunikacja-sek:#E9E7E8;--o-komunikacja-wiersz:#F4F4F7;--o-zadania-pelny:#637C16;--o-zadania-sek:#EEF1DC;--o-zadania-wiersz:#F8FBEE;
  --sek-n:#F0EFEA;--sek-n-kw:#5F5E59;--o-napis:#FFFFFF;
  --ik-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ik-zegar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --ik-ksiazka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h10.5a3 3 0 0 1 3 3v12H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 16.5a3 3 0 0 1 3-3h10.5'/%3E%3C/svg%3E")}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--o-pieniadze-pelny:#32843B;--o-pieniadze-sek:#1A2122;--o-pieniadze-wiersz:#232B2F;--o-zajecia-pelny:#566DCA;--o-zajecia-sek:#1D1E2F;--o-zajecia-wiersz:#26273D;--o-zapisy-pelny:#CA4158;--o-zapisy-sek:#2C1B26;--o-zapisy-wiersz:#372434;--o-komunikacja-pelny:#4B4576;--o-komunikacja-sek:#1C1A27;--o-komunikacja-wiersz:#252334;--o-zadania-pelny:#637C16;--o-zadania-sek:#23261F;--o-zadania-wiersz:#2E302C;--sek-n:#1D1C27;--sek-n-kw:#4B4766}}
:root[data-theme="dark"]{--o-pieniadze-pelny:#32843B;--o-pieniadze-sek:#1A2122;--o-pieniadze-wiersz:#232B2F;--o-zajecia-pelny:#566DCA;--o-zajecia-sek:#1D1E2F;--o-zajecia-wiersz:#26273D;--o-zapisy-pelny:#CA4158;--o-zapisy-sek:#2C1B26;--o-zapisy-wiersz:#372434;--o-komunikacja-pelny:#4B4576;--o-komunikacja-sek:#1C1A27;--o-komunikacja-wiersz:#252334;--o-zadania-pelny:#637C16;--o-zadania-sek:#23261F;--o-zadania-wiersz:#2E302C;--sek-n:#1D1C27;--sek-n-kw:#4B4766}
[data-o="pieniadze"]{--o-p:var(--o-pieniadze-pelny);--o-sek:var(--o-pieniadze-sek);--o-w:var(--o-pieniadze-wiersz)}
[data-o="zajecia"]{--o-p:var(--o-zajecia-pelny);--o-sek:var(--o-zajecia-sek);--o-w:var(--o-zajecia-wiersz)}
[data-o="zapisy"]{--o-p:var(--o-zapisy-pelny);--o-sek:var(--o-zapisy-sek);--o-w:var(--o-zapisy-wiersz)}
[data-o="komunikacja"]{--o-p:var(--o-komunikacja-pelny);--o-sek:var(--o-komunikacja-sek);--o-w:var(--o-komunikacja-wiersz)}
[data-o="zadania"]{--o-p:var(--o-zadania-pelny);--o-sek:var(--o-zadania-sek);--o-w:var(--o-zadania-wiersz)}

/* sekcja obszaru = tło; Biuro: każda sekcja układu, Przegląd i inne: .sekcja.sek-o (z data-o albo neutralna) */
.bz-uklad :is(.bz-lista,.bz-b,.bz-szcz):not(:empty),.sekcja.sek-o{background:var(--o-sek,var(--sek-n));border-radius:18px;padding:14px 16px 16px}
.bz-uklad .bz-b[data-o] :is(.lista,.bz-det),.sekcja.sek-o .lista{border-color:color-mix(in srgb,var(--o,var(--linia2)) 14%,var(--linia))}
/* nagłówek sekcji: kwadracik w pełnym kolorze obszaru z białą ikoną (sekcja neutralna: szary kwadracik) */
:is(.bz-uklad :is(.bz-lista,.bz-b) > .sekcja,.sekcja.sek-o) > .sekcja-tytul,.bz-uklad .bz-szcz > .sekcja-tytul{position:relative;padding-left:34px}
:is(.bz-uklad :is(.bz-lista,.bz-b) > .sekcja,.sekcja.sek-o) > .sekcja-tytul::before,.bz-uklad .bz-szcz > .sekcja-tytul::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:7px;background:var(--o-p,var(--sek-n-kw))}
:is(.bz-uklad :is(.bz-lista,.bz-b) > .sekcja,.sekcja.sek-o) > .sekcja-tytul::after,.bz-uklad .bz-szcz > .sekcja-tytul::after{content:"";position:absolute;left:5px;top:7px;width:14px;height:14px;background:var(--o-napis);
  -webkit-mask:var(--sek-ik,var(--o-ik,var(--ik-lista))) center/contain no-repeat;mask:var(--sek-ik,var(--o-ik,var(--ik-lista))) center/contain no-repeat}
/* bez starej kropki przed tytułem (KO) */
.bz-b[data-o] .sekcja-tytul{padding-left:0}.bz-b[data-o] .sekcja-tytul::before{content:none}
@media (max-width:700px){:is(.bz-bok > [data-o],.bz-b[data-o]) .sekcja-tytul + .drugi-tekst{padding-left:0}
  .bz-uklad :is(.bz-lista,.bz-b,.bz-szcz):not(:empty),.sekcja.sek-o{padding:12px 12px 14px;border-radius:16px}}
/* ikona sekcji (co jest w środku), domyślnie ikona obszaru */
#bzLista{--sek-ik:var(--ik-obecnosc)}.bz-lista{--sek-ik:var(--ik-obecnosc)}#bzZaj{--sek-ik:var(--ik-kalendarz)}#bzSp{--sek-ik:var(--ik-osoby)}#bzInd{--sek-ik:var(--ik-portfel)}
#bzPr{--sek-ik:var(--ik-osoba-plus)}#bzSz{--sek-ik:var(--ik-plus)}#bzLO{--sek-ik:var(--ik-lista)}#bzPd{--sek-ik:var(--ik-ksiazka)}#bzFP{--sek-ik:var(--ik-umowa)}.bz-szcz{--sek-ik:var(--ik-zegar)}#dUwaga{--sek-ik:var(--ik-uwaga)}

/* wiersze spraw w Biurze: delikatne tło obszaru, pasek 5 px, znaczek w pełnym kolorze z białym napisem */
.bz-poz[data-o]{background:var(--o-w)}
.bz-poz[data-o]::before{top:0;bottom:0;width:5px;border-radius:0;background:var(--o)}
.bz-poz[data-o] .bz-tag{background:var(--o-p);color:var(--o-napis);font-weight:700}
.bz-poz[data-o] + .bz-poz{border-top-color:color-mix(in srgb,var(--o) 16%,var(--linia))}
/* Szybkie akcje: przy nieparzystej liczbie ostatnia akcja na całą szerokość (bez pustego pola w ostatnim rzędzie) */
.szybkie.kompakt > button:last-child:nth-child(odd){grid-column:1/-1}
/* Przegląd: sekcje obszaru na tle obszaru */
.pw-dec.sek-o{--sek-ik:var(--ik-uwaga)}
/* lektor "Ja": kwota wypłaty za miesiąc */
.wyp-kw{font-weight:700;color:var(--tekst-mocny);font-variant-numeric:tabular-nums;white-space:nowrap}
/* A9 krytyczne 1 (25.10): rząd układu zawsze na szerokość kontenera (.siatka-sekcji ma align-items:start, przez co rząd brał szerokość
   treści i po zmianie okna wychodził poza ekran, np. Ustawienia > Zasady płatności 2230 px) */
.uloz-kol > .uloz-r{align-self:stretch;max-width:100%}
.uloz-kol > :not(.uloz-r){max-width:100%}

/* MIG2 26.10.2026: archiwum z LangLiona w karcie kursanta (rozwijane obecności i raty w wierszu grupy) */
details.ll-rozwin{margin:6px 0 2px}
details.ll-rozwin>summary{cursor:pointer;font-size:13.5px;color:var(--akcent-tekst);min-height:30px;display:flex;align-items:center;gap:6px}
details.ll-rozwin>.lista-wewn{margin-top:6px;border-radius:10px}
.lista-wewn .wiersz{padding-left:12px;padding-right:12px}
/* ZT 26.10.2026: "Cofnij" w komunikacie (komunikat(..., { cofnij })) */
.toast-cofnij{font:inherit;font-weight:700;color:inherit;background:none;border:none;border-left:1px solid currentColor;margin-left:6px;padding:4px 2px 4px 14px;min-height:32px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.toast-cofnij:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---------- LK 28.10.2026 (0227): zdjęcie osoby, załączniki, tematyka, rozwijana wypłata ---------- */
.avatar{--av:40px;width:var(--av);height:var(--av);flex:0 0 var(--av);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  background:color-mix(in srgb,var(--akcent-pelny) 14%,var(--pow));color:var(--akcent-tekst);font-weight:700;font-size:calc(var(--av) * .38);line-height:1;letter-spacing:.01em;user-select:none}
.avatar.z-obrazkiem{background:var(--pow2)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.av-kadr{margin:16px auto 0;width:min(280px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--linia2);touch-action:none;cursor:grab}
.av-kadr canvas{width:100%;height:100%;display:block}
.av-zoom{max-width:280px;margin:12px auto 0}
.av-zoom input{width:100%}
.zalaczniki{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.zalacznik{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:32px;padding:4px 10px;border:1px solid var(--linia2);border-radius:16px;background:var(--pow);color:var(--tekst);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.zalacznik span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.zalacznik svg{flex-shrink:0;color:var(--tekst2)}
.dymek-moj .zalacznik{background:color-mix(in srgb,var(--pow) 92%,transparent);color:var(--tekst)}
.obec-temat textarea.pole{min-height:84px;resize:vertical;line-height:1.4;field-sizing:content;max-height:240px}
.wyp-mies{width:100%;border:none;background:none;font:inherit;text-align:left;cursor:pointer}
.wyp-mies .wyp-strz{transition:transform .15s}
.wyp-mies[aria-expanded="true"] .wyp-strz{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.wyp-mies .wyp-strz{transition:none}}
.wyp-lista{padding:2px 18px 12px}
.wyp-poz{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:14px;border-top:1px solid var(--linia)}
.wyp-poz:first-child{border-top:none}
.wyp-poz .kiedy{width:112px;flex-shrink:0;font-family:var(--font-liczby);font-variant-numeric:tabular-nums;color:var(--tekst2)}
.wyp-poz .co{flex:1;min-width:0}
.wyp-poz .kw{font-family:var(--font-liczby);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.wyp-suma{display:flex;justify-content:space-between;padding:8px 0 0;border-top:1px solid var(--linia2);font-weight:700;font-size:14px}

/* ===== UI 7.11.2026: audyt UI/UX (decyzja Kacpra "wg Twoich rekomendacji", ocena: projekt Live claude/flomino-audyt-ui-ocena-2026-11-07.md) ===== */
/* lektor, zapis obecności: jeden główny przycisk + "Więcej" (zapis samej obecności, zapis i następne); stopka 1 rząd zamiast 2-3 */
.obec-stopka.obec-stopka2{display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch;position:sticky}
.obec-stopka.obec-stopka2 > #obZapisz{flex:1 1 auto}
.obec-zap-wiecej{position:relative;flex:0 0 auto}
.obec-zap-wiecej > summary{list-style:none;width:56px;height:100%;padding:0;justify-content:center}
.obec-zap-wiecej > summary::-webkit-details-marker{display:none}
.obec-zap-wiecej > summary svg{width:22px;height:22px}
.obec-zap-menu{position:absolute;right:0;bottom:calc(100% + 8px);width:min(320px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--pow);border:1px solid var(--linia);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:30}
.obec-zap-menu .btn{width:100%;flex:none!important;flex-direction:column;line-height:1.2;gap:2px}
/* lektor, program nauczania: strzałki co najmniej 44 px (dotyk) */
.obec-program-nav button{min-width:44px;min-height:44px}
/* kolory (audyt UI/UX): główna akcja strony zawsze tym samym przyciskiem w kolorze szkoły (było: tło obszaru, inny kolor na każdej stronie);
   kolor obszaru zostaje w ikonach menu, w kwadraciku nagłówka sekcji i w małych znacznikach, nie w tłach całych kart i wierszy */
.btn.btn-o,.btn.btn-o:hover,.btn.btn-o:active{background:var(--akcent-pelny);color:var(--akcent-napis,#fff);border-color:transparent;box-shadow:none}
.btn.btn-o:hover{background:color-mix(in srgb,var(--akcent-pelny) 88%,#000)}
.btn.btn-o svg{color:currentColor}
/* wariant pośredni (Kacper 7.11 wieczór): sekcje Biura i Przeglądu wracają na jasne tło obszaru (--o-sek z bloku UI1), wiersze białe, bez pasków */
.bz-uklad .bz-b[data-o] :is(.lista,.bz-det),.sekcja.sek-o .lista{border-color:var(--linia)}
/* Biuro, sprawy: bez lewego paska (zasada Kacpra 6.11: żadnych kolorowych pasków z lewej) i bez tła obszaru; znacznik typu sprawy jasny */
.bz-poz[data-o]{background:var(--pow)}
.bz-poz[data-o]::before{content:none}
.bz-poz[data-o] .bz-tag{background:var(--o-p);color:var(--o-napis);font-weight:700}
.bz-poz[data-o] + .bz-poz{border-top-color:var(--linia)}
/* obrysy pól formularzy: kontrast co najmniej 3:1 do tła (WCAG 1.4.11); było 1,6:1 */
:root{--obrys-pola:#8F8C84}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--obrys-pola:#736E8C}}
:root[data-theme="dark"]{--obrys-pola:#736E8C}
.pole{border-color:var(--obrys-pola)}
/* ustawienia: niezapisane zmiany, pasek zapisu przyklejony do dołu */
form.us-zmiany .akcje-formularza{position:sticky;bottom:0;z-index:5;background:var(--pow);border-top:1px solid var(--linia);margin-inline:-6px;padding:10px 6px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -8px 20px rgba(0,0,0,.06)}
form.us-zmiany .akcje-formularza::before{content:"Masz niezapisane zmiany";flex:1;align-self:center;color:var(--uwaga,var(--tekst2));font-weight:600;font-size:14px}
form.us-zmiany .akcje-formularza > .drugi-tekst{display:none}
/* Leady: "odhacz krok" jako puste kółko do zaznaczenia (był zielony ✓, który wyglądał jak "zrobione" obok "zaległe") */
.ld-odhacz{width:24px;height:24px;min-height:24px!important;padding:0!important;border:2px solid var(--obrys-pola)!important;border-radius:50%;background:var(--pow)!important;flex:none;margin-top:1px}
.ld-odhacz:hover{border-color:var(--akcent)!important;background:var(--akcent-tlo)!important}
.ld-odhacz:hover::after{content:"✓";display:block;color:var(--akcent-tekst);font-weight:700;font-size:13px;line-height:20px;text-align:center}
/* Kursanci: menu działań w wierszu to jeden przycisk "•••" (bez dodatkowej strzałki, która wyglądała jak drugi przycisk) */
td[data-menu] details.menu-wiecej>summary::after{content:none}
/* Plan zajęć: w jednym pasku trzy grupy: skala czasu (Dzień, Tydzień, Miesiąc), układ według (Lektorzy, Grupy, Sale, Przedmioty) i narzędzie (Dopasuj).
   Odstęp z cienką kreską przed pierwszą zakładką każdej grupy (kolejność domyślna) */
.pz-zak .segmenty > :is([data-v="plansal/lektor"],[data-v="plansal/dopasuj"]){margin-left:21px;position:relative}
.pz-zak .segmenty > :is([data-v="plansal/lektor"],[data-v="plansal/dopasuj"])::before{content:"";position:absolute;left:-12px;top:20%;bottom:20%;width:1px;background:var(--linia2)}
/* Plan zajęć: sala wolna cały dzień = jednolite, bardzo jasne tło (były mocne paski na całej siatce); dostępność lektora bez lewego paska */
#tresc .kal-kol.wolna .kal-pole,#tresc .ps-col.free{background:color-mix(in srgb,var(--szkola,var(--akcent)) 4%,var(--pow))}
#tresc .ps-dost,#tresc .ps-leg-dost i{border-left:none}

/* ===== UI 7.11.2026 wieczór: reszta audytu UI/UX (decyzja Kacpra "dzialaj") ===== */
/* Dłużnicy: niższe kafle, notatka w jednej linii (cała w podpowiedzi) */
.kafle-niskie{margin-top:16px}
.kafle-niskie .kafel{padding-top:10px;padding-bottom:10px}
.kafle-niskie .kafel-liczba{font-size:21px}
.dl-not{max-width:260px;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
/* Karta kursanta: zakładki zostają u góry przy przewijaniu (komputer; na telefonie u góry jest menu) */
@media (min-width:861px){#tresc #uZak{position:sticky;top:0;z-index:6;background:var(--tlo);padding-block:8px;display:flex;width:100%;box-sizing:border-box}}
/* Kursanci: niższe wiersze tabeli na komputerze */
@media (min-width:861px){#tU > tr > td{padding-top:7px;padding-bottom:7px}}
/* Ustawienia > Dane szkoły: spis sekcji i nagłówki sekcji, znacznik pola wymaganego */
.us-spis{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.us-spis .btn{min-height:32px;padding:4px 12px;font-size:13.5px}
.us-sekcja{font-size:16px;font-weight:700;color:var(--tekst-mocny);margin:14px 0 -2px;padding-top:12px;border-top:1px solid var(--linia);scroll-margin-top:16px}
.wymagane{font-size:12px;font-weight:600;color:var(--tekst2);margin-left:4px}