@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   KOLOR WŁASNYCH KONTROLEK PRZEGLĄDARKI
   ============================================================================
   "color-scheme" mówi przeglądarce, czy rysować pasek przewijania, rozwijane
   listy i ikone w polu hasła w wariancie jasnym czy ciemnym. Bez tego w
   trybie ciemnym zostają jasne - biały pasek przewijania na ciemnej stronie.

   PUŁAPKA, dla której te reguły NIE stoją przy [data-theme="dark"]: przeglądarka
   czyta "color-scheme" raz, przy pierwszym renderze motywu strony. Gdyby
   wartość dojść dopiero z motyw.js (moduł, czyli już po zbudowaniu DOM),
   pasek zdążyłby się pomalować po jasno i zostalby jasny. Dlatego "light"
   siedzi w :root - regule, która istnieje zawsze, niezależnie od JS.

   Te reguły muszą stać PO @import z linii 1. Przed nim nie mogą być żadne
   reguły - przeglądarka odrzuciłaby wtedy cały arkusz jako błędny składniowo. */
:root {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

:root {
    --ink: #15131F;
    --paper: #F7F6FB;
    --panel: #F8F6FC;
    --purple: #5448C8;
    --purple-deep: #3D2FBD;
    --lavender: #ECE9FB;
    --lavender-deep: #D9D2F7;
    --gold: #E8A33D;
    --border: #E5E1F1;
    --muted: #6B6B78;

    /* ---- CIELE MOTYWU ----
       Wszystkie kolory, ktore wczesniej byly wpisane wprost w regulach.
       Bez tych zmiennych ciemny motyw nie mialby gdzie podmienic - regula
       z "background: #fff" zawsze wygrywala z bloku [data-theme="dark"]
       na dole pliku. */

    /* tlo wypelnionych przyciskow. Osobne od --purple, bo w ciemnym
       motywie akcent musi byc jasny (tekst na karcie), a pod bialym
       tekstem musi byc CIEMNY. Jedna zmienna nie ogarnie obu. */
    --przycisk: #5448C8;
    --przycisk-hover: #3D2FBD;

    --karta: #FFFFFF;                                  /* karta i tlo pod nia */
    --karta-ramka: #e1dff0;
    --panel-tlo: linear-gradient(180deg, #f9f7fd 0%, #f2f0f8 100%);
    --pole: #F7F6FB;                                   /* tlo pol formularza */
    --pole-focus: #fff;
    --placeholder: #9C9BA8;
    --szklo: rgba(255, 255, 255, 0.86);                /* tlo .back-home */
    --szklo-hover: #fff;
    --tytul: #000000;                                  /* tekst na plamistym obrazie */
    --plama: rgba(247, 246, 251, 0.86);                /* tlo pod .visual-copy */
    --plama-sombra: 0 12px 34px rgba(21, 19, 31, 0.14);
    --karta-sombra: 0 18px 36px rgba(33, 30, 49, 0.09), 0 0 0 1px rgba(84, 72, 200, 0.04);
    --sombra-spolki: 0 8px 16px rgba(93, 76, 230, 0.08);

    /* obwodki fokusu. Ciemny fiolet na ciemnym tle bylyby niewidoczny,
       wiec w motywie ciemnym tez sa ciezsze, nie tylko czystsze. */
    --ring: rgba(84, 72, 200, 0.18);
    --ring-slaby: rgba(84, 72, 200, 0.12);
    --ring-mocny: rgba(84, 72, 200, 0.20);

    --blad-tlo: #fdf0f0;
    --blad-ramka: #f0b4b4;
    --blad-krawedz: #d33b3b;
    --blad-tekst: #a12525;

    --bialy: #ffffff;                                  /* tekst na fioletowym */
}

/* ---- MOTYW CIEMNY ----

   Jasny jest domyslny. Wszystko, co nie jest zmienna, a rozni sie miedzy
   motywami (obraz tla, szklo przycisku, tlo pod napisami), opisane jest
   nizej przy ".login-visual" i ".visual-copy::before". */
[data-theme="dark"] {
    --ink: #EFEDFB;
    --paper: #0E0E24;
    --panel: #141434;
    --purple: #8F80F7;        /* jasny fiolet - do tekstu i ikon na ciemnym */
    --purple-deep: #B0A4FF;
    --lavender: #1E1B3A;
    --lavender-deep: #342B5C;
    --gold: #E8A33D;
    --border: #2E2E60;
    --muted: #A9A4CE;

    /* Jasny fiolet #8F80F7 dalby z bialym tekstem 2,8:1 - za malo.
       Przycisk musi zostac ciemny: #5C4BC4 daje z bialym 6,4:1,
       a na hover #6A57E0 daje 5,1:1. */
    --przycisk: #5C4BC4;
    --przycisk-hover: #6A57E0;

    --karta: #1A1A3E;
    --karta-ramka: #342B5C;
    --panel-tlo: linear-gradient(180deg, #16143A 0%, #0E0E24 100%);
    --pole: #12101F;
    --pole-focus: #1A1A3E;
    --placeholder: #6F6A94;
    --szklo: rgba(20, 18, 45, 0.86);
    --szklo-hover: #241D40;
    --tytul: #EFEDFB;
    --plama: rgba(10, 10, 30, 0.80);
    --plama-sombra: 0 12px 34px rgba(0, 0, 0, 0.55);
    --karta-sombra: 0 18px 36px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(143, 128, 247, 0.16);
    --sombra-spolki: 0 8px 16px rgba(0, 0, 0, 0.40);

    --ring: rgba(143, 128, 247, 0.38);
    --ring-slaby: rgba(143, 128, 247, 0.28);
    --ring-mocny: rgba(143, 128, 247, 0.45);

    --blad-tlo: #3A1418;
    --blad-ramka: #7A2B2B;
    --blad-krawedz: #FF9B8A;
    --blad-tekst: #FFD0C9;

    --bialy: #ffffff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* WYSOKOSC OKNA, a nie szerokosc - to klucz do poprawnego skalowania.
   Wczesniej bylo "min-height: 100vh", czyli strona mogla byc DLUZSNA niz
   okno i pojawial sie pasek przewijania na dol. Przy kracie 841 px
   przewijanie bylo calkiem normalne, a nie wyjatkiem.

   Teraz grid ma dokladnie wysokosc okna ("height", nie "min-height"), a
   wszystko, co nie mieści sie w pionie, przewija się WEWNATRZ karty
   (patrz .login-card). Okno przestaje miec pasek przewijania w ogole.

   "100dvh" (dvh = dynamic viewport height) uwzglednia pasek adresu
   przegladarki na telefonie. Stare "100vh" liczy go jako zajety, przez co
   strona byla zawsze troche za wysoka i przewijala sie o ~60 px.
   Druga linia to zapas dla starszych przegladarek, ktore dvh nie znaja. */
.login-page {
    display: grid;
    height: 100vh;
    height: 100dvh;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
}

/* ---------- Visual panel ---------- */

.login-visual {
    position: relative;
    display: flex;
    /* "min-height: 0" zamiast "min-height: 100vh". Przy ustalonym
       "height" na .login-page, wartosc 100vh na elemencie gridu rozpychała
       wiersz i wymuszala przewijanie strony. Tlo jest "background-size:
       cover", wiec przy krotszym wierszu po prostu sie przycina - wyglada
       tak samo, a strona nie urosla. */
    min-height: 0;
    flex-direction: column;
    justify-content: flex-end;
    padding: 44px 6vw 54px;
    overflow: hidden;
    background-image:
        url("/assets/img/login/bg2.png");
    background-position: center;
    background-size: cover;
}


/* Szerokosc kontenera naglowka.
   WAZNE: "min(460px, 72%)" bylo za waskie. Szerokosc kontenera liczona byla
   z 72% kolumny w gridzie, a rozmiar czcionki z "clamp(...vw...)" czyli
   z szerokosci OKNA. Te dwie rzeczy nie byly ze soba zsynchronizowane,
   przez co napis "Wiecej pewnosci." (553 px przy czcionce 64 px) mial
   tylko 286 px miejsca i lamal sie na dwa wersy. Naglowek zajmowal
   wtedy 3 linie zamiast 2 i wygladal tak, jakby teksty sie zlewaly.
   Teraz kontener bierze cala dostepna szerokosc (max 460 px), a czcionka
   ma gorny limit dobrany tak, zeby najdluzszy napis zawsze sie zmiescil:
   46 px * 553/64 = 397 px < 460 px. */
.visual-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: min(460px, 100%);
    max-width: 100%;
    margin: 0 0 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--tytul);
    text-align: left;
    /* "isolation: isolate" tworzy wlasny kontekst nakladania. Bez
       tego "z-index: -1" ponizej wypadlby za tlo rodzica, czyli za
       obrazek, i karta bylyby niewidoczna. */
    isolation: isolate;
}

/* Jasne tlo pod napisami.

   PROBLEM: tlo ".login-visual" to plamisty obraz - jasne liliowe plamy
   przeplataja sie z ciemnoszarymi (jasnosc 90/255). Srednio pod napisem
   jest jasno, wiec na pierwszy rzut oka wszystko wyglada dobrze. Ale
   czarny tekst ladajac na szara plame spada do kontrastu 3,0:1 i
   praktycznie znika. To jest dokladnie to, co widzi uzytkownik, jak
   mowi, ze napisy "zlewaja sie z tlem".

   ROZWIAZANIE: stale jasne tlo pod blokiem tekstu. Wtedy niezaleznie
   od szerokosci okna, rozdzielczosci i tego, jaki fragment obrazka
   akurat trafi pod napisy, tlo pod tekstem jest takie samo. Przy
   kryciu 0,86 najciemniejszy mozliwy punkt tla (84,84,84) daje po
   zlozeniu jasnosc ~224, czyli kontrast z czarnym tekstem 16:1 -
   cztery razy wiecej, niz wymaga WCAG AA dla malej czcionki.

   DLACZEGO "::before" z ujemnym "inset", a nie tlo na ".visual-copy":
   padding zmniejszylby szerokosc kontenera 460 px do 408 px, a dlugie
   napisy ("Wiecej pewnosci." = 397 px przy czcionce 46 px) przestalyby
   sie miescic i zlamy na dwa wersy. Ujemny "inset" zostawia sam
   uklad tekstu nietkniety - dodaje tylko tlo wokol niego. */
.visual-copy::before {
    content: "";
    position: absolute;
    inset: -20px -26px;
    border-radius: 20px;
    background: var(--plama);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--plama-sombra);
    z-index: -1;
}

.visual-copy p {
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid var(--gold);
    color: var(--tytul);
    font-size: 0.96rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    max-width: 280px;
}

/* Gorny limit 2.875rem = 46 px, a nie 4rem = 64 px - powod powyzej.
   line-height 1.04 zamiast 0.96 - przy 0.96 dwie linie wygladaly jak
   jedna zlewana linia. */
.visual-copy h1 {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.875rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: normal;
    hyphens: none;
}

.visual-copy h1 span {
    display: block;
    margin-top: 10px;
    color: var(--tytul);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ---------- Form panel ---------- */

/* Odstepy liczone z WYSOKOSCI okna (vh), nie ze sztywnych pikseli.
   Dzieki temu na wysokim ekranie panele sa wygodne, a na niskim
   (laptop 1366x768) automatycznie sie kurcaja i karta mieści sie bez
   przewijania. vh jako trzeci argument "clamp" to sufit, wartosc
   środkowa to dolny limit - ponizej niego zostaje juz minimalny. */
.login-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.4vh, 14px);
    /* "min-height: 0" pozwala kurczyc sie w gridzie, "overflow: hidden"
       jest gwarancja, ze NIC nie wypchnie paska przewijania na okno. */
    min-height: 0;
    overflow: hidden;
    padding: clamp(16px, 2.6vh, 26px) 6vw clamp(16px, 2.6vh, 26px);
    background: var(--panel-tlo);
}

