/* Wypłaty Factory Sun — styl: kremowe tło, złote akcenty, czytelne kwoty. Jasny i ciemny motyw. */

:root {
  --bg: #f6f2ea; --bg2: #efe9dd; --karta: #ffffff; --karta2: #faf7f1;
  --tekst: #1c1a17; --tekst2: #57524a; --tekst3: #6b655b; --linia: #e6dfd2; --linia2: #d6cdbd;
  --zloto: #a88233; --zloto2: #c9a24e; --zloto-tlo: #f7ecd4; --zloto-tekst: #6e531c;
  --ok: #1d7249; --ok-tlo: #e2f2e9; --uwaga: #9a5605; --uwaga-tlo: #fcefd9; --blad: #b3261e; --blad-tlo: #fbe6e3;
  --info: #1f5a96; --info-tlo: #e3eefa;
  --zm-r: #d9e8f8; --zm-r-t: #16426d; --zm-p: #fbe0c3; --zm-p-t: #7a3f08; --zm-u: #ffdf3d; --zm-u-t: #3f3200;
  --s-lista: #8b8176; --s-godz: #b8913d; --s-premia: #e2b93b; --s-kremy: #c27a98; --s-odziez: #5f86bd; --s-dod: #9aa3ad;
  --cien: 0 1px 2px rgba(40,30,10,.06), 0 4px 16px rgba(40,30,10,.06);
  --cien2: 0 10px 40px rgba(40,30,10,.18);
  --r: 16px; --r2: 12px;
  --pasek: 72px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    --bg: #121110; --bg2: #181715; --karta: #1d1b19; --karta2: #24221f;
    --tekst: #f3efe8; --tekst2: #b3ada3; --tekst3: #9a948a; --linia: #33302b; --linia2: #45403a;
    --zloto: #d8b261; --zloto2: #e7c677; --zloto-tlo: #2f2716; --zloto-tekst: #f0d493;
    --ok: #62d39c; --ok-tlo: #15291f; --uwaga: #f2b75f; --uwaga-tlo: #2f2413; --blad: #ff8f86; --blad-tlo: #351b19;
    --info: #8ab8ee; --info-tlo: #162536;
    --zm-r: #213a55; --zm-r-t: #cfe3fb; --zm-p: #4a3016; --zm-p-t: #fbdcb8; --zm-u: #5a4d0a; --zm-u-t: #fff2a8;
    --cien: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
    --cien2: 0 10px 40px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-motyw="ciemny"] {
  --bg: #121110; --bg2: #181715; --karta: #1d1b19; --karta2: #24221f;
  --tekst: #f3efe8; --tekst2: #b3ada3; --tekst3: #9a948a; --linia: #33302b; --linia2: #45403a;
  --zloto: #d8b261; --zloto2: #e7c677; --zloto-tlo: #2f2716; --zloto-tekst: #f0d493;
  --ok: #62d39c; --ok-tlo: #15291f; --uwaga: #f2b75f; --uwaga-tlo: #2f2413; --blad: #ff8f86; --blad-tlo: #351b19;
  --info: #8ab8ee; --info-tlo: #162536;
  --zm-r: #213a55; --zm-r-t: #cfe3fb; --zm-p: #4a3016; --zm-p-t: #fbdcb8; --zm-u: #5a4d0a; --zm-u-t: #fff2a8;
  --cien: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35);
  --cien2: 0 10px 40px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font: 15.5px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--zloto-tekst); }
:focus-visible { outline: 2.5px solid var(--zloto); outline-offset: 2px; border-radius: 6px; }
.ukryte { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── układ ──────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
.bok { display: none; }
.glowna { min-width: 0; padding-bottom: calc(var(--pasek) + env(safe-area-inset-bottom) + 16px); }
.gora {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--linia);
}
.gora .znak { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gora .znak img { width: 34px; height: 34px; border-radius: 10px; }
.gora .znak .t { font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.gora .znak .t small { display: block; font-size: 10.5px; letter-spacing: .22em; color: var(--zloto-tekst); font-weight: 600; margin-top: -2px; }
.miesiac { margin-left: auto; display: flex; align-items: center; gap: 2px; background: var(--karta); border: 1px solid var(--linia); border-radius: 999px; padding: 3px; box-shadow: var(--cien); }
.miesiac button { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--tekst2); }
.miesiac button:hover { background: var(--bg2); color: var(--tekst); }
.miesiac .nazwa { min-width: 128px; text-align: center; font-weight: 650; font-size: 14.5px; padding: 0 4px; cursor: pointer; border: 0; background: none; height: 34px; border-radius: 999px; }
.tresc { padding: 18px 16px 8px; max-width: 1120px; margin: 0 auto; }

.pasek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--pasek) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--karta) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linia);
}
.pasek a, .bok nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none;
  color: var(--tekst3); font-size: 11.5px; font-weight: 600; position: relative;
}
.pasek a svg.i { width: 24px; height: 24px; }
.pasek a[aria-current="page"] { color: var(--zloto-tekst); }
.pasek a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 34px; height: 3px; border-radius: 0 0 3px 3px; background: var(--zloto); }
.pasek a .kropka, .bok a .kropka { position: absolute; top: 12px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--uwaga); box-shadow: 0 0 0 2px var(--karta); }

