/* =====================================================================
   EduGuru — system designu wg ksiegi znaku (BRAND GUIDELINES 2026)
   Podmiana marki = zmiana wartosci w :root
   ===================================================================== */
:root{
  --granat:#15294D;      /* kolor wiodacy   ~60% */
  --atrament:#0D1A33;    /* tekst           */
  --kosc:#F6F2E9;        /* tlo             ~30% */
  --czerwien:#C8102E;    /* akcent          ~10% */
  --zloto:#C7A24A;       /* pieczec, sukces */
  --bez:#D9D2C4;         /* linie, tla kart */

  --biel:#FFFFFF;
  --granat-80:#2A3E62;
  --granat-60:#5A6B88;
  --szary:#6E7689;
  --cien:0 1px 2px rgba(13,26,51,.06), 0 4px 16px rgba(13,26,51,.06);
  --r:6px;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sidebar:248px;
  /* Wspolna wysokosc znaku firmowego i paska tytulu — obie belki maja konczyc sie
     na tej samej linii, inaczej krawedzie rozjezdzaja sie tuz obok siebie. */
  --pasek:82px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  font-size:14px; line-height:1.5;
  color:var(--atrament); background:var(--kosc);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.01em}
a{color:var(--granat)}
button{font-family:inherit;font-size:inherit}

/* ------------------------------------------------------------ ukladu */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}

.sidebar{
  background:var(--granat); color:var(--kosc);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{min-height:var(--pasek);padding:12px 18px;border-bottom:1px solid rgba(246,242,233,.12);display:flex;gap:11px;align-items:center}
/* Sygnet ma jeden plik i dwa tla. Ksiazka domyslnie granatowa — na koscianym tle
   strony logowania i formularza zapisow. Na granatowym pasku bocznym granat na
   granacie znikal, wiec tam ta sama grupa dostaje barwe kosci. */
.mark .atrament{fill:var(--granat)}
.sidebar .mark .atrament{fill:var(--kosc)}
.brand .mark{width:34px;height:34px;flex:0 0 34px}
.brand .nazwa{font-family:var(--serif);font-size:20px;line-height:1;letter-spacing:-.02em}
.brand .haslo{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zloto);margin-top:3px}

.nav{padding:12px 10px;overflow-y:auto;flex:1}
.nav .sekcja{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--granat-60);
  padding:14px 10px 6px;font-weight:600}
.nav a{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);
  color:rgba(246,242,233,.82);text-decoration:none;font-size:13.5px;position:relative;
}
.nav a:hover{background:rgba(246,242,233,.07);color:var(--kosc)}
.nav a.on{background:rgba(246,242,233,.12);color:var(--biel);font-weight:500}
.nav a.on::before{content:'';position:absolute;left:-10px;top:6px;bottom:6px;width:3px;background:var(--czerwien);border-radius:0 3px 3px 0}
.nav a .ico{width:16px;text-align:center;opacity:.85}
.nav a .licznik{margin-left:auto;background:var(--czerwien);color:#fff;font-size:10.5px;
  padding:1px 6px;border-radius:9px;font-weight:600}

.uzytkownik{padding:12px 16px;border-top:1px solid rgba(246,242,233,.12);font-size:12px;color:rgba(246,242,233,.7)}
.uzytkownik b{display:block;color:var(--kosc);font-size:13px;font-weight:500}

/* ------------------------------------------------------------ tresc */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  background:var(--biel);border-bottom:1px solid var(--bez);
  min-height:var(--pasek);padding:12px 26px;display:flex;align-items:center;gap:18px;
  position:sticky;top:0;z-index:20;
}
.topbar h1{font-size:22px}
.topbar .okruszki{font-size:11.5px;color:var(--szary);letter-spacing:.03em;text-transform:uppercase;margin-bottom:1px}
.szukaj{margin-left:auto;position:relative;width:320px}
.szukaj input{
  width:100%;padding:8px 12px 8px 32px;border:1px solid var(--bez);border-radius:var(--r);
  background:var(--kosc);font-size:13.5px;color:var(--atrament);
}
.szukaj input:focus{outline:2px solid var(--granat);outline-offset:-1px;background:var(--biel)}
.szukaj .lupa{position:absolute;left:10px;top:8px;opacity:.45}

.tresc{padding:22px 26px 60px;max-width:1500px;width:100%}

/* ------------------------------------------------------------ karty */
.karta{background:var(--biel);border:1px solid var(--bez);border-radius:var(--r);box-shadow:var(--cien);margin-bottom:18px}
.karta > header{padding:13px 18px;border-bottom:1px solid var(--bez);display:flex;align-items:center;gap:12px}
.karta > header h2{font-size:16px}
.karta > header .opis{font-size:12px;color:var(--szary)}
.karta .body{padding:16px 18px}
/* Tabela ma dotykac krawedzi karty i przewijac sie sama, zeby nie rozepchnela strony.
   Wszystko inne — formularze, opisy, siatki danych — potrzebuje normalnego marginesu.
   Warunek jest na tresci, nie na klasie, wiec nie da sie o niego zapomniec w nowej karcie. */
.karta .body:has(> table.karty),
.karta .body:has(> .pusto),
.karta .body.plaski{padding:0;overflow-x:auto}

.kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.kafel{background:var(--biel);border:1px solid var(--bez);border-radius:var(--r);padding:15px 17px;box-shadow:var(--cien);
  border-left:3px solid var(--granat)}
.kafel.alarm{border-left-color:var(--czerwien)}
.kafel.dobry{border-left-color:var(--zloto)}
.kafel .etykieta{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--szary);font-weight:600}
.kafel .wartosc{font-family:var(--serif);font-size:27px;margin-top:5px;letter-spacing:-.02em}
.kafel .pod{font-size:12px;color:var(--szary);margin-top:2px}

