/* Login screen — blue + white, single centered card */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(1200px 500px at 50% -10%, var(--blue-tint), transparent 70%),
    var(--bg);
  padding: 24px;
}
.login-card {
  width: min(440px, 94vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 36px;
}
.login-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}


.auth-form h1 { margin: 0 0 4px; font-size: 25px; font-weight: 650; letter-spacing: -.02em; }
.auth-sub { margin: 0 0 22px; color: var(--ink-faint); font-size: 13px; }

.login-row { margin-bottom: 18px; font-size: 13px; }
.remember { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.terms { margin-bottom: 18px; }
.link { color: var(--blue); }
.link:hover { color: var(--blue-dark); text-decoration: underline; }

/* Sign-in error banner (shown by login.js on a failed attempt) */
.login-error {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid #f3c2c2;
  background: #fdecec;
  color: #b42318;
  border-radius: var(--radius);
  font-size: 13px;
}

/* Success banner (e.g. password changed) */
.login-ok {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--blue-soft);
  background: var(--blue-tint);
  color: var(--blue-dark);
  border-radius: var(--radius);
  font-size: 13px;
}