/* ══════════════════════════════════════════════════════════════════════════
   ATLAS — KÖZÖS BELÉPŐ-ARCULAT (lakói · képviselői · SZVB portál)
   ══════════════════════════════════════════════════════════════════════════

   ⛔ MÁSIK CLAUDE, OLVASD EL, MIELŐTT MÁSOLNÁD: EZ AZ EGYETLEN FORRÁS.
   Ez a fájl a lakói portál belépő-oldalának arculatából lett kiemelve
   (2026-08-09), és MINDEN belépő-/jelszó-oldal ezt használja:

     • resident_portal/auth/login.html   → „Lakói Portál"
     • auth/login_crm.html               → „Képviselői Portál"
     • szvb_portal/login.html            → „SZVB Portál"
     • auth/forgot_password.html         → elfelejtett jelszó (mindhárom)
     • auth/reset_password.html          → új jelszó beállítása (mindhárom)

   MIÉRT LETT KÖZÖS FÁJL (mért drift, 2026-08-09): a jelszó-oldalak SAJÁT
   másolatot tartottak a márka-vízjelről, és a két másolat szétcsúszott —
   a loginon `min(900px, 96vw)` / `opacity .5`, a jelszó-oldalon
   `min(760px, 92vw)` / `opacity .28`. A logó gyűrűje így NEM ölelte körbe a
   kártyát, és senki nem vette észre, mert mindkét lap „működött". Ha új
   belépő-szerű lapot írsz, EZT a fájlt linkeld be — ne másolj stílust.

   A vázat lásd: `templates/auth/_login_shell.html`.
   A nyitó-jelenet (starfall) stílusa külön fájl: `atlas-splash-starfall.css`.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --cyan: #00d8ff;
    --cyan-2: #009cff;
    --cyan-soft: #78eeff;
    --ink: #eaf6ff;
    --muted: #9db4c7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ⛔ A VÁSZON SÖTÉT ALAPSZÍNE — NE VEDD KI, ÉS NE HAGYD LE ÚJ LAPRÓL.
   MÉRVE 2026-08-09 (András jelezte: „nagy fehér váltás a login és az
   elfelejtett jelszó között"): a lenti `background` RÖVIDÍTÉS a háttérszínt
   ÁTLÁTSZÓRA állítja, a két sötétítő réteg pedig félig áttetsző (.55 és .80
   alfa) — azok a városkép FÖLÉ vannak tervezve. Amíg a kép nem érkezett meg
   (üres cache, lassú háló, lapváltás), a két réteg a böngésző FEHÉR vásznára
   ült rá → világosszürke/fehér villanás minden navigációnál.
   Egy szem alatt is látszik: `body`-n `background` shorthand + félig áttetsző
   réteg ⇒ MINDIG kell alá tömör alapszín. A `html`-en is beállítjuk, mert a
   vászon színét az adja, még mielőtt a body doboza felépülne. */
