/* Sign-in pages, matched to SEO-PRO's login: black page, faint grid, soft blue glow, translucent card. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e5e5e5;
  min-height: 100vh;
  background-color: #000;
  background-image:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,123,255,0.12), transparent 70%),
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 16px; }
.auth-card {
  width: 100%; max-width: 420px; padding: 48px 40px; border-radius: 16px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-brand h1 { color: #fff; font-size: 30px; font-weight: 700; letter-spacing: -0.5px; margin: 0; }
.auth-brand p { color: #6b7280; margin: 12px 0 0; }
.f { margin-bottom: 20px; }
.f.tight { margin-bottom: 12px; }
label { display: block; color: #9ca3af; font-size: 14px; margin-bottom: 8px; font-weight: 500; }
.hint { color: #6b7280; font-weight: 400; font-size: 12px; margin-left: 4px; }
input {
  width: 100%; padding: 14px 16px; font: inherit; color: #fff; outline: none;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}
input:focus { border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,0.15); }
input.code { letter-spacing: 8px; font-size: 22px; text-align: center; }
.right { text-align: right; margin-bottom: 24px; }
a, .linkbtn { color: #007bff; text-decoration: none; }
a:hover, .linkbtn:hover { text-decoration: underline; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.btn-primary {
  width: 100%; padding: 14px 16px; font: inherit; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer;
  background: linear-gradient(to right, #007bff, #0069d9); border: 0; border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0,123,255,0.2);
}
.btn-primary:hover { filter: brightness(1.08); }
.auth-alt { text-align: center; color: #6b7280; font-size: 14px; margin: 24px 0 0; }
.auth-text { color: #b0b0b0; margin: 0 0 20px; }
.auth-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 10px; padding: 14px; margin-bottom: 24px; color: #f87171; font-size: 14px; }
.auth-notice { background: rgba(40,167,69,0.1); border: 1px solid rgba(40,167,69,0.35); border-radius: 10px; padding: 14px; margin-bottom: 24px; color: #6ee7a0; font-size: 14px; }
@media (max-width: 480px) { .auth-card { padding: 36px 24px; } }
.small-print { font-size: 12px; }