/* ------------------------------------------------------------ tabele */
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  text-align:left;padding:9px 14px;background:var(--kosc);border-bottom:1px solid var(--bez);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--granat-60);font-weight:600;white-space:nowrap;
}
tbody td{padding:9px 14px;border-bottom:1px solid #EFEBE2;vertical-align:middle}
tbody tr:hover{background:#FBF9F4}
tbody tr.klik{cursor:pointer}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.pusto{padding:32px;text-align:center;color:var(--szary)}

/* ------------------------------------------------------------ elementy */
.plakietka{display:inline-block;padding:2px 8px;border-radius:11px;font-size:11px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap}
.p-ok      {background:#EAF3EC;color:#1F6B3B}
.p-alarm   {background:#FBE9EC;color:var(--czerwien)}
.p-uwaga   {background:#FBF3E2;color:#8A6A18}
.p-info    {background:#E9EDF4;color:var(--granat)}
.p-neutral {background:#EFEDE7;color:var(--szary)}

.kwota-plus{color:#1F6B3B;font-weight:600}
.kwota-minus{color:var(--czerwien);font-weight:600}

.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r);
  border:1px solid var(--granat);background:var(--granat);color:var(--kosc);
  cursor:pointer;font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;
}
.btn:hover{background:var(--granat-80);border-color:var(--granat-80)}
.btn.pusty{background:transparent;color:var(--granat)}
.btn.pusty:hover{background:#E9EDF4}
.btn.akcent{background:var(--czerwien);border-color:var(--czerwien);color:#fff}
.btn.akcent:hover{filter:brightness(1.08)}
.btn.maly{padding:4px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.akcje{margin-left:auto;display:flex;gap:8px}

.filtry{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filtry label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--szary);font-weight:600}
select,input[type=text],input[type=date],input[type=number],input[type=email],textarea{
  padding:7px 10px;border:1px solid var(--bez);border-radius:var(--r);background:var(--biel);
  font-family:inherit;font-size:13.5px;color:var(--atrament);
}
select:focus,input:focus,textarea:focus{outline:2px solid var(--granat);outline-offset:-1px}

.zakladki{display:flex;gap:2px;border-bottom:1px solid var(--bez);margin-bottom:16px}
.zakladki button{
  padding:9px 15px;border:none;background:none;cursor:pointer;color:var(--szary);
  font-size:13.5px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.zakladki button.on{color:var(--granat);border-bottom-color:var(--czerwien)}

.formularz{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.pole{display:flex;flex-direction:column;gap:4px}
.pole label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--szary);font-weight:600}
.pole.szeroki{grid-column:1/-1}
.podpowiedz{font-size:11.5px;color:var(--szary)}

/* ------------------------------------------------------------ modal */
.zaslona{position:fixed;inset:0;background:rgba(13,26,51,.45);display:flex;align-items:center;
  justify-content:center;z-index:100;padding:24px}
.modal{background:var(--biel);border-radius:8px;max-width:760px;width:100%;max-height:88vh;
  overflow:auto;box-shadow:0 20px 60px rgba(13,26,51,.3)}
.modal header{padding:16px 22px;border-bottom:1px solid var(--bez);display:flex;align-items:center}
.modal header h2{font-size:19px}
.modal .body{padding:20px 22px}
.modal footer{padding:14px 22px;border-top:1px solid var(--bez);display:flex;gap:9px;justify-content:flex-end;
  background:var(--kosc);position:sticky;bottom:0}
.zamknij{margin-left:auto;background:none;border:none;font-size:22px;cursor:pointer;color:var(--szary);line-height:1}

/* kreator */
.kroki{display:flex;gap:0;margin-bottom:20px}
.krok{flex:1;text-align:center;font-size:11.5px;color:var(--szary);position:relative;padding-top:26px}
.krok::before{content:attr(data-nr);position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;background:var(--bez);color:var(--granat);
  font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center}
.krok.on::before{background:var(--granat);color:var(--kosc)}
.krok.zrobiony::before{background:var(--zloto);color:var(--granat);content:'✓'}
.krok::after{content:'';position:absolute;top:10px;left:calc(50% + 14px);right:calc(-50% + 14px);height:1px;background:var(--bez)}
.krok:last-child::after{display:none}

/* dropzone importu */
.dropzone{border:2px dashed var(--bez);border-radius:8px;padding:34px;text-align:center;background:var(--kosc)}
.dropzone strong{font-family:var(--serif);font-size:17px;display:block;margin-bottom:5px}

.info{background:#E9EDF4;border-left:3px solid var(--granat);padding:11px 14px;border-radius:0 var(--r) var(--r) 0;
  font-size:13px;margin-bottom:14px}
.info.ostrzezenie{background:#FBF3E2;border-left-color:var(--zloto)}
.info.blad{background:#FBE9EC;border-left-color:var(--czerwien)}

.pasek-postepu{display:block;height:5px;background:var(--bez);border-radius:3px;overflow:hidden;min-width:70px}
.pasek-postepu i{display:block;height:100%;background:var(--zloto)}
.pasek-postepu i.pelny{background:#2E8B57}


}

.nowrap{white-space:nowrap}

/* =====================================================================
   Ekran logowania
   ===================================================================== */
/* Ekran logowania wypelnia widok, ale NIE przykrywa paska srodowiska —
   dlatego min-height, a nie position:fixed. */
.logowanie{
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--kosc);min-height:88vh;
}
/* motywy pomocnicze z ksiegi znaku — subtelnie, 3-4 na raz */
.logowanie .tlo{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.05}
.logowanie .tlo svg{position:absolute;color:var(--granat)}

.log-karta{
  position:relative;background:var(--biel);border:1px solid var(--bez);border-radius:10px;
  box-shadow:0 18px 50px rgba(13,26,51,.10);width:100%;max-width:390px;padding:34px 32px 28px;
}
.log-znak{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:26px}
.log-znak svg{width:58px;height:58px;margin-bottom:12px}
.log-znak .nazwa{font-family:var(--serif);font-size:32px;line-height:1;color:var(--granat);letter-spacing:-.02em}
.log-znak .haslo{font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--zloto);
  margin-top:7px;font-weight:600}
.log-znak .kreska{width:52px;height:2px;background:var(--czerwien);margin:16px 0 0}

.log-karta .pole{margin-bottom:14px}
.log-karta .pole input{width:100%;padding:10px 12px;font-size:14px}
.log-karta .btn{width:100%;justify-content:center;padding:10px;font-size:14px;margin-top:6px}

.log-blad{
  background:#FBE9EC;border-left:3px solid var(--czerwien);color:var(--czerwien);
  padding:9px 12px;border-radius:0 var(--r) var(--r) 0;font-size:12.5px;margin-bottom:16px;
}
.log-info{
  background:#E9EDF4;border-left:3px solid var(--granat);
  padding:9px 12px;border-radius:0 var(--r) var(--r) 0;font-size:12.5px;margin-bottom:16px;
}
.log-stopka{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--bez);
  font-size:11.5px;color:var(--szary);line-height:1.7}
.log-stopka a{color:var(--granat);text-decoration:none;border-bottom:1px solid var(--bez)}
.log-stopka a:hover{border-bottom-color:var(--granat)}

.wyloguj{background:none;border:1px solid rgba(246,242,233,.25);color:rgba(246,242,233,.8);
  padding:4px 9px;border-radius:var(--r);cursor:pointer;font-size:11.5px;margin-top:8px}
.wyloguj:hover{background:rgba(246,242,233,.1);color:var(--kosc)}

/* =====================================================================
   URZADZENIA MOBILNE
   Zalozenie: pelna obsluga na telefonie, nie „wersja okrojona".
   - nawigacja w szufladzie wysuwanej z lewej,
   - tabele przechodza w karty (kazdy wiersz = jedna karta z etykietami),
   - modale na caly ekran ze stopka przyklejona do dolu,
   - cele dotykowe min. 44 px (WCAG 2.5.8 / Apple HIG),
   - pola formularzy 16 px, inaczej iOS przybliza strone przy fokusie.
   ===================================================================== */

.menu-przycisk{
  display:none;align-items:center;justify-content:center;gap:4px;flex-direction:column;
  width:44px;height:44px;flex:0 0 44px;margin:-6px 0 -6px -6px;
  border:1px solid var(--bez);border-radius:var(--r);background:var(--biel);
  cursor:pointer;color:var(--granat);
}
.menu-przycisk span{display:block;width:18px;height:2px;background:currentColor;border-radius:1px}
.zaslona-menu{display:none;position:fixed;inset:0;background:rgba(13,26,51,.45);z-index:29}

/* Szuflada nawigacji działa bez JavaScriptu — stan trzyma ukryte pole wyboru.
   Dzięki temu w przeglądarce nie ma żadnego skryptu, który dałoby się podmienić. */
.przelacznik-menu{position:absolute;opacity:0;pointer-events:none}

/* dostępność */
.pomijacz{position:absolute;left:-9999px;top:0;background:var(--granat);color:var(--kosc);
  padding:10px 16px;z-index:100;border-radius:0 0 var(--r) 0}
.pomijacz:focus{left:0}
.tylko-dla-czytnika{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
:focus-visible{outline:3px solid var(--czerwien);outline-offset:2px}

.blad-kod{font-family:var(--serif);font-size:44px;color:var(--granat);margin:8px 0 4px;text-align:center}
.blad-tresc{text-align:center;color:var(--szary);margin:0 0 18px}

@media (max-width: 900px){
  .app{grid-template-columns:1fr}

  /* --- nawigacja w szufladzie --- */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:270px;z-index:30;height:100dvh;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:4px 0 24px rgba(13,26,51,.2);
  }
  .przelacznik-menu:checked ~ .sidebar{transform:none}
  .przelacznik-menu:checked ~ .zaslona-menu{display:block}
  .nav a{padding:12px 12px;font-size:15px;min-height:44px}
  .nav .sekcja{padding:16px 12px 6px}
  .menu-przycisk{display:flex}
  /* w szufladzie nie ma paska tytulu obok, wiec i nie ma czego wyrownywac */
  .brand{min-height:0;padding:16px 16px 14px}

  /* --- naglowek --- */
  .topbar{min-height:0;padding:10px 14px;gap:12px;flex-wrap:wrap;align-items:center}
  .topbar h1{font-size:19px}
  .topbar .okruszki{font-size:10px}
  .szukaj{width:100%;margin-left:0;order:3}
  .szukaj input{padding:11px 12px 11px 34px;font-size:16px}
  .szukaj .lupa{top:11px}

  .tresc{padding:14px 12px 72px}

  /* --- kafle --- */
  .kafle{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .kafel{padding:13px 14px}
  .kafel .wartosc{font-size:23px}

  /* --- karty --- */
  .karta{border-radius:8px;margin-bottom:14px}
  .karta > header{padding:12px 14px;flex-wrap:wrap;gap:8px}
  .karta > header h2{font-size:15.5px}
  .karta .body{padding:14px}
  /* wiersze-karty nie dotykaja krawedzi kontenera */
  .karta .body:has(> table.karty),
  .karta .body:has(> .pusto),
  .karta .body.plaski{padding:10px 10px 1px}
  .akcje{margin-left:0;width:100%;flex-wrap:wrap}
  .akcje .btn{flex:1 1 auto;justify-content:center}

  /* tabele oznaczone do przewijania w poziomie */
  .przewijanie{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .przewijanie table{min-width:640px}

  /* --- filtry --- */
  .filtry{gap:8px}
  .filtry label{width:100%;margin-bottom:-4px}
  .filtry select,.filtry input:not([type=checkbox]){flex:1 1 100%;font-size:16px;min-height:44px}
  .filtry input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;min-height:0;accent-color:var(--granat)}
  .filtry label:has(input[type=checkbox]){flex:1 1 100%;width:auto}

  /* --- formularze --- */
  .formularz{grid-template-columns:1fr;gap:12px}
  select,input[type=text],input[type=date],input[type=number],input[type=email],
  input[type=password],textarea{font-size:16px;min-height:44px}
  textarea{min-height:76px}

  /* --- przyciski --- */
  .btn{min-height:44px;padding:10px 15px}
  .btn.maly{min-height:40px;padding:9px 13px;font-size:13px}


  /* --- modale na caly ekran --- */
  .zaslona{padding:0;align-items:stretch}
  .modal{max-width:none;border-radius:0;max-height:100dvh;display:flex;flex-direction:column}
  .modal header{padding:14px 16px;position:sticky;top:0;background:var(--biel);z-index:2}
  .modal .body{padding:16px;flex:1;overflow:auto}
  .modal footer{padding:12px 16px;flex-wrap:wrap}
  .modal footer .btn{flex:1 1 auto;justify-content:center}
  .zamknij{width:44px;height:44px;font-size:26px}

  /* --- kreator: kroki pod soba w postaci paska --- */
  .kroki{overflow-x:auto;padding-bottom:4px}
  .krok{min-width:96px;font-size:10.5px}

  /* --- zakladki --- */
  .zakladki{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .zakladki button{white-space:nowrap;padding:11px 13px;min-height:44px}

  .dropzone{padding:22px 16px}
}

/* Tabele w kartach wszedzie tam, gdzie nawigacja jest w szufladzie.
   Sprawdzone: przy 768 px osiem kolumn z nowrap daje ~1200 px do przewijania
   w bok — karty sa tam wyraznie czytelniejsze. Jeden prog, jeden model. */
@media (max-width: 900px){
  /* --- TABELE -> KARTY --- */
  table.karty, table.karty tbody, table.karty tr, table.karty td{display:block;width:100%}
  table.karty thead{display:none}
  table.karty tbody tr{
    border:1px solid var(--bez);border-radius:8px;margin-bottom:10px;padding:4px 0;
    background:var(--biel);
  }
  table.karty tbody tr:hover{background:var(--biel)}
  table.karty tbody td{
    display:flex;align-items:baseline;gap:12px;
    padding:7px 14px;border:0;text-align:left;
  }
  table.karty tbody td::before{
    content:attr(data-etykieta);
    flex:0 0 40%;font-family:var(--sans);font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--granat-60);font-weight:600;line-height:1.7;
  }
  /* dlugie ciagi bez spacji (numery kont) musza sie lamac, inaczej wychodza poza karte */
  table.karty tbody td > .kom{flex:1 1 auto;min-width:0;display:block;overflow-wrap:anywhere}
  table.karty tbody td.num > .kom{text-align:right}
  /* pierwsza komorka to naglowek karty */
  table.karty tbody td:first-child{
    display:block;padding:10px 14px 8px;font-size:15px;
    border-bottom:1px solid #EFEBE2;margin-bottom:4px;
  }
  table.karty tbody td:first-child::before{display:none}
  table.karty tbody td:first-child > .kom{display:block}
  /* komorka akcji: przyciski na cala szerokosc */
  table.karty tbody td.akcja{
    display:flex;gap:8px;padding:10px 14px;border-top:1px solid #EFEBE2;margin-top:4px;
  }
  table.karty tbody td.akcja::before{display:none}
  table.karty tbody td.akcja > .kom{display:flex;gap:8px;flex:1}
  table.karty tbody td.akcja .btn{flex:1;justify-content:center;min-height:40px}
  table.karty tbody td.pusta{display:none}

  /* samodzielne odnosniki w kartach: powiekszamy obszar dotyku bez zmiany wygladu
     (WCAG 2.5.8 — odnosniki wplecione w zdanie sa z tego wymogu wylaczone) */
  table.karty tbody td a{display:inline-block;padding:11px 10px;margin:-11px -10px}
}

@media (max-width: 420px){
  .kafle{grid-template-columns:1fr 1fr}
  /* nieparzysty ostatni kafel zajmuje caly wiersz zamiast wisiec w polowie */
  .kafle .kafel:last-child:nth-child(odd){grid-column:1 / -1}
  .kafel .wartosc{font-size:20px}
  .kafel .etykieta{font-size:9.5px}
  .topbar h1{font-size:17px}
  .log-karta{padding:26px 20px 22px;border-radius:0;max-width:none;min-height:100dvh;
             display:flex;flex-direction:column;justify-content:center;border:0;box-shadow:none}
  .logowanie{padding:0}
  .log-znak svg{width:50px;height:50px}
  .log-znak .nazwa{font-size:28px}
}

/* telefon w poziomie — nie marnuj wysokosci na duzy znak */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px){
  .log-znak{margin-bottom:16px}
  .log-znak svg{width:38px;height:38px}
  .log-karta{min-height:auto;justify-content:flex-start}
}

/* uszanuj ustawienie systemowe */
@media (prefers-reduced-motion: reduce){
  .sidebar{transition:none}
}

/* --------------------------------------------------- zgłoszenia i decyzje */
.dane-siatka{display:grid;grid-template-columns:150px 1fr;gap:7px 16px;font-size:13.5px;align-items:baseline}
.dane-siatka span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--granat-60);font-weight:600}
.dane-siatka b{font-weight:500}

.decyzje{display:flex;flex-direction:column;gap:8px}
.kandydat{
  display:flex;gap:11px;align-items:flex-start;padding:12px 14px;cursor:pointer;
  border:1px solid var(--bez);border-radius:var(--r);background:var(--biel);
}
.kandydat:hover{border-color:var(--granat-60);background:#FBF9F4}
.kandydat:has(input:checked){border-color:var(--granat);background:#E9EDF4;box-shadow:inset 0 0 0 1px var(--granat)}
.kandydat input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--granat)}
.kandydat .opis-kandydata{display:flex;flex-direction:column;gap:3px;min-width:0}
.kandydat .podpowiedz{font-size:12px}

.kod-zapisow{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  background:var(--kosc);border:1px solid var(--bez);border-radius:var(--r);padding:10px 12px;
}
.kod-zapisow .kod{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;font-weight:600;
  letter-spacing:.06em;color:var(--granat);
}
.kod-zapisow .adres{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--szary);
  word-break:break-all;flex:1 1 100%;
}

@media (max-width: 900px){
  .dane-siatka{grid-template-columns:1fr;gap:2px 0}
  .dane-siatka span{margin-top:9px}
  .kandydat{padding:13px}
}

/* =====================================================================
   GRAFIK — kalendarz tygodniowy
   ===================================================================== */
:root{
  --kal-godzina: 64px;      /* wysokosc jednej godziny */
  --kal-oś: 54px;           /* szerokosc kolumny z godzinami */
}

.kalendarz{background:var(--biel);border:1px solid var(--bez);border-radius:var(--r);
  box-shadow:var(--cien);overflow:hidden}

.kal-pasek{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--bez);flex-wrap:wrap}
.kal-pasek .zakres{font-family:var(--serif);font-size:17px;color:var(--granat)}
.kal-pasek .rok{font-size:12px;color:var(--szary);margin-left:2px}
.kal-nawigacja{display:flex;gap:4px}
.kal-nawigacja button{width:34px;height:34px;border:1px solid var(--bez);background:var(--biel);
  border-radius:var(--r);cursor:pointer;color:var(--granat);font-size:15px;line-height:1}
.kal-nawigacja button:hover{background:var(--kosc);border-color:var(--granat-60)}

/* nagłówek dni */
.kal-dni{display:grid;grid-template-columns:var(--kal-oś) repeat(var(--dni,5), 1fr);
  border-bottom:1px solid var(--bez);background:var(--kosc);position:sticky;top:0;z-index:3}
.kal-dni .naglowek-dnia{padding:8px 6px;text-align:center;border-left:1px solid var(--bez)}
.kal-dni .naglowek-dnia .skrot{font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--granat-60);font-weight:600}
.kal-dni .naglowek-dnia .numer{font-family:var(--serif);font-size:19px;color:var(--granat);line-height:1.2}
.kal-dni .naglowek-dnia.dzis .numer{color:var(--czerwien)}
.kal-dni .naglowek-dnia.dzis .skrot{color:var(--czerwien)}
.kal-dni .naglowek-dnia.wolne{background:#F1EDE4}
.kal-dni .rog{border-left:0}

/* siatka */
.kal-siatka{display:grid;grid-template-columns:var(--kal-oś) repeat(var(--dni,5), 1fr);
  position:relative;max-height:min(70vh, 720px);overflow-y:auto}
.kal-os{border-right:1px solid var(--bez);background:var(--biel)}
.kal-os .godzina{height:var(--kal-godzina);position:relative;
  font-size:10.5px;color:var(--szary);text-align:right;padding-right:7px}
.kal-os .godzina span{position:relative;top:-6px}
.kal-kolumna{position:relative;border-left:1px solid var(--bez)}
.kal-kolumna.wolne{background:#FBF9F4}
.kal-kolumna .linia{height:var(--kal-godzina);border-bottom:1px solid #F1EDE4}
.kal-kolumna .linia.polowa{border-bottom:1px dashed #F6F3EC}

/* cegiełka zajęć */
.cegla{
  position:absolute;left:3px;right:3px;border-radius:5px;padding:5px 7px;overflow:hidden;
  cursor:pointer;border-left:3px solid rgba(0,0,0,.25);color:#fff;
  font-size:11.5px;line-height:1.3;transition:filter .12s;
}
.cegla:hover{filter:brightness(1.12);z-index:2}
.cegla .czas{font-weight:600;font-size:10.5px;opacity:.9}
.cegla .nazwa{font-weight:600;margin-top:1px}
.cegla .pod{font-size:10.5px;opacity:.85;margin-top:1px}
.cegla > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* srednia (ok. 35–60 px): godzina + nazwa, bez trzeciego wiersza */
.cegla.krotka{padding:3px 6px;font-size:11px}
.cegla.krotka .czas{font-size:10px}
.cegla.krotka .nazwa{margin-top:0;line-height:1.25}
.cegla.krotka .pod{display:none}

/* mini (ponizej 35 px, np. zajecia 30-minutowe): wszystko w jednej linii */
.cegla.mini{padding:0 6px;display:flex;align-items:center;gap:5px;font-size:10.5px;line-height:1}
.cegla.mini .czas{flex:0 0 auto;font-size:10px;opacity:.95}
.cegla.mini .nazwa{flex:1 1 auto;min-width:0;margin-top:0;font-weight:600}
.cegla.mini .pod{display:none}

.cegla.odwolane{background:repeating-linear-gradient(45deg,#C9C4B8,#C9C4B8 6px,#D9D2C4 6px,#D9D2C4 12px);
  color:var(--granat);border-left-color:var(--szary)}
.cegla.odwolane .nazwa{text-decoration:line-through}
.cegla.przerwa{background:#E4DFD3;color:var(--szary);border-left-color:var(--bez)}
.cegla.przerwa .nazwa{text-decoration:line-through}
.cegla.przeniesione{outline:2px dashed rgba(255,255,255,.75);outline-offset:-4px}
.cegla.dodatkowe{outline:2px dotted rgba(255,255,255,.75);outline-offset:-4px}

/* linia „teraz” */
.teraz{position:absolute;left:0;right:0;height:2px;background:var(--czerwien);z-index:4;pointer-events:none}
.teraz::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--czerwien)}

/* legenda */
.kal-legenda{display:flex;gap:14px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--bez);
  background:var(--kosc);font-size:11.5px;color:var(--szary);align-items:center}
.kal-legenda .znacznik{display:inline-flex;align-items:center;gap:6px}
.kal-legenda .probka{width:13px;height:13px;border-radius:3px;flex:0 0 auto}

/* widok mobilny: jeden dzien, agenda */
.kal-agenda{display:none}
.kal-agenda .dzien-blok{border-bottom:1px solid var(--bez);padding:12px 14px}
.kal-agenda .dzien-blok:last-child{border-bottom:0}
.kal-agenda .dzien-tytul{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.kal-agenda .dzien-tytul .numer{font-family:var(--serif);font-size:19px;color:var(--granat)}
.kal-agenda .dzien-tytul .nazwa{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--granat-60);font-weight:600}
.kal-agenda .dzien-tytul.dzis .numer{color:var(--czerwien)}
.kal-agenda .pozycja{display:flex;gap:11px;padding:9px 0;border-top:1px solid #F1EDE4}
.kal-agenda .pozycja .godziny{flex:0 0 84px;font-size:12.5px;font-weight:600;color:var(--granat);
  font-variant-numeric:tabular-nums}
.kal-agenda .pozycja .pasek{flex:0 0 4px;border-radius:2px}
.kal-agenda .pozycja .opis-zajec{min-width:0;flex:1}
.kal-agenda .pozycja .opis-zajec b{display:block;font-size:13.5px}
.kal-agenda .pozycja.nieaktywne .opis-zajec b{text-decoration:line-through;color:var(--szary)}
.kal-agenda .pusty-dzien{font-size:12.5px;color:var(--szary);padding:4px 0 2px}

@media (max-width: 900px){
  .kal-siatka, .kal-dni{display:none}
  .kal-agenda{display:block}
  .kal-pasek{gap:8px}
  .kal-pasek .zakres{font-size:15.5px;flex:1 1 100%;order:2}
  .kal-nawigacja{order:1}
  .kal-nawigacja button{width:44px;height:44px}
}

/* Pasek środowiska — treść i kolor pochodzą z tabeli ustawień.
   Nie ma tu żadnego „if demo": pusta etykieta w bazie = pasek się nie pojawia. */
.pasek-srodowiska{
  position:sticky;top:0;z-index:40;padding:6px 16px;text-align:center;
  color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
}
.pasek-srodowiska[hidden]{display:none}
@media (max-width:900px){ .pasek-srodowiska{font-size:10.5px;letter-spacing:.05em;padding:5px 12px} }


/* Formularz wyszukiwania w nagłówku wysyła się metodą GET — bez skryptu. */
.szukaj input[type=search]{
  width:100%;padding:8px 12px;border:1px solid var(--bez);border-radius:var(--r);
  background:var(--kosc);font-size:13.5px;color:var(--atrament);font-family:inherit;
}
.szukaj input[type=search]:focus{outline:2px solid var(--granat);outline-offset:-1px;background:var(--biel)}
.uzytkownik form{margin-top:8px}


/* =====================================================================
   FORMULARZE I DZIAŁANIA — dopisane razem z operacjami zapisu
   ===================================================================== */
input[type=tel],input[type=time],input[type=password],input[type=search]{
  padding:8px 11px;border:1px solid var(--bez);border-radius:var(--r);
  background:var(--biel);font-size:13.5px;color:var(--atrament);font-family:inherit;width:100%}
input[readonly]{background:var(--kosc);color:var(--szary)}
textarea{resize:vertical;min-height:64px}

label.wymagane::after{content:' *';color:var(--czerwien)}

.stopka-formularza{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;
  padding-top:15px;border-top:1px solid var(--bez)}

.pole.zaznaczenie label{display:flex;align-items:center;gap:9px;text-transform:none;
  font-size:13.5px;letter-spacing:0;color:var(--atrament);font-weight:400;cursor:pointer}
.pole.zaznaczenie input{width:17px;height:17px;accent-color:var(--granat);flex:0 0 auto}

/* formularz jednoprzyciskowy wewnątrz komórki tabeli */
.w-linii{display:inline-block;margin:0}
/* Przyciski w komorce tabeli. Gdy nie mieszcza sie obok siebie, schodza pod siebie
   z odstepem — sklejone krawedziami wygladaja jak jeden szeroki przycisk. */
td .akcje-wiersza{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center}
/* Pasek przycisków pod treścią. Ujemny margines górny, który tu kiedyś stał,
   wciągał przyciski pod poprzedni element — pod polem z podpowiedzią nachodziły
   na jej tekst. Odstęp ma być odstępem. */
.akcje-pod{margin:12px 0 20px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
/* Po karcie wystarczy jej własny margines — nie dokładamy drugiego. */
.karta + .akcje-pod{margin-top:-6px}
.pasek-akcji{margin-bottom:18px}
.pasek-akcji .btn{margin-top:8px}

.info.dobry{background:#EAF3EC;border-left-color:#2E8B57}

/* zakładki jako odnośniki — działają bez skryptu, każda ma własny adres */
.zakladki{overflow-x:auto}
.zakladki a{
  padding:9px 15px;font-size:13px;font-weight:500;color:var(--szary);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.zakladki a:hover{color:var(--granat)}
.zakladki a.on{color:var(--granat);border-bottom-color:var(--czerwien)}

/* Podkreślenie na najechanie dotyczy odnośników TEKSTOWYCH (nazwisko ucznia,
   tytuł przelewu). Przycisk ma własne tło i obramowanie — wejście tą regułą
   w .btn zamieniało go w jednolity prostokąt z niewidocznym napisem, a przyciskowi
   konturowemu zabierało dolną krawędź. */
table.karty a:not(.btn){color:var(--granat);text-decoration:none;
  border-bottom:1px solid transparent}
table.karty a:not(.btn):hover{border-bottom-color:var(--granat-60)}

.stos{display:flex;flex-direction:column;gap:4px}
.kreska-pion{border-left:3px solid var(--bez);padding-left:11px}

/* wiersz wyróżniony — np. przelew czekający na decyzję */
tr.uwaga td{background:#FDFAF2}

/* wybór pliku wyciągu */
.plik-wybor{display:flex;flex-direction:column;gap:12px;align-items:center}
.plik-wybor input[type=file]{font-size:13px;width:auto}

@media (max-width:900px){
  .stopka-formularza .btn{flex:1 1 100%;justify-content:center;min-height:44px}
  .akcje .btn{min-height:40px}
}


/* Liczba kolumn kalendarza — klasa zamiast zmiennej w atrybucie style. */
.kal-dni.dni-5,.kal-siatka.dni-5{grid-template-columns:var(--kal-oś) repeat(5,1fr)}
.kal-dni.dni-6,.kal-siatka.dni-6{grid-template-columns:var(--kal-oś) repeat(6,1fr)}
.kal-dni.dni-7,.kal-siatka.dni-7{grid-template-columns:var(--kal-oś) repeat(7,1fr)}

/* Nakładające się zajęcia — jedna osoba nie uczy w dwóch miejscach naraz,
   więc to sygnał błędu i musi być widoczne, a nie schowane jedno pod drugim. */
.cegla.kol-2-0{left:3px;right:calc(50% + 1px)}
.cegla.kol-2-1{left:calc(50% + 1px);right:3px}
.cegla.kol-3-0{left:3px;right:calc(66.7% + 1px)}
.cegla.kol-3-1{left:calc(33.3% + 1px);right:calc(33.3% + 1px)}
.cegla.kol-3-2{left:calc(66.7% + 1px);right:3px}

.kal-legenda .probka.odwolane-probka{
  background:repeating-linear-gradient(45deg,#C9C4B8,#C9C4B8 4px,#D9D2C4 4px,#D9D2C4 8px)}

.kal-pasek .kal-nawigacja a{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:1px solid var(--bez);background:var(--biel);
  border-radius:var(--r);color:var(--granat);font-size:15px;text-decoration:none}
.kal-pasek .kal-nawigacja a:hover{background:var(--kosc);border-color:var(--granat-60)}
.kal-pasek .kal-nawigacja a.szeroki{width:auto;padding:0 12px;font-size:13px}
@media (max-width:900px){ .kal-pasek .kal-nawigacja a{width:44px;height:44px} }

/* druga karta na ekranie potwierdzenia — ponowne wysłanie kodu */
.log-dodatkowa{margin-top:14px;padding-top:16px}
.log-dodatkowa .log-stopka{margin-top:12px;padding-top:12px}

/* nagłówek grupy pól w formularzu ustawień */
.grupa-ustawien{margin:14px 0 -4px}
.grupa-ustawien:first-child{margin-top:0}
.grupa-ustawien h2{font-size:15px;color:var(--granat);padding-bottom:6px;
  border-bottom:1px solid var(--bez)}
.grupa-ustawien .podpowiedz{display:block;margin-top:5px}
form.edycja > .formularz > .grupa-ustawien + .pole{margin-top:2px}

/* --------------------------------------------------- dokumenty i szablony */
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--kosc);border:1px solid var(--bez);border-radius:4px;
  padding:1px 5px;color:var(--granat);
  /* Nazwa pola nie może rozepchnąć strony na telefonie — łamiemy ją, gdy trzeba. */
  overflow-wrap:anywhere;max-width:100%}

.pola-szablonu{display:flex;flex-wrap:wrap;gap:6px}

.pola-siatka{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin:14px 0}
.pola-siatka > div{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.pola-siatka > div b{flex:1 1 100%;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--granat-60);margin-bottom:1px}

/* Pole wyboru pliku ma własną szerokość wewnętrzną i potrafi rozepchnąć siatkę
   formularza — grid domyślnie nie pozwala kolumnie zejść poniżej treści dziecka.
   Stąd min-width:0 na polach i twardy limit na samym polu pliku. */
.formularz > .pole{min-width:0}
.pole input[type=file]{font-size:13px;padding:7px 0;max-width:100%}
.plik-wybor input[type=file]{max-width:100%}

/* wpis wycofany — widoczny, ale wyraźnie nieaktualny */
tr.wycofany td{opacity:.62}
tr.wycofany .kwota-plus,tr.wycofany .kwota-minus{text-decoration:line-through}

/* Pole z adresem do skopiowania. Kopiowanie jednym przyciskiem wymagałoby
   JavaScriptu, którego panel nie wykonuje — zamiast tego dajemy pole, które
   łatwo zaznaczyć: monospace, pełna szerokość, tylko do odczytu. */
input.do-skopiowania{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--kosc);color:var(--granat);cursor:text}
input.do-skopiowania:focus{background:var(--biel);outline:2px solid var(--granat);outline-offset:-1px}

/* podgląd wiadomości — tekst dokładnie taki, jaki wyjdzie */
pre.podglad-wiadomosci{
  background:var(--kosc);border:1px solid var(--bez);border-radius:var(--r);
  padding:13px 15px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.55;color:var(--atrament);
  white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 12px}

/* ====== BLOK GENEROWANY: pozycje kalendarza i paski ====== */

/* =====================================================================
   KALENDARZ — położenie cegiełek
   Krok: 5 minut. Blok jest generowany przez generuj-css.mjs —
   nie edytuj go ręcznie.
   ===================================================================== */
.cegla.t-0{top:calc(var(--kal-godzina) * 0)}
.cegla.t-5{top:calc(var(--kal-godzina) * 0.083333)}
.cegla.t-10{top:calc(var(--kal-godzina) * 0.166667)}
.cegla.t-15{top:calc(var(--kal-godzina) * 0.25)}
.cegla.t-20{top:calc(var(--kal-godzina) * 0.333333)}
.cegla.t-25{top:calc(var(--kal-godzina) * 0.416667)}
.cegla.t-30{top:calc(var(--kal-godzina) * 0.5)}
.cegla.t-35{top:calc(var(--kal-godzina) * 0.583333)}
.cegla.t-40{top:calc(var(--kal-godzina) * 0.666667)}
.cegla.t-45{top:calc(var(--kal-godzina) * 0.75)}
.cegla.t-50{top:calc(var(--kal-godzina) * 0.833333)}
.cegla.t-55{top:calc(var(--kal-godzina) * 0.916667)}
.cegla.t-60{top:calc(var(--kal-godzina) * 1)}
.cegla.t-65{top:calc(var(--kal-godzina) * 1.083333)}
.cegla.t-70{top:calc(var(--kal-godzina) * 1.166667)}
.cegla.t-75{top:calc(var(--kal-godzina) * 1.25)}
.cegla.t-80{top:calc(var(--kal-godzina) * 1.333333)}
.cegla.t-85{top:calc(var(--kal-godzina) * 1.416667)}
.cegla.t-90{top:calc(var(--kal-godzina) * 1.5)}
.cegla.t-95{top:calc(var(--kal-godzina) * 1.583333)}
.cegla.t-100{top:calc(var(--kal-godzina) * 1.666667)}
.cegla.t-105{top:calc(var(--kal-godzina) * 1.75)}
.cegla.t-110{top:calc(var(--kal-godzina) * 1.833333)}
.cegla.t-115{top:calc(var(--kal-godzina) * 1.916667)}
.cegla.t-120{top:calc(var(--kal-godzina) * 2)}
.cegla.t-125{top:calc(var(--kal-godzina) * 2.083333)}
.cegla.t-130{top:calc(var(--kal-godzina) * 2.166667)}
.cegla.t-135{top:calc(var(--kal-godzina) * 2.25)}
.cegla.t-140{top:calc(var(--kal-godzina) * 2.333333)}
.cegla.t-145{top:calc(var(--kal-godzina) * 2.416667)}
.cegla.t-150{top:calc(var(--kal-godzina) * 2.5)}
.cegla.t-155{top:calc(var(--kal-godzina) * 2.583333)}
.cegla.t-160{top:calc(var(--kal-godzina) * 2.666667)}
.cegla.t-165{top:calc(var(--kal-godzina) * 2.75)}
.cegla.t-170{top:calc(var(--kal-godzina) * 2.833333)}
.cegla.t-175{top:calc(var(--kal-godzina) * 2.916667)}
.cegla.t-180{top:calc(var(--kal-godzina) * 3)}
.cegla.t-185{top:calc(var(--kal-godzina) * 3.083333)}
.cegla.t-190{top:calc(var(--kal-godzina) * 3.166667)}
.cegla.t-195{top:calc(var(--kal-godzina) * 3.25)}
.cegla.t-200{top:calc(var(--kal-godzina) * 3.333333)}
.cegla.t-205{top:calc(var(--kal-godzina) * 3.416667)}
.cegla.t-210{top:calc(var(--kal-godzina) * 3.5)}
.cegla.t-215{top:calc(var(--kal-godzina) * 3.583333)}
.cegla.t-220{top:calc(var(--kal-godzina) * 3.666667)}
.cegla.t-225{top:calc(var(--kal-godzina) * 3.75)}
.cegla.t-230{top:calc(var(--kal-godzina) * 3.833333)}
.cegla.t-235{top:calc(var(--kal-godzina) * 3.916667)}
.cegla.t-240{top:calc(var(--kal-godzina) * 4)}
.cegla.t-245{top:calc(var(--kal-godzina) * 4.083333)}
.cegla.t-250{top:calc(var(--kal-godzina) * 4.166667)}
.cegla.t-255{top:calc(var(--kal-godzina) * 4.25)}
.cegla.t-260{top:calc(var(--kal-godzina) * 4.333333)}
.cegla.t-265{top:calc(var(--kal-godzina) * 4.416667)}
.cegla.t-270{top:calc(var(--kal-godzina) * 4.5)}
.cegla.t-275{top:calc(var(--kal-godzina) * 4.583333)}
.cegla.t-280{top:calc(var(--kal-godzina) * 4.666667)}
.cegla.t-285{top:calc(var(--kal-godzina) * 4.75)}
.cegla.t-290{top:calc(var(--kal-godzina) * 4.833333)}
.cegla.t-295{top:calc(var(--kal-godzina) * 4.916667)}
.cegla.t-300{top:calc(var(--kal-godzina) * 5)}
.cegla.t-305{top:calc(var(--kal-godzina) * 5.083333)}
.cegla.t-310{top:calc(var(--kal-godzina) * 5.166667)}
.cegla.t-315{top:calc(var(--kal-godzina) * 5.25)}
.cegla.t-320{top:calc(var(--kal-godzina) * 5.333333)}
.cegla.t-325{top:calc(var(--kal-godzina) * 5.416667)}
.cegla.t-330{top:calc(var(--kal-godzina) * 5.5)}
.cegla.t-335{top:calc(var(--kal-godzina) * 5.583333)}
.cegla.t-340{top:calc(var(--kal-godzina) * 5.666667)}
.cegla.t-345{top:calc(var(--kal-godzina) * 5.75)}
.cegla.t-350{top:calc(var(--kal-godzina) * 5.833333)}
.cegla.t-355{top:calc(var(--kal-godzina) * 5.916667)}
.cegla.t-360{top:calc(var(--kal-godzina) * 6)}
.cegla.t-365{top:calc(var(--kal-godzina) * 6.083333)}
.cegla.t-370{top:calc(var(--kal-godzina) * 6.166667)}
.cegla.t-375{top:calc(var(--kal-godzina) * 6.25)}
.cegla.t-380{top:calc(var(--kal-godzina) * 6.333333)}
.cegla.t-385{top:calc(var(--kal-godzina) * 6.416667)}
.cegla.t-390{top:calc(var(--kal-godzina) * 6.5)}
.cegla.t-395{top:calc(var(--kal-godzina) * 6.583333)}
.cegla.t-400{top:calc(var(--kal-godzina) * 6.666667)}
.cegla.t-405{top:calc(var(--kal-godzina) * 6.75)}
.cegla.t-410{top:calc(var(--kal-godzina) * 6.833333)}
.cegla.t-415{top:calc(var(--kal-godzina) * 6.916667)}
.cegla.t-420{top:calc(var(--kal-godzina) * 7)}
.cegla.t-425{top:calc(var(--kal-godzina) * 7.083333)}
.cegla.t-430{top:calc(var(--kal-godzina) * 7.166667)}
.cegla.t-435{top:calc(var(--kal-godzina) * 7.25)}
.cegla.t-440{top:calc(var(--kal-godzina) * 7.333333)}
.cegla.t-445{top:calc(var(--kal-godzina) * 7.416667)}
.cegla.t-450{top:calc(var(--kal-godzina) * 7.5)}
.cegla.t-455{top:calc(var(--kal-godzina) * 7.583333)}
.cegla.t-460{top:calc(var(--kal-godzina) * 7.666667)}
.cegla.t-465{top:calc(var(--kal-godzina) * 7.75)}
.cegla.t-470{top:calc(var(--kal-godzina) * 7.833333)}
.cegla.t-475{top:calc(var(--kal-godzina) * 7.916667)}
.cegla.t-480{top:calc(var(--kal-godzina) * 8)}
.cegla.t-485{top:calc(var(--kal-godzina) * 8.083333)}
.cegla.t-490{top:calc(var(--kal-godzina) * 8.166667)}
.cegla.t-495{top:calc(var(--kal-godzina) * 8.25)}
.cegla.t-500{top:calc(var(--kal-godzina) * 8.333333)}
.cegla.t-505{top:calc(var(--kal-godzina) * 8.416667)}
.cegla.t-510{top:calc(var(--kal-godzina) * 8.5)}
.cegla.t-515{top:calc(var(--kal-godzina) * 8.583333)}
.cegla.t-520{top:calc(var(--kal-godzina) * 8.666667)}
.cegla.t-525{top:calc(var(--kal-godzina) * 8.75)}
.cegla.t-530{top:calc(var(--kal-godzina) * 8.833333)}
.cegla.t-535{top:calc(var(--kal-godzina) * 8.916667)}
.cegla.t-540{top:calc(var(--kal-godzina) * 9)}
.cegla.t-545{top:calc(var(--kal-godzina) * 9.083333)}
.cegla.t-550{top:calc(var(--kal-godzina) * 9.166667)}
.cegla.t-555{top:calc(var(--kal-godzina) * 9.25)}
.cegla.t-560{top:calc(var(--kal-godzina) * 9.333333)}
.cegla.t-565{top:calc(var(--kal-godzina) * 9.416667)}
.cegla.t-570{top:calc(var(--kal-godzina) * 9.5)}
.cegla.t-575{top:calc(var(--kal-godzina) * 9.583333)}
.cegla.t-580{top:calc(var(--kal-godzina) * 9.666667)}
.cegla.t-585{top:calc(var(--kal-godzina) * 9.75)}
.cegla.t-590{top:calc(var(--kal-godzina) * 9.833333)}
.cegla.t-595{top:calc(var(--kal-godzina) * 9.916667)}
.cegla.t-600{top:calc(var(--kal-godzina) * 10)}
.cegla.t-605{top:calc(var(--kal-godzina) * 10.083333)}
.cegla.t-610{top:calc(var(--kal-godzina) * 10.166667)}
.cegla.t-615{top:calc(var(--kal-godzina) * 10.25)}
.cegla.t-620{top:calc(var(--kal-godzina) * 10.333333)}
.cegla.t-625{top:calc(var(--kal-godzina) * 10.416667)}
.cegla.t-630{top:calc(var(--kal-godzina) * 10.5)}
.cegla.t-635{top:calc(var(--kal-godzina) * 10.583333)}
.cegla.t-640{top:calc(var(--kal-godzina) * 10.666667)}
.cegla.t-645{top:calc(var(--kal-godzina) * 10.75)}
.cegla.t-650{top:calc(var(--kal-godzina) * 10.833333)}
.cegla.t-655{top:calc(var(--kal-godzina) * 10.916667)}
.cegla.t-660{top:calc(var(--kal-godzina) * 11)}
.cegla.t-665{top:calc(var(--kal-godzina) * 11.083333)}
.cegla.t-670{top:calc(var(--kal-godzina) * 11.166667)}
.cegla.t-675{top:calc(var(--kal-godzina) * 11.25)}
.cegla.t-680{top:calc(var(--kal-godzina) * 11.333333)}
.cegla.t-685{top:calc(var(--kal-godzina) * 11.416667)}
.cegla.t-690{top:calc(var(--kal-godzina) * 11.5)}
.cegla.t-695{top:calc(var(--kal-godzina) * 11.583333)}
.cegla.t-700{top:calc(var(--kal-godzina) * 11.666667)}
.cegla.t-705{top:calc(var(--kal-godzina) * 11.75)}
.cegla.t-710{top:calc(var(--kal-godzina) * 11.833333)}
.cegla.t-715{top:calc(var(--kal-godzina) * 11.916667)}
.cegla.t-720{top:calc(var(--kal-godzina) * 12)}
.cegla.t-725{top:calc(var(--kal-godzina) * 12.083333)}
.cegla.t-730{top:calc(var(--kal-godzina) * 12.166667)}
.cegla.t-735{top:calc(var(--kal-godzina) * 12.25)}
.cegla.t-740{top:calc(var(--kal-godzina) * 12.333333)}
.cegla.t-745{top:calc(var(--kal-godzina) * 12.416667)}
.cegla.t-750{top:calc(var(--kal-godzina) * 12.5)}
.cegla.t-755{top:calc(var(--kal-godzina) * 12.583333)}
.cegla.t-760{top:calc(var(--kal-godzina) * 12.666667)}
.cegla.t-765{top:calc(var(--kal-godzina) * 12.75)}
.cegla.t-770{top:calc(var(--kal-godzina) * 12.833333)}
.cegla.t-775{top:calc(var(--kal-godzina) * 12.916667)}
.cegla.t-780{top:calc(var(--kal-godzina) * 13)}
.cegla.t-785{top:calc(var(--kal-godzina) * 13.083333)}
.cegla.t-790{top:calc(var(--kal-godzina) * 13.166667)}
.cegla.t-795{top:calc(var(--kal-godzina) * 13.25)}
.cegla.t-800{top:calc(var(--kal-godzina) * 13.333333)}
.cegla.t-805{top:calc(var(--kal-godzina) * 13.416667)}
.cegla.t-810{top:calc(var(--kal-godzina) * 13.5)}
.cegla.t-815{top:calc(var(--kal-godzina) * 13.583333)}
.cegla.t-820{top:calc(var(--kal-godzina) * 13.666667)}
.cegla.t-825{top:calc(var(--kal-godzina) * 13.75)}
.cegla.t-830{top:calc(var(--kal-godzina) * 13.833333)}
.cegla.t-835{top:calc(var(--kal-godzina) * 13.916667)}
.cegla.t-840{top:calc(var(--kal-godzina) * 14)}
.cegla.t-845{top:calc(var(--kal-godzina) * 14.083333)}
.cegla.t-850{top:calc(var(--kal-godzina) * 14.166667)}
.cegla.t-855{top:calc(var(--kal-godzina) * 14.25)}
.cegla.t-860{top:calc(var(--kal-godzina) * 14.333333)}
.cegla.t-865{top:calc(var(--kal-godzina) * 14.416667)}
.cegla.t-870{top:calc(var(--kal-godzina) * 14.5)}
.cegla.t-875{top:calc(var(--kal-godzina) * 14.583333)}
.cegla.t-880{top:calc(var(--kal-godzina) * 14.666667)}
.cegla.t-885{top:calc(var(--kal-godzina) * 14.75)}
.cegla.t-890{top:calc(var(--kal-godzina) * 14.833333)}
.cegla.t-895{top:calc(var(--kal-godzina) * 14.916667)}
.cegla.t-900{top:calc(var(--kal-godzina) * 15)}
.cegla.h-5{height:calc(var(--kal-godzina) * 0.083333 - 2px)}
.cegla.h-10{height:calc(var(--kal-godzina) * 0.166667 - 2px)}
.cegla.h-15{height:calc(var(--kal-godzina) * 0.25 - 2px)}
.cegla.h-20{height:calc(var(--kal-godzina) * 0.333333 - 2px)}
.cegla.h-25{height:calc(var(--kal-godzina) * 0.416667 - 2px)}
.cegla.h-30{height:calc(var(--kal-godzina) * 0.5 - 2px)}
.cegla.h-35{height:calc(var(--kal-godzina) * 0.583333 - 2px)}
.cegla.h-40{height:calc(var(--kal-godzina) * 0.666667 - 2px)}
.cegla.h-45{height:calc(var(--kal-godzina) * 0.75 - 2px)}
.cegla.h-50{height:calc(var(--kal-godzina) * 0.833333 - 2px)}
.cegla.h-55{height:calc(var(--kal-godzina) * 0.916667 - 2px)}
.cegla.h-60{height:calc(var(--kal-godzina) * 1 - 2px)}
.cegla.h-65{height:calc(var(--kal-godzina) * 1.083333 - 2px)}
.cegla.h-70{height:calc(var(--kal-godzina) * 1.166667 - 2px)}
.cegla.h-75{height:calc(var(--kal-godzina) * 1.25 - 2px)}
.cegla.h-80{height:calc(var(--kal-godzina) * 1.333333 - 2px)}
.cegla.h-85{height:calc(var(--kal-godzina) * 1.416667 - 2px)}
.cegla.h-90{height:calc(var(--kal-godzina) * 1.5 - 2px)}
.cegla.h-95{height:calc(var(--kal-godzina) * 1.583333 - 2px)}
.cegla.h-100{height:calc(var(--kal-godzina) * 1.666667 - 2px)}
.cegla.h-105{height:calc(var(--kal-godzina) * 1.75 - 2px)}
.cegla.h-110{height:calc(var(--kal-godzina) * 1.833333 - 2px)}
.cegla.h-115{height:calc(var(--kal-godzina) * 1.916667 - 2px)}
.cegla.h-120{height:calc(var(--kal-godzina) * 2 - 2px)}
.cegla.h-125{height:calc(var(--kal-godzina) * 2.083333 - 2px)}
.cegla.h-130{height:calc(var(--kal-godzina) * 2.166667 - 2px)}
.cegla.h-135{height:calc(var(--kal-godzina) * 2.25 - 2px)}
.cegla.h-140{height:calc(var(--kal-godzina) * 2.333333 - 2px)}
.cegla.h-145{height:calc(var(--kal-godzina) * 2.416667 - 2px)}
.cegla.h-150{height:calc(var(--kal-godzina) * 2.5 - 2px)}
.cegla.h-155{height:calc(var(--kal-godzina) * 2.583333 - 2px)}
.cegla.h-160{height:calc(var(--kal-godzina) * 2.666667 - 2px)}
.cegla.h-165{height:calc(var(--kal-godzina) * 2.75 - 2px)}
.cegla.h-170{height:calc(var(--kal-godzina) * 2.833333 - 2px)}
.cegla.h-175{height:calc(var(--kal-godzina) * 2.916667 - 2px)}
.cegla.h-180{height:calc(var(--kal-godzina) * 3 - 2px)}
.kal-kolumna .teraz.t-0{top:calc(var(--kal-godzina) * 0)}
.kal-kolumna .teraz.t-5{top:calc(var(--kal-godzina) * 0.083333)}
.kal-kolumna .teraz.t-10{top:calc(var(--kal-godzina) * 0.166667)}
.kal-kolumna .teraz.t-15{top:calc(var(--kal-godzina) * 0.25)}
.kal-kolumna .teraz.t-20{top:calc(var(--kal-godzina) * 0.333333)}
.kal-kolumna .teraz.t-25{top:calc(var(--kal-godzina) * 0.416667)}
.kal-kolumna .teraz.t-30{top:calc(var(--kal-godzina) * 0.5)}
.kal-kolumna .teraz.t-35{top:calc(var(--kal-godzina) * 0.583333)}
.kal-kolumna .teraz.t-40{top:calc(var(--kal-godzina) * 0.666667)}
.kal-kolumna .teraz.t-45{top:calc(var(--kal-godzina) * 0.75)}
.kal-kolumna .teraz.t-50{top:calc(var(--kal-godzina) * 0.833333)}
.kal-kolumna .teraz.t-55{top:calc(var(--kal-godzina) * 0.916667)}
.kal-kolumna .teraz.t-60{top:calc(var(--kal-godzina) * 1)}
.kal-kolumna .teraz.t-65{top:calc(var(--kal-godzina) * 1.083333)}
.kal-kolumna .teraz.t-70{top:calc(var(--kal-godzina) * 1.166667)}
.kal-kolumna .teraz.t-75{top:calc(var(--kal-godzina) * 1.25)}
.kal-kolumna .teraz.t-80{top:calc(var(--kal-godzina) * 1.333333)}
.kal-kolumna .teraz.t-85{top:calc(var(--kal-godzina) * 1.416667)}
.kal-kolumna .teraz.t-90{top:calc(var(--kal-godzina) * 1.5)}
.kal-kolumna .teraz.t-95{top:calc(var(--kal-godzina) * 1.583333)}
.kal-kolumna .teraz.t-100{top:calc(var(--kal-godzina) * 1.666667)}
.kal-kolumna .teraz.t-105{top:calc(var(--kal-godzina) * 1.75)}
.kal-kolumna .teraz.t-110{top:calc(var(--kal-godzina) * 1.833333)}
.kal-kolumna .teraz.t-115{top:calc(var(--kal-godzina) * 1.916667)}
.kal-kolumna .teraz.t-120{top:calc(var(--kal-godzina) * 2)}
.kal-kolumna .teraz.t-125{top:calc(var(--kal-godzina) * 2.083333)}
.kal-kolumna .teraz.t-130{top:calc(var(--kal-godzina) * 2.166667)}
.kal-kolumna .teraz.t-135{top:calc(var(--kal-godzina) * 2.25)}
.kal-kolumna .teraz.t-140{top:calc(var(--kal-godzina) * 2.333333)}
.kal-kolumna .teraz.t-145{top:calc(var(--kal-godzina) * 2.416667)}
.kal-kolumna .teraz.t-150{top:calc(var(--kal-godzina) * 2.5)}
.kal-kolumna .teraz.t-155{top:calc(var(--kal-godzina) * 2.583333)}
.kal-kolumna .teraz.t-160{top:calc(var(--kal-godzina) * 2.666667)}
.kal-kolumna .teraz.t-165{top:calc(var(--kal-godzina) * 2.75)}
.kal-kolumna .teraz.t-170{top:calc(var(--kal-godzina) * 2.833333)}
.kal-kolumna .teraz.t-175{top:calc(var(--kal-godzina) * 2.916667)}
.kal-kolumna .teraz.t-180{top:calc(var(--kal-godzina) * 3)}
.kal-kolumna .teraz.t-185{top:calc(var(--kal-godzina) * 3.083333)}
.kal-kolumna .teraz.t-190{top:calc(var(--kal-godzina) * 3.166667)}
.kal-kolumna .teraz.t-195{top:calc(var(--kal-godzina) * 3.25)}
.kal-kolumna .teraz.t-200{top:calc(var(--kal-godzina) * 3.333333)}
.kal-kolumna .teraz.t-205{top:calc(var(--kal-godzina) * 3.416667)}
.kal-kolumna .teraz.t-210{top:calc(var(--kal-godzina) * 3.5)}
.kal-kolumna .teraz.t-215{top:calc(var(--kal-godzina) * 3.583333)}
.kal-kolumna .teraz.t-220{top:calc(var(--kal-godzina) * 3.666667)}
.kal-kolumna .teraz.t-225{top:calc(var(--kal-godzina) * 3.75)}
.kal-kolumna .teraz.t-230{top:calc(var(--kal-godzina) * 3.833333)}
.kal-kolumna .teraz.t-235{top:calc(var(--kal-godzina) * 3.916667)}
.kal-kolumna .teraz.t-240{top:calc(var(--kal-godzina) * 4)}
.kal-kolumna .teraz.t-245{top:calc(var(--kal-godzina) * 4.083333)}
.kal-kolumna .teraz.t-250{top:calc(var(--kal-godzina) * 4.166667)}
.kal-kolumna .teraz.t-255{top:calc(var(--kal-godzina) * 4.25)}
.kal-kolumna .teraz.t-260{top:calc(var(--kal-godzina) * 4.333333)}
.kal-kolumna .teraz.t-265{top:calc(var(--kal-godzina) * 4.416667)}
.kal-kolumna .teraz.t-270{top:calc(var(--kal-godzina) * 4.5)}
.kal-kolumna .teraz.t-275{top:calc(var(--kal-godzina) * 4.583333)}
.kal-kolumna .teraz.t-280{top:calc(var(--kal-godzina) * 4.666667)}
.kal-kolumna .teraz.t-285{top:calc(var(--kal-godzina) * 4.75)}
.kal-kolumna .teraz.t-290{top:calc(var(--kal-godzina) * 4.833333)}
.kal-kolumna .teraz.t-295{top:calc(var(--kal-godzina) * 4.916667)}
.kal-kolumna .teraz.t-300{top:calc(var(--kal-godzina) * 5)}
.kal-kolumna .teraz.t-305{top:calc(var(--kal-godzina) * 5.083333)}
.kal-kolumna .teraz.t-310{top:calc(var(--kal-godzina) * 5.166667)}
.kal-kolumna .teraz.t-315{top:calc(var(--kal-godzina) * 5.25)}
.kal-kolumna .teraz.t-320{top:calc(var(--kal-godzina) * 5.333333)}
.kal-kolumna .teraz.t-325{top:calc(var(--kal-godzina) * 5.416667)}
.kal-kolumna .teraz.t-330{top:calc(var(--kal-godzina) * 5.5)}
.kal-kolumna .teraz.t-335{top:calc(var(--kal-godzina) * 5.583333)}
.kal-kolumna .teraz.t-340{top:calc(var(--kal-godzina) * 5.666667)}
.kal-kolumna .teraz.t-345{top:calc(var(--kal-godzina) * 5.75)}
.kal-kolumna .teraz.t-350{top:calc(var(--kal-godzina) * 5.833333)}
.kal-kolumna .teraz.t-355{top:calc(var(--kal-godzina) * 5.916667)}
.kal-kolumna .teraz.t-360{top:calc(var(--kal-godzina) * 6)}
.kal-kolumna .teraz.t-365{top:calc(var(--kal-godzina) * 6.083333)}
.kal-kolumna .teraz.t-370{top:calc(var(--kal-godzina) * 6.166667)}
.kal-kolumna .teraz.t-375{top:calc(var(--kal-godzina) * 6.25)}
.kal-kolumna .teraz.t-380{top:calc(var(--kal-godzina) * 6.333333)}
.kal-kolumna .teraz.t-385{top:calc(var(--kal-godzina) * 6.416667)}
.kal-kolumna .teraz.t-390{top:calc(var(--kal-godzina) * 6.5)}
.kal-kolumna .teraz.t-395{top:calc(var(--kal-godzina) * 6.583333)}
.kal-kolumna .teraz.t-400{top:calc(var(--kal-godzina) * 6.666667)}
.kal-kolumna .teraz.t-405{top:calc(var(--kal-godzina) * 6.75)}
.kal-kolumna .teraz.t-410{top:calc(var(--kal-godzina) * 6.833333)}
.kal-kolumna .teraz.t-415{top:calc(var(--kal-godzina) * 6.916667)}
.kal-kolumna .teraz.t-420{top:calc(var(--kal-godzina) * 7)}
.kal-kolumna .teraz.t-425{top:calc(var(--kal-godzina) * 7.083333)}
.kal-kolumna .teraz.t-430{top:calc(var(--kal-godzina) * 7.166667)}
.kal-kolumna .teraz.t-435{top:calc(var(--kal-godzina) * 7.25)}
.kal-kolumna .teraz.t-440{top:calc(var(--kal-godzina) * 7.333333)}
.kal-kolumna .teraz.t-445{top:calc(var(--kal-godzina) * 7.416667)}
.kal-kolumna .teraz.t-450{top:calc(var(--kal-godzina) * 7.5)}
.kal-kolumna .teraz.t-455{top:calc(var(--kal-godzina) * 7.583333)}
.kal-kolumna .teraz.t-460{top:calc(var(--kal-godzina) * 7.666667)}
.kal-kolumna .teraz.t-465{top:calc(var(--kal-godzina) * 7.75)}
.kal-kolumna .teraz.t-470{top:calc(var(--kal-godzina) * 7.833333)}
.kal-kolumna .teraz.t-475{top:calc(var(--kal-godzina) * 7.916667)}
.kal-kolumna .teraz.t-480{top:calc(var(--kal-godzina) * 8)}
.kal-kolumna .teraz.t-485{top:calc(var(--kal-godzina) * 8.083333)}
.kal-kolumna .teraz.t-490{top:calc(var(--kal-godzina) * 8.166667)}
.kal-kolumna .teraz.t-495{top:calc(var(--kal-godzina) * 8.25)}
.kal-kolumna .teraz.t-500{top:calc(var(--kal-godzina) * 8.333333)}
.kal-kolumna .teraz.t-505{top:calc(var(--kal-godzina) * 8.416667)}
.kal-kolumna .teraz.t-510{top:calc(var(--kal-godzina) * 8.5)}
.kal-kolumna .teraz.t-515{top:calc(var(--kal-godzina) * 8.583333)}
.kal-kolumna .teraz.t-520{top:calc(var(--kal-godzina) * 8.666667)}
.kal-kolumna .teraz.t-525{top:calc(var(--kal-godzina) * 8.75)}
.kal-kolumna .teraz.t-530{top:calc(var(--kal-godzina) * 8.833333)}
.kal-kolumna .teraz.t-535{top:calc(var(--kal-godzina) * 8.916667)}
.kal-kolumna .teraz.t-540{top:calc(var(--kal-godzina) * 9)}
.kal-kolumna .teraz.t-545{top:calc(var(--kal-godzina) * 9.083333)}
.kal-kolumna .teraz.t-550{top:calc(var(--kal-godzina) * 9.166667)}
.kal-kolumna .teraz.t-555{top:calc(var(--kal-godzina) * 9.25)}
.kal-kolumna .teraz.t-560{top:calc(var(--kal-godzina) * 9.333333)}
.kal-kolumna .teraz.t-565{top:calc(var(--kal-godzina) * 9.416667)}
.kal-kolumna .teraz.t-570{top:calc(var(--kal-godzina) * 9.5)}
.kal-kolumna .teraz.t-575{top:calc(var(--kal-godzina) * 9.583333)}
.kal-kolumna .teraz.t-580{top:calc(var(--kal-godzina) * 9.666667)}
.kal-kolumna .teraz.t-585{top:calc(var(--kal-godzina) * 9.75)}
.kal-kolumna .teraz.t-590{top:calc(var(--kal-godzina) * 9.833333)}
.kal-kolumna .teraz.t-595{top:calc(var(--kal-godzina) * 9.916667)}
.kal-kolumna .teraz.t-600{top:calc(var(--kal-godzina) * 10)}
.kal-kolumna .teraz.t-605{top:calc(var(--kal-godzina) * 10.083333)}
.kal-kolumna .teraz.t-610{top:calc(var(--kal-godzina) * 10.166667)}
.kal-kolumna .teraz.t-615{top:calc(var(--kal-godzina) * 10.25)}
.kal-kolumna .teraz.t-620{top:calc(var(--kal-godzina) * 10.333333)}
.kal-kolumna .teraz.t-625{top:calc(var(--kal-godzina) * 10.416667)}
.kal-kolumna .teraz.t-630{top:calc(var(--kal-godzina) * 10.5)}
.kal-kolumna .teraz.t-635{top:calc(var(--kal-godzina) * 10.583333)}
.kal-kolumna .teraz.t-640{top:calc(var(--kal-godzina) * 10.666667)}
.kal-kolumna .teraz.t-645{top:calc(var(--kal-godzina) * 10.75)}
.kal-kolumna .teraz.t-650{top:calc(var(--kal-godzina) * 10.833333)}
.kal-kolumna .teraz.t-655{top:calc(var(--kal-godzina) * 10.916667)}
.kal-kolumna .teraz.t-660{top:calc(var(--kal-godzina) * 11)}
.kal-kolumna .teraz.t-665{top:calc(var(--kal-godzina) * 11.083333)}
.kal-kolumna .teraz.t-670{top:calc(var(--kal-godzina) * 11.166667)}
.kal-kolumna .teraz.t-675{top:calc(var(--kal-godzina) * 11.25)}
.kal-kolumna .teraz.t-680{top:calc(var(--kal-godzina) * 11.333333)}
.kal-kolumna .teraz.t-685{top:calc(var(--kal-godzina) * 11.416667)}
.kal-kolumna .teraz.t-690{top:calc(var(--kal-godzina) * 11.5)}
.kal-kolumna .teraz.t-695{top:calc(var(--kal-godzina) * 11.583333)}
.kal-kolumna .teraz.t-700{top:calc(var(--kal-godzina) * 11.666667)}
.kal-kolumna .teraz.t-705{top:calc(var(--kal-godzina) * 11.75)}
.kal-kolumna .teraz.t-710{top:calc(var(--kal-godzina) * 11.833333)}
.kal-kolumna .teraz.t-715{top:calc(var(--kal-godzina) * 11.916667)}
.kal-kolumna .teraz.t-720{top:calc(var(--kal-godzina) * 12)}
.kal-kolumna .teraz.t-725{top:calc(var(--kal-godzina) * 12.083333)}
.kal-kolumna .teraz.t-730{top:calc(var(--kal-godzina) * 12.166667)}
.kal-kolumna .teraz.t-735{top:calc(var(--kal-godzina) * 12.25)}
.kal-kolumna .teraz.t-740{top:calc(var(--kal-godzina) * 12.333333)}
.kal-kolumna .teraz.t-745{top:calc(var(--kal-godzina) * 12.416667)}
.kal-kolumna .teraz.t-750{top:calc(var(--kal-godzina) * 12.5)}
.kal-kolumna .teraz.t-755{top:calc(var(--kal-godzina) * 12.583333)}
.kal-kolumna .teraz.t-760{top:calc(var(--kal-godzina) * 12.666667)}
.kal-kolumna .teraz.t-765{top:calc(var(--kal-godzina) * 12.75)}
.kal-kolumna .teraz.t-770{top:calc(var(--kal-godzina) * 12.833333)}
.kal-kolumna .teraz.t-775{top:calc(var(--kal-godzina) * 12.916667)}
.kal-kolumna .teraz.t-780{top:calc(var(--kal-godzina) * 13)}
.kal-kolumna .teraz.t-785{top:calc(var(--kal-godzina) * 13.083333)}
.kal-kolumna .teraz.t-790{top:calc(var(--kal-godzina) * 13.166667)}
.kal-kolumna .teraz.t-795{top:calc(var(--kal-godzina) * 13.25)}
.kal-kolumna .teraz.t-800{top:calc(var(--kal-godzina) * 13.333333)}
.kal-kolumna .teraz.t-805{top:calc(var(--kal-godzina) * 13.416667)}
.kal-kolumna .teraz.t-810{top:calc(var(--kal-godzina) * 13.5)}
.kal-kolumna .teraz.t-815{top:calc(var(--kal-godzina) * 13.583333)}
.kal-kolumna .teraz.t-820{top:calc(var(--kal-godzina) * 13.666667)}
.kal-kolumna .teraz.t-825{top:calc(var(--kal-godzina) * 13.75)}
.kal-kolumna .teraz.t-830{top:calc(var(--kal-godzina) * 13.833333)}
.kal-kolumna .teraz.t-835{top:calc(var(--kal-godzina) * 13.916667)}
.kal-kolumna .teraz.t-840{top:calc(var(--kal-godzina) * 14)}
.kal-kolumna .teraz.t-845{top:calc(var(--kal-godzina) * 14.083333)}
.kal-kolumna .teraz.t-850{top:calc(var(--kal-godzina) * 14.166667)}
.kal-kolumna .teraz.t-855{top:calc(var(--kal-godzina) * 14.25)}
.kal-kolumna .teraz.t-860{top:calc(var(--kal-godzina) * 14.333333)}
.kal-kolumna .teraz.t-865{top:calc(var(--kal-godzina) * 14.416667)}
.kal-kolumna .teraz.t-870{top:calc(var(--kal-godzina) * 14.5)}
.kal-kolumna .teraz.t-875{top:calc(var(--kal-godzina) * 14.583333)}
.kal-kolumna .teraz.t-880{top:calc(var(--kal-godzina) * 14.666667)}
.kal-kolumna .teraz.t-885{top:calc(var(--kal-godzina) * 14.75)}
.kal-kolumna .teraz.t-890{top:calc(var(--kal-godzina) * 14.833333)}
.kal-kolumna .teraz.t-895{top:calc(var(--kal-godzina) * 14.916667)}
.kal-kolumna .teraz.t-900{top:calc(var(--kal-godzina) * 15)}

/* barwy grup — przypisywane po numerze grupy, zawsze te same */
.cegla.paleta-0{background:#15294D}
.kal-agenda .pasek.paleta-0{background:#15294D}
.kal-legenda .probka.paleta-0{background:#15294D}
.cegla.paleta-1{background:#C8102E}
.kal-agenda .pasek.paleta-1{background:#C8102E}
.kal-legenda .probka.paleta-1{background:#C8102E}
.cegla.paleta-2{background:#1F6B3B}
.kal-agenda .pasek.paleta-2{background:#1F6B3B}
.kal-legenda .probka.paleta-2{background:#1F6B3B}
.cegla.paleta-3{background:#8A6A18}
.kal-agenda .pasek.paleta-3{background:#8A6A18}
.kal-legenda .probka.paleta-3{background:#8A6A18}
.cegla.paleta-4{background:#4A3B78}
.kal-agenda .pasek.paleta-4{background:#4A3B78}
.kal-legenda .probka.paleta-4{background:#4A3B78}
.cegla.paleta-5{background:#0F6C7A}
.kal-agenda .pasek.paleta-5{background:#0F6C7A}
.kal-legenda .probka.paleta-5{background:#0F6C7A}
.cegla.paleta-6{background:#8C4A1E}
.kal-agenda .pasek.paleta-6{background:#8C4A1E}
.kal-legenda .probka.paleta-6{background:#8C4A1E}
.cegla.paleta-7{background:#5B6B22}
.kal-agenda .pasek.paleta-7{background:#5B6B22}
.kal-legenda .probka.paleta-7{background:#5B6B22}

/* wypełnienie paska postępu — również bez atrybutu style */
.pasek-postepu i.w-0{width:0%}
.pasek-postepu i.w-5{width:5%}
.pasek-postepu i.w-10{width:10%}
.pasek-postepu i.w-15{width:15%}
.pasek-postepu i.w-20{width:20%}
.pasek-postepu i.w-25{width:25%}
.pasek-postepu i.w-30{width:30%}
.pasek-postepu i.w-35{width:35%}
.pasek-postepu i.w-40{width:40%}
.pasek-postepu i.w-45{width:45%}
.pasek-postepu i.w-50{width:50%}
.pasek-postepu i.w-55{width:55%}
.pasek-postepu i.w-60{width:60%}
.pasek-postepu i.w-65{width:65%}
.pasek-postepu i.w-70{width:70%}
.pasek-postepu i.w-75{width:75%}
.pasek-postepu i.w-80{width:80%}
.pasek-postepu i.w-85{width:85%}
.pasek-postepu i.w-90{width:90%}
.pasek-postepu i.w-95{width:95%}
.pasek-postepu i.w-100{width:100%}