*{box-sizing:border-box}
:root{color-scheme:dark}
body{position:relative;isolation:isolate;overflow:hidden;margin:0;min-height:100svh;display:grid;place-items:center;background:#080d1b;color:#eef3ff;font:300 16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:24px}
.login-ambience{position:fixed;z-index:-1;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% -10%,#102a4b88,transparent 64%),#080d1b}
.blue-glow{position:absolute;border-radius:50%;filter:blur(65px);will-change:transform;background:radial-gradient(circle,#1675dc65 0%,#1760b333 37%,transparent 72%)}
.blue-glow-one{width:min(72vw,800px);height:min(64vw,660px);top:-35%;left:10%;animation:glide-one 23s ease-in-out infinite alternate}
.blue-glow-two{width:min(55vw,600px);height:min(55vw,600px);right:-25%;bottom:-38%;opacity:.65;background:radial-gradient(circle,#245cff54 0%,#148edc28 40%,transparent 72%);animation:glide-two 29s ease-in-out infinite alternate}
.particles{position:absolute;inset:0}
.particles span{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#75c9ff;opacity:0;box-shadow:0 0 12px 2px #258bff88;animation:float var(--duration) var(--delay) ease-in-out infinite}
.particles span:nth-child(1){--x:8%;--y:17%;--size:3px;--duration:19s;--delay:-8s}.particles span:nth-child(2){--x:16%;--y:71%;--size:2px;--duration:24s;--delay:-17s}.particles span:nth-child(3){--x:24%;--y:38%;--size:4px;--duration:21s;--delay:-12s}.particles span:nth-child(4){--x:31%;--y:84%;--size:2px;--duration:27s;--delay:-4s}.particles span:nth-child(5){--x:39%;--y:12%;--size:2px;--duration:23s;--delay:-19s}.particles span:nth-child(6){--x:46%;--y:75%;--size:3px;--duration:25s;--delay:-11s}.particles span:nth-child(7){--x:54%;--y:27%;--size:2px;--duration:20s;--delay:-5s}.particles span:nth-child(8){--x:62%;--y:89%;--size:4px;--duration:28s;--delay:-21s}.particles span:nth-child(9){--x:69%;--y:15%;--size:2px;--duration:22s;--delay:-14s}.particles span:nth-child(10){--x:76%;--y:63%;--size:3px;--duration:26s;--delay:-9s}.particles span:nth-child(11){--x:84%;--y:31%;--size:2px;--duration:18s;--delay:-3s}.particles span:nth-child(12){--x:92%;--y:79%;--size:3px;--duration:24s;--delay:-15s}.particles span:nth-child(13){--x:12%;--y:48%;--size:2px;--duration:29s;--delay:-22s}.particles span:nth-child(14){--x:28%;--y:23%;--size:3px;--duration:20s;--delay:-7s}.particles span:nth-child(15){--x:72%;--y:45%;--size:2px;--duration:27s;--delay:-18s}.particles span:nth-child(16){--x:88%;--y:11%;--size:4px;--duration:23s;--delay:-10s}.particles span:nth-child(17){--x:43%;--y:91%;--size:2px;--duration:26s;--delay:-13s}.particles span:nth-child(18){--x:96%;--y:52%;--size:2px;--duration:21s;--delay:-6s}
.login-card{width:100%;max-width:420px;padding:32px;border:1px solid #34425b;border-radius:24px;background:rgb(20 28 46 / 94%);box-shadow:0 20px 80px #02071155;backdrop-filter:blur(12px);animation:card-enter .8s cubic-bezier(.2,.7,.2,1) both}
.login-card img{display:block;border-radius:16px}.login-card h1{font-size:28px;font-weight:450;letter-spacing:-.045em;margin:20px 0 6px}.login-card p{font-weight:350;color:#b6c3d9;margin:0 0 16px}.login-card label{display:block;margin:18px 0 7px;font-size:14px;font-weight:400;color:#e1e9f8}.login-card input,.login-card button{width:100%;padding:13px;border-radius:10px;font:inherit}.login-card input{background:#0b1220;color:#fff;border:1px solid #52617b;font-weight:350;transition:border-color .2s,box-shadow .2s}.login-card input:focus{border-color:#62adff;box-shadow:0 0 0 3px #318bff25;outline:0}.login-card input:-webkit-autofill,.login-card input:-webkit-autofill:hover,.login-card input:-webkit-autofill:focus{-webkit-text-fill-color:#eef3ff;-webkit-box-shadow:0 0 0 1000px #0b1220 inset;transition:background-color 99999s ease-out}.login-card button{background:#2455ff;color:white;border:0;margin:24px 0 20px;cursor:pointer;font-weight:400;transition:background .2s,transform .2s,box-shadow .2s}.login-card button:hover{background:#3474ff;box-shadow:0 8px 24px #2455ff40;transform:translateY(-1px)}.login-card button:active{transform:translateY(0)}.login-card button:focus-visible{outline:3px solid #7fdcff;outline-offset:3px}.login-card [role=alert]{padding:12px;border:1px solid #f2a59f;border-radius:8px;color:#ffd9d5;font-weight:350}.login-card small{display:block;line-height:1.5;color:#b6c3d9;font-size:13px;font-weight:350}
@keyframes float{0%,100%{opacity:0;transform:translate3d(0,12px,0)}20%{opacity:.48}50%{opacity:.18;transform:translate3d(15px,-32px,0)}80%{opacity:.5;transform:translate3d(-8px,-68px,0)}}
@keyframes glide-one{0%{transform:translate3d(-6%,0,0) scale(.94)}38%{transform:translate3d(12%,11%,0) scale(1.08)}72%{transform:translate3d(5%,25%,0) scale(.99)}100%{transform:translate3d(-9%,17%,0) scale(1.12)}}
@keyframes glide-two{0%{transform:translate3d(0,0,0) scale(.9)}43%{transform:translate3d(-20%,-17%,0) scale(1.1)}100%{transform:translate3d(-35%,4%,0) scale(.95)}}
@keyframes card-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){body{padding:18px}.login-card{padding:26px 23px;border-radius:20px}.login-card h1{font-size:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.particles{display:none}}
/* Center the login card identity while keeping form labels and controls easy to scan. */
.login-card>img,.login-card>h1,.login-card>p{text-align:center;margin-left:auto;margin-right:auto}
.login-card>img{margin-bottom:20px}
.login-card>h1{margin-top:0}
.login-card>p{margin-bottom:20px}
.login-card>small{text-align:center}