html { background-color: #030815; }

/* ── LAPVÁLTÁS ÁTÚSZÁSSAL (cross-document view transition) ──────────────────
   A belépő ↔ elfelejtett jelszó ↔ új jelszó váltás így nem „újratöltésnek"
   látszik, hanem egy lágy átúszásnak: a böngésző lefényképezi a régi lapot, és
   átolvasztja az újba. A városkép mindkét lapon ugyanaz, tehát a háttér
   VÉGIG A HELYÉN MARAD — csak a kártya tartalma vált.

   MIÉRT EZ, ÉS NEM TURBO (tudatos döntés, 2026-08-09):
   • Nulla JS és nulla kockázat a BELÉPÉSRE. A Turbo elfogná az űrlap-POST-ot
     is, ami 303/422-shimet kíván (PR #63, még nyitott) — egy fél-kész
     form-kezelés a bejelentkezésen a legrosszabb hely a kísérletezésre.
   • A `<meta name="turbo-visit-control" content="reload">` SZÁNDÉKOS: ha a
     munkamenet lejár és egy Turbo-navigáció ide dobna, teljes újratöltés kell,
     hogy a belépő NE az app-keretbe renderelődjön. Turbósítás esetén ezt ki
     kellene venni — és visszajönne az a hiba.
   • Progresszív: ahol a böngésző nem ismeri (ma pl. a Firefox), ott sima
     navigáció marad — a fenti sötét alapszín miatt az sem villan fehéret.

   ⛔ A `navigation: auto` MINDKÉT lap opt-inját igényli. Mivel minden
   belépő-szerű lap a közös vázból él, ez automatikusan teljesül — ha valaki új
   belépő-lapot ír SAJÁT vázzal, oda-vissza megszűnik az átúszás. Ez is ok arra,
   hogy a váz maradjon az egyetlen forrás. */
@view-transition { navigation: auto; }

/* A KÁRTYA saját réteg, a háttér NEM mozdul.
   Az alapértelmezett átúszás az EGÉSZ lapot keresztbe úsztatja, és mivel a két
   kártya tartalma más, egy pillanatra EGYMÁSRA íródik a két szöveg (mérve
   2026-08-09: a 1557. ms-os képkockán a „Belépés" és a „Visszaállítási link
   küldése" egyszerre látszott). Ezért a kártya külön nevet kap: a doboz mérete
   FOLYAMATOSAN átalakul, a tartalma pedig ELŐBB kifut, UTÁNA fut be — nincs
   dupla expozíció. A városkép és a vízjel a gyökér-rétegen marad, ami a két
   lapon azonos, tehát láthatatlanul olvad át. */
.login-container { view-transition-name: atlas-kartya; }

::view-transition-old(atlas-kartya),
::view-transition-new(atlas-kartya) {
    /* Az alapértelmezett `plus-lighter` két félig áttetsző réteget ÖSSZEAD —
       szekvenciális (nem átfedő) ki/be úsztatásnál ez kivilágosodást okozna. */
    mix-blend-mode: normal;
}
::view-transition-old(atlas-kartya) {
    animation: atlas-kartya-ki 130ms cubic-bezier(.4, 0, 1, 1) forwards;
}
::view-transition-new(atlas-kartya) {
    animation: atlas-kartya-be 220ms cubic-bezier(0, 0, .2, 1) 110ms backwards;
}
@keyframes atlas-kartya-ki { to   { opacity: 0; transform: scale(.985); } }
@keyframes atlas-kartya-be { from { opacity: 0; transform: scale(.985); } }

/* Csökkentett mozgás: azonnali csere, átúszás nélkül. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--ink);
    position: relative;
    overflow: hidden;
    /* Perzisztens városképi háttér (a starfall-jelenet fölötte fut, majd
       elhalványul — a háttér marad, így folytonos az élmény).
       Az UTOLSÓ rétegen ott a tömör `#030815` alapszín: a shorthandben csak az
       utolsó réteg kaphat színt, és e nélkül a félig áttetsző sötétítők a fehér
       vászonra ülnének, míg a kép meg nem érkezik (lásd a fenti `html` szabályt). */
    background:
        radial-gradient(1000px 700px at 50% 34%, rgba(0, 216, 255, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(3, 8, 21, 0.55) 0%, rgba(3, 8, 21, 0.80) 100%),
        url("../img/city_night_bg.webp") center / cover no-repeat #030815;
    /* ⛔ NINCS `background-attachment: fixed` — SZÁNDÉKOSAN.
       A lap NEM görgethető (`overflow: hidden`, függőlegesen középre igazított
       kártya), tehát a `fixed` semmit nem ad hozzá: ugyanaz látszik tőle.
       Cserébe drága: a `fixed` háttér kikényszerít egy külön kompozit-réteget,
       amit a böngésző nem tud a gyors úton kirajzolni — ez ismert oka a
       háttér késve/villogva megjelenésének VALÓDI, GPU-s böngészőben
       (headlessben, `--disable-gpu` mellett nem is reprodukálható, ezért nem
       elég a gépi mérésre hagyatkozni). Ha visszateszed, előbb NÉZD MEG
       igazi böngészőben lapváltás közben. */
}

/* ── Starfall nyitó-jelenet rétege (a .atlas-sf a fenti CSS-ből). A belépőn
      a saját városkép-háttere ÁTLÁTSZÓ, mert azt a body adja → a jelenet
      végén az egész réteg elhalványítható, a városkép marad.

      ⛔ FAIL-SAFE (2026-07-27): a jelenet ALAPBÓL REJTETT, és `pointer-events:
      none` — SOHA nem nyelheti el a belépő-űrlapra szánt koppintást. Az introt
      a JS kapcsolja be (`<html class="intro-on">`); ha a JS nem fut le, a
      jelenet meg sem jelenik, a kártya viszont igen. A skip-koppintást
      document-szinten figyeljük, nem ezen a rétegen. ── */
.login-stage {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: none;
    pointer-events: none;
    transition: opacity 1.1s ease;   /* lassú átolvadás a fém-ablakra */
}
.login-stage .atlas-sf {
    background: transparent;
    /* ⛔ A JELENET HOSSZA ITT DŐL EL, ÉS A JS `INTRO_MS`-ÉHEZ VAN KÖTVE.
       A kártya 2600 ms-nál felfedődik (atlas__login.js), majd a jelenet
       1,1 s alatt elhalványul. A starfall alapértelmezett 5,8 s-e ezt NEM
       éri be: mérve (2026-08-06, headless idővonal a lap saját órájával) a
       becsapódás 3,57 s-nél kezdődött — a jelenet ekkor már 17%-on állt —,
       a logó pedig 4,17 s-nél, amikor a réteg MÁR 0 volt. Vagyis a loginon
       csak a besuhanó üstökös látszott, robbanás és ATLAS AI márkajel soha.
       2,3 s-nél a teljes ív (üstökös → becsapódás → logó → betöltősáv)
       lefut, és marad 0,3 s levegő a felfedésig.
       ⛔ HA az INTRO_MS változik, EZT IS igazítsd: a szabály
       `--sf-dur` + 0,3 s <= INTRO_MS (őr: tests/test_login_intro_idozites.py).
       A splash (6000 ms) szándékosan marad a hosszú változaton — ott van rá idő. */
    --sf-dur: 2.3s;
}
html.intro-on .login-stage {
    display: block;
    /* CSS-backstop: ha a JS beteszi az `intro-on`-t, de a reveal elmarad
       (időzítő-throttling a WebView-ban, JS-hiba), a jelenet CSS-ből is
       elhalványul — nem ragadhat a képernyőn. */
    animation: login-stage-out 1.1s ease var(--intro-backstop, 4s) forwards;
}
html.intro-on.stage-done .login-stage { opacity: 0; }
@keyframes login-stage-out { to { opacity: 0; } }

/* ── MÁRKA-VÍZJEL a kártya MÖGÖTT (visszahozva 2026-08-06).
      A 8b250677-ben készült, és MÁSNAP, a városképes újratervezéskor
      (e36c43b1) kiesett a sablonból — nem szándékos kivezetés volt,
      hanem a teljes újraírás mellékhatása. A logó SZÉLESEBB a 440px-es
      kártyánál (900px), tehát a gyűrűje körbeöleli azt; ez volt az
      eredeti szándék, ezért marad a nagy méret.

      ⛔ A 900px / .5 NEM SZABADON HANGOLHATÓ SZÁM: pontosan ettől „öleli
      körbe" a gyűrű a kártyát. A jelszó-oldalak saját másolatában ez
      760px / .28-ra csúszott, és emiatt tűnt el az effektus (2026-08-09).

      A `mix-blend-mode: screen` LOAD-BEARING: az `atlas_ai_logo.webp`
      RGB (nincs alfa-csatornája), a háttere levels-korrekcióval tiszta
      feketére húzva — screen-blend nélkül látható fekete TÉGLALAP
      ülne a városképen. (A starfall `atlas_logo_cutout.webp`-je RGBA,
      az blend nélkül is menne, de csak 640px — felskálázva lágyulna.)

      Az intro alatt REJTVE marad, és a kártyával EGYÜTT úszik be:
      különben a starfall saját, képernyő-közepi logója és a vízjel
      egymásra csúszna. A `stage-done` mellett CSS-backstop is van
      (ugyanaz a minta, mint a kártyánál): ha a JS-reveal elmarad, a
      vízjel akkor is előjön — nem múlhat JS-en, hogy a márkajel ott
      van-e. ── */
.brand-watermark {
    position: fixed;
    left: 50%;
    top: 58%;
    width: min(900px, 96vw);
    opacity: .5;
    mix-blend-mode: screen;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    animation: wm-float 22s ease-in-out infinite;
}
html.intro-on .brand-watermark {
    opacity: 0;
    animation: wm-float 22s ease-in-out infinite,
               wm-in 1.4s ease var(--intro-backstop, 4s) forwards;
}
html.intro-on.stage-done .brand-watermark {
    opacity: .5;
    transition: opacity 1.4s ease;
}
@keyframes wm-float {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, -52.5%); }
}
@keyframes wm-in { to { opacity: .5; } }
@media (max-width: 640px) {
    .brand-watermark { width: 150vw; top: 54%; opacity: .34; }
    html.intro-on.stage-done .brand-watermark { opacity: .34; }
    @keyframes wm-in { to { opacity: .34; } }
}
@media (prefers-reduced-motion: reduce) {
    .brand-watermark { animation: none; }
}

