@font-face { font-family: Ggsans; src: url('/assets/f8d412cf3a-652736292cbf8363b43d077a_ggsans-Normal.woff2') format('woff2'); font-display: block; }
* { box-sizing: border-box; }
:root { color-scheme: dark; --auth-surface: hsl(232.5 6.557% 23.922%); --auth-muted: hsl(231.429 4.348% 68.431%); --auth-text: hsl(240 4.348% 95.49%); --auth-primary: hsl(234.935 85.556% 64.706%); }
body { margin: 0; font-family: Ggsans, 'Segoe UI', sans-serif; color: var(--auth-text); }
/* The card waits for Ggsans before it is shown: a fallback render wraps the
   copy differently and the centred column would jump when the real face
   lands. `auth-boot.js` removes this class once the face is in. */
html.auth-font-pending .authBox__921c5 { opacity: 0; }
html.auth-font-ready .authBox__921c5 { animation: auth-enter 220ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes auth-enter { from { opacity: 0; transform: translateY(6px) scale(.995); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.auth-font-ready .authBox__921c5 { animation: none; } }
.auth-page { min-height: 100dvh; background: linear-gradient(to left bottom, #3d4046, #1e1e23); }
a { color: #00a8fc; text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible:not(input) { outline: 2px solid #88c9ff; outline-offset: 3px; }
.auth-brand { position: absolute; top: 32px; left: 32px; }
.auth-brand img { display: block; width: 130px; height: 36px; object-fit: contain; }
.auth-preview-bar { position: absolute; top: 24px; right: 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; max-width: calc(100vw - 220px); font-size: 12px; color: #c4c7d1; }
.auth-preview-bar a { color: inherit; }
.auth-preview-bar button { color: inherit; border: 1px solid #6a6b76; border-radius: 4px; padding: 5px 8px; background: transparent; }
.auth-preview-bar span { flex-basis: 100%; text-align: right; }
.auth-layout { min-height: 100dvh; display: grid; place-items: center; padding: 100px 24px 40px; }
.authBox__921c5 { background-color: var(--auth-surface); border-radius: 8px; box-shadow: 0 8px 24px #0004; color: var(--auth-muted); font-size: 16px; padding: 32px; width: 480px; max-width: 100%; }
.auth-login { display: block; width: 784px; }
.auth-heading { text-align: center; margin-bottom: 20px; }
.auth-heading h1 { color: #fff; font-size: 24px; line-height: 30px; font-weight: 600; margin: 0 0 8px; }
.auth-heading p { margin: 0; line-height: 20px; }
.auth-label { display: block; color: #d2d4dc; margin: 20px 0 8px; font-size: 12px; line-height: 16px; font-weight: 700; text-transform: uppercase; }
.required { color: #fa777c; }
.auth-link { border: 0; padding: 0; background: transparent; color: var(--text-brand); font-size: 14px; }
.auth-link:hover { text-decoration: underline; }
.auth-forgot { margin-top: 6px; margin-bottom: 20px; }
.auth-primary { width: 100%; height: 44px; padding: 10px 16px; color: #fff; font-size: 16px; font-weight: 500; border: 0; border-radius: 4px; background: var(--auth-primary); transition: background-color 120ms; }
.auth-primary:hover { background: #4752c4; }
.auth-registration { font-size: 14px; margin: 8px 0 0; }
.auth-qr-side { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.demo-qr { position: relative; width: 176px; height: 176px; padding: 8px; background: #fff; border-radius: 4px; margin-bottom: 24px; }
.demo-qr svg { display: block; width: 100%; height: 100%; }
.auth-qr-side h2 { margin: 0 0 8px; font-size: 24px; line-height: 30px; color: #fff; font-weight: 600; }
.auth-qr-side p { margin: 0 0 16px; line-height: 20px; font-size: 16px; }
.auth-birthday { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 12px; }
.auth-select { text-align: left; min-height: 40px; border: 0; border-radius: 4px; background: #202127; color: #c4c6ce; padding: 10px; }
.auth-select::after { content: ''; float: right; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 2px 3px 0; }
.auth-opt-in { margin: 16px 0 20px; }
.auth-agreement { font-size: 12px; line-height: 16px; margin: 10px 0 16px; }
.auth-feedback { margin: 12px 0 0; color: #d7dcff; font-size: 13px; line-height: 18px; }
[hidden] { display: none !important; }
::selection { background: #5865f2; color: #fff; }