@media (min-width: 900px) {
  .app { grid-template-columns: 248px 1fr; }
  .pasek { display: none; }
  .glowna { padding-bottom: 32px; }
  .bok {
    display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100dvh; padding: 22px 14px;
    background: var(--karta); border-right: 1px solid var(--linia);
  }
  .bok .znak { display: flex; align-items: center; gap: 12px; padding: 4px 10px 22px; }
  .bok .znak img { width: 42px; height: 42px; border-radius: 12px; }
  .bok .znak b { display: block; font-size: 18px; letter-spacing: -.01em; }
  .bok .znak small { display: block; font-size: 10.5px; letter-spacing: .22em; color: var(--zloto-tekst); font-weight: 600; }
  .bok nav { display: flex; flex-direction: column; gap: 2px; }
  .bok nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 12px; border-radius: 12px; font-size: 14.5px; color: var(--tekst2); }
  .bok nav a:hover { background: var(--bg2); color: var(--tekst); }
  .bok nav a[aria-current="page"] { background: var(--zloto-tlo); color: var(--zloto-tekst); }
  .bok nav a .kropka { position: static; margin-left: auto; }
  .bok .stopka { margin-top: auto; font-size: 12px; color: var(--tekst3); padding: 0 10px; }
  .gora { padding: 14px 28px; }
  .gora .znak { display: none; }
  .tresc { padding: 26px 28px 8px; }
}
/* tytuł ekranu: na telefonie zastępuje go logo, na komputerze jest widoczny */
.gora h1 { display: none; margin: 0; font-size: 21px; letter-spacing: -.015em; }
@media (min-width: 900px) { .gora h1 { display: block; } }

