:root {
  --tlo: #0d1014;
  --tlo-karta: #151a21;
  --obwodka: #222a35;
  --tekst: #e6ebf2;
  --tekst-slaby: #8b97a8;
  --akcent: #4ade80;
  --akcent-ciemny: #16341f;
  --czerwony: #f87171;
  --czerwony-ciemny: #3a1a1a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font: 16px/1.6 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.srodek { width: 100%; max-width: 700px; margin: 0 auto; padding: 0 20px; }

.gora {
  border-bottom: 1px solid var(--obwodka);
  background: #0a0d11;
  padding: 18px 0;
  margin-bottom: 28px;
}

.gora .srodek { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.logo { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--tekst); text-decoration: none; }
.logo span { color: var(--akcent); }

.linki { display: flex; gap: 10px; }

.przycisk {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--obwodka);
  background: var(--tlo-karta);
  color: var(--tekst);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.przycisk:hover { border-color: var(--akcent); color: var(--akcent); }

.karta {
  background: var(--tlo-karta);
  border: 1px solid var(--obwodka);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 20px;
}

.karta h1 { margin: 0 0 8px; font-size: 24px; }
.karta h2 { margin: 0 0 16px; font-size: 16px; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: 1px; }

.opis-glowny { color: var(--tekst-slaby); margin: 0; }

.siatka-wyboru { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

.karta-wyboru {
  border: 2px solid var(--obwodka);
  background: #11161c;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--tekst);
  font: inherit;
}

.karta-wyboru:hover { border-color: var(--tekst-slaby); }
.karta-wyboru.wybrane { border-color: var(--akcent); background: var(--akcent-ciemny); }
.karta-wyboru:disabled { opacity: 0.45; cursor: not-allowed; }

.karta-wyboru .nazwa { display: block; font-weight: 700; margin-bottom: 4px; }
.karta-wyboru .szczegol { display: block; font-size: 13px; color: var(--tekst-slaby); }

.pole { display: block; margin-bottom: 14px; }
.pole span { display: block; font-size: 13px; color: var(--tekst-slaby); margin-bottom: 4px; }

.pole input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--obwodka);
  background: #0a0d11;
  color: var(--tekst);
  font: inherit;
}

.pole input:focus { outline: none; border-color: var(--akcent); }

.podpowiedz { font-size: 13px; color: var(--tekst-slaby); margin: -8px 0 16px; }
.podpowiedz code { background: #0a0d11; padding: 1px 5px; border-radius: 4px; }

.przycisk-glowny {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: var(--akcent);
  color: #04170a;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.przycisk-glowny:hover { filter: brightness(1.08); }
.przycisk-glowny:disabled { opacity: 0.6; cursor: not-allowed; }

.komunikat { margin: 14px 0 0; padding: 12px 14px; border-radius: 8px; font-size: 14px; }
.komunikat.blad { background: var(--czerwony-ciemny); border: 1px solid #5a2626; color: var(--czerwony); }
.komunikat.ok { background: var(--akcent-ciemny); border: 1px solid #1f4a2a; color: var(--akcent); }

.pusto { color: var(--tekst-slaby); margin: 0; }

.stopka { border-top: 1px solid var(--obwodka); margin-top: 40px; padding: 24px 0 40px; color: var(--tekst-slaby); font-size: 14px; }
.stopka p { margin: 0 0 4px; }
.drobne { font-size: 13px; }