*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:Inter,sans-serif;

background:#f8fafc;

height:100vh;

}

.login{

display:grid;

grid-template-columns:1fr 1fr;

height:100vh;

}

.login-left{

background:url('/assets/images/login-bg.jpg') center center/cover;

position:relative;

display:flex;

align-items:flex-start;

justify-content:flex-start;

padding:60px;

}

.login-left::before{

content:"";

position:absolute;

inset:0;

background:rgba(255,255,255,.55);

backdrop-filter:blur(2px);

}

.brand{

position:relative;

z-index:2;

max-width:380px;

}

.logo{

width:90px;

margin-bottom:15px;

}

.brand h1{

font-size:46px;

font-weight:800;

color:#4f46e5;

margin-bottom:8px;

}

.brand p{

font-size:18px;

color:#475569;

}

.login-right{

display:flex;

justify-content:center;

align-items:center;

padding:50px;

background:#f8fafc;

}

.card{

width:100%;

max-width:560px;

background:white;

padding:50px;

border-radius:24px;

box-shadow:0 20px 60px rgba(15,23,42,.08);

}

.card h2{

font-size:42px;

margin-bottom:10px;

color:#1e293b;

}

.subtitle{

display:block;

margin-bottom:40px;

color:#64748b;

font-size:17px;

}

label{

display:block;

font-weight:600;

margin-bottom:10px;

margin-top:18px;

}

.input{

display:flex;

align-items:center;

border:1px solid #dbe4ee;

border-radius:14px;

padding:15px 18px;

margin-bottom:15px;

transition:.2s;

}

.input:focus-within{

border-color:#6d4aff;

box-shadow:0 0 0 4px rgba(109,74,255,.12);

}

.input i{

font-size:22px;

margin-right:12px;

color:#94a3b8;

}

.input input{

border:none;

outline:none;

width:100%;

font-size:17px;

background:transparent;

}

.login-btn{

width:100%;

margin-top:20px;

padding:17px;

border:none;

border-radius:14px;

background:#6d4aff;

color:white;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.25s;

}

.login-btn:hover{

background:#5a35f3;

transform:translateY(-2px);

}

.error{

background:#fee2e2;

color:#991b1b;

padding:16px;

border-radius:12px;

margin-bottom:25px;

}

@media(max-width:900px){

.login{

grid-template-columns:1fr;

}

.login-left{

display:none;

}

.card{

padding:35px;

}

.card h2{

font-size:34px;

}

}