/* ── karty i elementy ───────────────────────────────────── */
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); box-shadow: var(--cien); padding: 18px; }
.karta + .karta, .sekcja + .sekcja { margin-top: 14px; }
.karta h2, .sekcja > h2 { margin: 0 0 4px; font-size: 16.5px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.sekcja > h2 { margin: 26px 2px 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst3); }
.opis { color: var(--tekst2); font-size: 14px; margin: 0 0 12px; }
.maly { font-size: 12.5px; color: var(--tekst3); }
.siatka { display: grid; gap: 14px; }
@media (min-width: 700px) { .siatka.dwie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.siatka.trzy { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.siatka > .karta + .karta, .siatka > .karta { margin-top: 0; }
.siatka > * { min-width: 0; }
@media (min-width: 1100px) { .siatka.cztery { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) and (max-width: 1099px) { .siatka.cztery { grid-template-columns: 1fr 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border-radius: 12px; border: 1px solid transparent; font-weight: 650; font-size: 14.5px; cursor: pointer; text-decoration: none;
  background: var(--zloto); color: #1b1407; transition: filter .15s, transform .05s; white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.drugi { background: var(--karta); color: var(--tekst); border-color: var(--linia2); }
.btn.drugi:hover { background: var(--bg2); filter: none; }
.btn.cichy { background: transparent; color: var(--tekst2); border-color: transparent; min-height: 38px; padding: 8px 12px; }
.btn.cichy:hover { background: var(--bg2); color: var(--tekst); }
.btn.maly { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 10px; }
.btn.pelny { width: 100%; }
.btn.niebezp { background: var(--blad-tlo); color: var(--blad); border-color: transparent; }
.btn[disabled], .btn.laduje { opacity: .6; pointer-events: none; }
.btn.laduje::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: kreci .8s linear infinite; }
@keyframes kreci { to { transform: rotate(360deg); } }
.przyciski { display: flex; flex-wrap: wrap; gap: 8px; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--bg2); color: var(--tekst2); white-space: nowrap; }
.chip.ok { background: var(--ok-tlo); color: var(--ok); }
.chip.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.chip.blad { background: var(--blad-tlo); color: var(--blad); }
.chip.zloto { background: var(--zloto-tlo); color: var(--zloto-tekst); }
.chip.info { background: var(--info-tlo); color: var(--info); }
.chip svg.i { width: 14px; height: 14px; }

/* ── pulpit ─────────────────────────────────────────────── */
.bohater {
  position: relative; overflow: hidden; border-radius: 22px; padding: 22px 20px 20px; color: #fff8e8;
  background: radial-gradient(120% 140% at 100% 0%, #3a2c12 0%, #1a1510 55%, #120f0b 100%);
  box-shadow: var(--cien2); border: 1px solid #3b2f18;
}
.bohater::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,196,110,.35), rgba(232,196,110,0) 65%); pointer-events: none;
}
.bohater .et { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #e7c677; font-weight: 650; }
.bohater .kw { font-size: clamp(34px, 9vw, 52px); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 4px; }
.bohater .kw small { font-size: .45em; font-weight: 600; color: #e7c677; margin-left: 4px; }
.bohater .pod { color: #d9ccb2; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.bohater .przyciski { margin-top: 16px; position: relative; z-index: 1; }
.bohater .btn.drugi { background: rgba(255,255,255,.08); color: #fff8e8; border-color: rgba(255,255,255,.18); }
.bohater .btn.drugi:hover { background: rgba(255,255,255,.14); }
.bohater .naglowek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; position: relative; z-index: 1; }
.bohater .chip { background: rgba(255,255,255,.1); color: #f3e3bb; }
.bohater .chip.ok { background: rgba(98,211,156,.16); color: #8fe7bb; }
.bohater .chip.uwaga { background: rgba(242,183,95,.18); color: #f6cd8b; }

.lista-gotowosci { list-style: none; margin: 0; padding: 0; }
.lista-gotowosci li { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linia); }
.lista-gotowosci li:first-child { border-top: 0; padding-top: 4px; }
.lista-gotowosci .ik { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bg2); color: var(--tekst2); }
.lista-gotowosci .ik.ok { background: var(--ok-tlo); color: var(--ok); }
.lista-gotowosci .ik.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.lista-gotowosci .ik.blad { background: var(--blad-tlo); color: var(--blad); }
.lista-gotowosci b { display: block; font-size: 14.5px; }
.lista-gotowosci span.s { font-size: 13px; color: var(--tekst2); }

.osoba { display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: transform .12s, box-shadow .12s; text-align: left; width: 100%; font: inherit; color: inherit; }
.osoba:hover { transform: translateY(-2px); box-shadow: var(--cien2); }
.osoba .gl { display: flex; align-items: center; gap: 12px; }
.awatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: 17px; color: #fff; flex: none; }
.osoba .imie { font-weight: 700; font-size: 16px; line-height: 1.2; }
.osoba .imie small { display: block; font-weight: 500; font-size: 12.5px; color: var(--tekst3); }
.osoba .imie { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.osoba .kw { margin-left: auto; text-align: right; font-weight: 750; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
.osoba .kw small { display: block; font-size: 12px; font-weight: 600; }
.pasek-skl { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg2); gap: 2px; }
.pasek-skl i { display: block; height: 100%; min-width: 3px; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--tekst2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ── szczegóły wypłaty ──────────────────────────────────── */
.skladnik { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linia); align-items: start; }
.skladnik:first-of-type { border-top: 0; }
.skladnik > i { width: 10px; height: 10px; border-radius: 3px; margin-top: 6px; }
.skladnik b { font-size: 14.5px; }
.skladnik .jak { font-size: 13px; color: var(--tekst2); margin-top: 2px; }
.skladnik .kw { font-weight: 700; white-space: nowrap; font-size: 15px; }
.skladnik details { margin-top: 6px; }
.skladnik summary { cursor: pointer; font-size: 13px; color: var(--zloto-tekst); font-weight: 600; }
.razem { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 6px; border-top: 2px solid var(--tekst); font-weight: 750; font-size: 18px; }
.razem .kw { font-size: 22px; }
.doplata { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: var(--uwaga-tlo); color: var(--uwaga); font-weight: 650; display: flex; justify-content: space-between; gap: 10px; }
.doplata.zero { background: var(--ok-tlo); color: var(--ok); }

table.tab { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tab th { text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst3); font-weight: 650; padding: 8px 10px; border-bottom: 1px solid var(--linia2); }
table.tab td { padding: 9px 10px; border-bottom: 1px solid var(--linia); }
table.tab td.l, table.tab th.l { text-align: right; white-space: nowrap; }
table.tab tr.wknd td { background: var(--karta2); }
.przewijane { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r2); }

/* ── grafik ─────────────────────────────────────────────── */
.wgraj {
  border: 2px dashed var(--linia2); border-radius: var(--r); padding: 26px 18px; text-align: center; cursor: pointer;
  background: var(--karta2); transition: border-color .15s, background .15s; display: block;
}
.wgraj:hover, .wgraj.nad { border-color: var(--zloto); background: var(--zloto-tlo); }
.wgraj .ik { width: 52px; height: 52px; border-radius: 16px; background: var(--zloto-tlo); color: var(--zloto-tekst); display: grid; place-items: center; margin: 0 auto 10px; }
.wgraj .ik svg.i { width: 26px; height: 26px; }
.wgraj b { display: block; font-size: 16px; }
.wgraj span { color: var(--tekst2); font-size: 13.5px; }
.wydruki { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .wydruki { grid-template-columns: repeat(4, 1fr); } }
.wydruk { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r2); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--cien); }
.wydruk .podglad { aspect-ratio: 210 / 297; background: #fff; display: block; border-bottom: 1px solid var(--linia); cursor: zoom-in; padding: 0; border-top: 0; border-left: 0; border-right: 0; }
.wydruk .podglad img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wydruk .op { padding: 10px 10px 4px; font-size: 13px; font-weight: 650; line-height: 1.3; min-height: 44px; }
.wydruk .akcje { display: flex; gap: 2px; padding: 4px 6px 8px; }
.wydruk .akcje .btn { flex: 1; min-height: 38px; padding: 6px; }
.kal { display: grid; gap: 3px; font-size: 12px; }
.kal .d { text-align: center; padding: 4px 0; color: var(--tekst3); font-weight: 650; }
.kal .d.wk { color: var(--tekst); }
.zm { display: grid; place-items: center; height: 26px; border-radius: 6px; font-weight: 750; font-size: 11.5px; background: var(--bg2); color: var(--tekst3); }
.zm.r { background: var(--zm-r); color: var(--zm-r-t); }
.zm.p { background: var(--zm-p); color: var(--zm-p-t); }
.zm.u { background: var(--zm-u); color: var(--zm-u-t); }
.zm.w { background: transparent; color: var(--tekst3); font-weight: 500; }

/* ── kartka ─────────────────────────────────────────────── */
.porown { display: grid; gap: 10px; }
.roznica { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--karta2); border: 1px solid var(--linia); }
.roznica .dz { font-weight: 750; font-size: 18px; text-align: center; line-height: 1.1; }
.roznica .dz small { display: block; font-size: 11px; color: var(--tekst3); font-weight: 600; }
.roznica .co { font-size: 13.5px; }
.roznica .co b { display: block; font-size: 14px; }
.roznica .kw { text-align: right; font-weight: 750; white-space: nowrap; }
.roznica.wyjasniona { border-color: color-mix(in srgb, var(--ok) 35%, var(--linia)); }
.liczby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 12px; }
.liczby div { background: var(--karta2); border: 1px solid var(--linia); border-radius: 12px; padding: 10px; text-align: center; }
.liczby small { display: block; font-size: 11.5px; color: var(--tekst3); letter-spacing: .06em; text-transform: uppercase; font-weight: 650; }
.liczby b { font-size: 16px; }

/* ── formularze ─────────────────────────────────────────── */
.pole { display: grid; gap: 6px; margin-bottom: 14px; }
.pole label, .pole .et { font-size: 13px; font-weight: 650; color: var(--tekst2); }
.pole input, .pole select, .pole textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linia2);
  background: var(--karta2); font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
.pole input:focus, .pole select:focus { outline: none; border-color: var(--zloto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zloto) 25%, transparent); }
.pole .pom { font-size: 12.5px; color: var(--tekst3); }
.rzad { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: start; }
.rzad > .pole { align-content: start; }
.przelacz { display: inline-flex; background: var(--bg2); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.przelacz button { border: 0; background: transparent; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 650; color: var(--tekst2); cursor: pointer; min-height: 38px; }
.przelacz button[aria-pressed="true"] { background: var(--karta); color: var(--tekst); box-shadow: var(--cien); }
.dziennik { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.dziennik li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linia); }
.dziennik li:first-child { border-top: 0; }
.dziennik .kiedy { color: var(--tekst3); font-size: 12px; }

