:root {
  --login-blue-950: #111827;
  --login-blue-850: #1c263a;
  --login-blue-500: #3b82f6;
  --login-surface: #ffffff;
  --login-bg: #f8fafc;
  --login-border: #e5e7eb;
  --login-text: #111827;
  --login-muted: #64748b;
}

body.login-page {
  min-height: 100vh;
  background: var(--login-bg);
  color: var(--login-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.login-shell {
  min-height: calc(100vh - 76px);
  display: grid;
  align-items: center;
  padding: 48px 16px 32px;
}

.login-panel {
  width: min(100%, 420px);
  margin: 0 auto;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.login-brand-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--login-blue-950);
  color: #f8fafc;
  font-weight: 800;
}

.login-brand-name {
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.1;
}

.login-brand-subtitle {
  color: var(--login-muted);
  font-size: .86rem;
}

.login-card {
  border: 1px solid var(--login-border);
  border-radius: 14px;
  background: var(--login-surface);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

.login-card .card-body {
  padding: 30px;
}

.login-title {
  margin-bottom: 4px;
  font-size: 1.35rem;
  font-weight: 760;
}

.login-copy {
  margin-bottom: 24px;
  color: var(--login-muted);
  font-size: .93rem;
}

.login-page .form-label {
  color: #334155;
  font-size: .84rem;
  font-weight: 650;
}

.login-page .form-control {
  min-height: 44px;
  border-color: var(--login-border);
  border-radius: 8px;
}

.login-page .form-control:focus {
  border-color: var(--login-blue-500);
  box-shadow: 0 0 0 .18rem rgba(59, 130, 246, .16);
}

.login-page .btn-primary {
  min-height: 44px;
  border-color: var(--login-blue-950);
  border-radius: 8px;
  background: var(--login-blue-950);
  font-weight: 700;
}

.login-page .btn-primary:hover,
.login-page .btn-primary:focus {
  border-color: var(--login-blue-850);
  background: var(--login-blue-850);
}

.login-footer {
  color: var(--login-muted);
  font-size: .86rem;
}

.login-footer a {
  color: #334155;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-product-name {
  margin-top: 18px;
  color: var(--login-muted);
  text-align: center;
  font-size: .9rem;
}

.login-product-name strong {
  color: var(--login-text);
}