* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { min-height: 100%; font-family: "Space Grotesk", system-ui, sans-serif }
body { display: grid; place-items: center; min-height: 100vh; overflow: hidden; color: #edf2ff; background: #04060f; padding: 24px }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .55 }
.glow { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 30% 25%, rgba(73, 105, 218, .22), transparent 42%), radial-gradient(circle at 75% 78%, rgba(163, 86, 219, .2), transparent 42%) }
.box { position: relative; width: min(100%, 420px); padding: 42px 38px 34px; border: 1px solid rgba(137, 157, 232, .2); border-radius: 18px; background: rgba(8, 13, 32, .78); box-shadow: 0 24px 90px rgba(0, 0, 0, .42), 0 0 50px rgba(108, 104, 220, .1); backdrop-filter: blur(16px) }
.brand { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 26px; filter: drop-shadow(0 0 18px rgba(122, 162, 255, .18)) }
.brand img:first-child { width: 52px; height: auto }
.brand img:last-child { width: min(100%, 260px); height: auto }
.lead { margin-bottom: 25px; color: #8998bf; font-size: .76rem; letter-spacing: .2em; text-align: center; text-transform: uppercase }
form { display: grid; gap: 9px }
label { margin-top: 7px; color: #a9b6d7; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase }
input { width: 100%; border: 1px solid rgba(137, 157, 232, .22); border-radius: 8px; padding: 13px 14px; outline: none; color: #edf2ff; background: rgba(3, 7, 20, .66); font: inherit; transition: .2s ease }
input:focus { border-color: #829bff; box-shadow: 0 0 0 3px rgba(130, 155, 255, .12) }
button { margin-top: 17px; border: 1px solid #8f73e9; border-radius: 8px; padding: 13px 16px; color: #fff; background: linear-gradient(100deg, #496edc, #a36be4); font: 700 .82rem "Space Grotesk", sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: .2s ease }
button:hover, button:focus-visible { transform: translateY(-1px); box-shadow: 0 9px 28px rgba(131, 105, 230, .3) }
.back { display: block; margin-top: 24px; color: #7888b2; font-size: .72rem; text-align: center; text-decoration: none }
.back:hover { color: #d8e0ff }
@media (max-width: 480px) { .box { padding: 34px 24px 28px } }