/* ── Belépő „ablak" — NAGY PLATINA-FÉM 3D DOBOZ (a logó anyagához illően).
      A starfall után a logó helyén, PERSPEKTÍVÁBÓL emelkedik ki (rotateX),
      és lassan „megszilárdul". Vastag fém-perem (rétegzett árnyék) = mélység. ── */
.login-container {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    max-width: 440px;
    color: #16222e;
    padding: 46px 38px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    /* polírozott platina felület: felső gloss-fény + kefélt csíkozás + fém-gradiens */
    background-image:
        linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.20) 9%, rgba(255,255,255,0) 24%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #fdfeff 0%, #e6ecf3 12%, #c0ccd9 33%, #9db0c2 49%, #eaf1f8 58%, #b6c2d1 68%, #dfe6ef 88%, #f6f9fc 100%);
    /* 3D „tömb" — rétegzett fém-perem lefelé + erős vetett árnyék + belső fazetta */
    box-shadow:
        0 2px 0 #c6d0da, 0 4px 0 #b2bcc7, 0 6px 0 #a1abb6,
        0 9px 0 #8f99a5, 0 12px 0 #7f8a96, 0 15px 1px #6f7a86,
        0 40px 70px rgba(0, 0, 0, 0.62),
        0 0 46px rgba(0, 200, 255, 0.14),
        inset 0 2px 2px rgba(255, 255, 255, 0.98),
        inset 0 7px 16px rgba(255, 255, 255, 0.55),
        inset 0 -4px 8px rgba(35, 50, 70, 0.55),
        inset 3px 0 4px rgba(255, 255, 255, 0.5),
        inset -3px 0 5px rgba(35, 50, 70, 0.35);
    /* ⛔ FAIL-SAFE ALAPÁLLAPOT (2026-07-27): a kártya LÁTHATÓ és KATTINTHATÓ.
       Korábban itt `opacity: 0; pointer-events: none` állt, és a láthatóságot
       KIZÁRÓLAG a JS adta vissza (`stage-done`) — így ha a login-JS bármi okból
       nem futott le (natív WebView, blokkolt/hibás script), a belépő-űrlap
       benne volt a DOM-ban, de örökre láthatatlan és kattinthatatlan maradt.
       Ez okozta a natív appban a „nem enged bejelentkezni" hibát.
       A 3D beúszás mostantól OPT-IN: csak akkor fut, ha a JS bekapcsolta. */
    transform-origin: 50% 42%;
    transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
