:root { font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:#1e2a24; background:#f4f6f5; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:1.25rem; background:linear-gradient(145deg,#edf4f0,#f8faf9); }
.login-shell { width:min(27rem,100%); }
.login-brand { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:1.25rem; }
.login-brand img { width:52px; height:52px; }
.login-brand h1 { margin:0; font-size:1.65rem; }
.login-brand p { margin:.2rem 0 0; color:#66736b; font-size:.85rem; }
.login-card { background:#fff; border:1px solid #dfe7e2; border-radius:14px; padding:1.5rem; box-shadow:0 18px 45px rgba(30,68,53,.1); }
.login-card h2 { margin:0 0 .35rem; }
.login-card > p { margin:.25rem 0 1.25rem; color:#66736b; }
.login-form { display:grid; gap:.85rem; }
.login-form label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.login-form input { width:100%; min-height:2.75rem; border:1px solid #cbd8d0; border-radius:8px; padding:.7rem .8rem; font:inherit; background:#fff; }
.login-form input:focus { outline:2px solid #7eab93; outline-offset:1px; border-color:#2f6b4f; }
.login-form button { min-height:2.75rem; border:0; border-radius:8px; padding:.7rem 1rem; font:inherit; font-weight:600; color:#fff; background:#2f6b4f; cursor:pointer; }
.login-form button:hover { background:#24553f; }
.login-message { border-radius:8px; padding:.75rem .85rem; margin:0 0 1rem; font-size:.9rem; }
.login-error { color:#8b1e1e; background:#fff0f0; border:1px solid #f1b8b8; }
.login-hint { color:#405047; background:#eef5f1; border:1px solid #d1e1d8; }