:root {
  --auth-blue: #0f4c81;
  --auth-blue-dark: #17324d;
  --auth-cyan: #1aa6b7;
  --auth-ink: #1f2933;
  --auth-muted: #667085;
  --auth-border: #d9e2ec;
}

.login-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(26, 166, 183, 0.18), transparent 30%),
    linear-gradient(135deg, #f3f6f9 0%, #e7eef5 100%);
  color: var(--auth-ink);
}

.login-box,
.register-box {
  max-width: 430px;
}

.login-box .card,
.register-box .card {
  border: 1px solid var(--auth-border);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(31, 41, 51, 0.16);
  overflow: hidden;
}

.login-logo a,
.register-logo a,
.card-header .h1 {
  color: var(--auth-blue-dark);
  font-weight: 800;
  letter-spacing: 0;
}

.login-card-body,
.register-card-body,
.card-body.login-card-body {
  padding: 28px;
}

.login-box-msg {
  color: var(--auth-muted);
  padding: 0 0 18px;
}

.input-group .form-control {
  border-color: var(--auth-border);
  min-height: 42px;
}

.input-group .form-control:focus {
  border-color: var(--auth-cyan);
  box-shadow: 0 0 0 0.12rem rgba(26, 166, 183, 0.22);
}

.input-group-text {
  background: #f8fafc;
  border-color: var(--auth-border);
  color: var(--auth-blue);
}

.btn-primary,
.btn-flat.btn-primary {
  background: var(--auth-blue);
  border-color: var(--auth-blue);
  border-radius: 6px;
  font-weight: 700;
}

.btn-primary:hover,
.btn-flat.btn-primary:hover {
  background: #0b3f6d;
  border-color: #0b3f6d;
}

.icheck-primary > input:first-child:checked + label::before {
  background-color: var(--auth-blue);
  border-color: var(--auth-blue);
}

.auth-footer,
.login-card-body a {
  color: var(--auth-blue);
  font-weight: 600;
}