@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
* { font-family: 'Inter', sans-serif; }

/* ── Floating Label Input ── */
.field-wrap { position: relative; }
.field-wrap input {
  width: 100%;
  padding: 22px 44px 8px 44px;
  font-size: 15px;
  color: #111827;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 12px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
}
.field-wrap input:focus {
  border-color: #0176D3;
  box-shadow: 0 0 0 4px rgba(1,118,211,.10);
  background: #fff;
}
.field-wrap input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.08);
}
.field-wrap input:focus + label,
.field-wrap input:not(:placeholder-shown) + label {
  top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #0176D3;
  letter-spacing: .04em;
}
.field-wrap input.error:focus + label,
.field-wrap input.error:not(:placeholder-shown) + label { color: #ef4444; }
.field-wrap label {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #9ca3af;
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease, color .18s ease;
}
.field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  transition: color .2s;
  pointer-events: none;
}
.field-wrap:focus-within .field-icon { color: #0176D3; }
.field-wrap input.error ~ .field-icon { color: #ef4444; }
.field-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 4px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.field-toggle:hover { color: #374151; background: #f3f4f6; }

/* ── Submit Button ── */
.btn-signin {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #0176D3 0%, #014486 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 4px 14px rgba(1,118,211,.35);
}
.btn-signin:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(1,118,211,.45); }
.btn-signin:active { transform: translateY(0);    box-shadow: 0 2px 8px  rgba(1,118,211,.30); }
.btn-signin:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ── Error Alert ── */
.error-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-size: 13px;
  color: #b91c1c;
}

/* ── Left panel gradient ── */
.left-panel { background: linear-gradient(160deg, #032D60 0%, #014486 50%, #0176D3 100%); }

/* ── Dot pattern overlay ── */
.dot-pattern {
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Stagger delays ── */
.delay-1 { animation-delay: .05s }
.delay-2 { animation-delay: .12s }
.delay-3 { animation-delay: .19s }
.delay-4 { animation-delay: .26s }
.delay-5 { animation-delay: .33s }

/* ── Loading spinner ── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }