/* =========================================================================================
   BELÉPŐ-KÉPERNYŐK , bespo arculat, SÖTÉT (2026-09-29)

   MI EZ. A bejelentkezés, a kétfaktoros kód, az elfelejtett jelszó, a meghívó-elfogadás
   (jelszó-beállítás) és az „Érdekel a rendszer" űrlap. Öt állapot, EGY kártyán: a `core/main.js`
   és a `core/register.js` cserélgeti, melyik űrlap látszik , a keret ugyanaz marad.

   MIÉRT KÜLÖN FÁJL, ÉS NEM A dashboard.css-BEN. A belépő önálló vizuális világ: nem a shell
   tokenjeire épül, nem is épülhet, mert a felhasználó itt még nincs bejelentkezve, tehát se
   cég-arculat, se téma-beállítás nincs betöltve. Külön fájlban az is látszik, hogy ez a réteg
   MEDDIG tart , a bejelentkezés pillanatáig.

   AZ IRÁNY (PO-döntés, 2026-09-29): az „A" irány, VISSZAFOGOTT intenzitásban. Forrás:
   `koncepció/belepes/2026-09-29-belepes-sotet-koncept.html`. Sötét alap (#04060b), rajta egy
   nonfiguratív, lassan sodródó vonalháló, előtte egy áttetsző üveg-doboz az űrlappal. A
   „visszafogott" azt jelenti, hogy a koncept két vonalháló-rétegéből CSAK AZ EGYIK maradt, a
   fény-foltok halkabbak (0,26 alfa a 0,5 helyett), és a fátyol erősebb. Kevesebb rajz,
   kevesebb festés, nyugodtabb kép , a belépő a ház legrövidebb ideig nézett lapja, a dolga
   az, hogy három másodperc alatt be lehessen jutni.

   A MOZGÁS SZABÁLYAI, AMIK ITT NEM ÓHAJOK:
   1. Animálni CSAK `transform`-ot és `opacity`-t szabad. Nincs animált `background-position`,
      `filter`, `backdrop-filter`, `width`, `height` vagy `top` ezen a lapon.
   2. A háttér-váltás KERESZTÚSZTATÁS: a rétegek a helyükön állnak, a tartalmuk soha nem
      változik, csak az `opacity`-jük. Nincs kép-csere. A nem aktív réteg késleltetve
      `visibility: hidden`-t kap (tehát nem is festődik) és a mozgása `paused`.
   3. A `backdrop-filter: blur()` STATIKUS, EGYETLEN elemen van (az üveg-doboz), és soha nem
      animáljuk. Telefon-szélességen KIKAPCSOL: ott a doboz 94 százalékban tömör. Safariban ez
      a legdrágább elem, a PO pedig Safariban dolgozik.
   4. `will-change: opacity` csak a váltás ideje alatt kerül fel (a `core/auth-hatter.js` teszi
      fel és veszi le), mert tartósan fenntartva memóriát foglalna minden rétegnek.
   5. `prefers-reduced-motion: reduce` alatt semmi nem mozog, a váltás azonnali.

   VOLT EGY VILÁGOS VÁLTOZAT IS, ÉS TALONBAN VAN. A PO 2026-09-29-én megépíttette, majd
   ugyanazon a napon visszavonta erre a körre: „a fehér bejelentkezést vedd ki egyelőre, de
   tedd talonba." A kész munka (token-blokk, váltó gomb, világos vonalháló-rajzok, mérés) a
   `.munka/belepes-vilagos-talon/` mappában áll, a backlogban pedig tétel hivatkozik rá. Ha
   valaki újra nekifut, ONNAN induljon, ne írja meg mégegyszer.

   A KONTRASZT MÉRVE (2026-09-29). A módszer: a doboz tartalmát elrejtjük, a háttér mozgását
   12 időpontban megállítjuk mind az öt nézetben, és a doboz területének a LEGVILÁGOSABB
   képpontját keressük meg , az a legrosszabb eset, mert világos szöveg ül rajta. A mező
   felületét nem külön mérjük, hanem a mért doboz-felületre rétegezzük rá a `--auth-input-bg`-t:
   az pontosan kiszámolható. Mérő szkript: `.munka/belepes-kontraszt-meres.js`, a teljes
   táblázat: `.munka/kontraszt-eredmeny.txt`.
     A legvilágosabb doboz-felület #0b111c (asztali) és #090d16 (telefon):
       cím 18,9:1 , szöveg 14,9:1 , halvány 8,1:1 , link 8,5:1;
       mező #1a1f2a fölött a beírt szöveg 16,5:1, a helyőrző 5,8:1;
       fő gomb 5,6:1 (hover 4,9:1), hibaüzenet 8,5:1, siker-üzenet 9,8:1.
     Küszöb: apró szöveg 4,5 , nagy cím és rajz 3,0.
   Ezért nem szabad a fátyolhoz és a felület-tömörségekhez hozzányúlni anélkül, hogy újra
   mérnénk: azokon múlik, hogy a szöveg a háttér legvilágosabb pillanatában is olvasható.
   ========================================================================================= */

/* A BELÉPÉS-JELZŐ (`.belepes-jelzo`) EHHEZ A DOBOZHOZ IGAZODIK. Külön `position` NEM kell
   hozzá: a nézet lentebb amúgy is `fixed`, tehát viszonyítási pontot ad az `absolute` gyerekének. */
