:root{

--primary:#6C5CE7;
--primary2:#8F7CFF;

}

body{

margin:0;

font-family:Inter,sans-serif;

background:#F5F7FB;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

}

body::before{

content:"";

position:fixed;

top:-200px;

right:-200px;

width:500px;

height:500px;

border-radius:50%;

background:linear-gradient(135deg,#7A5AF8,#A78BFA);

opacity:.18;

}

body::after{

content:"";

position:fixed;

bottom:-220px;

left:-220px;

width:500px;

height:500px;

border-radius:50%;

background:linear-gradient(135deg,#6C5CE7,#60A5FA);

opacity:.15;

}

.login-wrapper{

width:100%;

padding:30px;

display:flex;

justify-content:center;

}

.login-card{

width:100%;

max-width:430px;

background:#fff;

border-radius:20px;

padding:45px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

border:1px solid rgba(0,0,0,.05);

position:relative;

z-index:2;

}

.login-logo{

height:36px;

width:auto;

}

.form-control{

height:52px;

border-left:none;

}

.input-group-text{

background:white;

border-right:none;

}

.form-control:focus{

box-shadow:none;

border-color:#ced4da;

}

.login-btn{

height:52px;

background:linear-gradient(135deg,#6C5CE7,#8F7CFF);

border:none;

font-weight:600;

font-size:16px;

transition:.3s;

}

.login-btn:hover{

transform:translateY(-2px);

box-shadow:0 12px 25px rgba(108,92,231,.25);

}

h2{

color:#2D3748;

}

.text-muted{

font-size:15px;

}