:root {
    --fa-bg: #f8fafc;
    --fa-ok: #2fb344;
    --fa-warn: #f59f00;
    --fa-bad: #d63939;
}
.app-body { background: var(--fa-bg); }
.page-body { padding-bottom: 5rem; }

/* Bottom navigation (mobile web / PWA) */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; justify-content: space-around; align-items: flex-end;
    background: #fff; border-top: 1px solid #e6e7e9;
    padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
}
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: .72rem; color: #667382; text-decoration: none; }
.bottom-nav a i { font-size: 1.45rem; }
.bottom-nav a.active { color: var(--tblr-primary); }
.bottom-nav a.scan-btn i {
    background: var(--tblr-primary); color: #fff; border-radius: 50%;
    width: 3.2rem; height: 3.2rem; display: grid; place-items: center; margin-top: -1.6rem;
    box-shadow: 0 4px 12px rgba(32, 107, 196, .4);
}

/* Scanner & enrollment */
.scanner-body { background: #0b1220; color: #fff; min-height: 100vh; min-height: 100dvh; }
.scanner { max-width: 520px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding: 1rem; gap: .9rem; }
.scanner-header { display: flex; align-items: center; gap: .75rem; }
.scanner-header .meta { flex: 1; line-height: 1.25; }
.scanner-header .meta small { color: #9aa5b8; }
.viewport { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 1.25rem; overflow: hidden; background: #000; }
.viewport video, .viewport canvas.overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.face-guide {
    position: absolute; left: 50%; top: 46%; width: 62%; aspect-ratio: 3 / 4;
    transform: translate(-50%, -50%); border-radius: 50%;
    border: 5px solid var(--fa-bad); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
    transition: border-color .25s, box-shadow .25s;
}
.face-guide.state-detected { border-color: var(--fa-warn); }
.face-guide.state-matched { border-color: var(--fa-ok); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45), 0 0 30px var(--fa-ok); }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5rem; font-weight: 700; text-shadow: 0 2px 12px #000; pointer-events: none; }
.status-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; font-size: .85rem; background: rgba(255, 255, 255, .08); }
.status-pill.ok { background: rgba(47, 179, 68, .18); color: #7ee29a; }
.status-pill.bad { background: rgba(214, 57, 57, .2); color: #ff9c9c; }
.status-pill.warn { background: rgba(245, 159, 0, .2); color: #ffd27a; }
.scanner .hint { text-align: center; color: #c8d1e0; min-height: 1.5rem; }
.scanner .btn-lg { border-radius: .9rem; padding: .9rem; }
.loading-veil { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .65); text-align: center; padding: 1rem; }

/* Map picker */
#office-map { height: 420px; border-radius: .5rem; z-index: 0; }
.snapshot-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: .4rem; background: #eef1f5; }
.gallery-img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }