/* ============================================================
   Bramka PIN — pełnoekranowy overlay z własną klawiaturą numeryczną.
   Wyższy z-index niż modal (200), bo musi zakryć otwarty podgląd kamery.
   ============================================================ */

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: calc(var(--safe-top) + 28px) 24px calc(var(--safe-bottom) + 28px);
    background-color: var(--bg-0);
    /* Ta sama warstwowość co body w theme.css: góra trzyma DOKŁADNIE kolor paska
       statusu (--bg-0) przez pierwsze 80 px i dopiero potem wchodzi poświata —
       inaczej na styku z paskiem statusu widać odcięcie. */
    background-image:
        linear-gradient(180deg, var(--bg-0) 80px, transparent 280px),
        radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.24s var(--ease);
}
.auth-overlay.show { opacity: 1; }

.auth__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.auth__title {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.auth__hint {
    min-height: 1.2em;
    font-size: 0.86rem;
    color: var(--text-dim);
}
.auth__hint.is-err { color: var(--danger); }

/* --- Wskaźnik wpisanych cyfr --- */

.auth__dots {
    display: flex;
    gap: 14px;
}
.auth__dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid var(--stroke-strong);
    background: var(--surface);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.auth__dot.is-filled {
    background: var(--accent);
    border-color: transparent;
    transform: scale(1.12);
    box-shadow: 0 0 16px -2px var(--accent-glow);
}

.auth__dots.is-shake { animation: auth-shake 0.42s var(--ease); }

@keyframes auth-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-9px); }
    40% { transform: translateX(9px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* --- Klawiatura --- */

.auth__pad {
    display: grid;
    grid-template-columns: repeat(3, 74px);
    gap: 16px;
}
.auth__key {
    display: grid;
    place-items: center;
    height: 74px;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--stroke);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dur) var(--ease), transform 0.12s var(--ease);
}
.auth__key:active { background: var(--surface-active); transform: scale(0.94); }
.auth__key--ghost { background: none; border-color: transparent; }
.auth__key--ghost:active { background: var(--surface); }
.auth__key svg { width: 26px; height: 26px; }

.auth__pad.is-off { opacity: 0.35; pointer-events: none; }

/* --- Ekran blokady --- */

.auth__lock {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.auth-overlay.is-locked .auth__lock { display: flex; }
.auth-overlay.is-locked .auth__dots { display: none; }

.auth__countdown {
    font-size: 2.1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}