:root{
    color-scheme:light;
    --bg:#f4f7f8;
    --card:#ffffff;
    --ink:#17212b;
    --muted:#667085;
    --line:#d0d5dd;
    --primary:#1f2937;
    --danger:#b42318;
    --danger-bg:#fef3f2;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink)}
button,input{font:inherit}
.login-page{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
}
.login-card{
    width:min(430px,100%);
    background:var(--card);
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:28px;
    box-shadow:0 18px 50px rgba(15,23,42,.07);
}
.brand-mark{
    width:48px;height:48px;
    border-radius:12px;
    display:grid;place-items:center;
    background:var(--primary);
    color:#fff;
    font-weight:900;
    letter-spacing:.04em;
    margin-bottom:18px;
}
.eyebrow{
    margin:0 0 7px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
}
h1{font-size:25px;margin:0 0 8px}
.subtext{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 22px}
.field{display:grid;gap:7px;margin-bottom:15px}
.field label{font-size:12px;font-weight:800;color:#475467}
.field input{
    width:100%;
    min-height:46px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    outline:none;
    background:#fff;
    color:var(--ink);
}
.field input:focus{
    border-color:#667085;
    box-shadow:0 0 0 4px #f2f4f7;
}
.password-wrap{position:relative}
.password-wrap input{padding-right:66px}
.toggle-password{
    position:absolute;
    right:7px;top:50%;
    transform:translateY(-50%);
    border:0;
    background:transparent;
    color:#475467;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    padding:7px 8px;
}
.submit-btn{
    width:100%;
    min-height:46px;
    border:0;
    border-radius:10px;
    background:var(--primary);
    color:#fff;
    font-weight:800;
    cursor:pointer;
}
.submit-btn:hover{filter:brightness(.96)}
.alert{
    background:var(--danger-bg);
    color:var(--danger);
    border:1px solid #fecdca;
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:15px;
    font-size:13px;
}
.security-note{
    text-align:center;
    color:#98a2b3;
    font-size:11px;
    margin:16px 0 0;
}
@media(max-width:480px){
    .login-page{padding:14px}
    .login-card{padding:20px;border-radius:14px}
}