/* ==========================================================================
   login.css — Login page for bm1.research.my
   ========================================================================== */

.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; width: 100%; background-color: var(--bg-black);
  position: relative; overflow: hidden;
}

.login-page::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 600px 400px at 50% 40%, rgba(29, 158, 117, 0.06) 0%, transparent 70%),
    linear-gradient(rgba(34, 34, 34, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 34, 34, 0.3) 1px, transparent 1px);
  background-size: 100% 100%, 60px 60px, 60px 60px;
  pointer-events: none; z-index: 0;
}

.login-card {
  position: relative; z-index: 1; width: 420px; max-width: calc(100% - 32px);
  background-color: var(--bg-card); border: 1px solid var(--border);
  padding: 48px; display: flex; flex-direction: column; gap: 32px;
  border-radius: 8px;
}

.login-brand { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.login-brand__tagline { font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); }

.login-subtitle { font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); text-align: center; }

.login-form { display: flex; flex-direction: column; gap: 20px; }
.login-form .form-group { display: flex; flex-direction: column; gap: 8px; }
.login-form .form-group label { font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.login-form .form-group input { width: 100%; background-color: var(--bg-elevated); border: 1px solid var(--border); padding: 12px 16px; font-family: var(--font-body); font-size: 13px; color: var(--text-white); transition: border-color var(--transition-fast); border-radius: 4px; }
.login-form .form-group input::placeholder { color: var(--text-dim); }
.login-form .form-group input:focus { border-color: var(--accent-teal); outline: none; }

.login-error { font-family: var(--font-mono); font-size: 12px; color: var(--color-error); text-align: center; padding: 10px; background: rgba(255, 102, 102, 0.08); border: 1px solid rgba(255, 102, 102, 0.2); border-radius: 4px; }

.login-footer { text-align: center; }
.login-footer p { font-size: 12px; color: var(--text-dim); }

.forgot-link { color: var(--accent-teal); font-size: 11px; text-decoration: none; font-family: var(--font-body); }

@media (max-width: 768px) {
  .login-card { padding: 32px 24px; gap: 24px; }
}