/* Tela de login. Mobile-first (375–440px); as cores vêm das variáveis de style.css. */
.login-body { display:flex; align-items:center; justify-content:center; padding:16px; }
.login-card {
    width:100%; max-width:400px; background:var(--bg-card); border:1px solid var(--border);
    border-radius:10px; padding:24px 20px;
}
.login-brand { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.login-logo {
    width:40px; height:40px; border-radius:9px; display:grid; place-items:center; flex:none;
    background:var(--accent-soft); color:var(--accent); font-weight:600; font-size:14px; letter-spacing:.02em;
}
.login-title { font-size:17px; font-weight:600; letter-spacing:-.01em; margin-bottom:4px; }
.login-error {
    background:var(--bad-soft); color:var(--bad); border:1px solid var(--bad); border-radius:6px;
    padding:8px 10px; font-size:12.5px; margin-bottom:14px;
}
.login-form { display:flex; flex-direction:column; gap:12px; }
.login-field { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--text-dim); }
.login-field input {
    font:inherit; font-size:16px; color:var(--text); background:var(--bg-elevated);
    border:1px solid var(--border-strong); border-radius:7px; padding:10px 12px; width:100%;
}
.login-field input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.login-remember { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-dim); cursor:pointer; }
.login-remember input { accent-color:var(--accent); width:16px; height:16px; }
.login-submit { min-height:48px;
    margin-top:4px; width:100%; padding:11px; font-size:14px; font-weight:600; cursor:pointer;
    background:var(--accent); border:1px solid var(--accent); color:#fff; border-radius:7px;
}
.login-submit:hover { filter:brightness(1.08); }
@media (min-width: 600px) { .login-card { padding:30px 28px; } }