:root { color-scheme: dark; --auth-viewport-height: 100lvh; background: radial-gradient(circle at 100% 100%, rgba(124, 58, 237, .18), transparent 28rem), #060912; }
html { width: 100%; height: var(--auth-viewport-height); min-height: 0; overflow: hidden; background: radial-gradient(circle at 100% 100%, rgba(124, 58, 237, .18), transparent 28rem), #060912; }
* { box-sizing: border-box; }
body {
    width: 100%;
    height: var(--auth-viewport-height);
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 10%, rgba(37, 99, 235, .2), transparent 32rem),
        radial-gradient(circle at 90% 90%, rgba(124, 58, 237, .18), transparent 34rem),
        #060912;
    color: #f5f7fc;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.auth-world { position: relative; display: grid; width: 100%; height: var(--auth-viewport-height); min-height: 0; place-items: center; overflow: hidden; padding: calc(1.5rem + env(safe-area-inset-top, 0px)) max(1.5rem, env(safe-area-inset-right, 0px)) calc(1.5rem + env(safe-area-inset-bottom, 0px)) max(1.5rem, env(safe-area-inset-left, 0px)); isolation: isolate; }
.auth-network { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .9; }
.auth-shell { position: relative; width: min(100%, 26rem); }
.auth-brand { margin-bottom: 1.65rem; text-align: center; }
.auth-brand__name { color: #8fb1ff; font-size: .65rem; font-weight: 300; letter-spacing: .42em; text-transform: uppercase; }
.auth-brand h1 { margin: .7rem 0 0; font-size: 2rem; font-weight: 200; letter-spacing: .08em; text-transform: uppercase; }
.auth-brand p { margin: .7rem auto 0; max-width: 22rem; color: #8f9bb1; font-size: .82rem; line-height: 1.6; }
.auth-card { padding: 1.55rem 1.65rem 1.7rem; border: 1px solid rgba(173, 195, 241, .11); border-radius: .7rem; background: rgba(9, 14, 25, .76); box-shadow: 0 24px 70px rgba(0,0,0,.3); backdrop-filter: blur(18px); }
.auth-input { width: 100%; height: 3.2rem; padding: 0 .1rem; border: 0; border-bottom: 1px solid rgba(158, 178, 219, .25); border-radius: 0; outline: none; background: transparent; color: #f5f7fc; font-size: 1rem; }
.auth-input:focus { border-color: rgba(101, 148, 255, .9); }
.auth-input::placeholder { color: #56627a; }
.auth-input + .auth-input { margin-top: .85rem; }
.auth-button { display: block; width: 8.8rem; height: 2.55rem; margin: 1.65rem auto 0; border: 1px solid rgba(111, 157, 255, .75); border-radius: .3rem; background: transparent; color: #a9c2ff; font-size: .72rem; font-weight: 300; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.auth-button:hover { border-color: #8cb0ff; background: rgba(91,140,255,.1); color: #eef3ff; }
.auth-message { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid rgba(101,148,255,.22); border-radius: .35rem; background: rgba(91,140,255,.08); color: #cbd8f7; font-size: .8rem; line-height: 1.5; }
.auth-message--error { border-color: rgba(248,113,113,.25); background: rgba(239,68,68,.08); color: #fecaca; }
.auth-back { display: block; margin-top: 1.3rem; color: #7484a2; font-size: .68rem; letter-spacing: .1em; text-align: center; text-decoration: none; text-transform: uppercase; }
.auth-back:hover { color: #a9c2ff; }