/* ---------- Powrot na strone glowna ---------- */

.back-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* "flex-shrink: 0" - przycisk nie moze sie skurcic, bo wtedy
       napis wylezlby z zaokraglenia. */
    flex-shrink: 0;
    padding: clamp(6px, 1.1vh, 9px) 16px clamp(6px, 1.1vh, 9px) 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--szklo);
    color: var(--ink);
    font-size: clamp(0.82rem, 1.5vh, 0.88rem);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.back-home:hover {
    border-color: var(--lavender-deep);
    background: var(--szklo-hover);
    color: var(--purple-deep);
}

.back-home:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px var(--ring);
}

.back-home svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform .18s ease;
}

.back-home:hover svg {
    transform: translateX(-2px);
}

/* "flex: 0 1 auto" + "min-height: 0" - to para, ktora dziala:
   przew flex pozwala kurczyc ten element (domyslnie "1"), a "min-height: 0"
   zdejmuje z niego blokade domyslna, w ktorej element nie moze byc nizszy
   niz jego tresc. Dzieki temu karta:
     - na wysokim ekranie jest tak wysoka, jak chce (rosnie),
     - na niskim ekranie kurczy sie do miejsca, ktore zostalo,
     - a zawartosc, ktora sie nie zmiescila, przewija sie WEWNATRZ karty.

   "overflow-y: auto" (nie "hidden") pokazuje pasek przewijania TYLKO
   wtedy, gdy jest co przewijac. Przy dopasowanym rozmiarze nic nie
   wychodzi poza karte i przewijanie w ogole sie nie pojawia.

   To ostatnie zabezpieczenie na ekstremalnie niskie okna. Na normalnych
   ekranach pionowy rytm ustawiony wyzej (vh) sprawia, ze karta mieści sie
   bez przewijania w ogole. */
