/* RPA Lab — „stanowisko pomiarowe”: papier milimetrowy, atrament, kobalt i sygnałowa ramka celownika.
   Wszystkie zasoby lokalne (fonty: SIL Open Font License, pliki w /static/fonts). */

@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/static/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(/static/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/static/fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url(/static/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* paleta */
  --papier: #edf1f5;
  --siatka: rgba(20, 33, 61, .055);
  --atrament: #14213d;
  --grafit: #586179;
  --kobalt: #2a3bd1;
  --kobalt-ciemny: #1d2a9e;
  --kobalt-jasny: #e5e8fb;
  --sygnal: #ff5a36;
  --sygnal-jasny: #fff0eb;
  --karta: #ffffff;
  --linia: #cfd6e0;
  --linia-jasna: #e4e9ef;
  --blad: #b8261a;
  --blad-tlo: #fdeceb;
  --ok: #157046;
  --ok-tlo: #e3f3ea;

  /* typografia */
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-tekst: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;

  /* odstępy i kształt */
  --r: 6px;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
}

* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-tekst);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--atrament);
  background-color: var(--papier);
  background-image:
    linear-gradient(var(--siatka) 1px, transparent 1px),
    linear-gradient(90deg, var(--siatka) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--kobalt); text-underline-offset: .18em; }
a:hover { color: var(--kobalt-ciemny); }
:focus-visible { outline: 2px solid var(--sygnal); outline-offset: 2px; }
code, .mono { font-family: var(--f-mono); font-size: .86em; }
code { background: var(--linia-jasna); padding: .08em .38em; border-radius: 4px; }

h1, h2, h3 { font-family: var(--f-display); color: var(--atrament); }
h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.08; margin: 0 0 var(--s3); }
h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: var(--s6) 0 var(--s3); }

/* ---------- nagłówek ---------- */
.naglowek {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s3) var(--s6);
  background: var(--karta);
  border-bottom: 1px solid var(--atrament);
}
.marka { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--atrament); }
.marka-tekst { display: flex; flex-direction: column; line-height: 1.05; }
.marka-tekst strong { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.marka-tekst small { font-family: var(--f-mono); font-size: .7rem; color: var(--grafit); letter-spacing: .02em; }
.menu { display: flex; gap: var(--s1); flex-wrap: wrap; }
.menu a {
  position: relative; display: inline-flex; align-items: baseline; gap: .45rem;
  padding: var(--s2) var(--s3); text-decoration: none; color: var(--atrament); font-weight: 600; border-radius: var(--r);
}
.menu a:hover { background: var(--kobalt-jasny); color: var(--kobalt-ciemny); }
.menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: -.82rem; height: 3px; background: var(--sygnal);
}
.menu-dzien { font-family: var(--f-mono); font-size: .68rem; font-weight: 600; color: var(--grafit); }
.przelacznik {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--s2);
  font: 600 .8rem var(--f-mono); color: var(--atrament); background: var(--karta);
  border: 1px dashed var(--grafit); border-radius: var(--r); padding: .4rem .7rem; cursor: pointer;
}
.przelacznik:hover { border-color: var(--sygnal); }
.przelacznik[aria-pressed="true"] { background: var(--sygnal-jasny); border: 1px solid var(--sygnal); color: #9c2a10; }
.przelacznik-znak { color: var(--sygnal); font-weight: 800; }

.tresc { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s7); }
.stopka {
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  font: .75rem var(--f-mono); color: var(--grafit);
  padding: var(--s4) var(--s6); border-top: 1px solid var(--linia); background: var(--karta);
}

