:root{
  --papier:#F4F6F9;
  --kreda:#FFFFFF;
  --kreda-2:#EDF1F6;
  --atrament:#16242F;
  --cien:#5B6472;
  --linia:#DCE3EB;
  --granat:#1F3B57;
  --granat-jasny:#E7EDF4;
  --zielen:#2F6B3A;
  --zielen-jasny:#E5F0E7;
  --rdza:#B05A00;
  --rdza-jasny:#FBECD9;
  --cieniowanie:0 1px 2px rgba(22,36,47,.06), 0 6px 16px -12px rgba(22,36,47,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#11181E;
    --kreda:#1A232C;
    --kreda-2:#212C36;
    --atrament:#E6ECF2;
    --cien:#95A2B0;
    --linia:#2C3A46;
    --granat:#8FB4D4;
    --granat-jasny:#1E2E3C;
    --zielen:#7FC48D;
    --zielen-jasny:#1B2D22;
    --rdza:#E8994F;
    --rdza-jasny:#33251540;
    --cieniowanie:0 1px 2px rgba(0,0,0,.4), 0 6px 16px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --papier:#11181E;
  --kreda:#1A232C;
  --kreda-2:#212C36;
  --atrament:#E6ECF2;
  --cien:#95A2B0;
  --linia:#2C3A46;
  --granat:#8FB4D4;
  --granat-jasny:#1E2E3C;
  --zielen:#7FC48D;
  --zielen-jasny:#1B2D22;
  --rdza:#E8994F;
  --rdza-jasny:#33251540;
  --cieniowanie:0 1px 2px rgba(0,0,0,.4), 0 6px 16px -12px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--papier);
  color:var(--atrament);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
}
.ramka{max-width:600px;margin:0 auto;padding:0 14px 56px}

/* ---------------------------------------------------------------- szczyt */
.szczyt{
  position:sticky;top:0;z-index:20;
  background:var(--papier);
  border-bottom:1px solid var(--linia);
}
.szczyt-tresc{max-width:600px;margin:0 auto;padding:14px 14px 0}
.stempel{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;color:var(--cien);
}
.stempel b{color:var(--atrament);font-weight:500}
h1{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  font-size:26px;font-weight:700;letter-spacing:-.01em;
  margin:6px 0 12px;text-wrap:balance;
}
.zakladki{display:flex;gap:2px;margin:0 -2px}
.zakladki button{
  flex:1;appearance:none;background:none;border:0;
  border-bottom:2px solid transparent;
  padding:9px 2px 10px;cursor:pointer;
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cien);
}
.zakladki button[aria-selected="true"]{color:var(--granat);border-bottom-color:var(--granat)}
.zakladki button:focus-visible{outline:2px solid var(--granat);outline-offset:-2px;border-radius:3px}

/* ---------------------------------------------------------------- wspolne */
.uwaga{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--rdza-jasny);
  border-left:3px solid var(--rdza);
  padding:11px 13px;margin:16px 0 0;border-radius:0 6px 6px 0;
  font-size:13.5px;line-height:1.45;
}
.uwaga strong{color:var(--rdza)}
.pasek-dnia{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:22px 0 8px;padding-bottom:5px;
  border-bottom:1px solid var(--linia);
}
.pasek-dnia h2{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin:0;color:var(--atrament);
}
.pasek-dnia .dzis-znacznik{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--kreda);
  background:var(--granat);padding:2px 6px;border-radius:3px;margin-left:7px;
}
.pasek-dnia span.ile{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--cien);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------- szyna godzinowa */
.szyna{display:flex;flex-direction:column;gap:7px}
.wpis{display:grid;grid-template-columns:50px 1fr;gap:10px;align-items:stretch}
.godzina{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;
  color:var(--atrament);padding-top:9px;text-align:right;
  position:relative;
}
.godzina small{display:block;font-size:11px;font-weight:400;color:var(--cien);margin-top:1px}
.karta{
  background:var(--kreda);
  border:1px solid var(--linia);
  border-left:3px solid var(--linia);
  border-radius:0 7px 7px 0;
  padding:8px 11px 9px;
  box-shadow:var(--cieniowanie);
  min-width:0;
}
.karta.odbyta{border-left-color:var(--zielen)}
.karta.zaplanowana{border-left-color:var(--granat)}
.karta.odwolana{border-left-color:var(--rdza);background:var(--kreda-2)}
.karta.poza{border-left-color:var(--cien);background:var(--kreda-2)}
.kto{font-weight:600;font-size:14.5px;line-height:1.25;overflow-wrap:anywhere}
.karta.odwolana .kto{color:var(--cien)}
.karta.poza .kto{font-style:italic;font-weight:500;color:var(--cien)}
.szczegoly{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin-top:5px;
  font-size:12px;color:var(--cien);
}
.plakietka{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.03em;padding:1.5px 5px;border-radius:3px;
  border:1px solid var(--linia);color:var(--cien);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.plakietka.pula{border-color:var(--granat);color:var(--granat);background:var(--granat-jasny)}
.plakietka.odwolana{border-color:var(--rdza);color:var(--rdza);background:var(--rdza-jasny)}
.plakietka.nakladka{border-style:dashed}
.trener{font-weight:500;color:var(--atrament)}

/* ---------------------------------------------------------------- klienci */
.lista{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.klient{
  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  background:var(--kreda);border:1px solid var(--linia);
  border-left:3px solid transparent;border-radius:0 7px 7px 0;
  padding:9px 11px;box-shadow:var(--cieniowanie);
}
.klient.pilne{border-left-color:var(--rdza)}
.klient .nazwa{font-weight:600;font-size:14.5px;line-height:1.25;overflow-wrap:anywhere}
.klient .czlonkowie{font-size:11.5px;color:var(--cien);margin-top:2px}
.klient .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px;color:var(--cien);margin-top:1px}
.licznik{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;line-height:1.1}
.licznik b{display:block;font-size:20px;font-weight:600;color:var(--granat)}
.klient.pilne .licznik b{color:var(--rdza)}
.licznik span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cien)}
.licznik.brak b{color:var(--cien);font-size:15px;font-weight:500}

