:root{
--bg1:#2c3e50;
--bg2:#4ca1af;
--card:#ffffff;
--text:#222;
--border:#ddd;
--button:#3498db;
--button-hover:#2980b9;
--error:#e74c3c;
}

@media (prefers-color-scheme: dark){

:root{
--card:#1e1e1e;
--text:#f2f2f2;
--border:#444;
--button:#4da3ff;
--button-hover:#3b8bd9;
}

body{
background:linear-gradient(135deg,#111,#333);
}

}

* {
    box-sizing: border-box;
}

body {
    font-family:system-ui,-apple-system,Segoe UI,Roboto;
    background:linear-gradient(135deg,var(--bg1),var(--bg2));
    height:100vh;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.login-container {
    background:var(--card);
    padding:40px;
    width:370px;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,0.3);
    text-align:center;
}

.logo{

width:150px;
margin-bottom:10px;

}

h1{

margin:10px 0 25px 0;
font-size:22px;
color:var(--text);

}

.input-group{

margin-bottom:18px;
text-align:left;

}

.input-group label{

font-size:14px;
margin-bottom:4px;
display:block;
color:var(--text);

}

.input-group input{

width:100%;
padding:10px;

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

font-size:14px;

background:transparent;
color:var(--text);

}

.password-wrapper{

position:relative;

}

.toggle-password{

position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);

cursor:pointer;
font-size:14px;

color:#888;

}

.login-button{

width:100%;
padding:12px;

border:none;
border-radius:6px;

background:var(--button);
color:white;

font-size:15px;
cursor:pointer;

margin-top:10px;

}

.login-button:hover{

background:var(--button-hover);

}

.divider{

margin:25px 0;
color:#888;
font-size:13px;

}

.sso-button{

width:100%;
padding:10px;

background:#f3f3f3;
border:1px solid var(--border);

border-radius:6px;
cursor:pointer;

}

.sso-button:hover{

background:#e7e7e7;

}

.reset{

margin-top:18px;
font-size:13px;

}

.reset a{

text-decoration:none;
color:#3498db;

}

.reset a:hover{

text-decoration:underline;

}

.error{

background:#ffe6e6;
border:1px solid var(--error);
color:#a40000;

padding:10px;
margin-bottom:15px;

border-radius:6px;
font-size:13px;

}