*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--tlo); color: var(--tekst); font: 400 14px/1.45 var(--font-sans);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--akcent-link); }
[hidden] { display: none !important; }
svg.ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; pointer-events: none; }
svg.ik.m { width: 16px; height: 16px; } svg.ik.d { width: 24px; height: 24px; }
svg.ik.wypelnione { fill: currentColor; }

/* widoczny fokus klawiatury (2 px, kontrast co najmniej 3:1) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
.tylko-czytnik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.przeskocz { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--akcent); color: var(--akcent-tekst); padding: 10px 16px; border-radius: 999px; font-weight: 600; transition: top .15s; }
.przeskocz:focus { top: 10px; }

/* przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 600; border: 1.5px solid transparent; white-space: nowrap; transition: background .15s var(--ruch), box-shadow .2s var(--ruch), transform .2s var(--ruch), border-color .15s; user-select: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-glowny { background: var(--akcent); color: var(--akcent-tekst); box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--akcent) 80%, black); }
.btn-glowny:not(:disabled):hover { background: color-mix(in oklab, var(--akcent) 90%, white); box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--akcent) 85%, black); }
.btn-drugi { border-color: var(--linia2); color: var(--tekst); }
.btn-drugi:not(:disabled):hover { background: var(--hover); border-color: var(--tekst3); }
.btn-miekki { background: var(--pole); color: var(--tekst); }
.btn-miekki:not(:disabled):hover { background: color-mix(in oklab, var(--pole) 80%, var(--amber-soft)); }
.btn-niebezp { background: var(--blad); color: #fff; }
.btn-maly { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn-ikona { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; color: var(--tekst2); border: 0; }
.btn-ikona:not(:disabled):hover { background: var(--hover); color: var(--tekst); }
.btn-ikona[aria-pressed='true'], .btn-ikona.aktywny { background: var(--aktywna-nav); color: var(--tekst); }
.btn-ikona.maly { width: 32px; height: 32px; min-height: 32px; }

/* formularze */
.pole { display: grid; gap: 6px; }
.pole > label, .etykieta-pola { font-weight: 600; font-size: 13px; color: var(--tekst2); }
.wej { width: 100%; min-height: 40px; padding: 8px 12px; border: 1.5px solid var(--linia2); border-radius: 10px; background: var(--powierzchnia); }
.wej:hover { border-color: var(--tekst3); }
.wej:focus-visible { outline: 2px solid var(--fokus); outline-offset: 0; border-color: var(--fokus); }
textarea.wej { min-height: 96px; resize: vertical; line-height: 1.5; }
select.wej { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.pole-wiersz { display: flex; gap: 12px; flex-wrap: wrap; } .pole-wiersz > * { flex: 1 1 160px; }
.podpowiedz { color: var(--tekst3); font-size: 12.5px; }
.checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 32px; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--amber-fill); margin: 0; }

/* awatar i chipy */
.awatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 15px; flex: none; text-transform: uppercase; letter-spacing: 0.02em; }
.awatar.maly { width: 28px; height: 28px; font-size: 11.5px; }
.awatar.duzy { width: 56px; height: 56px; font-size: 20px; }
.chip-etk { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--e-bg); color: var(--e-fg); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
.chip-etk::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--e-dot); flex: none; }
.chip-etk .x { margin-left: 2px; width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; }
.chip-etk .x:hover { background: #0002; }
.chip-status { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--s-bg); color: var(--s-fg); white-space: nowrap; flex: none; }
.chip-plain { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--pole); color: var(--tekst2); white-space: nowrap; flex: none; }
.chip-pilne { background: #fbdada; color: #8c1111; }
:root[data-motyw='ciemny'] .chip-pilne { background: #4c1d1d; color: #fecaca; }
.chip-przyp { background: #fde9bf; color: #6e3504; }
:root[data-motyw='ciemny'] .chip-przyp { background: #4a3410; color: #fde68a; }

.pasek-ladowania { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 400; background: linear-gradient(90deg, transparent, var(--akcent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ladowanie 1s linear infinite; opacity: 0; transition: opacity .2s; }
.pasek-ladowania.aktywny { opacity: 1; }
@keyframes ladowanie { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.szkielet { background: linear-gradient(90deg, var(--pole), var(--hover), var(--pole)); background-size: 200% 100%; animation: blysk 1.4s ease-in-out infinite; border-radius: 6px; }
@keyframes blysk { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pelna { width: 100%; }
.tytul-paska { padding-left: 12px; }
.szeroki-wiersz { grid-column: 1 / -1; }
.z-gory { margin-top: 12px; }