/* Intro-állapot — csak `<html class="intro-on">` mellett (a JS teszi rá). */
html.intro-on .login-container {
    opacity: 0;
    transform: perspective(1400px) rotateX(-26deg) translateY(34px) scale(0.82);
    pointer-events: none;
    /* CSS-backstop: a JS-reveal elmaradása esetén is előjön a kártya. */
    animation: login-card-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--intro-backstop, 4s) forwards;
}
@keyframes login-card-in {
    to {
        opacity: 1;
        transform: perspective(1400px) rotateX(0) translateY(0) scale(1);
        pointer-events: auto;
    }
}
/* mozgó fény-csík (fém csillanás) */
.login-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 33%, rgba(255,255,255,0.45) 46%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.45) 54%, transparent 67%);
    transform: translateX(-130%);
    mix-blend-mode: screen;
    /* A fém-csillanás alapból fut — a kártya is alapból látszik. */
    animation: sheen 5s ease-in-out 1.1s infinite;
}
/* Az intro vége: a JS `stage-done`-t tesz a <html>-re → a kártya beúszik.
   A backstop-animációt felül kell írni, különben az `forwards` fill
   visszahúzná a kezdőállapotba. */
html.intro-on.stage-done .login-container {
    opacity: 1;
    transform: perspective(1400px) rotateX(0) translateY(0) scale(1);
    pointer-events: auto;
    animation: none;
}
@keyframes sheen {
    0% { transform: translateX(-130%); }
    55%, 100% { transform: translateX(130%); }
}