/* ---------------------------------------------------------------- kasa */
.blok{
  background:var(--kreda);border:1px solid var(--linia);border-radius:8px;
  padding:14px;margin-top:14px;box-shadow:var(--cieniowanie);
}
.blok h3{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cien);margin:0 0 10px;
}
.para-liczb{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.liczba{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.liczba .w{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}
.liczba .e{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cien);margin-top:2px;font-family:"IBM Plex Sans",sans-serif}
.w.plus{color:var(--zielen)}
.w.minus{color:var(--rdza)}
.wynik{margin-top:12px;padding-top:11px;border-top:1px solid var(--linia)}
.slupki{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.slupek{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px}
.slupek .k{overflow-wrap:anywhere}
.slupek .v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.slupek .tor{grid-column:1/-1;height:5px;background:var(--kreda-2);border-radius:3px;overflow:hidden}
.slupek .tor i{display:block;height:100%;background:var(--rdza);border-radius:3px}
.wyjasnienie{font-size:12.5px;color:var(--cien);line-height:1.5;margin:9px 0 0}
.wyjasnienie:first-child{margin-top:0}

/* ---------------------------------------------------------------- stopka */
.stopka{
  margin-top:26px;padding-top:14px;border-top:1px solid var(--linia);
  font-size:12px;color:var(--cien);line-height:1.55;
}
.stopka code{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  background:var(--kreda-2);padding:1px 5px;border-radius:3px;color:var(--atrament);
}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------ logowanie */
.brama{
  max-width:340px;margin:0 auto;padding:56px 20px 40px;
  display:flex;flex-direction:column;
}
.brama h1{margin:0 0 4px}
.brama .podtytul{margin:0 0 22px;font-size:13.5px;color:var(--cien);line-height:1.5}
.brama form{display:flex;flex-direction:column;gap:6px}
.brama label{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--cien);margin-top:10px;
}
.brama input{
  font-family:"IBM Plex Sans",sans-serif;font-size:16px;
  padding:11px 12px;border:1px solid var(--linia);border-radius:6px;
  background:var(--kreda);color:var(--atrament);
}
.brama input#kod{
  font-family:"IBM Plex Mono",monospace;font-size:24px;letter-spacing:.28em;
  text-align:center;padding:12px 8px;
}
.brama input:focus-visible{outline:2px solid var(--granat);outline-offset:1px;border-color:var(--granat)}
.brama button{
  margin-top:18px;padding:12px;border:0;border-radius:6px;cursor:pointer;
  background:var(--granat);color:var(--kreda);
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.brama button:focus-visible{outline:2px solid var(--atrament);outline-offset:2px}
.brama .blad{
  background:var(--rdza-jasny);border-left:3px solid var(--rdza);
  padding:10px 12px;border-radius:0 6px 6px 0;margin:0 0 16px;
  font-size:13.5px;color:var(--atrament);
}
.brama .drobne{margin:14px 0 0;font-size:12.5px;color:var(--cien);text-align:center}
.brama a{color:var(--granat)}

/* --------------------------------------------------------------- reszta */
.wyjscie{margin-left:auto;color:var(--granat);text-decoration:none;font-weight:500}
.wyjscie:hover,.wyjscie:focus-visible{text-decoration:underline}
.ladowanie{color:var(--cien);font-size:13.5px;padding:22px 0}
.pusto{
  background:var(--rdza-jasny);border-left:3px solid var(--rdza);
  padding:14px;border-radius:0 6px 6px 0;margin:18px 0;font-size:13.5px;line-height:1.5;
}