.app-auth-view {
  /* ── ALAP ÉS FELÜLETEK ──────────────────────────────────────────────────────────────── */
  --auth-alap: #04060b;
  /* AZ ÜVEG-DOBOZ. A 0,78-as tömörség és a homályosítás EGYÜTT adják ki a mért kontrasztot;
     külön-külön egyik sem elég, mert a háttér a doboz mögött mozog. */
  --auth-panel-bg: rgba(12, 17, 28, 0.78);
  --auth-panel-keret: rgba(255, 255, 255, 0.1);
  --auth-panel-arnyek: 0 30px 80px -30px rgba(0, 0, 0, 0.8);

  /* ── SZÖVEG ─────────────────────────────────────────────────────────────────────────── */
  --auth-text-strong: #ffffff;
  --auth-text: #dde5f1;
  --auth-text-faint: #9dabbe;

  /* ── MEZŐK ──────────────────────────────────────────────────────────────────────────── */
  --auth-input-bg: rgba(255, 255, 255, 0.06);
  --auth-line: rgba(255, 255, 255, 0.17);
  /* A KITÖLTÖTT mező halkan elválik az üresről, de NEM a fókusz színével: a kettő két külön
     állapot, egymás mellett félrevezető lenne. */
  --auth-line-tele: rgba(255, 255, 255, 0.42);
  --auth-focus-line: #6cb2ff;
  --auth-input-ink: #ffffff;
  --auth-placeholder: #8d9aad;

  /* ── MŰVELETEK ──────────────────────────────────────────────────────────────────────── */
  /* A FŐ SZÍN A KÉK, nem a narancs. A belépőn a narancs-akcent zajos lenne: itt egyetlen
     művelet van, és annak kell a legerősebbnek lennie. A narancs a bejelentkezés UTÁN jön. */
  --auth-ink: #0b63d6;
  --auth-ink-hover: #0d6ce4;
  --auth-ink-tinta: #ffffff;
  --auth-ghost-bg: rgba(255, 255, 255, 0.05);
  --auth-ghost-keret: rgba(255, 255, 255, 0.22);
  --auth-link: #6cb2ff;
  --auth-vonal: rgba(255, 255, 255, 0.12);
  --auth-focus: color-mix(in srgb, #6cb2ff 30%, transparent);

  /* ── ÜZENETEK ───────────────────────────────────────────────────────────────────────── */
  --auth-danger: #ff9c9c;
  --auth-danger-soft: rgba(255, 86, 86, 0.11);
  --auth-danger-keret: rgba(255, 120, 120, 0.34);
  --auth-siker: #7ae0b0;
  --auth-siker-soft: rgba(52, 199, 137, 0.12);
  --auth-siker-keret: rgba(90, 210, 160, 0.34);

  --auth-radius-input: 10px;
  --auth-radius-card: 22px;
  /* A FÉNY-FOLTOK ERŐSSÉGE. A „teli" változaté 0,5 volt; a PO a visszafogottat választotta. */
  --auth-folt-alfa: 0.26;
  /* A SZÓVÉDJEGY. A belépőn a VILÁGOS rajz kell (az alap-logó betűi #0a0a0c-k, azok a sötét
     alapon eltűnnének), az induló-kép viszont a CÉL felületét viseli, és a dashboard felé
     menet a sötét tintás alap-logó jár , ezért tokenben van, nem beégetve. */
  --auth-logo: url('../img/bespo-logo-vilagos.svg');

  /* A LÁTHATÓ VIEWPORTHOZ RÖGZÍTÜNK, NEM 100dvh-VAL MÉRETEZÜNK (PO, 2026-09-05: „borzalmas,
     hogy nincs fixen" , majd: „mindegyiket lehet görgetni").
     MIÉRT NEM `height: 100dvh`. A belépőn a body NINCS rögzítve (nincs `.app-active`), tehát a
     LAP maga görgethető. A `100dvh` viszont egy hajszállal magasabbra jön ki a ténylegesen
     látható sávnál (DevTools-emuláció, URL-sáv, sub-pixel), és mivel a body göröghet, ebből lesz
     a fantom-görgetés , az auth-nézet `overflow: hidden`-je NEM tudja megfogni, mert az a
     görgetés eggyel feljebb, a lapon keletkezik.
     A MEGOLDÁS UGYANAZ, MINT A SHELL-VÁZNÁL (lásd `body.app-active`: position:fixed; inset:0):
     a nézetet a VALÓS látható viewporthoz szegezzük. Így a body-nak nincs mit görgetnie, a
     belső `.login-split` pedig csak akkor gördül, ha a kártya tényleg magasabb az ablaknál. */
  position: fixed;
  inset: 0;
  overflow: hidden;
  font-family: 'Be Vietnam Pro', var(--font-family, system-ui, sans-serif);
  color: var(--auth-text);
  line-height: 1.55;
  background: var(--auth-alap);
  -webkit-font-smoothing: antialiased;
}

/* ══ HÁTTÉR , ÖT ÁLLÓ RÉTEG, KERESZTÚSZTATÁSSAL ════════════════════════════════════════
   A jelölés az `index.html`-ben áll (a `#authView`-ban három réteg: belépés, kétfaktoros,
   elfelejtett; a `#registerView`-ban kettő: regisztráció, siker). A váltást a
   `core/auth-hatter.js` végzi: egyetlen osztályt (`.aktiv`) tol át egyik rétegről a másikra.

   MIÉRT NEM EGY RÉTEG, KÉP-CSERÉVEL. Mert akkor a váltás pillanatában a böngésző új képet
   tölt és új rajzot fest , az a legrosszabb pillanatban akad meg. Így viszont minden rajz a
   helyén áll, és csak két elem `opacity`-je mozdul; a többi rejtett, tehát nem is festődik. */
.auth-hatter {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.auth-reteg {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  /* A `visibility` KÉSLELTETVE vált rejtettre: amíg halványodik kifelé, látszik; amint kész,
     kiesik a festésből. Enélkül a böngésző mind az öt réteget festené. */
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}
.auth-reteg.aktiv {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.6s ease,
    visibility 0s;
}
/* A VONALHÁLÓ. Álló SVG-rajz (assets/img/auth/), a sodrás CSAK `transform`. A nagyítás azért
   kell, hogy sodródás közben ne látszódjon a rajz széle. */
.auth-reteg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--auth-halo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.6;
  transform: translate3d(0, 0, 0) scale(1.08);
  animation: auth-sodras 42s ease-in-out infinite alternate;
}
/* A RÉTEG SAJÁT MOZGÁSA csak akkor fut, ha a réteg aktív. A többi szünetel, tehát nem tart
   életben kompozitor-réteget a háttérben. */
.auth-reteg:not(.aktiv)::before,
.auth-reteg:not(.aktiv) .auth-folt {
  animation-play-state: paused;
}
/* `will-change` CSAK a váltás ideje alatt; a `core/auth-hatter.js` 700 ms múlva leveszi. */
.auth-hatter.valtasban .auth-reteg {
  will-change: opacity;
}

@keyframes auth-sodras {
  from {
    transform: translate3d(-2.2%, 1.4%, 0) scale(1.08);
  }
  to {
    transform: translate3d(2.2%, -1.4%, 0) scale(1.08);
  }
}

/* A FÉNY-FOLTOK lágy színátmenetek, NEM `filter: blur()`. A `radial-gradient` eleve lágy, és
   nem kerül külön szűrő-rétegre, tehát olcsóbb. Mozgatni csak transformmal mozgatjuk. */
.auth-folt {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}
.auth-folt.f1 {
  width: 74%;
  aspect-ratio: 1;
  left: calc(var(--f1-x) - 37%);
  top: calc(var(--f1-y) - 37%);
  background: radial-gradient(closest-side, rgba(10, 132, 255, var(--auth-folt-alfa)), transparent 72%);
  animation: auth-folt-1 30s ease-in-out infinite alternate;
}
.auth-folt.f2 {
  width: 52%;
  aspect-ratio: 1;
  left: calc(var(--f2-x) - 26%);
  top: calc(var(--f2-y) - 26%);
  background: radial-gradient(closest-side, rgba(120, 190, 255, calc(var(--auth-folt-alfa) * 0.62)), transparent 72%);
  animation: auth-folt-2 38s ease-in-out infinite alternate;
}
@keyframes auth-folt-1 {
  from {
    transform: translate3d(-3%, 2%, 0) scale(1);
  }
  to {
    transform: translate3d(3%, -2%, 0) scale(1.12);
  }
}
@keyframes auth-folt-2 {
  from {
    transform: translate3d(2%, -3%, 0) scale(1.08);
  }
  to {
    transform: translate3d(-2%, 3%, 0) scale(0.96);
  }
}

/* NÉZETENKÉNTI KOMPOZÍCIÓ. Csak a rajz és a foltok HELYE más, a szerkezet ugyanaz , így a
   váltás tényleg keresztúsztatás marad. */
.auth-reteg[data-nezet='belepes'] {
  --auth-halo: url('../img/auth/halo-belepes.svg');
  --f1-x: 18%;
  --f1-y: 76%;
  --f2-x: 78%;
  --f2-y: 18%;
}
.auth-reteg[data-nezet='regisztracio'] {
  --auth-halo: url('../img/auth/halo-regisztracio.svg');
  --f1-x: 74%;
  --f1-y: 70%;
  --f2-x: 20%;
  --f2-y: 22%;
}
.auth-reteg[data-nezet='siker'] {
  --auth-halo: url('../img/auth/halo-siker.svg');
  --f1-x: 50%;
  --f1-y: 48%;
  --f2-x: 84%;
  --f2-y: 80%;
}
.auth-reteg[data-nezet='ketfaktoros'] {
  --auth-halo: url('../img/auth/halo-ketfaktoros.svg');
  --f1-x: 50%;
  --f1-y: 80%;
  --f2-x: 50%;
  --f2-y: 8%;
}
.auth-reteg[data-nezet='elfelejtett'] {
  --auth-halo: url('../img/auth/halo-elfelejtett.svg');
  --f1-x: 26%;
  --f1-y: 32%;
  --f2-x: 78%;
  --f2-y: 84%;
}

/* OLVASHATÓSÁGI FÁTYOL. Statikus, soha nem animáljuk. Ez az az eszköz, ami miatt az áttetsző
   doboz mögött akkor is elég sötét marad a kép, amikor a vonalháló legvilágosabb pontja épp a
   doboz mögé úszik. Nélküle a mért kontraszt ingadozna. A visszafogott változat fátyla a
   TELINÉL ERŐSEBB: kevesebb rajz mellett is ugyanaz az olvashatóság a cél. */
.auth-fatyol {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  background:
    radial-gradient(60% 56% at 50% 50%, rgba(3, 5, 10, 0.82), rgba(3, 5, 10, 0.4) 62%, rgba(3, 5, 10, 0.12) 86%),
    linear-gradient(180deg, rgba(3, 5, 10, 0.6), transparent 30%, rgba(3, 5, 10, 0.68));
}

/* ══ A KÖZÉPRE HELYEZÉS ═══════════════════════════════════════════════════════════════════
   A `.login-split` és a `.reg-split` nevét MEGTARTJUK, pedig már nem osztott a felület: a
   `core/main.js` és a `core/register.js` ezekkel a választókkal keresi meg a nézeteket. Egy
   osztály-átnevezés itt néma hibát okozna , a belépő nem jelenne meg. */
/* A `flex: 1` és a `width: 100%` NEM díszítés: a `core/main.js` a `#authView`-t `display: flex`-re
   állítja, tehát ez az elem FLEX-GYEREK. Enélkül csak a tartalma szélességéig nő, és a kártya a
   bal szélre ragad , mérve, nem elméletben.
   ITT NINCS `position`, ÉS EZ SZÁNDÉKOS: a `.reg-split` osztály magán a `#registerView`-n ül
   (nem egy gyerekén), az pedig `position: fixed` , egy `relative` némán kiszakítaná a
   képernyőhöz-szegezésből. A háttér fölé emelést ezért a kártya intézi, lentebb. */
.login-split,
.reg-split {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: flex;
  /* `safe center` MINDKÉT tengelyen, NEM sima `center`. Ha a kártya magasabb az ablaknál
     (telefon a magas „Érdekel a rendszer" űrlappal, alacsony laptop, nagyított lap), a sima
     `center` a kártya TETEJÉT , logó, cím, alcím , levágja és GÖRGETÉSSEL SEM elérhetővé teszi
     (flex + overflow ismert csapdája). A FÜGGŐLEGES tengely (`align-items`) a lényeg: a panel
     `width:100%`, tehát vízszintesen nem lóg, de FÜGGŐLEGESEN igen. A `safe` ilyenkor a tetejére
     igazít, így a logó és a cím görgethető marad; ha a kártya befér, ugyanúgy középen áll.
     (2026-09-05, PO: „a regisztrációs oldalnál a cím kilóg" , pont ez volt.) */
  align-items: safe center;
  justify-content: safe center;
  padding: 36px 20px;
  /* AZ EGYETLEN HELY, AHOL GÖRGETÉS EGYÁLTALÁN LEHET, és csak akkor, ha a kártya tényleg
     magasabb az ablaknál. Az `overscroll-behavior` megakadályozza, hogy a görgetés „átfusson"
     a lapra, amikor a doboz aljára érünk. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* A régi kétoszlopos váz bal oszlopa. Nem távolítjuk el a jelölésből (a szerkezet több helyen
   hivatkozott), de a rácsból KIVESSZÜK: a `display: contents` révén a kártya közvetlenül a
   középre igazító dobozban ül, mintha a burkolat ott sem lenne. */
.login-left {
  display: contents;
}

/* ══ AZ ÜVEG-DOBOZ ════════════════════════════════════════════════════════════════════════
   EZ AZ EGYETLEN ELEM A LAPON, amin `backdrop-filter` van, és statikusan. Telefonon kikapcsol
   (lásd a telefon-ág alján), mert ott a homályosítás drága, a hatás pedig nem érvényesül. */
.login-panel {
  /* A HÁTTÉR-RÉTEGEK FÖLÉ. A `.auth-hatter` `absolute` + `z-index: 0`, tehát a festési
     sorrendben a NEM pozicionált tartalom UTÁN jönne , vagyis eltakarná az űrlapot. Egy
     `relative` + `z-index: 1` a kártyán ezt fordítja meg, és mindkét nézetben működik (a
     `.login-left` `display: contents`, tehát a kártya közvetlenül a nézet gyereke). */
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 424px;
  padding: 30px 34px 22px;
  text-align: center;
  background: var(--auth-panel-bg);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid var(--auth-panel-keret);
  border-radius: var(--auth-radius-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    var(--auth-panel-arnyek);
}
/* Az érdeklődő-űrlap szélesebb, mert két hasábban áll benne négy mező.
   A SZÉLESSÉG A MAGASSÁG ÁRA (PO, 2026-09-05): „a regisztrációs oldal férjen el egy oldalon
   legalább Full HD-ben, mert most görgetni kell". Minél szélesebb a doboz, annál alacsonyabb. */
.reg-panel {
  max-width: 528px;
}
.reg-panel .login-title {
  font-size: 23px;
}

/* ══ MÁRKA ═══════════════════════════════════════════════════════════════════════════════
   A logó MAGA tartalmazza a szó-jelet, ezért nincs mellette külön feliratos elem.
   SÖTÉT HÁTTÉRRE A VILÁGOS VÁLTOZAT megy (`assets/img/bespo-logo-vilagos.svg`): az alap-logó
   betűi #0a0a0c-k, azok itt egyszerűen eltűnnének. */
.login-brand {
  display: block;
  margin: 0 auto 14px;
  text-decoration: none;
}
.login-brand:focus-visible {
  outline: 2px solid var(--auth-focus-line);
  outline-offset: 4px;
  border-radius: 6px;
}
/* A JEL NEM `<img>`, HANEM HÁTTÉRKÉP. Ugyanez az osztály viszi az induló-kép jelét is, az
   viszont KÉT rajz közül választ (lásd lent, `.app-boot`): a belépő felé menet a világos, a
   dashboard felé menet a sötét tintás. Egy `<img src>`-t csak JS tudna cserélni, ami már késő
   lenne , a döntésnek a FESTÉS ELŐTT kell megtörténnie. Tokenből viszont a CSS maga dönt. */
.login-logo-mark {
  display: block;
  width: 116px;
  height: 39px;
  margin: 0 auto;
  background-image: var(--auth-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ══ CÍMEK ══════════════════════════════════════════════════════════════════════════════ */
.login-title {
  margin: 0 0 6px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--auth-text-strong);
}
.login-subtitle,
.reg-subtitle {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--auth-text);
}
.login-subtitle strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  color: var(--auth-text-strong);
}
.reg-subtitle {
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 14px;
}
/* A jelszó-beállító és a kétfaktoros űrlap bevezető mondata. */
.login-lead {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--auth-text);
  text-align: left;
}

/* ══ ŰRLAP ══════════════════════════════════════════════════════════════════════════════ */
.login-form {
  text-align: left;
}
/* A `:not(.login-remember)` KELL. A „megjegyzem" pipa is `<label>` az űrlapon belül, és ez a
   szabály fajsúlyosabb nála (osztály + elem az osztály ellen), tehát nélküle a blokkos
   megjelenítés győzne, és a pipa a saját szövege FÖLÉ kerülne. */
.login-form label:not(.login-remember) {
  display: block;
  margin-bottom: 14px;
}
/* A `:not()` azért kell, mert a jelszó-mező köré egy `<span>` burkolat kerül (a szem-gomb
   miatt), és az is `label > span` , enélkül a burkolat is felvenné a mezőnév stílusát. */
.login-form label:not(.login-remember) > span:not(.login-pw-wrap) {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--auth-text);
}
.login-form input[type='text'],
.login-form input[type='email'],
.login-form input[type='tel'],
.login-form input[type='password'] {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius-input);
  font-family: inherit;
  /* 16 képpont: ennél kisebbnél az iOS Safari RÁNAGYÍT a mezőre, és a lap elcsúszik. */
  font-size: 16px;
  color: var(--auth-input-ink);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.login-form input::placeholder {
  color: var(--auth-placeholder);
}
.login-form input:focus {
  outline: none;
  border-color: var(--auth-focus-line);
  box-shadow: 0 0 0 3px var(--auth-focus);
}
/* A BÖNGÉSZŐ AUTOMATIKUS KITÖLTÉSE a saját, világos sárga hátterét tenné a mezőre , sötét
   felületen az szó szerint világít, világoson pedig kilóg a fehér mezők sorából. A
   `box-shadow`-os trükk az egyetlen, amit a WebKit és a Chromium is tiszteletben tart: a belső
   árnyék ÁTFESTI a mező felületét, a szöveget pedig a `-webkit-text-fill-color` viszi vissza a
   téma saját tintájára. Mindkét érték tokenből jön, tehát témát vált. */