/* ── KÁRTYA-PANELEK: a belépő és a jelszó-kérés EGY dokumentumban ──────────
      A váltás nem navigáció, csak panel-csere → a városkép, a vízjel és a
      kártya-doboz meg sem mozdul. A rejtést KÉT módon is kimondjuk (attribútum
      ÉS osztály, `!important`-tal), mert a `hidden` attribútumot egy odakerülő
      inline `display` némán legyőzi — ez a repóban már okozott odaragadt
      sávot/modált (lásd a `hidden`-attribútum őrét). ── */
.atlas-panel[hidden],
.atlas-panel.is-rejtve { display: none !important; }

/* ⛔ A PANELVÁLTÁS AZONNALI — NE TEGYÉL RÁ BEÚSZÁST.
   Először egy 160 ms-os `opacity: 0 → 1` beúszás volt rajta; mérve
   (2026-08-10, Brave, screencast) a váltás utáni 481. ms-os képkockán a
   KÁRTYA ÜRESEN állt: keret és fém-textúra, tartalom nélkül. Vagyis a
   „dísz" pontosan azt az üres pillanatot gyártotta vissza, ami miatt az
   egész átépítés készült. A tartalom-csere legyen azonnali; a folytonosság
   érzetét az adja, hogy a HÁTTÉR és a KÁRTYA-DOBOZ meg sem mozdul. */

