/* Ekran logowania i odzyskiwania klucza.

   PROJEKT WŁASNY, nie odtworzenie `iofrm-theme16`. Tamten szablon z 2020 roku
   był generycznym motywem SaaS dołączonym do EduAppGT — nie znał ani Twojej
   marki, ani polskich napisów, i wymuszał kompromisy: cień pod każdym napisem,
   karta wąska na 340px, przycisk konkurujący o uwagę z linkiem obok.

   Punktem wyjścia jest LOGO. Ręcznie pisany „MatMentor" z sercami zamiast „o"
   jest tu jedyną rzeczą naprawdę charakterną, więc wszystko poza nim się cofa.

   Trzy zasady, z których wynika reszta:

   1. JEDNA WAGA PISMA. Plik `comfortaa-...-500.woff2` zawiera tylko wagę 500.
      Każde `bold` w CSS każe przeglądarce pogrubiać SYNTETYCZNIE — rozciągać
      glify — co daje rozmyty, cięższy tekst i szerszy, niż mierzy font.
      Różnicujemy więc rozmiarem, kolorem i odstępem, nigdy grubością.

   2. BEZ CIENI POD TEKSTEM. `text-shadow` spod oryginału dawał tę lekką
      mętność, którą widać było na zrzutach. Kontrast robi kolor, nie cień.

   3. JEDNA AKCJA W JEDNYM MIEJSCU. Przycisk na całą szerokość, link do
      odzyskiwania pod spodem i wyciszony — w oryginale stały obok siebie
      i ciągnęły wzrok równie mocno.

   Kolor akcentu jest jedną zmienną. Domyślnie malinowy z serc w logo; zmiana
   na firmowy błękit `#1B55E2` to jedna linia. */
:root {
  --akcent:       #E11D48;
  --akcent-ciemny:#BE123C;
  --tekst:        #2C3242;
  --tekst-slaby:  #8B93A7;
  --pole:         #F4F5F8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Comfortaa, sans-serif;
  font-weight: 500;          /* jedyna waga w pliku — patrz zasada 1 */
  color: var(--tekst);
  -webkit-font-smoothing: antialiased;
}

/* Nagłówki też 500. Bez tej reguły arkusz przeglądarki daje im `bold`,
   a że siedemsetki w foncie nie ma, tekst jest sztucznie rozciągany. */
h1, h2, h3, h4, h5, h6 { font-weight: 500; margin: 0; }

/* ---------- układ ---------- */

.form-body { min-height: 100vh; display: flex; }

/* Zdjęcie w tle zostaje. `::after` przyciemnia je na tyle, żeby biała karta
   miała się od czego odciąć niezależnie od tego, jaką fotografię wgrasz —
   bez tego jasne tło zlewa się z kartą, a ciemne przytłacza. */
.form-content {
  position: relative;
  flex: 1; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  padding: 40px 20px;
}
.form-content::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(18, 22, 33, 0.28);
}

/* ---------- karta ---------- */

/* `backdrop-filter` wpuszcza tło pod kartę na tyle, żeby zdjęcie było wciąż
   obecne, a treść czytelna. Przeglądarki bez tej właściwości dostają
   nieprzezroczystą biel z `background-color` — wygląd jest wtedy zwyczajniejszy,
   ale nic się nie psuje. */
.form-items {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  padding: 44px 40px 38px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(12, 16, 26, 0.28);
  text-align: center;
}

/* ---------- logo i nagłówek ---------- */

.logo-size {
  display: block; margin: 0 auto 26px;
  max-width: 210px; height: auto;
}

/* 19px zmierzone tablicą `hmtx` samego fontu: najdłuższy napis („Magiczny
   Pałac Matematyczny") zajmuje 306px, a treść karty ma 340px. Mieści się
   w jednej linii z zapasem, bez zawijania i bez zmniejszania na siłę. */
h5 {
  font-size: 19px;
  line-height: 1.45;
  color: var(--tekst);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

p.hint {
  font-size: 13px; line-height: 1.65;
  color: var(--tekst-slaby);
  margin: 10px 0 0;
}

/* ---------- pola ---------- */

/* Wypełnienie zamiast ramki, a ramka pojawia się dopiero przy aktywnym polu.
   Spokojniej niż stała obwódka wokół każdego pola, a wskazuje to samo. */
.form-control {
  width: 100%;
  margin-top: 12px;
  padding: 14px 18px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--pole);
  font-family: inherit; font-weight: 500; font-size: 15px;
  color: var(--tekst);
  outline: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.form-control::placeholder { color: var(--tekst-slaby); opacity: 1; }
.form-control:hover  { background: #EDEFF4; }
.form-control:focus  { background: #fff; border-color: var(--akcent); }

/* Pierwsze pole po nagłówku potrzebuje większego odstępu niż kolejne
   między sobą — stąd margines na kontenerze, nie na każdym polu. */
form { margin-top: 22px; }

/* ---------- przycisk i link ---------- */

.form-button { margin-top: 22px; }

.ibtn {
  width: 100%;
  border: 0; border-radius: 12px;
  padding: 14px 20px;
  background: var(--akcent); color: #fff;
  font-family: inherit; font-weight: 500; font-size: 15px;
  letter-spacing: .2px;
  cursor: pointer;
  transition: background-color .18s ease, transform .06s ease;
}
.ibtn:hover  { background: var(--akcent-ciemny); }
.ibtn:active { transform: translateY(1px); }
.ibtn:focus-visible { outline: 3px solid rgba(225, 29, 72, .35); outline-offset: 2px; }

/* Wyciszony i pod przyciskiem, nie obok. To droga awaryjna, nie druga
   równorzędna akcja. */
.page-links { margin-top: 20px; }
.page-links a {
  font-size: 13px; color: var(--tekst-slaby); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.page-links a:hover { color: var(--akcent); border-bottom-color: currentColor; }

/* ---------- komunikaty ---------- */

.alert {
  margin-top: 20px; padding: 12px 16px;
  border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  text-align: left;
}
.alert-danger  { background: #FEF0F1; color: #B42318; }
.alert-success { background: #ECFDF3; color: #067647; }

/* ---------- wąskie ekrany ---------- */

@media (max-width: 480px) {
  .form-content { padding: 24px 16px; }
  .form-items   { padding: 34px 26px 30px; border-radius: 18px; }
  .logo-size    { max-width: 170px; margin-bottom: 20px; }
  h5            { font-size: 17px; }
}