html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background: linear-gradient(180deg, #f6f8fb 0%, #eef3fa 100%);
}

/* Color tokens */
:root{
  --bg-1: #f6f8fb;
  --card: #ffffff;
  --muted: #6b7280;
  --primary-500: #2563eb; /* blue-600 */
  --primary-600: #1e40af; /* blue-800 */
  --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
}

.form-signin {
  width: 100%;
  max-width: 420px;
  padding: 0;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Modern auth card */
.auth-card {
  background: var(--card);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(18, 38, 63, 0.08);
  border: 1px solid rgba(16, 24, 40, 0.04);
}
.brand {
  display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:10px
}
.brand h2 { margin:0; font-weight:700; font-size:1.25rem }
.brand h2 { line-height:1; }
.auth-sub { color:var(--muted); font-size:0.95rem; text-align:center; margin-bottom:18px }
.form-control { border-radius: 10px; padding:12px 14px; border:1px solid #e6eefc }
.form-control:focus { box-shadow: 0 10px 30px rgba(37,99,235,0.12); border-color:var(--primary-500) }
.btn-primary { border-radius:10px; padding:10px 14px; font-weight:700; background:var(--accent-gradient); border:none; box-shadow:0 8px 24px rgba(79,70,229,0.14); }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(0.98) }
.auth-footer { text-align:center; margin-top:14px; color:var(--muted) }
.auth-links a { text-decoration:none; color:var(--primary-600) }

/* subtle decorative header bar */
.auth-decor { height:6px; border-radius:6px; background: linear-gradient(90deg, rgba(99,102,241,0.95), rgba(6,182,212,0.95)); margin-bottom:16px }

/* forgot link */
.forgot { text-align:right; margin-top:6px }
.forgot a { color:var(--primary-600); font-size:0.95rem }

@media (max-width: 480px) {
  .auth-card { padding:18px; }
  .form-signin { max-width: 360px }
}