.brand { text-align: center; margin-bottom: 26px; position: relative; }
.brand-badge {
    width: 68px; height: 68px; margin: 0 auto 14px;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 36%, #27434f, #0a1621 72%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.55);
}
.brand-badge img { width: 44px; height: 44px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.brand h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: #16222e; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.brand h1 span {
    background: linear-gradient(135deg, #0088c0, #00c8ff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand p { color: #4a5b6b; font-size: 14px; margin-top: 4px; }

.form-group { margin-bottom: 18px; position: relative; }
.form-group label {
    display: block; margin-bottom: 7px;
    font-weight: 700; font-size: 12.5px; color: #33475a; letter-spacing: .2px;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="text"] {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(20, 30, 42, 0.4);
    border-radius: 12px;
    font-size: 15px;
    color: #eaf3fa;
    /* süllyesztett „vájat" a fémben */
    background: linear-gradient(180deg, #1b2836, #223243);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.5);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input::placeholder { color: #7f96a8; }
.form-group input:focus {
    outline: none;
    border-color: #00c8ff;
    box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 0 0 3px rgba(0, 216, 255, 0.30);
}

.password-wrap { position: relative; }
.password-wrap input { padding-right: 48px; }
.password-toggle {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    padding: 8px; background: none; border: none; border-radius: 8px;
    color: #8aa0b2; cursor: pointer; transition: color 0.18s, background 0.18s;
}
.password-toggle:hover { color: #00c8ff; background: rgba(0, 216, 255, 0.14); }
.password-toggle:focus-visible { outline: 2px solid #00c8ff; outline-offset: 1px; }
.password-toggle svg { display: block; }
.password-toggle .is-hidden { display: none; }

.remember-me { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.remember-me input { width: 16px; height: 16px; accent-color: #00a8db; cursor: pointer; }
.remember-me label { font-size: 14px; color: #3a4c5c; cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,.4); }

.btn-primary {
    width: 100%; padding: 15px;
    background: linear-gradient(180deg, #7fe9ff 0%, #00c8ff 42%, #0091cf 100%);
    color: #04141f; border: 1px solid rgba(255,255,255,.5); border-radius: 12px;
    font-size: 15px; font-weight: 800; letter-spacing: 0.2px; cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 156, 255, 0.45), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -3px 5px rgba(0,70,105,.5);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    /* A „vissza a belépéshez" ugyanígy néz ki, de <a> — hogy a link is
       gombként viselkedjen, kell a blokk-megjelenítés és a középre igazítás. */
    display: block; text-align: center; text-decoration: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 156, 255, 0.55), inset 0 1px 0 rgba(255,255,255,.85); filter: brightness(1.05); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; }

.links { margin-top: 18px; text-align: center; }
.links a { color: #0a7fb0; text-decoration: none; font-size: 14px; font-weight: 600; }
.links a:hover { text-decoration: underline; color: #0098d8; }

/* Lábléc-linksor (Kapcsolat / Adatkezelés / ÁSZF, „vissza a belépéshez"). */
.login-footer {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 18px;
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid rgba(35, 50, 70, 0.16);
}
.login-footer a { color: #4a5b6b; text-decoration: none; font-size: 13px; font-weight: 600; }
.login-footer a:hover { color: #0098d8; text-decoration: underline; }

/* Magyarázó szöveg a kártyán belül (pl. „Add meg a regisztrált email címed…"). */
.login-hint { color: #4a5b6b; font-size: 14px; line-height: 1.5; text-align: center; margin-bottom: 20px; }

.alert {
    padding: 12px 16px; border-radius: 12px; margin-bottom: 18px;
    font-size: 14px; line-height: 1.4; font-weight: 500;
}
.alert-error, .alert-danger { background: #fdecec; color: #b42318; border: 1px solid #f7c8c4; }
.alert-success { background: #e9f8f0; color: #067647; border: 1px solid #b9ebd2; }
.alert-warning { background: #fef6e7; color: #92400e; border: 1px solid #fae3b5; }
.alert-info { background: #e7f6fd; color: #0b5a86; border: 1px solid #b6e3f7; }

/* Sikeres kiküldés visszajelző doboza (elfelejtett jelszó). */
.login-notice {
    background: #e9f8f0; border: 1px solid #b9ebd2; color: #067647;
    border-radius: 12px; padding: 16px; margin-bottom: 20px; text-align: center;
}
/* CSAK a doboz saját címsora törik külön sorba — a bekezdésen BELÜLI kiemelés
   (pl. „a link 24 óráig érvényes") maradjon inline, különben szétszakad a mondat. */
.login-notice > strong { display: block; margin-bottom: 6px; font-size: 15px; }
.login-notice p { color: #33604c; font-size: 13.5px; line-height: 1.5; margin: 0; }
.login-notice svg { display: block; margin: 0 auto 8px; }

.login-version { text-align: center; margin-top: 14px; font-size: 11px; color: #5a6b7a; letter-spacing: .3px; }

@media (max-width: 480px) {
    .login-container { padding: 34px 24px; border-radius: 18px; }
    .brand h1 { font-size: 20px; }
}

/* Csökkentett mozgás: nincs intro, nincs csillanás — rögtön a kártya.
   (A JS sem teszi rá az `intro-on`-t, ez a CSS-oldali biztosíték.) */
@media (prefers-reduced-motion: reduce) {
    .login-container,
    html.intro-on .login-container { transition: none; animation: none; opacity: 1; transform: none; pointer-events: auto; }
    .login-container::before { animation: none; }
    .login-stage,
    html.intro-on .login-stage { display: none; transition: none; animation: none; }
}