:root { --navy:#123047; --blue:#176b91; --blue-dark:#105775; --ink:#17252f; --muted:#667784; --line:#dce5ea; --surface:#fff; }
* { box-sizing:border-box; margin:0; padding:0; }
body.login-container {
    min-height:100vh; display:grid; place-items:center; padding:24px;
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink); background:
        radial-gradient(circle at 15% 10%,rgba(51,143,179,.18),transparent 34%),
        radial-gradient(circle at 85% 90%,rgba(18,48,71,.14),transparent 34%),#eef4f6;
}
.login-card { width:min(100%,440px); padding:34px; background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.8); border-radius:22px; box-shadow:0 24px 70px rgba(18,48,71,.16); }
.login-brand { display:grid; justify-items:center; gap:8px; margin-bottom:30px; }
.login-brand img { display:block; width:min(100%,300px); height:auto; }
.login-brand small { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.login-heading { margin-bottom:26px; }
.login-heading h1 { margin:0 0 7px; color:var(--navy); text-align:left; font-size:1.75rem; line-height:1.2; letter-spacing:-.03em; }
.login-heading p,.role-intro { color:var(--muted); line-height:1.55; font-size:.94rem; }
form label { display:block; margin:0 0 7px; color:#3d515e; font-size:.86rem; font-weight:700; }
input[type="email"],input[type="text"],input[type="password"] { width:100%; min-height:50px; margin-bottom:16px; padding:0 14px; color:var(--ink); background:#f9fbfc; border:1px solid var(--line); border-radius:11px; font:inherit; transition:.2s; }
input:focus { outline:0; background:#fff; border-color:var(--blue); box-shadow:0 0 0 4px rgba(23,107,145,.12); }
button { width:100%; min-height:50px; padding:11px 16px; color:#fff; background:var(--blue); border:0; border-radius:11px; font:inherit; font-weight:750; cursor:pointer; box-shadow:0 8px 18px rgba(23,107,145,.18); transition:transform .18s,background .18s,box-shadow .18s; }
button:hover { background:var(--blue-dark); transform:translateY(-1px); box-shadow:0 12px 24px rgba(23,107,145,.23); }
button:disabled { opacity:.6; cursor:wait; transform:none; }
.error-message { margin-bottom:18px; padding:12px 14px; color:#8b2828; background:#fff2f1; border:1px solid #f1cecb; border-radius:10px; font-size:.88rem; }
.info-message { margin-top:18px; color:var(--muted); text-align:center; font-size:.88rem; }
.role-intro { margin-bottom:16px; }
.role-options { display:grid; gap:10px; }
.role-button { display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:12px; min-height:70px; color:var(--navy); text-align:left; background:#fff; border:1px solid var(--line); box-shadow:none; }
.role-button:hover { color:var(--navy); background:#f5f9fb; }
.role-button.admin-choice { color:#fff; background:var(--navy); border-color:var(--navy); }
.role-button.admin-choice:hover { color:#fff; background:#0c2639; }
.role-icon { grid-row:1/3; font-size:1.35rem; }
.role-button strong,.role-button small { display:block; }
.role-button small { margin-top:2px; opacity:.72; font-weight:400; }
@media(max-width:520px){ body.login-container{padding:14px}.login-card{padding:26px 22px;border-radius:18px}.login-heading h1{font-size:1.55rem} }