.login-card {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
    width: min(440px, 100%);
    padding: clamp(18px, 2.8vh, 26px) clamp(22px, 2.5vw, 32px) clamp(16px, 2.2vh, 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    border: 1px solid var(--karta-ramka);
    border-top: 4px solid var(--purple);
    border-radius: 18px;
    background: var(--karta);
    box-shadow: var(--karta-sombra);
}

.card-header {
    margin-bottom: clamp(12px, 2.1vh, 20px);
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--purple);
    font-family: 'Inter', Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.9vh, 1.05rem);
}

.login-card h2 {
    margin: 0 0 clamp(6px, 1.4vh, 10px);
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 2.5vw, 2.6rem);
    letter-spacing: -0.01em;
}

.intro {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.google-button,
.submit-button {
    width: 100%;
    min-height: clamp(44px, 5.2vh, 46px);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

.google-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--border);
    background: var(--karta);
    color: var(--ink);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.google-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.google-button .google-logo {
    display: block;
    width: 18px;
    height: 18px;
}

.google-button:hover {
    border-color: var(--lavender-deep);
    background: var(--lavender);
}

/* "white-space: nowrap" zostal zdjety. Przy waskim ekranie napis w spanie
   nie mial miejsca i wysuwal sie poza karte, bo linie (::before/::after)
   mialy "flex: 1" i nie mogly sie skurczyc. Teraz linie maja
   "min-width: 12px", a tekst moze sie zlamac - nigdy nie wyjedzie. */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: clamp(10px, 1.8vh, 16px) 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.divider::before,
.divider::after {
    content: "";
    height: 1px;
    flex: 1 1 0;
    min-width: 12px;
    background: var(--border);
}

.divider span {
    flex: 0 1 auto;
    min-width: 0;
    text-align: center;
}

/* Odstepy miedzy polami. Wczesniej 10 px na 9 odstepow dawalo 90 px
   samych pustych miejsc - to byl najwiekszy pojedynczy zjadacz
   wysokosci w formularzu. */
.login-form {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 0.9vh, 8px);
}