.login-form input:-webkit-autofill,
.login-form input:-webkit-autofill:hover,
.login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-input-ink);
  -webkit-box-shadow: 0 0 0 1000px #131a27 inset;
  caret-color: var(--auth-input-ink);
}

/* A JELSZÓ-MEZŐ ÉS A SZEM-GOMB. A gomb a mezőn BELÜL ül, ezért a mező jobb oldalán helyet
   hagyunk neki , enélkül a beírt jelszó vége a gomb alá csúszna. */
.login-pw-wrap {
  position: relative;
}
.login-form .login-pw-wrap input {
  padding-right: 46px;
}
.login-pw-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--auth-text-faint);
  cursor: pointer;
}
.login-pw-toggle:hover {
  color: var(--auth-text-strong);
  background: rgba(255, 255, 255, 0.06);
}
.login-pw-toggle:focus-visible {
  outline: 2px solid var(--auth-focus-line);
  outline-offset: 2px;
}
.login-pw-toggle svg {
  width: 19px;
  height: 19px;
}

/* ══ KÉTFAKTOROS: PAJZS ÉS A HAT KÓD-DOBOZ ══════════════════════════════════════════════
   Hat doboz, nem egy mező: megmondja, hány jegy kell, mutatja, hol tartasz, és elgépelésnél
   egy jegyet kell javítani, nem az egészet. A beillesztést a `shared/otp-mezo.js` oldja meg. */
