:root{
    --as-login-bg:#070b12;
    --as-login-panel:#0f1724;
    --as-login-border:#26364c;
    --as-login-text:#f4f6fb;
    --as-login-soft:#9ca9bc;
    --as-login-gold:#e3c064;
    --as-login-purple:#925cff;
    --as-login-green:#42d38b;
}

html,body{
    margin:0;
    min-height:100%;
}

body.as-login-v2{
    min-height:100vh;
    background:
        radial-gradient(circle at 82% 32%,rgba(98,64,220,.20),transparent 34%),
        radial-gradient(circle at 22% 18%,rgba(227,192,100,.07),transparent 25%),
        linear-gradient(135deg,#07101c,#060a11 55%,#0a0c19);
    color:var(--as-login-text);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    overflow-x:hidden;
}

.as-login-shell{
    min-height:100vh;
    padding:26px 5vw 30px;
    display:grid;
    grid-template-rows:auto 1fr auto;
}

.as-login-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.as-login-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.as-login-logo{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:13px;
    color:#17130b;
    background:linear-gradient(145deg,#f3dc8a,#be9031);
    font-weight:900;
    box-shadow:0 12px 35px rgba(227,192,100,.18);
}

.as-login-brand-title{
    font-size:21px;
    font-weight:800;
    letter-spacing:.12em;
}

.as-login-brand-sub{
    margin-top:4px;
    color:#8592a7;
    font-size:10px;
    letter-spacing:.20em;
}

.as-login-status{
    display:flex;
    align-items:center;
    gap:10px;
    color:#b8c2d1;
    font-size:11px;
}

.as-login-status-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--as-login-green);
    box-shadow:0 0 18px rgba(66,211,139,.65);
}

.as-login-main{
    display:grid;
    grid-template-columns:minmax(420px,.95fr) minmax(280px,.72fr) minmax(380px,1fr);
    align-items:center;
    gap:28px;
    padding:34px 0;
}

.as-login-card{
    padding:42px 42px 36px;
    border:1px solid rgba(100,130,175,.32);
    border-radius:24px;
    background:
        linear-gradient(145deg,rgba(17,27,42,.96),rgba(10,17,29,.96));
    box-shadow:
        0 32px 80px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.as-login-eyebrow{
    margin-bottom:16px;
    color:#94a3bb;
    font-size:10px;
    font-weight:800;
    letter-spacing:.24em;
}

.as-login-card h1{
    margin:0;
    font-size:42px;
    line-height:1.08;
    letter-spacing:-.045em;
}

.as-login-card h1 span{
    background:linear-gradient(90deg,#f5d36e,#ae74ff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.as-login-lead{
    max-width:500px;
    margin:16px 0 28px;
    color:#9aa9bf;
    line-height:1.55;
    font-size:15px;
}

.as-login-card label{
    display:block;
    margin:15px 0 7px;
    color:#d0d7e3;
    font-size:12px;
    font-weight:650;
}

.as-login-card input{
    width:100%;
    height:50px;
    padding:0 15px;
    box-sizing:border-box;
    color:white;
    background:#0b1422;
    border:1px solid #314057;
    border-radius:11px;
    outline:none;
    font-size:14px;
}

.as-login-card input:focus{
    border-color:rgba(146,92,255,.75);
    box-shadow:0 0 0 3px rgba(146,92,255,.09);
}

.as-login-submit{
    width:100%;
    height:54px;
    margin-top:22px;
    border:0;
    border-radius:12px;
    cursor:pointer;
    color:#17130b;
    background:linear-gradient(135deg,#f1d576,#c79a39);
    font-size:14px;
    font-weight:850;
    box-shadow:0 15px 36px rgba(199,154,57,.16);
}

.as-login-submit:hover{
    filter:brightness(1.04);
}

.as-login-error{
    margin-bottom:18px;
    padding:11px 13px;
    border:1px solid rgba(255,102,119,.2);
    border-radius:9px;
    color:#ffabb4;
    background:rgba(255,102,119,.08);
    font-size:12px;
}

.as-login-secure{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:18px;
    color:#697a90;
    font-size:10px;
}

.as-feature-stack{
    display:grid;
    gap:14px;
}

.as-feature{
    min-height:82px;
    padding:17px 18px;
    display:flex;
    align-items:center;
    gap:15px;
    border:1px solid rgba(98,121,158,.20);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(17,27,43,.84),rgba(10,17,29,.70));
}

.as-feature-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    flex:0 0 46px;
    border-radius:12px;
    font-size:21px;
    background:linear-gradient(145deg,#7548d6,#44228a);
}

.as-feature:nth-child(2) .as-feature-icon{
    background:linear-gradient(145deg,#b18a2b,#5e4314);
}

.as-feature:nth-child(3) .as-feature-icon{
    background:linear-gradient(145deg,#238a54,#0c4e2b);
}

.as-feature:nth-child(4) .as-feature-icon{
    background:linear-gradient(145deg,#275da9,#173264);
}

.as-feature strong{
    display:block;
    margin-bottom:5px;
    font-size:13px;
}

.as-feature span{
    color:#7e8da3;
    font-size:10px;
}

.as-login-visual{
    min-height:500px;
    position:relative;
    display:grid;
    place-items:center;
}

.as-orbit{
    position:relative;
    width:min(32vw,430px);
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(117,72,214,.16),transparent 48%);
}

.as-orbit:before,
.as-orbit:after{
    content:"";
    position:absolute;
    inset:8%;
    border-radius:50%;
    border:2px solid rgba(227,192,100,.42);
    box-shadow:
        0 0 34px rgba(227,192,100,.12),
        inset 0 0 26px rgba(146,92,255,.08);
}

.as-orbit:after{
    inset:19%;
    border-color:rgba(146,92,255,.48);
    transform:rotate(18deg);
}

.as-orbit-core{
    width:46%;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border-radius:50%;
    z-index:2;
    color:#e9c966;
    background:
        radial-gradient(circle at 40% 35%,#1c2132,#0a0e18 65%);
    border:1px solid rgba(227,192,100,.38);
    box-shadow:
        0 0 55px rgba(146,92,255,.17),
        0 0 26px rgba(227,192,100,.10);
    font-size:64px;
    font-weight:850;
    letter-spacing:-.05em;
}

.as-login-slogan{
    position:absolute;
    bottom:22px;
    color:#8796ac;
    font-size:14px;
    font-style:italic;
    text-align:center;
}

.as-login-footer{
    padding-top:18px;
    display:flex;
    justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.05);
    color:#66758a;
    font-size:10px;
}

@media(max-width:1100px){
    .as-login-main{
        grid-template-columns:1fr 1fr;
    }
    .as-login-visual{
        display:none;
    }
}

@media(max-width:760px){
    .as-login-main{
        grid-template-columns:1fr;
    }
    .as-feature-stack{
        display:none;
    }
    .as-login-shell{
        padding:20px;
    }
    .as-login-card{
        padding:30px 25px;
    }
    .as-login-card h1{
        font-size:33px;
    }
    .as-login-status{
        display:none;
    }
}