.login-form label,
.password-label {
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    /* 1.3 zamiast domyslnego ~1.5 - etykiety sa krotkie, a na czterech
       polach oszczednosc kilku pikseli na kazdej sie kumuluje. */
    line-height: 1.3;
}

.password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: clamp(2px, 0.5vh, 4px) 0 clamp(5px, 1.1vh, 8px);
}

.password-label a,
.register-note a {
    color: var(--purple);
    text-decoration: none;
}

.password-label a:hover,
.register-note a:hover {
    text-decoration: underline;
}

.password-label a {
    font-size: 0.82rem;
    font-weight: 500;
}

.login-form input {
    /* Dolny limit 42 px to wciaz wygodne pole do klikania i pisania
       telefonem. Wyzej niz 42 px celofon jest pierwszy do trafienia
       i literowki. Sufit 44 px zamiast 48 - pole nadal swobodnie
       mieści tekst, a cztery pola oszczedzaja 16 px wysokosci. */
    min-height: clamp(42px, 5vh, 44px);
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.login-form input::placeholder {
    color: var(--placeholder);
}

.login-form input:focus {
    outline: 0;
    background: var(--pole-focus);
    border-color: var(--purple);
    box-shadow: 0 0 0 4px var(--ring);
}


/* ---------- Wybor roli: uczen / nauczyciel ----------

   UWAGA o wysokosci: ta sekcja dodaje ~66 px do karty
   rejestracyjnej, a karta miala przed nia 721 px tresci przy 886 px
   okna. Karta z opcjami w dwoch wierszach (ikona + opis) miala 813 px
   tresci przy 792 px wysokosci - czyli przewijala sie juz wewnetrznie,
   czego wlasnie sie pozbyliśmy.

   Dlatego opcje leza OBOK siebie (dwie kolumny) i maja JEDEN wiersz
   tekstu: ikona + pogrubiona etykieta. Opisy w rodzaju "Ucz sie i robie
   testy" zawijały sie na dwie linie przy szerokosci kafelka 178 px
   i rozpychały opcje do 60 px zamiast 42 px. Samo "Uczien" /
   "Nauczyciel" z ikoną mowi o tym samym bez zadnego przewijania. */
.role-picker {
    /* Fieldset ma domyslne obramowanie, margines i padding - w gridzie
       .login-form (flex) wygladalby jak dodatkowa ramka w ramce. */
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.role-picker legend {
    padding: 0;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
}

.role-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.role-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    /* Ten sam "click target" co pole tekstowe wyzej - palec nie trafia
       w 6-pikselowy radio, tylko w cala kafelek. */
    min-height: clamp(40px, 4.8vh, 42px);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--paper);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Radio jest nadal w DOM i nadal dostępny klawiaturze - tylko go nie
   widac. "sr-only" zamiast "display: none", bo display:none wyrzuca
   pole z tabulacji i nie dałoby się nim obsłużyć bez myszy. */
.role-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* :has() - przeglądarki od 2023 roku (Chrome 105, Safari 15.4,
   Firefox 121). Starsze zignoruja ten blok i pokaza neutralne pole
   bez zaznaczenia, a backend i tak dostanie poprawna role, bo
   w HTML ustawione jest checked na "student". */
.role-option:has(input:checked) {
    border-color: var(--purple);
    background: var(--lavender);
    box-shadow: 0 0 0 3px var(--ring-slaby);
}

.role-option:hover {
    border-color: var(--lavender-deep);
}

/* Focus na niewidocznym rdio - pokazujemy obwódkę na kafelku,
   inaczej osoba klawiaturą nie widzi gdzie jest. */
.role-option:has(input:focus-visible) {
    outline: 0;
    box-shadow: 0 0 0 4px var(--ring-mocny);
}

.role-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--muted);
    transition: color 0.2s ease;
}

