*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    min-height:100vh;
    display:grid;
    place-items:center;
    color:#fff;
    background:
        radial-gradient(circle at center,rgba(17,91,190,.20),transparent 36%),
        #020711;
}

.login-wrap{
    width:min(420px,92vw);
    padding:34px;
    text-align:center;
    border:1px solid rgba(86,163,255,.18);
    background:rgba(6,16,31,.82);
    border-radius:24px;
    box-shadow:0 30px 90px rgba(0,0,0,.45);
    backdrop-filter:blur(14px);
}

.login-wrap h1{
    margin:16px 0 5px;
    font-size:36px;
    letter-spacing:8px;
}

.login-wrap p{
    color:#80a9da;
    margin:0 0 26px;
}

.login-wrap form{
    text-align:left;
}

.login-wrap label{
    display:block;
    margin:14px 0 7px;
    font-size:13px;
    color:#bfd3ea;
}

.login-wrap input,
.login-wrap select{
    width:100%;
    height:49px;
    border-radius:12px;
    padding:0 14px;
    outline:none;
    border:1px solid rgba(88,160,255,.22);
    background:#071426;
    color:#fff;
}

.login-wrap button{
    width:100%;
    height:52px;
    border:0;
    border-radius:12px;
    margin-top:20px;
    color:#fff;
    cursor:pointer;
    font-weight:700;
    background:linear-gradient(90deg,#135ddc,#279fee);
}

.alert{
    margin:12px 0;
    padding:11px;
    border-radius:10px;
    background:rgba(186,51,72,.20);
}

.mini-orb{
    width:96px;
    height:96px;
    margin:auto;
    border-radius:50%;
    display:grid;
    place-items:center;
    position:relative;
    background:radial-gradient(circle at 35% 25%,#dcfbff,#45c8ff 8%,#1665d5 32%,#06183c 70%);
    box-shadow:0 0 38px rgba(53,155,255,.55);
}

.mini-orb strong{
    position:relative;
    z-index:2;
    letter-spacing:4px;
}

.mini-ring{
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    border:1px dashed rgba(96,190,255,.4);
    animation:rotate 10s linear infinite;
}

@keyframes rotate{
    to{transform:rotate(360deg);}
}