/* ---------- strona główna ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s7); align-items: center;
  padding: var(--s5) 0 var(--s7);
}
.hero h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.6rem); font-weight: 800; max-width: 14ch; }
.hero-lead { font-size: 1.1rem; color: var(--grafit); max-width: 52ch; margin: 0; }
.okaz {
  position: relative; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r);
  padding: var(--s6) var(--s5) var(--s5);
}
.okaz-podpis { position: absolute; top: -.7rem; left: var(--s4); background: var(--papier); padding: 0 var(--s2); font: 600 .7rem var(--f-mono); color: var(--grafit); text-transform: uppercase; letter-spacing: .08em; }
.okaz-pole { position: relative; margin: var(--s3) 0 var(--s5); }
.okaz-etykieta { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.okaz-input { border: 1px solid #a9b3c2; border-radius: var(--r); padding: .6rem .75rem; font-size: 1rem; }
.okaz-kursor { display: inline-block; width: 1px; height: 1.05em; background: var(--atrament); vertical-align: -.15em; margin-left: 1px; animation: mrug 1s steps(1) infinite; }
.okaz-ramka { position: absolute; inset: -8px; pointer-events: none; animation: namierz .9s cubic-bezier(.2, .8, .2, 1) .3s both; }
.okaz-chip { position: absolute; right: -2px; top: -1.55rem; font: 600 .72rem var(--f-mono); color: #fff; background: var(--sygnal); padding: .1rem .45rem; border-radius: 3px 3px 0 0; animation: pojaw .3s ease 1.1s both; }
.okaz-kod { margin: 0; font: .8rem/1.7 var(--f-mono); color: var(--grafit); white-space: pre-wrap; border-top: 1px dashed var(--linia); padding-top: var(--s3); }
.okaz-kod b { color: var(--atrament); font-weight: 600; }
.okaz-kod .k { color: var(--sygnal); }

@keyframes namierz { from { inset: -38px; opacity: 0; } to { inset: -8px; opacity: 1; } }
@keyframes pojaw { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mrug { 50% { opacity: 0; } }

.stanowiska-naglowek { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); border-bottom: 1px solid var(--atrament); padding-bottom: var(--s2); }
.stanowiska-naglowek h2 { margin: 0; }
.stanowiska-naglowek p { margin: 0; font: .78rem var(--f-mono); color: var(--grafit); }
.stanowiska { list-style: none; margin: 0; padding: 0; }
.kafel {
  position: relative;
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 15rem) 11rem; gap: var(--s5); align-items: start;
  padding: var(--s5) var(--s3); border-bottom: 1px solid var(--linia); background: transparent;
  transition: background-color .15s ease;
}
.kafel:hover { background: var(--karta); }
.kafel-dzien { font: 700 .78rem var(--f-mono); color: var(--grafit); padding-top: .35rem; margin: 0; }
.kafel h2 { margin: 0 0 var(--s2); font-size: 1.45rem; }
.kafel h2 a { color: var(--atrament); text-decoration: none; }
.kafel h2 a::before { content: ""; position: absolute; inset: 0; } /* cały wiersz klikalny */
.kafel:hover h2 a { color: var(--kobalt); }
.kafel-opis { margin: 0; color: var(--grafit); max-width: 60ch; }
.kafel-cwiczy { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: .25rem 0 0; list-style: none; }
.kafel-cwiczy li { font: .72rem var(--f-mono); border: 1px solid var(--linia); background: var(--karta); border-radius: 3px; padding: .1rem .4rem; }
.kafel-sciezka { margin: 0; padding-top: .3rem; text-align: right; font: 600 .82rem var(--f-mono); color: var(--kobalt); }

/* ---------- wspólne elementy modułów ---------- */
.naglowek-modulu { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); }
.naglowek-modulu h1 { margin: 0; }
.opis { color: var(--grafit); max-width: 70ch; }
.karta-formularza {
  background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r);
  padding: var(--s5) var(--s6); margin: var(--s4) 0;
}
.karta-formularza h2 { margin-top: 0; font-size: 1.15rem; }
.siatka-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 var(--s5); }
section.siatka-2 { gap: var(--s4) var(--s5); }