/* ── logowanie ──────────────────────────────────────────── */
.logowanie { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(80% 60% at 50% 0%, var(--zloto-tlo), transparent 70%), var(--bg); }
.logowanie .karta { width: min(400px, 100%); padding: 30px 26px 26px; text-align: center; }
.logowanie img { width: 76px; height: 76px; border-radius: 22px; box-shadow: var(--cien2); margin-bottom: 14px; }
.logowanie h1 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.logowanie .pod { color: var(--tekst2); margin: 4px 0 22px; font-size: 14px; }
.logowanie .pole { text-align: left; }
.logowanie .blad { color: var(--blad); font-size: 13.5px; min-height: 20px; margin: -6px 0 10px; font-weight: 600; }

/* ── okno, powiadomienia, szkielety ─────────────────────── */
.okno-tlo { position: fixed; inset: 0; z-index: 50; background: rgba(15,12,8,.5); display: grid; align-items: end; justify-items: center; animation: pojaw .15s; }
@media (min-width: 700px) { .okno-tlo { align-items: center; padding: 24px; } }
.okno { background: var(--karta); width: min(560px, 100%); max-height: 92dvh; overflow: auto; border-radius: 22px 22px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: var(--cien2); animation: wjedz .2s ease-out; }
@media (min-width: 700px) { .okno { border-radius: 22px; } }
.okno h2 { margin: 0 0 6px; font-size: 19px; }
.okno .zamknij { float: right; margin: -6px -6px 0 0; }
.okno.duze { width: min(980px, 100%); }
.okno img.pelny { width: 100%; border-radius: 12px; border: 1px solid var(--linia); display: block; }
@keyframes pojaw { from { opacity: 0; } }
@keyframes wjedz { from { transform: translateY(24px); opacity: .6; } }
.tosty { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--pasek) + env(safe-area-inset-bottom) + 14px); z-index: 60; display: grid; gap: 8px; width: min(440px, calc(100% - 24px)); }
@media (min-width: 900px) { .tosty { bottom: 24px; } }
.tost { padding: 12px 16px; border-radius: 14px; background: #1f1c17; color: #fbf6ea; box-shadow: var(--cien2); font-size: 14px; font-weight: 550; display: flex; gap: 10px; align-items: center; animation: wjedz .2s; }
.tost.blad { background: #5c1813; }
.tost.ok { background: #14432c; }
.szkielet { background: linear-gradient(90deg, var(--bg2) 0%, var(--karta2) 50%, var(--bg2) 100%); background-size: 200% 100%; animation: lsk 1.2s infinite; border-radius: 12px; }
@keyframes lsk { to { background-position: -200% 0; } }
.pusto { text-align: center; padding: 26px 16px; color: var(--tekst2); }
.pusto .ik { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 12px; display: grid; place-items: center; background: var(--zloto-tlo); color: var(--zloto-tekst); }
.pusto .ik svg.i { width: 28px; height: 28px; }
.pusto b { display: block; color: var(--tekst); font-size: 16px; margin-bottom: 4px; }
.info-pasek { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; background: var(--info-tlo); color: var(--info); margin-bottom: 14px; }
.info-pasek.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.info-pasek.ok { background: var(--ok-tlo); color: var(--ok); }
.info-pasek b { color: inherit; }

@media print {
  .pasek, .bok, .gora, .przyciski, .btn { display: none !important; }
  body { background: #fff; }
  .karta { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* tabela godzin: na telefonie tylko Osoba / Płatne / Kwota, reszta w podpisie pod imieniem */
.tylko-waski { display: none; }
@media (max-width: 599px) {
  .tylko-szeroki { display: none; }
  .tylko-waski { display: block; }
}
.zamiany { font-size: 13px; }
.zamiany li { padding: 6px 0; border-top: 1px solid var(--linia); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zamiany li:first-child { border-top: 0; }
.blad-ekranu { text-align: center; padding: 30px 18px; }
.opcja { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst3); margin-left: 6px; }
/* błąd przy konkretnym polu formularza */
.pole input[aria-invalid="true"] { border-color: var(--blad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blad) 22%, transparent); }
.pole .blad-pola { color: var(--blad); font-size: 12.5px; font-weight: 650; }
/* Start na telefonie: przyciski pod tekstem, żeby wiersz nie miał 6 linii */
@media (max-width: 480px) {
  .lista-gotowosci li { grid-template-columns: 40px 1fr; row-gap: 8px; }
  .lista-gotowosci li > .przyciski { grid-column: 2; }
  .gora .znak .t small { letter-spacing: .1em; }
  .miesiac .nazwa { min-width: 112px; }
}
/* pola obok siebie z etykietą w dwóch liniach — okienka równo w jednej linii */
@media (max-width: 480px) { .rzad .pole > label { min-height: 2.8em; display: flex; align-items: flex-end; } }