/* Sign-in page. Uses the app's tokens from app.css, so it follows light and dark mode. */
html,body{margin:0}
:root{padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px)}
[hidden]{display:none!important}
.gate{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding-block:32px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.gate-card{width:min(460px,100%);background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:36px 32px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;box-shadow:0 24px 60px -28px rgba(20,23,43,.35)}
.gate-logo{width:56px;height:56px}
.gate-card h1{font-size:26px;line-height:1.2}
.gate-sub{color:var(--muted);max-width:36ch}
.gate-btn{margin-top:8px;width:100%;justify-content:center;font-size:16px;padding:14px 20px}
.gate-status{min-height:1.5em;font-weight:600;color:var(--muted)}
.gate-status.err{color:var(--coral)}
.gate-fine{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.gate-fine a{color:var(--primary);font-weight:700}
@media (max-width:420px){.gate-card{padding:28px 20px 22px;border-radius:22px}}