.login-shield {
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--auth-ink);
  color: #fff;
}
.login-shield svg {
  width: 25px;
  height: 25px;
}

.login-otp {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 8px;
}
.login-otp input {
  width: 100%;
  max-width: 54px;
  height: 58px;
  padding: 0;
  text-align: center;
  font-family: inherit;
  font-size: 23px;
  font-weight: 700;
  /* Táblázatos számjegyek: a kód átírásakor ne ugráljanak a dobozok. */
  font-variant-numeric: tabular-nums;
  color: var(--auth-text-strong);
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-line);
  border-radius: 12px;
  caret-color: var(--auth-focus-line);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.login-otp input:focus {
  outline: none;
  border-color: var(--auth-focus-line);
  box-shadow: 0 0 0 3px var(--auth-focus);
}
/* A KITÖLTÖTT DOBOZ halkan elválik az üresről , nem szín, hanem kontúr, mert a szín önmagában
   nem jelölés, és itt a SZÁM maga az információ. */
.login-otp input.is-tele {
  border-color: var(--auth-line-tele);
}
.login-otp-tipp {
  margin: 0 0 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--auth-text-faint);
}

/* Szűk telefonon hat 54 képpontos doboz nem fér ki , a koncept mobil-ága is szűkít. */
@media (max-width: 380px) {
  .login-otp {
    gap: 6px;
  }
  .login-otp input {
    height: 52px;
    font-size: 20px;
  }
}

