:root{
    --bg:#f4f6fb;
    --card:#ffffff;
    --ink:#1c2333;
    --muted:#7c869c;
    --line:#e4e8f2;
    --shadow:0 1px 2px rgba(20,28,55,.04),0 8px 30px rgba(20,28,55,.07);
    --radius:14px;
  }

  /* ---- kolory przedmiotow ---- */
  .s-wf           { --c:#2a8fbd; --b:#dff1fa; }
  .s-basen        { --c:#2a8fbd; --b:#dff1fa; }
  .s-angielski    { --c:#c0397f; --b:#fde3f1; }
  .s-geografia    { --c:#1c6fc4; --b:#dcebfb; }
  .s-gw           { --c:#a07b53; --b:#f6ece0; }
  .s-matematyka   { --c:#2f8a5b; --b:#dff3e6; }
  .s-historia     { --c:#c73a2a; --b:#fce0dc; }
  .s-polski       { --c:#c96a1e; --b:#fceada; }
  .s-informatyka  { --c:#9c8400; --b:#fbf3c8; }
  .s-programowanie{ --c:#9c8400; --b:#fbf3c8; }
  .s-francuski    { --c:#3a8a2f; --b:#e2f5dc; }
  .s-religia      { --c:#8a5ba8; --b:#f1e6f8; }
  .s-chemia       { --c:#0f8f8f; --b:#d9f3f3; }
  .s-fizyka       { --c:#5560c8; --b:#e3e6fb; }
  .s-biologia     { --c:#4f9a2a; --b:#e6f5d8; }
  .s-lacina       { --c:#7a6a3a; --b:#f2eeda; }
  .s-eo           { --c:#b0562a; --b:#fbe7d9; }
  .s-ez           { --c:#2b8a74; --b:#dcf1eb; }
  .s-edb          { --c:#8a3b52; --b:#f7dfe6; }
  .s-biznes       { --c:#4a6ea8; --b:#e2eaf7; }
  .s-filozofia    { --c:#6b5bb0; --b:#e8e4f8; }
  .s-prawo        { --c:#7b5230; --b:#f2e6da; }
  .s-fakultet     { --c:#6b7280; --b:#eceef2; }
  .s-default      { --c:#5b6787; --b:#eef1f7; }

  /* ---- kolory klas (plan nauczyciela koloruje klasa, nie przedmiot) ---- */
  .k-1a  { --c:#c0397f; --b:#fde3f1; }
  .k-1b  { --c:#1c6fc4; --b:#dcebfb; }
  .k-1c  { --c:#2f8a5b; --b:#dff3e6; }
  .k-2ab { --c:#c96a1e; --b:#fceada; }
  .k-2c  { --c:#8a5ba8; --b:#f1e6f8; }
  .k-2d  { --c:#0f8f8f; --b:#d9f3f3; }
  .k-2e  { --c:#c73a2a; --b:#fce0dc; }
  .k-3a  { --c:#5560c8; --b:#e3e6fb; }
  .k-3b  { --c:#4f9a2a; --b:#e6f5d8; }
  .k-3c  { --c:#a07b53; --b:#f6ece0; }
  .k-3d  { --c:#9c8400; --b:#fbf3c8; }
  .k-4a  { --c:#2a8fbd; --b:#dff1fa; }
  .k-4b  { --c:#b0562a; --b:#fbe7d9; }
  .k-4c  { --c:#7a6a3a; --b:#f2eeda; }
  .k-4d  { --c:#6b5bb0; --b:#e8e4f8; }
  .k-4e  { --c:#2b8a74; --b:#dcf1eb; }
  .k-gw  { --c:#c73a2a; --b:#fce0dc; }
  .k-def { --c:#5b6787; --b:#eef1f7; }

  *{box-sizing:border-box}
  body{
    margin:0;
    min-height:100vh;
    padding:32px 20px 64px;
    background:
      radial-gradient(900px 500px at 15% -10%, #e8efff 0%, transparent 60%),
      radial-gradient(700px 420px at 95% 0%, #ffeef6 0%, transparent 55%),
      var(--bg);
    /* Przy krotkiej stronie - na przyklad gdy stoi samo pytanie kreatora -
       gradient konczyl sie razem z trescia i zaczynal od nowa nizej.
       min-height rozciaga tlo na cale okno, no-repeat gasi powtorke. */
    background-repeat:no-repeat;
    color:var(--ink);
    font:15px/1.45 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{max-width:1400px;margin:0 auto}

  /* Naglowek idzie systemowym krojem - ten sam, co reszta strony. Rozmiar
     skaluje sie z szerokoscia, bo najdluzsze nazwiska (Pieniazek-Paradowska)
     przy stalym rozmiarze lamaly sie na waskim ekranie. */
  .klasa{
    margin:0 0 22px;
    text-align:center;
    font-size:clamp(30px, 6vw, 56px);
    font-weight:600;
    line-height:1.1;
    color:#2b3550;
  }


  .board{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:10px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  table{
    border-collapse:separate;
    border-spacing:5px;
    width:100%;
    min-width:1320px;
    table-layout:fixed;
  }

  th,td{padding:0}

  /* dzieki temu height:100% na kafelku dziala i kazdy jest tej samej wysokosci */
  tbody td, tbody th{height:1px}

  thead th{
    background:#f7f9fd;
    border:1px solid var(--line);
    border-radius:10px;
    padding:9px 4px;
    text-align:center;
  }
  thead th .no{display:block;font-size:17px;font-weight:700;color:var(--ink)}
  thead th .hh{
    display:block;margin-top:2px;
    font-size:11.5px;font-weight:500;color:var(--muted);white-space:nowrap;
  }
  /* kolumna dni zostaje na miejscu przy przewijaniu w bok */
  /* table-layout:fixed czyta szerokosci kolumn tylko z pierwszego wiersza,
     wiec szerokosc kolumny dni musi byc ustawiona wlasnie tutaj */
  thead th.corner{
    width:74px;
    background:var(--card);
    border-color:transparent;
    position:sticky;left:0;z-index:3;
    box-shadow:-12px 0 0 var(--card);
  }

  /* ---- eksport planszy ---- */
  .eksport{display:flex;flex-direction:column;gap:4px;align-items:stretch}
  .eksport-btn{
    padding:3px 0;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--card);
    color:#4b5570;
    font:inherit;font-size:10.5px;font-weight:800;letter-spacing:.06em;
    cursor:pointer;
    transition:border-color .12s ease, color .12s ease, background .12s ease;
  }
  .eksport-btn:hover{border-color:#2b3550;background:#2b3550;color:#fff}
  .eksport-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(43,53,80,.18)}
  .eksport-btn[disabled]{opacity:.55;cursor:default}

  /* w trakcie eksportu plansza pokazuje sie w calosci, bez przyciskow */
  body.eksportowanie .eksport{visibility:hidden}
  body.eksportowanie .board{overflow:visible}
  /* przyklejone naglowki rozjechalyby rysowany obrazek */
  body.eksportowanie thead th.corner,
  body.eksportowanie th.day{position:static;box-shadow:none}
  body.eksportowanie .lesson{transform:none;box-shadow:none}

  /* ---- druk: na papier idzie sama plansza ---- */
  @media print{
    @page{size:A4 landscape;margin:8mm}
    body{padding:0;background:#fff}
    body > .wrap > *:not(.board),
    .wybor, .stopka{display:none !important}
    .board{
      overflow:visible;
      border:0;border-radius:0;box-shadow:none;padding:0;
    }
    table{min-width:0;width:var(--druk-szer, 100%);border-spacing:4px}
    .lesson{min-height:0;break-inside:avoid}
    .lesson:hover{transform:none;box-shadow:none}
    .eksport{display:none !important}
    thead th.corner, th.day{box-shadow:none}
  }

  th.day{
    width:74px;
    background:#eef2fa;
    border:1px solid var(--line);
    border-radius:10px;
    font-size:16px;font-weight:700;letter-spacing:.06em;color:#3d4a66;
    position:sticky;left:0;z-index:2;
    box-shadow:-12px 0 0 var(--card), 8px 0 14px -8px rgba(20,28,55,.18);
  }

  td.empty{
    background:repeating-linear-gradient(135deg,#fafbfe 0 6px,#f4f6fb 6px 12px);
    border:1px dashed #e8ecf5;
    border-radius:10px;
  }

  /* Dzien bez ani jednej lekcji zwijal sie do paska grubosci obramowania
     i wygladal jak blad. Dostaje wlasna, wyraznie nizsza wysokosc. */
  tr.dzien-pusty th.day, tr.dzien-pusty td{height:66px}

  /* Wlasny plan startuje pusty, ale ma wygladac jak plan gotowy do
     wypelnienia, a nie jak piec cienkich paskow. */
  body[data-moj] tbody td,
  body[data-moj] tbody th.day{height:118px}

  /* ---- gdzie jestesmy teraz ---- */
  tr.dzis th.day{
    background:#2b3550;
    border-color:#2b3550;
    color:#fff;
  }
  thead th.teraz{
    background:#e8effe;
    border-color:#9db2e0;
    box-shadow:0 0 0 1px #9db2e0 inset;
  }
  thead th.teraz .no{color:#22305a}
  thead th.teraz .hh{color:#4a5f92;font-weight:700}

  .lesson{
    display:flex;
    flex-direction:column;
    gap:3px;
    height:100%;
    min-height:118px;
    padding:9px 10px;
    border:1px solid color-mix(in srgb, var(--c) 18%, #fff);
    border-radius:10px;
    background:var(--b);
    text-align:left;
    transition:transform .14s ease, box-shadow .14s ease;
  }
  .lesson:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,28,55,.13)}
  .lesson .name{
    font-size:14px;font-weight:700;line-height:1.25;
    color:color-mix(in srgb, var(--c) 78%, #101828);
    overflow-wrap:break-word;
  }
  .lesson .grp{
    align-self:flex-start;
    margin-top:1px;
    padding:1px 7px;
    border-radius:999px;
    background:color-mix(in srgb, var(--c) 16%, #fff);
    color:var(--c);
    font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  }
  /* Nazwisko, sala i klasa prowadza do swoich planow, ale w kafelku maja
     wygladac jak zwykly tekst - podkreslenie dopiero pod kursorem. */
  .lesson a{color:inherit;text-decoration:none}
  .lesson a:hover{text-decoration:underline}
  .lesson a:focus-visible{
    outline:2px solid #2b3550;outline-offset:1px;border-radius:3px;
  }

  .lesson .teacher{margin-top:auto;font-size:12.5px;color:#4b5570}
  .lesson .podgrupa{font-size:11.5px;color:#4b5570}
  /* inne klasy na tej samej lekcji - drobne, bo to tylko przypis */
  .lesson .razem{
    margin-top:5px;padding-top:4px;
    border-top:1px dashed color-mix(in srgb, var(--c) 28%, #fff);
    color:color-mix(in srgb, var(--c) 55%, #55607a);
    font-size:10.5px;line-height:1.3;
  }
  .lesson .razem b{font-weight:800}
  .lesson .room{
    font-size:12px;font-weight:600;
    color:color-mix(in srgb, var(--c) 62%, #333c52);
    font-variant-numeric:tabular-nums;
  }

  /* ---- kafelek w planie nauczyciela ---- */
  .lesson .kl{
    font-size:26px;font-weight:800;line-height:1;letter-spacing:-.01em;
    color:color-mix(in srgb, var(--c) 80%, #101828);
  }
  .lesson .co{
    margin-top:2px;
    font-size:12.5px;font-weight:600;line-height:1.25;
    color:color-mix(in srgb, var(--c) 72%, #333c52);
  }
  .lesson .kl + .room, .lesson .co + .room{margin-top:auto}

  /* dwie rozne lekcje nauczyciela w tej samej godzinie */
  .lesson.kadra-split{gap:0}
  .kadra-row{display:flex;flex-direction:column;gap:2px;padding:5px 0}
  .kadra-row + .kadra-row{
    border-top:1px dashed color-mix(in srgb, var(--c) 30%, #fff);
  }
  .kadra-row .kl{font-size:19px}
  .kadra-row .room{margin-top:2px}

  /* ---- lekcja dzielona na grupy ---- */
  .lesson.split{gap:0}
  .lesson.split .name{margin-bottom:6px}
  .grp-row{
    display:flex;
    align-items:center;
    gap:6px;
    padding:2px 0;
  }
  .grp-row + .grp-row{
    border-top:1px dashed color-mix(in srgb, var(--c) 30%, #fff);
  }
  .grp-row:last-child{padding-bottom:0}

  /* polowa okienka nalezaca do czesci klasy, ktora ma wtedy wolne */
  .grp-row.pusto{opacity:.45}
  .grp-row.pusto .gtag{
    background:transparent;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, #fff);
  }
  .grp-row.pusto .teacher{font-style:italic}
  .gtag{
    flex:0 0 auto;
    min-width:19px;height:19px;
    padding:0 5px;
    display:grid;place-items:center;
    border-radius:6px;
    white-space:nowrap;
    background:color-mix(in srgb, var(--c) 20%, #fff);
    color:var(--c);
    font-size:11px;font-weight:800;
    font-variant-numeric:tabular-nums;
  }
  /* Nauczyciel i sala ida w jednej linii i zawijaja sie dopiero, gdy nie
     wchodza - przy 3 jezyku sa cztery takie wiersze, wiec kazda zaoszczedzona
     linia to osiem mniej w calym kafelku. */
  .ginfo{
    display:flex;flex-wrap:wrap;align-items:baseline;
    column-gap:6px;line-height:1.2;min-width:0;
  }
  .ginfo .sub{
    flex:0 0 100%;
    font-size:11px;font-weight:700;
    color:color-mix(in srgb, var(--c) 70%, #101828);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .ginfo .teacher{
    margin-top:0;
    font-size:12px;
    overflow-wrap:break-word;
  }
  .ginfo .room{white-space:nowrap}

  /* W kafelku dzielonym kazdy wiersz musi zostac jednoliniowy. Przy 3 jezyku
     takich wierszy sa cztery, wiec jedno zawiniete nazwisko rozciagalo caly
     wiersz tabeli ze 118 na 196 pikseli. Za dlugie nazwisko dostaje
     wielokropek, a pelne i tak siedzi w dymku kafelka. */
  /* to plakietka grupy, nie tekst, dyktowala wysokosc wiersza */
  .lesson.split .gtag{height:16px;min-width:17px;padding:0 4px;font-size:10px}
  .lesson.split .ginfo{flex-wrap:nowrap}
  /* wiersz z osobnym podpisem grupy nadal potrzebuje drugiej linii */
  .lesson.split .ginfo:has(.sub){flex-wrap:wrap}
  .lesson.split .ginfo .teacher{
    flex:1 1 auto;
    min-width:0;
    font-size:11px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .lesson.split .ginfo .room{flex:0 0 auto;font-size:11px}

  /* =========================================================
     Wybor planu - wlasny select. Natywny <select> nie pozwala na
     sekcje, wyszukiwarke ani wlasne kolory, a pozycji jest ponad 60.
     ========================================================= */
  /* pasek nad plansza: wybor planu i przycisk "Moj plan" */
  .pasek{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;
    margin:0 auto 22px;
  }
  .wybor{position:relative;width:min(340px,100%)}

  .moj-plan{
    display:inline-flex;align-items:center;
    height:40px;
    padding:0 16px;
    text-decoration:none;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--card);
    box-shadow:0 1px 2px rgba(20,28,55,.05);
    color:var(--ink);
    font:inherit;font-size:14px;font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    transition:border-color .12s ease, background .12s ease, color .12s ease;
  }
  .moj-plan:hover{border-color:#2b3550;background:#2b3550;color:#fff}
  .moj-plan:focus-visible{
    outline:none;border-color:#2b3550;box-shadow:0 0 0 3px rgba(43,53,80,.16);
  }

  /* Reset kasuje wybor uzytkownika, wiec ma kolor ostrzezenia */
  .moj-plan-reset{color:#b32d1f;border-color:#f0c9c3}
  .moj-plan-reset:hover{border-color:#b32d1f;background:#b32d1f;color:#fff}
  .moj-plan-reset:focus-visible{
    border-color:#b32d1f;box-shadow:0 0 0 3px rgba(179,45,31,.18);
  }

  .wybor-trigger{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    width:100%;
    height:40px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--card);
    box-shadow:0 1px 2px rgba(20,28,55,.05);
    color:var(--ink);
    font:inherit;font-size:14px;font-weight:600;
    text-align:left;
    cursor:pointer;
    transition:border-color .12s ease, box-shadow .12s ease;
  }
  .wybor-trigger:hover{border-color:#c9d2e6}
  .wybor-trigger:focus-visible{
    outline:none;
    border-color:#2b3550;
    box-shadow:0 0 0 3px rgba(43,53,80,.16);
  }
  .wybor-etykieta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wybor-strzalka{
    flex:0 0 auto;width:16px;height:16px;color:var(--muted);
    transition:transform .16s ease;
  }
  .wybor-trigger[aria-expanded="true"] .wybor-strzalka{transform:rotate(180deg)}

  .wybor-panel{
    position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--card);
    box-shadow:0 10px 38px -10px rgba(20,28,55,.28),0 2px 8px rgba(20,28,55,.08);
    overflow:hidden;
    animation:wybor-wejscie .12s ease-out;
  }
  @keyframes wybor-wejscie{
    from{opacity:0;transform:translateY(-4px) scale(.98)}
    to{opacity:1;transform:none}
  }

  .wybor-szukaj{
    display:flex;align-items:center;gap:8px;
    padding:0 10px;
    border-bottom:1px solid var(--line);
  }
  .wybor-lupa{flex:0 0 auto;width:15px;height:15px;color:var(--muted)}
  .wybor-szukaj input{
    flex:1;
    height:38px;
    border:0;background:transparent;
    color:var(--ink);
    font:inherit;font-size:14px;
  }
  .wybor-szukaj input:focus{outline:none}

  .wybor-lista{max-height:290px;overflow-y:auto;padding:5px}

  .wybor-grupa{
    padding:8px 8px 4px;
    color:var(--muted);
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  }
  .wybor-grupa:not(:first-child){margin-top:2px;border-top:1px solid var(--line)}

  .wybor-opcja{
    display:flex;align-items:center;gap:8px;
    width:100%;
    margin:0;
    padding:7px 8px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:var(--ink);
    font:inherit;font-size:14px;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
  }
  .wybor-opcja:hover,
  .wybor-opcja:focus-visible{outline:none;background:#eef2fa}
  .wybor-opcja[aria-selected="true"]{font-weight:700}
  .wybor-check{flex:0 0 auto;width:16px;height:16px;color:#2b3550}
  .wybor-tekst{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wybor-znacznik{
    flex:0 0 auto;
    padding:1px 6px;
    border-radius:999px;
    background:#f1f3f9;
    color:var(--muted);
    font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  }
  .wybor-pusto{padding:18px 10px;text-align:center;color:var(--muted);font-size:13px}

  /* =========================================================
     Pytanie zamiast planu, dopoki uzytkownik nic nie wybral
     ========================================================= */
  .board-kreator{padding:48px 20px;overflow:visible}
  .kreator{
    display:flex;flex-direction:column;align-items:center;gap:18px;
    text-align:center;
  }
  .kreator-krok{
    margin:0 0 -8px;
    font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);
  }
  .kreator-pytanie{
    margin:0;
    font-size:22px;font-weight:700;letter-spacing:-.01em;
    color:var(--ink);
  }
  .kreator-wybor{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
  .kreator-select{width:min(340px,100%)}
  .kreator-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-width:190px;
    min-height:56px;
    padding:9px 22px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--card);
    box-shadow:0 1px 2px rgba(20,28,55,.05);
    color:var(--ink);
    font:inherit;font-size:16px;font-weight:600;
    cursor:pointer;
    transition:transform .12s ease, border-color .12s ease,
               background .12s ease, color .12s ease;
  }
  .kreator-btn-nazwa{font-size:16px;font-weight:600;line-height:1.2}
  .kreator-btn-podpis{
    font-size:12px;font-weight:500;line-height:1.2;
    color:var(--muted);
  }
  .kreator-btn:hover .kreator-btn-podpis{color:rgba(255,255,255,.75)}
  .kreator-btn:hover{
    transform:translateY(-1px);
    border-color:#2b3550;background:#2b3550;color:#fff;
  }
  /* wybor, ktory kasuje dotychczasowy plan */
  .kreator-btn-czerwony{border-color:#f0c9c3;color:#b32d1f}
  .kreator-btn-czerwony:hover{border-color:#b32d1f;background:#b32d1f;color:#fff}
  .kreator-btn-czerwony:focus-visible{
    border-color:#b32d1f;box-shadow:0 0 0 3px rgba(179,45,31,.18);
  }
  .kreator-btn:focus-visible{
    outline:none;border-color:#2b3550;box-shadow:0 0 0 3px rgba(43,53,80,.16);
  }

  /* =========================================================
     Dwa ostatnie pytania kreatora dziejace sie na samym planie
     ========================================================= */
  .tryb{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
    gap:6px 14px;
    margin:0 0 16px;
    padding:14px 18px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--card);
    box-shadow:var(--shadow);
    text-align:center;
  }
  .tryb-pytanie{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
  .tryb-podpowiedz{margin:0;flex:1 1 100%;font-size:13px;color:var(--muted)}
  .tryb-dalej{
    height:38px;
    padding:0 20px;
    border:1px solid #2b3550;
    border-radius:8px;
    background:#2b3550;
    color:#fff;
    font:inherit;font-size:14px;font-weight:600;
    cursor:pointer;
  }
  .tryb-dalej:hover{background:#1e2740}
  .tryb-dalej:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(43,53,80,.25)}

  /* w trybie edycji klikamy w cale okienko, wiec linki w kafelku nie moga
     przechwytywac klikniec */
  body.tryb-usuwania .lesson a,
  body.tryb-dodawania .lesson a{pointer-events:none}
  body.tryb-usuwania td:not(.empty),
  body.tryb-dodawania td.empty,
  body.tryb-dodawania .lesson.wlasna{cursor:pointer}
  body.tryb-usuwania td:not(.empty):hover .lesson{
    outline:2px solid #b32d1f;outline-offset:2px;
  }
  body.tryb-dodawania td.empty:hover{
    outline:2px dashed #2b3550;outline-offset:-2px;border-radius:10px;
  }
  .lesson.wlasna{border-style:dashed}

  /* =========================================================
     Okienko wlasnych zajec
     ========================================================= */
  .okno{
    width:min(360px, calc(100vw - 32px));
    padding:22px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--card);
    box-shadow:0 24px 60px -20px rgba(20,28,55,.45);
    color:var(--ink);
    font:inherit;
  }
  .okno::backdrop{background:rgba(20,28,55,.42)}
  .okno-form{display:flex;flex-direction:column;gap:14px;margin:0}
  .okno-tytul{margin:0;font-size:18px;font-weight:700}
  .okno-pole{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
  .okno-opcjonalne{font-weight:500;color:var(--muted)}
  .okno-pole input{
    height:40px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--card);
    color:var(--ink);
    font:inherit;font-size:14px;font-weight:500;
  }
  .okno-pole input:focus{
    outline:none;border-color:#2b3550;box-shadow:0 0 0 3px rgba(43,53,80,.16);
  }
  .okno-guziki{display:flex;justify-content:flex-end;gap:8px}
  .okno-btn{
    height:38px;
    padding:0 16px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--card);
    color:var(--ink);
    font:inherit;font-size:14px;font-weight:600;
    cursor:pointer;
  }
  .okno-btn:hover{border-color:#2b3550}
  .okno-btn-glowny{border-color:#2b3550;background:#2b3550;color:#fff}
  .okno-btn-czerwony{border-color:#b32d1f;background:#b32d1f;color:#fff}
  .okno-btn-czerwony:hover{border-color:#8f2418;background:#8f2418}
  .okno-tresc{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
  .okno-btn-glowny:hover{background:#1e2740}

  /* =========================================================
     Przelacznik widoku i plan dzien po dniu
     ========================================================= */
  .widok{
    display:none;                 /* na szerokim ekranie nie ma czego przelaczac */
    align-items:center;
    padding:3px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#eef2fa;
  }
  .widok-btn{
    padding:0 12px;
    height:32px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#4b5570;
    font:inherit;font-size:13px;font-weight:600;
    white-space:nowrap;
    cursor:pointer;
  }
  .widok-btn[aria-pressed="true"]{
    background:var(--card);
    color:var(--ink);
    box-shadow:0 1px 2px rgba(20,28,55,.12);
  }
  .widok-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(43,53,80,.18)}

  /* Widok dnia wchodzi tylko wtedy, gdy uzytkownik go wybierze. */
  .mobil{display:none}
  body.widok-mobilny .mobil{display:block}

  /* Tabela nie znika, tylko schodzi poza ekran - z niej powstaje PDF i PNG. */
  body.widok-mobilny .board{
    position:absolute;
    left:-99999px;
    top:0;
    width:1400px;
  }
  body.widok-mobilny.eksportowanie .board{position:static;left:auto;width:auto}

  .eksport-mobilny{
    flex-direction:row;
    justify-content:flex-end;
    margin:0 0 10px;
  }
  .eksport-mobilny .eksport-btn{padding:5px 14px}

  .mobil-dni{
    display:flex;flex-wrap:nowrap;gap:5px;
    margin:0 0 14px;
  }
  .mobil-dzien{
    flex:1 1 0;
    min-width:0;
    padding:0 2px;
    height:38px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--card);
    color:#3d4a66;
    font:inherit;font-size:14px;font-weight:700;letter-spacing:.04em;
    cursor:pointer;
  }
  .mobil-dzien[aria-selected="true"]{
    background:#2b3550;border-color:#2b3550;color:#fff;
  }
  .mobil-dzien:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(43,53,80,.18)}

  /* Siatka: waska kolumna godzin i szeroka kolumna lekcji. Dzieki niej
     lekcja dwugodzinna moze sie rozciagnac przez dwa wiersze godzin. */
  .mobil-lista{
    display:grid;
    grid-template-columns:62px 1fr;
    gap:8px 10px;
    align-items:stretch;
  }
  .mobil-godzina{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:6px 4px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#f7f9fd;
    text-align:center;
  }
  .mobil-godzina .no{font-size:16px;font-weight:700;color:var(--ink);line-height:1.1}
  .mobil-godzina .hh{
    margin-top:2px;
    font-size:10.5px;font-weight:500;color:var(--muted);white-space:nowrap;
  }
  .mobil-tresc{min-width:0}
  .mobil-tresc .lesson{min-height:0;height:100%}

  .mobil-puste{
    min-height:44px;
    border:1px dashed #e8ecf5;
    border-radius:10px;
    background:repeating-linear-gradient(135deg,#fafbfe 0 6px,#f4f6fb 6px 12px);
  }
  .mobil-wolne{
    margin:0;padding:26px 10px;
    text-align:center;color:var(--muted);font-size:14px;
  }

  /* ---- stopka ---- */
  .stopka{max-width:1400px;margin:28px auto 0;padding-top:14px;
    border-top:1px solid var(--line,rgba(0,0,0,.08));
    font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}

  @media (max-width:640px){
    body{padding:20px 12px 44px}
    .klasa{margin-bottom:16px}
    .board{padding:8px;border-radius:12px}
    thead th.corner, th.day{
      width:28px;
      font-size:10.5px;
      letter-spacing:0;
      padding:0 1px;
    }
    .wybor{flex:1 1 100%}
    .widok{display:flex}
    .wybor-lista{max-height:240px}
  }