.pole { position: relative; margin-bottom: var(--s4); }
.pole label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.pole input[type="text"], .pole input[type="email"], .pole input[type="tel"], .pole input[type="password"],
.pole input[type="search"], .pole select, .pole textarea {
  width: 100%; font: inherit; color: var(--atrament); background: #fff;
  padding: .6rem .75rem; border: 1px solid #a9b3c2; border-radius: var(--r);
  transition: border-color .12s ease;
}
.pole textarea { resize: vertical; }
.pole input::placeholder, .pole textarea::placeholder { color: #8d95a6; }
.pole input:hover, .pole select:hover, .pole textarea:hover { border-color: var(--grafit); }
.pole input:focus, .pole select:focus, .pole textarea:focus { outline: none; border-color: var(--atrament); }
.pole input[readonly] { background: var(--linia-jasna); color: var(--grafit); font-family: var(--f-mono); }

/* Sygnatura: ramka celownika wokół aktywnego pola, jak podświetlenie elementu przy nagrywaniu robota. */
.pole::before, .okaz-ramka {
  --c: var(--sygnal); --d: 12px; --g: 2px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--d) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) top left / var(--g) var(--d) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--d) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--g) var(--d) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--d) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--g) var(--d) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--d) var(--g) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--g) var(--d) no-repeat;
}
.pole::before {
  content: ""; position: absolute; inset: -7px -8px; pointer-events: none; opacity: 0;
  transform: scale(1.04); transition: opacity .15s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.pole:focus-within::before { opacity: 1; transform: none; }
.okaz-ramka { --d: 14px; }

.pole-checkbox { display: flex; align-items: flex-start; gap: var(--s2); flex-wrap: wrap; }
.pole-checkbox input { margin: .2rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--kobalt); }
.pole-checkbox label { font-weight: 500; margin: 0; flex: 1; }
.pole-checkbox .blad { flex-basis: 100%; }
.pole.pole-blad :is(input, select, textarea) { border-color: var(--blad); background: var(--blad-tlo); }
.pole-blad label { color: var(--blad); }
.pole-blad::before { --c: var(--blad); }
.blad { color: var(--blad); font-size: .86rem; margin: .3rem 0 0; display: flex; gap: .35rem; }
.blad::before { content: "!"; font: 700 .7rem/1.15rem var(--f-mono); width: 1.15rem; height: 1.15rem; flex: none; text-align: center; color: #fff; background: var(--blad); border-radius: 50%; margin-top: .08rem; }

/* przyciski */
.akcje { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.przycisk {
  display: inline-flex; align-items: center; gap: .4rem; font: 600 .95rem/1.2 var(--f-tekst);
  text-decoration: none; cursor: pointer; padding: .65rem 1.25rem; border-radius: var(--r);
  border: 1px solid var(--kobalt); background: var(--kobalt); color: #fff;
  transition: background-color .12s ease, transform .08s ease;
}
.przycisk:hover { background: var(--kobalt-ciemny); border-color: var(--kobalt-ciemny); color: #fff; }
.przycisk:active { transform: translateY(1px); }
.przycisk-drugi { background: var(--karta); color: var(--atrament); border-color: var(--atrament); }
.przycisk-drugi:hover { background: var(--atrament); border-color: var(--atrament); color: #fff; }
.przycisk-ostrzegawczy { background: transparent; color: var(--blad); border: 1px dashed var(--blad); }
.przycisk-ostrzegawczy:hover { background: var(--blad-tlo); color: var(--blad); border-color: var(--blad); }
.przycisk-maly { padding: .35rem .8rem; font-size: .85rem; }
.przycisk-duzy { padding: 1rem 3rem; font: 700 1.25rem var(--f-display); letter-spacing: -.01em; }

/* komunikaty */
.komunikat { padding: var(--s3) var(--s4); border-radius: var(--r); margin: var(--s4) 0; border: 1px solid; font-weight: 500; }
.komunikat-blad { background: var(--blad-tlo); border-color: #efb3ad; color: var(--blad); }
.komunikat-ok { background: var(--ok-tlo); border-color: #a6d5bb; color: var(--ok); }
.komunikat-info { background: var(--kobalt-jasny); border-color: #b9c0f3; color: var(--kobalt-ciemny); }
.pusto { color: var(--grafit); border: 1px dashed var(--linia); background: var(--karta); border-radius: var(--r); padding: var(--s5); text-align: center; }
.reset { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px dashed var(--linia); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.reset-opis { margin: 0; color: var(--grafit); font-size: .88rem; }

/* potwierdzenie */
.numer-label { margin: 0; font: 600 .72rem var(--f-mono); color: var(--grafit); text-transform: uppercase; letter-spacing: .1em; }
.numer-duzy { display: inline-block; font: 700 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem) var(--f-mono); letter-spacing: .02em; color: var(--atrament); margin: var(--s2) 0 var(--s5); padding: .2rem .6rem; border: 2px solid var(--sygnal); border-radius: var(--r); }
.opis-pol { display: grid; grid-template-columns: max-content 1fr; gap: .45rem var(--s5); margin: 0; }
.opis-pol dt { color: var(--grafit); font-size: .9rem; }
.opis-pol dd { margin: 0; font-weight: 500; }
.opis-pol-szeroki { grid-template-columns: 12rem 1fr; gap: 0 var(--s5); }
.opis-pol-szeroki dt, .opis-pol-szeroki dd { padding: .45rem 0; border-bottom: 1px solid var(--linia-jasna); }

/* tabele */
.tabela-ramka { position: relative; overflow-x: auto; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); }
.tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabela th, .tabela td { padding: .6rem .85rem; text-align: left; border-bottom: 1px solid var(--linia-jasna); white-space: nowrap; }
.tabela th { font: 600 .74rem var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--grafit); background: #f6f8fa; border-bottom: 1px solid var(--atrament); }
.tabela th a { color: inherit; text-decoration: none; }
.tabela th a:hover { color: var(--kobalt); }
.tabela th[aria-sort], .tabela th[aria-sort] a { color: var(--atrament); }
.tabela th[aria-sort="ascending"] a::after { content: " ↑"; color: var(--sygnal); }
.tabela th[aria-sort="descending"] a::after { content: " ↓"; color: var(--sygnal); }
.tabela tbody tr:hover { background: #f4f6fe; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td.liczba { text-align: right; font-family: var(--f-mono); font-size: .86rem; }
.tabela td.kod { font-family: var(--f-mono); font-size: .86rem; }

.paginacja { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin: var(--s4) 0; font-family: var(--f-mono); font-size: .85rem; }
.paginacja a, .paginacja span.biezaca, .paginacja span.nieaktywny {
  min-width: 2.3rem; padding: .4rem .65rem; text-align: center; border-radius: var(--r);
  border: 1px solid var(--linia); background: var(--karta); text-decoration: none; color: var(--atrament);
}
.paginacja a:hover { border-color: var(--atrament); }
.paginacja span.biezaca { background: var(--atrament); border-color: var(--atrament); color: #fff; font-weight: 700; }
.paginacja span.nieaktywny { color: #a2a9b7; border-style: dashed; }
.paginacja-info { margin-left: auto; color: var(--grafit); }

/* ---------- odczyt danych ---------- */
.wartosc { font-family: var(--f-mono); font-weight: 600; font-size: .92em; background: var(--kobalt-jasny); padding: 0 .3rem; border-radius: 3px; }
.kursy { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s4) 0 0; }
.kurs { margin: 0; border: 1px solid var(--linia); border-radius: var(--r); padding: var(--s3); }
.kurs dt { font: 600 .72rem var(--f-mono); color: var(--grafit); letter-spacing: .08em; }
.kurs dd { margin: .2rem 0 0; font: 700 1.35rem var(--f-mono); }
.kurs dd small { font: 500 .8rem var(--f-tekst); color: var(--grafit); }

/* ---------- formularz zmienny ---------- */
.instrukcja { background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); padding: var(--s3) var(--s5) var(--s3) var(--s6); }
.instrukcja ol { margin: 0; padding-left: 1rem; }
.instrukcja li { margin: .35rem 0; padding-left: .25rem; }
.instrukcja li::marker { font: 700 .85rem var(--f-mono); color: var(--sygnal); }
.pasek-postepu { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); font-weight: 600; }
.pasek-postepu strong { font-family: var(--f-mono); }
.kreski { display: flex; gap: 4px; }
.kreski span { width: 22px; height: 8px; border-radius: 2px; background: var(--linia); }
.kreski span.zrobione { background: var(--atrament); }
.kreski span.biezace { background: var(--sygnal); }
.uklad-losowy { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 2%; padding-top: var(--s2); }
.uklad-losowy .pole { min-width: 210px; }
.start { margin: var(--s6) 0 var(--s4); display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.start p { margin: 0; color: var(--grafit); }
.wynik { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: var(--s4) 0; background: var(--karta); border: 1px solid var(--atrament); border-radius: var(--r); }
.wynik-pole { padding: var(--s4) var(--s5); border-right: 1px solid var(--linia); }
.wynik-pole:last-child { border-right: 0; }
.wynik-etykieta { display: block; font: 600 .72rem var(--f-mono); color: var(--grafit); text-transform: uppercase; letter-spacing: .1em; }
.wynik-wartosc { display: block; font: 700 2.4rem/1.2 var(--f-mono); letter-spacing: -.02em; }

/* ---------- CRM ---------- */
.modul-crm .tresc { max-width: 1320px; }
.crm-pasek {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  background: var(--atrament); color: #dfe5f1; padding: .55rem .6rem .55rem var(--s4); border-radius: var(--r); margin-bottom: var(--s5);
}
.crm-nazwa { font: 800 1rem var(--f-display); letter-spacing: -.01em; color: #fff; }
.crm-nazwa small { font: 500 .7rem var(--f-mono); color: #9aa6c0; margin-left: .4rem; }
.crm-menu { display: flex; gap: .2rem; }
.crm-menu a { color: #dfe5f1; text-decoration: none; padding: .3rem .7rem; border-radius: var(--r); font-weight: 500; }
.crm-menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.crm-uzytkownik { margin-left: auto; font-size: .88rem; }
.crm-uzytkownik strong { font-family: var(--f-mono); color: #ffb3a1; font-weight: 600; }
.crm-wyloguj { margin: 0; }
.crm-pasek .przycisk-drugi { background: transparent; color: #fff; border-color: #6b7896; }
.crm-pasek .przycisk-drugi:hover { background: #fff; color: var(--atrament); }
.wyszukiwarka { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; background: var(--karta); border: 1px solid var(--linia); border-radius: var(--r); padding: var(--s4) var(--s5); margin-top: var(--s3); }
.wyszukiwarka .pole { margin: 0; min-width: 220px; }
.wyszukiwarka .pole:first-child { flex: 1; }
.wyszukiwarka-eksport { margin-left: auto; }
.status { display: inline-flex; align-items: center; gap: .35rem; font-size: .86rem; }
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); }
.status-nie { color: var(--grafit); }
.status-nie::before { background: transparent; border: 1.5px solid var(--grafit); }
.okruszki { margin: 0 0 var(--s2); font: .82rem var(--f-mono); }
.okruszki a { text-decoration: none; }
.logowanie { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 340px); gap: var(--s5); justify-content: center; align-items: start; margin-top: var(--s5); }
.konta-demo { background: var(--sygnal-jasny); border: 1px dashed var(--sygnal); }
.konta-demo code { background: #fff; }

/* ---------- tryb „Pokaż selektory” ---------- */
/* Pseudo-elementy nie trafiają do innerText, więc nie zmieniają tekstu odczytywanego przez robota. */
.pokaz-selektory :is(label[for], .przycisk[id], dd[id], .wartosc[id], .wartosc-kurs[id])::after {
  display: inline-block; margin-left: .45rem; vertical-align: .08em;
  font: 600 .66rem/1.5 var(--f-mono); letter-spacing: 0; text-transform: none;
  color: #9c2a10; background: var(--sygnal-jasny); border: 1px solid #ffc2b2; border-radius: 3px; padding: 0 .3rem;
}
.pokaz-selektory :is(.przycisk[id], dd[id], .wartosc[id], .wartosc-kurs[id])::after { content: "#" attr(id); }
.pokaz-selektory .pole label[for]::after, .pokaz-selektory label[for]::after { content: "#" attr(for); }
.pokaz-selektory .tabela-ramka[data-sel] { overflow: visible; margin-top: 1.6rem; outline: 2px solid var(--sygnal); outline-offset: 2px; }
.pokaz-selektory .tabela-ramka[data-sel]::before {
  content: "#" attr(data-sel); position: absolute; top: -1.5rem; right: -2px;
  font: 600 .7rem/1.5 var(--f-mono); color: #fff; background: var(--sygnal); border-radius: 3px 3px 0 0; padding: 0 .45rem;
}

/* ---------- responsywność i ruch ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: var(--s6); }
  .kafel { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .kafel-cwiczy, .kafel-sciezka { grid-column: 2; text-align: left; }
}
@media (max-width: 700px) {
  .naglowek { padding: var(--s3) var(--s4); gap: var(--s3); }
  .menu a[aria-current="page"]::after { bottom: 0; }
  .przelacznik { margin-left: 0; }
  .tresc { padding: var(--s5) var(--s4) var(--s6); }
  .karta-formularza { padding: var(--s4); }
  .kafel { grid-template-columns: 1fr; gap: var(--s2); }
  .kafel-cwiczy, .kafel-sciezka { grid-column: 1; }
  .logowanie { grid-template-columns: 1fr; }
  .kursy { grid-template-columns: 1fr; }
  .opis-pol-szeroki { grid-template-columns: 1fr; }
  .opis-pol-szeroki dt { border-bottom: 0; padding-bottom: 0; }
  .uklad-losowy .pole { width: 100% !important; margin-left: 0 !important; }
  .wyszukiwarka-eksport { margin-left: 0; }
  .paginacja-info { margin-left: 0; flex-basis: 100%; }
  .stopka { padding: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.logowanie h1 { font-size: 2rem; margin-bottom: var(--s5); }
.instrukcja { margin-top: var(--s4); }