.role-option:has(input:checked) .role-icon {
    color: var(--purple);
}

.role-icon svg {
    width: 20px;
    height: 20px;
}

.role-text {
    /* "min-width: 0" pozwala tekstowi się zawijać. Bez tego flex
       potraktowalby .role-text jako sztywną szerokość i wypchnął
       napis poza kafelek przy waskim telefonie. */
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    /* Etykieta "Nauczyciel" jest dluzsza niz "Uczen" - bez tego
       centrowanie wzgledem ikony wygladalo by nierowno. */
    flex: 1;
}

.submit-button {
    margin-top: clamp(8px, 1.4vh, 12px);
    border: 0;
    background: var(--przycisk);
    color: var(--bialy);
    transition: background-color 0.2s ease;
}

.submit-button:hover {
    background: var(--przycisk-hover);
}

.card-footer {
    margin-top: clamp(12px, 2.1vh, 20px);
    padding-top: clamp(10px, 1.6vh, 14px);
    border-top: 1px solid var(--border);
}

.register-note {
    margin: 0;
    color: var(--muted);
    text-align: center;
    font-size: 0.92rem;
}

/* ---------- Komunikat o bledzie ---------- */

.error-box {
    display: none;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--blad-ramka);
    border-left: 4px solid var(--blad-krawedz);
    border-radius: 8px;
    background: var(--blad-tlo);
    color: var(--blad-tekst);
    font-size: 0.88rem;
    line-height: 1.5;
}

