* { box-sizing: border-box; }

body { margin: 0; color: var(--color-ink); font-family: var(--font-body); }

.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    linear-gradient(rgb(255 255 255 / 78%), rgb(241 243 242 / 92%)),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--color-grid) 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--color-grid) 40px);
}

.login-shell { width: min(100%, 420px); }
.login-card { padding: var(--space-8); border: 1px solid var(--color-grid); border-radius: var(--radius-5); background: var(--color-surface); box-shadow: var(--shadow-shell); }
.login-mark { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: var(--space-6); border-radius: var(--radius-3); color: white; background: var(--color-match); font: 700 14px var(--font-mono); }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-match); font: 700 12px var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
h1 { margin: 0; font: 700 32px/1.15 var(--font-display); }
.login-copy { margin: var(--space-3) 0 var(--space-7); color: var(--color-ink-soft); }
.login-form { display: grid; gap: var(--space-3); }
.login-form label { margin-top: var(--space-2); font-weight: 600; }
.login-form input { min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-grid); border-radius: var(--radius-2); font: inherit; }
.login-form input:focus { outline: 3px solid rgb(14 124 123 / 18%); border-color: var(--color-focus); }
.login-error { margin: var(--space-2) 0 0; color: var(--color-diverge); }
.login-submit { min-height: 44px; margin-top: var(--space-3); border: 0; border-radius: var(--radius-2); color: white; background: var(--color-match); font: 600 15px var(--font-body); cursor: pointer; }
.login-submit:disabled { opacity: .65; cursor: wait; }

@media (max-width: 520px) { .login-card { padding: var(--space-6); } }