/* ══ HIBA ═══════════════════════════════════════════════════════════════════════════════ */
.login-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 14px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--auth-danger);
  background: var(--auth-danger-soft);
  border: 1px solid var(--auth-danger-keret);
  border-radius: var(--auth-radius-input);
}

/* ══ FŐ GOMB ════════════════════════════════════════════════════════════════════════════ */
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: var(--auth-radius-input);
  background: var(--auth-ink);
  color: var(--auth-ink-tinta);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(0, 60, 140, 0.9);
  transition:
    transform 0.12s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}
.login-btn:hover {
  transform: translateY(-1px);
  background: var(--auth-ink-hover);
}
.login-btn:active {
  transform: translateY(0) scale(0.995);
}
.login-btn:focus-visible {
  outline: 2px solid var(--auth-focus-line);
  outline-offset: 2px;
}
.login-btn[disabled] {
  opacity: 0.52;
  cursor: not-allowed;
  transform: none;
}

/* ══ KULCSOS BELÉPÉS , a jelszavas gomb ALATT, másodlagos ═══════════════════════════════
   A SORREND A MAI MARAD (PO-döntés, 2026-09-29): aki még nem adott hozzá kulcsot, annak a
   jelszó a belépés, tehát az van elöl. A koncept kétosztatú irányai a „vagy"-elválasztós,
   fordított sorrendet mutatták , az külön PO-döntés, nem előlegezzük meg.
   Ugyanaz a méret és sugár, mint a fő gombé, hogy a két út egyenrangúnak látsszon, de a telt
   kék a jelszóé marad. A felirat két sorba is törhet, ezért a magasság minimum, nem fix. */
.login-btn-kulcs {
  margin-top: 10px;
  background: var(--auth-ghost-bg);
  border-color: var(--auth-ghost-keret);
  color: var(--auth-text-strong);
  box-shadow: none;
  font-size: 15px;
}
.login-btn-kulcs:hover {
  background: var(--auth-ghost-bg);
  color: var(--auth-text-strong);
}
.login-btn-kulcs svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

/* ══ ALSÓ SOR , megjegyzés és elfelejtett jelszó ════════════════════════════════════════ */
.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  color: var(--auth-text);
  cursor: pointer;
  user-select: none;
}
.login-remember-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.login-checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-line);
  border-radius: 6px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.login-remember-input:checked + .login-checkbox {
  background: var(--auth-ink);
  border-color: var(--auth-ink);
}
.login-remember-input:checked + .login-checkbox::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.login-remember-input:focus-visible + .login-checkbox {
  outline: 2px solid var(--auth-focus-line);
  outline-offset: 2px;
}
.login-forgot {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--auth-link);
  cursor: pointer;
  white-space: nowrap;
}
.login-forgot:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-forgot:focus-visible {
  outline: 2px solid var(--auth-focus-line);
  outline-offset: 3px;
  border-radius: 4px;
}

/* AZ ÖNÁLLÓ VISSZA-LINK (jelszó-beállítás, kétfaktoros, elfelejtett jelszó). A közvetlen
   gyerek-választó `>` szándékos: a bejelentkezésen ugyanez az osztály a „megjegyzem" sor
   JOBB oldalán ül, egy sorban a pipával , azt nem szabad se középre tenni, se lejjebb tolni.
   Ott a link a `.login-row`-on belül van, tehát nem közvetlen gyereke az űrlapnak.
   A térköz a PO kérése (2026-09-05): a gomb alatt közvetlenül tapadt, és szorosnak látszott. */
.login-form > .login-forgot {
  display: block;
  width: 100%;
  margin-top: 16px;
  text-align: center;
}

/* ══ ÁTVEZETŐ SOROK ÉS LÁBLÉC ══════════════════════════════════════════════════════════ */
.login-signup {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--auth-text-faint);
}
.login-signup-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--auth-link);
  cursor: pointer;
}
.login-signup-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-signup-link:focus-visible {
  outline: 2px solid var(--auth-focus-line);
  outline-offset: 3px;
  border-radius: 4px;
}
/* A LÁBLÉC FÖLÖTT NINCS VÁLASZTÓVONAL. A koncept a kétosztatú irányokban húz oda egyet, az
   „A" irányban viszont KIVESZI (`border-top: 0`): egy középre zárt, keskeny kártyán a vonal
   csak még egy rekeszt csinál ott, ahol amúgy is látszik, hol a vége. */
.login-copyright {
  margin: 20px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--auth-text-faint);
}