.submit-button:disabled,
.google-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

@media (max-width: 800px) {
    .login-page {
        display: block;
    }

    .login-visual {
        display: none;
    }

    /* Padding 92px zostal zmniejszony do 28px. Byl tam pod logo
       ".mobile-logo", ktorego nigdy nie bylo w HTML - na telefonie
       zostawialo puste 92 px nad formularzem. Miejsce na górze zajmuje
       teraz link "Wróć na stronę główną", bo jest w normalnym przepływie.

       UWAGA: "overflow: hidden" zostaje celowo. Panel musi miescic sie w
       wysokosci okna, inaczej pasek przewijania wraca do okna - a to
       wlasnie problem, ktory tu naprawiamy. Przewijanie jest w karcie. */
    .login-panel {
        justify-content: flex-start;
        padding: 20px 20px 28px;
    }

    .back-home {
        margin-bottom: 8px;
    }

    .login-card {
        padding: 26px 22px 24px;
        border-radius: 12px;
    }

    /* Na telefonie karta zajmuje cala szerokosc, wiec padding poziomy
       jest zbyteczny - zwladza w nim tylko pola na wezscie. */
    .login-form input,
    .google-button,
    .submit-button {
        min-height: 48px;
    }

    .login-form {
        gap: 10px;
    }

    .divider {
        margin: 18px 0;
    }
}

/* ---------- Niskie okna (laptop 1366x768 i podobne) ----------

   Karta rejestracji jest wyzsza niz panel na krotkich oknach, wiec tresc
   przewijala sie WEWNATRZ karty. Panel ma "overflow: hidden" (zeby pasek
   przewijania zostal przy karcie, a nie przy oknie), wiec efektem byla
   ukryta czesc formularza - najgorzej na najpopularniejszym rozmiarze
   laptopa, 1366x768.

   Tu kurcza sie odstepy i wysokosci pol. Nic nie znika poza "eyebrow" -
   to czysta etykieta "ZDACTEST.PL" obok logo, o ktorej mowi juz tytul
   strony i link powrotu. Reszta zostaje w calosci, tylko ciezsza.

   WAZNE: krotcyc tylko tyle, ile trzeba. Przy pierwszej wersji tego bloku
   bylo w nim ~148 px oszczednosci, a potrzeba bylo ~83 - przez to pola
   wygladaly jak naddrukowane. Teraz zostaje ~105 px, czyli ~20 px luzu
   na roznice w renderowaniu czcionek miedzy przegladarkami.

   "min-width: 801px" jest celowe: telefon w pionie ma wysokosc ~844 px,
   wiec ten blok go nie obejmuje i zostaja duze cele dotykowe z reguly
   "max-width: 800px" wyzej. Telefon w poziomie (wysokosc ~390 px) tez
   tego nie dostanie, bo jego szerokosc jest mniejsza niz 801 px - inaczej
   te 38 px pola byloby za male do trafienia palcem. */
