* { box-sizing: border-box; }
:root { --blue:#0f2347; --orange:#ff671f; --muted:#657286; --border:#d6dce5; }
body { margin:0; min-height:100vh; display:grid; place-items:center; font-family:"Segoe UI",Arial,sans-serif; background:linear-gradient(135deg,#0f2347,#183a73); color:#1e2a3b; }
.login-container { width:100%; padding:24px; }
.login-card { width:min(440px,100%); margin:auto; padding:40px; border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.32); }
.brand-mark { width:66px; height:66px; margin:0 auto 18px; display:grid; place-items:center; border-radius:16px; background:var(--orange); color:#fff; font-size:26px; font-weight:800; }
.eyebrow { margin:0; text-align:center; color:var(--orange); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:12px; }
h1 { margin:8px 0; text-align:center; color:var(--blue); font-size:28px; }
.subtitle { margin:0 0 28px; text-align:center; color:var(--muted); }
label { display:block; margin:16px 0 7px; font-weight:650; }
input { width:100%; padding:13px 14px; border:1px solid var(--border); border-radius:10px; font-size:16px; }
input:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,103,31,.18); }
button { width:100%; margin-top:22px; padding:14px; border:0; border-radius:10px; background:var(--orange); color:#fff; font-size:16px; font-weight:750; cursor:pointer; }
button:disabled { opacity:.65; cursor:wait; }
#errorMessage { min-height:22px; margin-top:16px; text-align:center; color:#b42318; }
footer { margin-top:24px; padding-top:18px; border-top:1px solid #e7eaf0; text-align:center; color:var(--muted); font-size:12px; }