:root{

--primary:#e11d48;

--secondary:#18181b;

--background:#09090b;

--surface:#1f1f23;

--border:#303036;

--text:#ffffff;

--muted:#9ca3af;

--radius:18px;

--shadow:0 20px 60px rgba(0,0,0,.35);

--transition:.25s;

font-family:'Poppins',sans-serif;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

background:var(--background);

color:var(--text);

font-family:inherit;

}

button{

cursor:pointer;

border:none;

font-family:inherit;

transition:var(--transition);

}

.login-wrapper{

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

.login-card{

width:420px;

background:var(--surface);

padding:45px;

border-radius:24px;

box-shadow:var(--shadow);

text-align:center;

border:1px solid var(--border);

}

.brand-logo{

width:80px;

height:80px;

margin:auto;

border-radius:20px;

background:var(--primary);

display:flex;

justify-content:center;

align-items:center;

font-size:40px;

margin-bottom:20px;

}

.brand h1{

font-size:38px;

margin-bottom:10px;

}

.brand p{

color:var(--muted);

margin-bottom:40px;

line-height:1.6;

}

.btn-primary{

width:100%;

height:56px;

background:white;

color:black;

border-radius:14px;

display:flex;

justify-content:center;

align-items:center;

gap:12px;

font-size:15px;

font-weight:600;

}

.btn-primary img{

width:24px;

}

.btn-secondary{

width:100%;

height:52px;

margin-top:15px;

background:#303036;

color:white;

border-radius:14px;

}

.version{

margin-top:30px;

color:var(--muted);

font-size:13px;

}