/* ══ ÉRDEKEL A RENDSZER , az űrlap sajátjai ════════════════════════════════════════════ */
.reg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.reg-field {
  margin-bottom: 14px;
}
.reg-seg-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--auth-text);
}
.reg-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.reg-seg-btn {
  height: 42px;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-line);
  border-radius: var(--auth-radius-input);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--auth-text);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.reg-seg-btn:hover {
  border-color: var(--auth-line-tele);
}
/* A KIVÁLASZTOTT SÁV HÁROM RÉTEGBEN: a szín mellett a `aria-checked` mondja ki szóban is,
   amit a képernyő-olvasó felolvas , a szín önmagában sosem jelölés. */
.reg-seg-btn[aria-checked='true'] {
  background: var(--auth-ink);
  border-color: var(--auth-ink);
  color: var(--auth-ink-tinta);
}
.reg-seg-btn:focus-visible {
  outline: 2px solid var(--auth-focus-line);
  outline-offset: 2px;
}

/* A BOT-CSAPDA MEZŐ. Rejtve KELL lennie, de a DOM-ban benne kell maradnia: a botok a nem
   látható mezőt is kitöltik, az ember nem , a háttér-funkció ebből ismeri fel őket. Ha ez a
   szabály hiányzik, a mező LÁTSZIK, a valódi kitöltők beleírnak, és a beküldésüket a rendszer
   robotnak nézve utasítja el. (2026-09-05: a régi belépő-CSS cseréjekor pont ez maradt ki egy
   pillanatra , a képernyőkép fogta meg.)
   `display: none` helyett kiléptetjük a képből: a rejtett mezőt egyes botok kiszűrik. */
.reg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* A FENNTARTOTT MAGASSÁG azért kell, mert a bot-ellenőrző widget KÉSŐBB rajzolódik ki, mint az
   űrlap: enélkül a gomb megugrana alatta, épp amikor a felhasználó rá akar kattintani. */
.reg-turnstile {
  /* A Turnstile-widget FIX 300 képpont széles (a Cloudflare nem enged kisebbet). Flexszel
     KÖZEPRE tesszük: a `text-align: center`-öröklődés inline-block-ként sub-pixel-hibásan
     igazít, és a logó jobb széle egy hajszálnyit levágódhat , flex-közepesítéssel ez megszűnik.
     A `min-height` a valós 65px, hogy a gomb ne ugorjon, amíg a widget kirajzolódik.
     A widget SÖTÉT témát kap (`core/register.js`, `theme: 'dark'`), különben egy világos
     doboz virítana a sötét kártyán. */
  display: flex;
  justify-content: center;
  margin: 12px 0;
  min-height: 65px;
}

/* ADATKEZELÉSI HOZZÁJÁRULÁS-PIPA. Újrahasználja a bejelentkezés „megjegyzem" pipáját
   (`.login-remember` + `.login-checkbox`), de BALRA-FENT igazítva: a szöveg több sorba törhet,
   és ilyenkor a pipa ne csússzon a második sor mellé. A `.login-remember` osztály a jelölésen
   marad, mert a `.login-form label:not(.login-remember)` kizárások erre épülnek , enélkül a
   mezőnév-stílust kapná a szöveg. */
.reg-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* Az alsó margó SZÁNDÉKOSAN nagyobb: a hozzájárulás-sor és a „Kérem a bemutatót" gomb közé
     kell egy kis levegő, hogy ne tapadjanak össze (PO, 2026-09-05). */
  margin: 4px 0 16px;
}
.reg-consent .login-checkbox {
  margin-top: 1px;
}
.reg-consent-text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--auth-text);
}
.reg-fineprint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--auth-text-faint);
}
.reg-link {
  color: var(--auth-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══ SIKER-ÁLLAPOT ═════════════════════════════════════════════════════════════════════
   A visszajelzés három rétege: pipa-jel, a „Köszönjük!" szó és a szín , a szín sosem egyedül.
   E-MAIL-CÍMET NEM ÍRUNK KI, és visszaigazoló levélre sem hivatkozunk (PO-döntés,
   2026-09-29): a dashboard-űrlap ma nem küld ilyet, tehát az ígéret hamis lenne. */
.reg-success {
  text-align: center;
}
.reg-success-icon {
  width: 60px;
  height: 60px;
  margin: 6px auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--auth-siker-soft);
  border: 1px solid var(--auth-siker-keret);
  color: var(--auth-siker);
}
.reg-success-icon svg {
  width: 28px;
  height: 28px;
}
.reg-success-title {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 700;
  color: var(--auth-text-strong);
}
.reg-success-text {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--auth-text);
}

/* ══ TELEFON , NINCS ÜVEG ══════════════════════════════════════════════════════════════
   Az áttetsző doboz homályosítása a gyengébb készülékeken drága, és 390 képponton a „lebegő
   kártya" hatás úgysem érvényesül. A doboz itt 94 százalékban TÖMÖR, tehát a kontraszt sem
   függ a mozgó háttértől (mérve: #35373f fölött a szöveg 9,35:1, a halvány 5,09:1).
   A KÜSZÖB 640 KÉPPONT, a koncept `@container`-je szerint , élesben a színpad maga az ablak,
   tehát itt egyszerű `@media` lett belőle. */
