@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --ink: #172236;
  --muted: #76849a;
  --line: #e1e7ef;
  --navy: #172236;
  --blue: #3469e8;
  font-family: Manrope, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 50% 5%, #e8efff, transparent 40%), #f5f7fa; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 410px); padding: 36px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 20px 70px #17223612; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--navy); font-size: 27px; }
.login-eyebrow { margin: 28px 0 8px; color: #8995a7; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
h1 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.login-description { margin: 8px 0 25px; color: var(--muted); font-size: 12px; }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 5px; font-size: 11px; font-weight: 700; }
.login-form input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: white; font: inherit; outline: none; }
.login-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #3469e81c; }
.login-form button { min-height: 42px; margin-top: 11px; border: 0; border-radius: 7px; color: white; background: var(--navy); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.login-form button:hover { background: #25344d; }
.login-error { margin: 0 0 15px; padding: 10px 12px; border: 1px solid #f0c1c5; border-radius: 7px; color: #a63440; background: #fff5f5; font-size: 11px; }
.login-footer { margin: 25px 0 0; color: var(--muted); text-align: center; font-size: 10px; }

@media (max-width: 480px) {
  .login-card { padding: 27px 22px; }
}