@media (max-height: 820px) and (min-width: 801px) {
    /* Odstepy przy krawedziach okna. To daje dodatkowe miejsce karcie
       bez ruszania czegokolwiek w srodku formularza. */
    .login-panel {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .login-card {
        padding-top: 17px;
        padding-bottom: 12px;
    }

    .card-header {
        margin-bottom: 12px;
    }

    /* "eyebrow" to czysta etykieta "ZDACTEST.PL" obok logo. Na krotkim
       oknie znika - nazwa strony i tak jest widoczna w tytule karty,
       na pasku przegladarki i w linku powrotu. To najwieksza oszczednosc
       z wszystkich (~23 px) i bez straty dla uzytkownika. */
    .eyebrow {
        display: none;
    }

    .login-card h2 {
        margin-bottom: 6px;
        font-size: 1.6rem;
    }

    /* Etykiety 0.88rem -> 0.84rem. Drobna roznica na oku, a w sumie
       piec etykiet (cztery pola + "Kim jestes?") to ~5 px wzdluz
       calego formularza.

       UWAGA: swiadomie bez ".password-label" - ta klasa zostala w
       spolszczonym CSS z poprzedniego designu, ale nie ma jej juz
       w zadnym z dwoch obecnych plikow HTML. Selektor nigdy sie nie
       dopasuje, a w media query tylko mylilby czytajacego. */

    .login-form {
        gap: 5px;
    }

    .login-form input {
        /* 38 px to dolna granica, przy ktorej pole nadal jest wygodne do
           klikania myszka i pisania na klawiaturze. Mniej - i kurzawa
           przestaje byc polem, a zostaje szczelina. */
        min-height: 38px;
    }

    .role-options {
        margin-top: 4px;
    }

    .role-option {
        min-height: 38px;
        padding: 4px 10px;
    }

    .google-button,
    .submit-button {
        min-height: 42px;
    }

    .submit-button {
        margin-top: 8px;
    }

    .divider {
        margin: 8px 0;
    }

    .card-footer {
        margin-top: 12px;
        padding-top: 10px;
    }

    .register-note {
        font-size: 0.88rem;
    }

    /* Pole bledu jest ukryte (display: none) az do pierwszego bledu, wiec
       te 6 px liczy sie tylko wtedy, gdy komunikat sie pojawi. */
    .error-box {
        margin-bottom: 12px;
        padding: 10px 12px;
    }
}

/* Zawor bezpieczenstwa dla ekstremalnie niskich okien.
   Ponizej 420 px wysokosci sam panel z paddingiem i przyciskiem jest
   wyzszy niz okno. Wtedy karta dostaje zero miejsca i jej tresc
   bylaby nieosiagalna. Wylaczamy wtedy "overflow: hidden" i pozwalamy
   przewijac samemu panelowi - to juz ostatnia deska ratunku, na
   normalnych ekranach sie nie wlacza. */
@media (max-height: 420px) {
    .login-panel {
        overflow-y: auto;
        justify-content: flex-start;
    }
}

/* ============================================================================
   PRZEŁĄCZNIK MOTYWU
   ============================================================================
   Wpiety na sztywno w prawy gorny rog okna, a nie w przeplyw karty. Dwa
   powody:

   1) Karta ma szerokosc "min(440px, 100%)" i jest wyrowna do srodka
      panelu. Przycisk w przeplywie przesuwalby sie razem z nia i przy
      najwezszym oknie wpadlby pod klawiaturę ekranowa.
   2) "position: fixed" trzyma go w tym samym miejscu niezaleznie od tego,
      czy uzytkownik jest na logowaniu, rejestracji, czy wyborze roli -
      wszystkie trzy strony dziela ten arkusz, wiec przycisk wyglada
      tak samo i siedzi w tym samym rogu. */

.motyw-przelacz {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--karta);
    color: var(--purple);
    cursor: pointer;
    font-size: 22px;
    box-shadow: var(--sombra-spolki);
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                background-color 0.2s ease, border-color 0.2s ease;
}

/* Czcionka ikon musi byc wywolana tutaj - login.css nie mial Material
   Symbols wczesniej, wiec klasa sama nic nie robi. "font-variation-settings"
   zeruje wypelnienie, inaczej ikona "light_mode" dostalaby wersje
   z wypelniona wnetrza cialem ikony i byla gruba. */
.motyw-przelacz .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.motyw-przelacz:hover {
    transform: translateY(-1px);
    box-shadow: var(--karta-sombra);
}

.motyw-przelacz:active {
    transform: translateY(0);
}

.motyw-przelacz:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px var(--ring);
}

/* 42 px to minimalny wygodny cel dotykowy. Przycisk ma 40 px - na
   telefonie wiekszy, bo palcem sie celuje gorzej niz myszka. */
@media (max-width: 800px) {
    .motyw-przelacz {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .motyw-przelacz,
    .motyw-przelacz:hover {
        transition: none;
    }
    .motyw-przelacz:hover {
        transform: none;
    }
}