/* ==========================================================================
   Belépési módok a kártya mellett: arcfelismerés (kamera) és 3 jegyű kód; arc betanítása és próbája (Adminisztráció).
   A belépő/zároló képernyőn sötét üvegkártyák (mindkét témában); a betanító/próba ablak a megszokott világos ablak.
   ========================================================================== */

/* ---------------------------------------------------------------- belépő képernyő: kompakt "Érintsd a kártyádat" + alternatívák */
.touch-card.compact { padding-top: 0.4rem; }
.touch-card.compact .rfid-ring { width: 8.5rem; height: 8.5rem; margin-bottom: 0.8rem; }
.touch-card.compact .rfid-ring svg { width: 3.8rem; height: 3.8rem; }
.touch-card.compact h1 { font-size: 2.2rem; margin-bottom: 0.3rem; }
.touch-card.compact p { font-size: 1.05rem; }
html[data-theme='navy'] .stage .touch-card.compact { padding: 1.3rem 2.2rem 1.4rem; }

.alt-sep { display: flex; align-items: center; gap: 1rem; margin: 0.9rem auto 0.8rem; max-width: 40rem; color: var(--g-400); font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; }
.alt-sep::before, .alt-sep::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .18); }
.alt-row { display: flex; gap: 0.8rem 1rem; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.alt-card {
  display: flex; align-items: center; gap: 1rem; padding: 0.65rem 1.1rem; min-width: 15rem; text-align: left; color: #fff;
  border-radius: 1.2rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
  transition: border-color 0.2s, background 0.2s;
}
button.alt-card { font: inherit; cursor: pointer; }
button.alt-card:active { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.alt-ic { width: 4rem; height: 4rem; border-radius: 1rem; display: grid; place-items: center; background: rgba(255, 255, 255, .12); flex: 0 0 auto; }
.alt-ic svg { width: 2.1rem; height: 2.1rem; }
.face-text { display: grid; gap: 0.15rem; min-width: 0; justify-items: start; }
.face-text b { font-size: 1.15rem; }
.face-text .sub { color: var(--g-300); font-size: 0.92rem; line-height: 1.3; max-width: 15rem; }

/* kerek kamera-előnézet; a színes gyűrű az állapotot mutatja, a kitöltődő ív az összegyűjtött kockákat */
.face-view { position: relative; width: 7rem; height: 7rem; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: #0a1020; border: 3px solid rgba(255, 255, 255, .32); transition: border-color 0.2s, box-shadow 0.2s; }
.face-view video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; } /* tükörkép: természetesebb, mint egy tükörben */
.face-off { position: absolute; inset: 0; display: grid; place-items: center; background: #0a1020; color: var(--g-300); }
.face-off svg { width: 3rem; height: 3rem; }
.face-prog {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(#6ea8ff calc(var(--p, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
.face-view[data-phase='adjust'], .face-view[data-phase='away'] { border-color: #e7b13c; }
.face-view[data-phase='collecting'] { border-color: #6ea8ff; box-shadow: 0 0 26px rgba(79, 140, 255, .5); }
.face-view[data-phase='verifying'] { border-color: #6ea8ff; animation: face-pulse 1s ease-in-out infinite; }
.face-view[data-phase='accepted'] { border-color: #5fd196; box-shadow: 0 0 28px rgba(95, 209, 150, .55); }
.face-view[data-phase='cooldown'], .face-view[data-phase='paused'], .face-view[data-phase='locked'], .face-view[data-phase='error'] { border-color: var(--red, #d10f2f); }
@keyframes face-pulse { 50% { box-shadow: 0 0 30px rgba(110, 168, 255, .7); } }

/* zároló képernyő */
.lock-alt { margin-top: 1rem; }
.lock-alt .alt-card { min-width: 15rem; }
.lock-overlay .alt-sep { margin-top: 1rem; }

/* DEMÓ szimulációs panel: szakaszcím */
.sim-sec { margin: 0.9rem 0 0.3rem; padding: 0.35rem 0.6rem; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em; color: #3c2800; background: #f6e3b4; border-radius: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.sim-sec svg { width: 1.1rem; height: 1.1rem; }

/* ---------------------------------------------------------------- Adminisztráció: arc betanítása és próbája */
/* a modális törzs flex-oszlop: az előnézet és a mérőszámok ne zsugorodjanak össze, ha az eredmény-doboz megjelenik (inkább görgethető a törzs) */
.enroll-view, .enroll-hint, .enroll-steps, .face-metrics, .probe-result, .consent-box { flex: 0 0 auto; }
.enroll-view { position: relative; width: min(30rem, 100%); aspect-ratio: 4 / 3; margin: 0 auto; border-radius: 1rem; overflow: hidden; background: #0a1020; border: 3px solid var(--g-300); transition: border-color 0.15s, box-shadow 0.15s; }
.enroll-view video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.enroll-view .face-off { background: #0a1020; }
.enroll-view::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44%; height: 72%; transform: translate(-50%, -50%); border: 3px dashed rgba(255, 255, 255, .55); border-radius: 50%; pointer-events: none; }
.enroll-view[data-ok='1'] { border-color: #2f9e62; }
.enroll-view[data-ok='0'] { border-color: #d9a21b; }
.enroll-view.flash { box-shadow: 0 0 0 7px rgba(47, 158, 98, .55); }
.enroll-hint { min-height: 1.6rem; text-align: center; font-weight: 650; }
.enroll-steps { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; }
.enroll-steps i { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--g-400); }
.enroll-steps i.f { background: #2f9e62; border-color: #2f9e62; }
.face-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.4rem 0.8rem; font-size: 0.9rem; }
.face-metrics div { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.2rem 0; border-bottom: 1px solid var(--line, #e1e7f0); }
.face-metrics b { font-variant-numeric: tabular-nums; }
.probe-result { border: 2px solid var(--g-300); border-radius: 0.9rem; padding: 0.7rem 0.9rem; display: grid; gap: 0.35rem; }
.probe-result.ok { border-color: #2f9e62; background: rgba(47, 158, 98, .07); }
.probe-result.no { border-color: #d9a21b; background: rgba(217, 162, 27, .08); }
.probe-result table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.probe-result td { padding: 0.15rem 0.3rem; font-variant-numeric: tabular-nums; }
.probe-result td:last-child { text-align: right; }
.consent-box { border: 2px solid var(--g-300); border-radius: 0.9rem; padding: 0.8rem 1rem; display: grid; gap: 0.6rem; background: var(--g-100, #f4f6f9); }
.code-field { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; }
.code-field .field-wrap { flex: 1 1 10rem; }