@media (max-width: 640px) {
  .login-split,
  .reg-split {
    padding: 18px 12px;
  }
  .login-panel {
    max-width: 100%;
    padding: 26px 20px 20px;
    border-radius: 20px;
    background: rgba(8, 11, 18, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .login-title {
    font-size: 22px;
  }
  /* Két hasáb helyett egy: 390 képponton két mező egymás mellett olvashatatlanul szűk. */
  .reg-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .reg-seg {
    grid-template-columns: repeat(2, 1fr);
  }
  /* A HÁTTÉR ÁLL. Egy 390 képpontos képernyőn az elmozdulás úgysem látszik, viszont
     folyamatosan ébren tartana egy kompozitor-réteget. A NÉZET-VÁLTÁS keresztúsztatása
     megmarad, mert annak jelentése van.
     A `.f1`/`.f2` KIÍRÁSA NEM DÍSZ: a foltok animációját azok a szabályok adják, és egy
     puszta `.auth-folt` kevésbé fajsúlyos náluk , mérve, nem elméletben. */
  .auth-reteg::before,
  .auth-folt.f1,
  .auth-folt.f2 {
    animation: none;
  }
}

/* ══ MOZGÁS-CSÖKKENTÉS ═════════════════════════════════════════════════════════════════
   Aki kikapcsolta a mozgást, annál SEMMI nem mozog: a háttér áll, a váltás azonnali (a
   `core/auth-hatter.js` ilyenkor a `will-change`-et sem teszi fel), a gomb nem emelkedik. */
@media (prefers-reduced-motion: reduce) {
  .auth-reteg::before,
  .auth-folt.f1,
  .auth-folt.f2 {
    animation: none;
  }
  /* AZ `.aktiv` IS KELL. A látható réteg átmenetét a `.auth-reteg.aktiv` szabály adja, ami
     fajsúlyosabb egy puszta `.auth-reteg`-nél , enélkül a váltás itt is átúszna. */
  .auth-reteg,
  .auth-reteg.aktiv,
  .login-btn,
  .login-form input,
  .login-otp input,
  .reg-seg-btn,
  .login-checkbox {
    transition: none;
  }
  .login-btn:hover,
  .login-btn:active {
    transform: none;
  }
}

/* ══ INDULÓ-KÉP ═════════════════════════════════════════════════════════════════════════
   Az első kirajzoláskor még nem tudjuk, van-e érvényes munkamenet , azt egy hálózati kérdés
   dönti el. Amíg ez fut, EZ látszik, nem a bejelentkező űrlap.

   MIÉRT SZÁMÍT. Aki be van jelentkezve, annak eddig 1-2 másodpercig egy ÜRES belépő-űrlap állt
   a képernyőn, majd bevillant az app. Ez nem csak zavaró: azt üzente, hogy „ki vagy léptetve",
   és volt, aki elkezdte beírni a jelszavát, mire az app kirántotta alóla a mezőt.

   MIÉRT NEM CSAK ÜRES HÁTTÉR. Egy fekete lap ugyanúgy hibának látszik, mint a rossz űrlap.
   A jel és a „Betöltés…" felirat kimondja, hogy dolgozunk , ez az őszinte állapot.

   AHHOZ IGAZODIK, AHOVÁ TARTUNK, NEM AHONNAN JÖVÜNK (PO, 2026-09-29). Ha van eltárolt
   belépő-jegy, akkor a DASHBOARD felé megyünk, tehát az induló-kép a dashboard felületét
   viseli; ha nincs, a belépő jön, tehát a belépő sötét felületét. A jelölőt az `index.html`
   fejlécében futó szkript teszi fel (`data-indulokep`), még a festés előtt.

   MIÉRT KELLETT. A kulcsos (arcfelismerés, ujjlenyomat) belépés után az app egyszer újratölt,
   és ilyenkor az induló-kép ÚJRA megjelenik , de már a dashboard felé menet. A sötét
   induló-kép ott feketén villant be a világos felület elé: „kimegy, betölti a régi feketét,
   és visszalép a kékre". A szabály akkor is helyes marad, ha a dashboard egyszer kap sötét
   témát: az induló-kép MINDIG a cél felületét viseli. Ne írd vissza „a belépő témájára".

   VONALHÁLÓ NINCS RAJTA: ez a kép fél másodpercig él, egy induló animációt nem érdemes
   elindítani hozzá. A lágy fény-folt viszont ott van, hogy a belépőre váltás ne legyen ugrás. */
.app-boot {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /* A CÉL A BELÉPŐ , ez az alapeset, tehát a belépő sötét felülete és világos jele. */
  --auth-logo: url('../img/bespo-logo-vilagos.svg');
  background-color: #04060b;
  background-image: radial-gradient(62% 56% at 50% 46%, rgba(10, 132, 255, 0.08), transparent 74%);
  font-family: 'Be Vietnam Pro', var(--font-family, system-ui, sans-serif);
}
/* A CÉL A DASHBOARD. Ez a szabály az alapeset UTÁN áll, mert azonos fajsúlyú vele, és ilyenkor
   a sorrend dönt. A dashboard ma világos (`--bg: #f7f8fa`, dashboard.css); ha egyszer sötét
   témát kap, ITT kell követni, nem a belépőnél. */
html[data-indulokep='app'] .app-boot {
  --auth-logo: url('../img/bespo-logo.svg');
  background-color: #f7f8fa;
  background-image: none;
}
html[data-indulokep='app'] .app-boot-pont {
  border-color: rgba(17, 24, 39, 0.14);
  border-top-color: #111827;
}
html[data-indulokep='app'] .app-boot-szo {
  color: #66707c;
}
/* A MÉRETET a `.login-logo-mark` adja , itt csak annyi áll, ami az induló-képre jellemző.
   Ha a kártya jele valaha változik, ez magától követi. */
.app-boot-jel {
  margin: 0;
}
.app-boot-pont {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: #6cb2ff;
  border-radius: 50%;
  animation: app-boot-forog 0.8s linear infinite;
}
.app-boot-szo {
  font-size: 13px;
  color: #9dabbe;
}
@keyframes app-boot-forog {
  to {
    transform: rotate(360deg);
  }
}
/* A MOZGÁS ELHAGYHATÓ, a jelzés nem: a pörgés helyett egyenletes gyűrű marad. */
@media (prefers-reduced-motion: reduce) {
  .app-boot-pont {
    animation: none;
    border-color: rgba(255, 255, 255, 0.45);
  }
}

/* ══ A NAGY-KÉPERNYŐS NAGYÍTÁS NEM VONATKOZIK A BELÉPŐRE ═══════════════════════════════
   A `dashboard.css` nagy fizikai képernyőn a `body`-ra tesz `zoom: 1.1`-et (2000 képpont
   felett 1.2-t), hogy a SŰRŰ adat-táblák olvashatóbbak legyenek. A belépő viszont nem sűrű:
   egy kártya, néhány mező, egy gomb , ott a nagyítás csak nagyobbra rajzol mindent, és
   eltér attól, amit a konceptekben terveztünk (PO-észrevétel, 2026-09-05).

   MIÉRT SZORZUNK VISSZA, ÉS NEM VESSZÜK LE A `body`-RÓL. Mert a `body` nagyítása a
   FELUGRÓ RÉTEGEKET is viszi (ablakok, buborékok, az asszisztens gombja), azok pedig szintén
   a `body` gyerekei. Ha a nagyítást az app-vázra szűkítenénk, a felugró ablakok kisebbek
   lennének, mint a mögöttük lévő felület , az feltűnőbb hiba lenne, mint amit javítunk.

   A számok szándékosan ki vannak írva, nem `calc(1 / 1.1)`: a `zoom` szabvány-támogatása
   böngészőnként friss, és egy ki nem értékelt kifejezés itt némán semmit nem csinálna. */
html[data-kepernyo-leptek='1'] .app-auth-view,
html[data-kepernyo-leptek='1'] .app-boot {
  zoom: 0.909091; /* 1 / 1.1 */
}
html[data-kepernyo-leptek='2'] .app-auth-view,
html[data-kepernyo-leptek='2'] .app-boot {
  zoom: 0.833333; /* 1 / 1.2 */
}

/* ══ BELÉPÉS-JELZŐ , MI TÖRTÉNIK ÉPPEN ═══════════════════════════════════════════════════════
   A viselkedés és az indoklás: core/belepes-jelzo.js

   MIÉRT FEDI LE AZ EGÉSZ BEJELENTKEZŐT, és miért nem elég egy pörgő karika a gombban. A PO
   szava a gépi esetre az volt, hogy „megfagy a kép". Egy gombba zsúfolt apró jelzés nagy
   monitoron szinte észrevehetetlen, tehát pont azt nem oldaná meg, ami a panasz. Ha viszont a
   kártya helyét átveszi a jelző, akkor a képernyő LÁTHATÓAN állapotot vált , és ez az állapot-
   váltás maga a fő üzenet: „elindult, dolgozom rajta".

   A SZÍNEI A BELÉPŐ TOKENJEIBŐL JÖNNEK, nem a shell-éiből (`--bg`, `--text-strong`). Amíg a
   belépő világos volt, a kettő véletlenül egybeesett; sötét alapon a shell-tokenek egy fehér
   lapot húztak volna a kártya elé. */
.belepes-jelzo {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Nem teljesen átlátszatlan: a kártya halványan átdereng, tehát látszik, hogy ugyanott
     vagyunk, csak most vár a rendszer , nem egy idegen képernyőre dobtuk a felhasználót. */
  background: rgba(4, 6, 11, 0.86);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.belepes-jelzo[hidden] {
  display: none;
}

.belepes-jelzo-doboz {
  display: flex;
  max-width: 320px;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* A KARIKA. Nyitott gyűrű, ami körbefordul , a hiányzó negyed adja a forgás érzetét, e nélkül
   egy teljes kör állónak látszana. A vastagsága szándékosan nem hajszálvékony: telefonon a
   vékony vonal a fényes képernyőn elveszik.

   A BELÉPŐ FŐ SZÍNÉT VISZI (ma kék), NEM A NARANCSOT (PO-kérés, 2026-09-09). A modul-betöltés
   karikája (`dashboard.css`, `dv-module-loading`) MARAD narancs , az már a bejelentkezés utáni
   felületen él, ahol a narancs a ház akcentje. A méret és az ütem viszont onnan jön (3 képpont
   vastag gyűrű), hogy a két jelzés egy családba tartozzon. */
.belepes-jelzo-karika {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--auth-focus-line, #6cb2ff);
  border-radius: 999px;
  animation: belepes-porgeto 0.9s linear infinite;
}

@keyframes belepes-porgeto {
  to {
    transform: rotate(360deg);
  }
}

.belepes-jelzo-szo {
  margin: 0;
  color: var(--auth-text-strong, #fff);
  font-size: 16px;
  font-weight: 650;
}

.belepes-jelzo-lassu {
  margin: 0;
  color: var(--auth-text-faint, #9dabbe);
  font-size: 13.5px;
  line-height: 1.5;
}

/* MOZGÁS-ÉRZÉKENYSÉG: SEMMILYEN VÉGTELEN ANIMÁCIÓ. Először halkan „lélegző" karikát írtam ide,
   azzal az érveléssel, hogy a jelzés így is megmarad. Ez tévedés volt: a beállítás nem a
   FORGÁST tiltja, hanem a folyamatos mozgást , egy pulzáló kör ugyanúgy sérti. A ház két
   meglévő megoldása (`app-boot-pont`, `dv-module-loading`) is `animation: none`-t ad.
   ÉS NEM MARAD SEMMI HELYETTE: a haladást a szakasz-név viszi, ami VALÓDI eseményre vált, nem
   animáció. Mozgás helyett tehát információ marad. */
@media (prefers-reduced-motion: reduce) {
  .belepes-jelzo-karika {
    animation: none;
    border-color: var(--auth-focus-line, #6cb2ff);
  }
}

/* ══ ELAKADT ÁLLAPOT ═════════════════════════════════════════════════════════════════════════
   A karika MEGÁLL. Ez maga az üzenet: amíg pörög, dolgozunk; ha megállt, itt már nem a türelem
   a megoldás. A halványabb szín is ezt mondja , két réteg ugyanarra az állításra. */
.belepes-jelzo.is-elakadt .belepes-jelzo-karika {
  animation: none;
  border-color: rgba(255, 255, 255, 0.24);
}

.belepes-jelzo-elakadt[hidden] {
  display: none;
}

.belepes-jelzo-holl {
  margin: 0 0 12px;
  color: var(--auth-text-faint, #9dabbe);
  font-size: 13.5px;
  line-height: 1.5;
}

.belepes-jelzo-gombok {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* KÉT KIÚT, KÉT SÚLLYAL. Az újrapróbálkozás a valószínűbb és az ártalmatlanabb, tehát az a
   hangsúlyos; a kiléptetés a végső eszköz, ezért halk. */
.belepes-jelzo-ujra,
.belepes-jelzo-kilep {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--auth-radius-input, 10px);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}

.belepes-jelzo-ujra {
  border: 0;
  background: var(--auth-ink, #0b63d6);
  color: #fff;
}

.belepes-jelzo-kilep {
  border: 1px solid var(--auth-ghost-keret, rgba(255, 255, 255, 0.22));
  background: var(--auth-ghost-bg, rgba(255, 255, 255, 0.05));
  color: var(--auth-text, #dde5f1);
}

/* ══ ALACSONY KÉPERNYŐN FELJEBB ══════════════════════════════════════════════════════════════
   Telefonon a billentyűzet a képernyő alsó felét elfoglalhatja, és bár a beküldéskor lehúzzuk,
   a hiba-ág után visszajöhet. Középre igazítva a doboz alsó része ilyenkor alá kerülne , 667
   képpont magas készüléken mérve ez valós. Feljebb húzva mindig látszik. */
@media (max-height: 720px) {
  .belepes-jelzo {
    align-items: flex-start;
    padding-top: 18vh;
  }
}