/* Page background for auth pages: subtle gradient, not pitch black */
.page-register main,
.page-login main {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(88,166,255,0.10), transparent 60%),
    radial-gradient(1000px 500px at 110% -20%, rgba(16,185,129,0.10), transparent 60%),
    var(--surface);
}

/* Centered auth card with lighter surface + clear border */
.auth-card, .card-auth {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  color: var(--foreground);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Headings & helper text contrast */
.auth-card h1, .auth-card h2 {
  color: var(--foreground);
}
.auth-card .muted, .auth-card .helper {
  color: var(--muted);
}

/* Inputs readable on dark */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  background: var(--input-bg);
  color: var(--foreground);
  border: 1px solid var(--input-border);
  border-radius: 10px;
}
.auth-card input::placeholder {
  color: var(--input-placeholder);
}

/* Focus ring for accessibility */
.auth-card input:focus,
.auth-card button:focus,
.auth-card a:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Primary button stands out */
.auth-card .btn-primary {
  background: var(--primary);
  color: #0b1220;
  border: 1px solid var(--primary);
  border-radius: 10px;
}

/* Space below sticky navbar so card isn't under it */
.page-register main,
.page-login main {
  margin-top: var(--nav-height, 64px);
}