:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ink:#101828; --muted:#667085; --line:#d8e0ee; --blue:#2458ff; --blue-dark:#1745db; --paper:#fff; --danger:#c6283d; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 15% 15%, #e8efff 0, transparent 34%), radial-gradient(circle at 85% 80%, #eef8f6 0, transparent 31%), #f5f7fb; }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:28px; }
.login-card { width:min(100%, 460px); padding:30px; background:var(--paper); border:1px solid var(--line); border-radius:24px; box-shadow:0 24px 70px rgba(36,55,94,.14); }
.brand { display:flex; align-items:center; gap:12px; padding-bottom:22px; border-bottom:1px solid #edf0f6; }
.brand img { width:52px; height:52px; object-fit:contain; }
.brand strong,.brand span { display:block; }
.brand strong { font-size:18px; }
.brand span { margin-top:3px; color:var(--muted); font-size:12px; }
.heading { display:flex; gap:13px; margin:26px 0 22px; }
.shield { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:#e8f8f1; color:#078255; font-weight:800; }
h1 { margin:0; font-size:25px; line-height:1.2; }
.heading p { margin:7px 0 0; color:var(--muted); font-size:14px; line-height:1.5; }
form { display:grid; gap:16px; }
label span { display:block; margin:0 0 7px; font-size:13px; font-weight:700; }
input { width:100%; min-height:46px; padding:0 13px; border:1px solid var(--line); border-radius:12px; background:#fbfcff; color:var(--ink); font:inherit; outline:none; }
input:focus { border-color:#7d9cff; box-shadow:0 0 0 3px rgba(36,88,255,.12); background:#fff; }
button { min-height:48px; border:0; border-radius:12px; background:var(--blue); color:#fff; font:700 14px inherit; cursor:pointer; box-shadow:0 9px 22px rgba(36,88,255,.22); }
button:hover { background:var(--blue-dark); }
button:disabled { opacity:.58; cursor:wait; }
.message { display:none; padding:11px 12px; border-radius:10px; background:#fff0f2; color:var(--danger); font-size:13px; line-height:1.45; }
.message.visible { display:block; }
.security-note { margin:22px 0 0; padding-top:18px; border-top:1px solid #edf0f6; color:var(--muted); font-size:12px; line-height:1.5; }
@media (max-width:520px) { .login-shell { padding:14px; } .login-card { padding:22px; border-radius:18px; } }