/* Kolory i czcionki portalu — zmień tutaj, by dopasować do swojej marki. */
:root {
  --tlo: #f6f3ee;
  --karta: #ffffff;
  --tekst: #1f1d1a;
  --tekst-cichy: #6b665e;
  --akcent: #2f5d50;
  --akcent-hover: #244a40;
  --ramka: #e2ddd4;
  --ok-tlo: #e7f2ec;
  --ok-tekst: #1e5a3c;
  --blad-tlo: #fbeaea;
  --blad-tekst: #8a2424;
  --promien: 14px;
  --czcionka: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tlo: #161513;
    --karta: #211f1c;
    --tekst: #f2efe9;
    --tekst-cichy: #a8a197;
    --akcent: #6fb39d;
    --akcent-hover: #86c4b0;
    --ramka: #36332e;
    --ok-tlo: #17302a;
    --ok-tekst: #9fd8bf;
    --blad-tlo: #3a1d1d;
    --blad-tekst: #f2b1b1;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--czcionka);
  font-size: 16px;
  line-height: 1.55;
}

h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.znak {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akcent);
}

.opis {
  margin: 0 0 1.5rem;
  color: var(--tekst-cichy);
}

/* --- Logowanie --- */
.karta {
  width: min(100% - 32px, 420px);
  margin: 12vh auto 2rem;
  padding: 2rem 1.75rem;
  background: var(--karta);
  border: 1px solid var(--ramka);
  border-radius: var(--promien);
}

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}

input[type="email"] {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  color: var(--tekst);
  background: var(--tlo);
  border: 1px solid var(--ramka);
  border-radius: 10px;
}

input[type="email"]:focus,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--akcent) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--akcent);
}

button {
  font: inherit;
  cursor: pointer;
}

#przycisk {
  width: 100%;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--akcent);
  border: 0;
  border-radius: 10px;
}

@media (prefers-color-scheme: dark) {
  #przycisk { color: #10201b; }
}

#przycisk:hover:not(:disabled) { background: var(--akcent-hover); }

button:disabled,
input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.komunikat {
  margin: 1.25rem 0 0;
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  font-size: 0.95rem;
  background: var(--tlo);
}

.komunikat[data-rodzaj="ok"] { background: var(--ok-tlo); color: var(--ok-tekst); }
.komunikat[data-rodzaj="blad"] { background: var(--blad-tlo); color: var(--blad-tekst); }

/* --- Panel --- */
.pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 16px;
  max-width: 880px;
  margin: 0 auto;
}

.pasek .znak { margin: 0; }

.przycisk-drugi {
  padding: 0.5rem 0.9rem;
  color: var(--tekst);
  background: transparent;
  border: 1px solid var(--ramka);
  border-radius: 10px;
}

.przycisk-drugi:hover:not(:disabled) { border-color: var(--tekst-cichy); }

.panel {
  max-width: 880px;
  margin: 8vh auto 2rem;
  padding: 0 16px;
}

.panel .opis { max-width: 36rem; font-size: 1.05rem; }