body {
  font-family: "Inter", sans-serif;
  min-height: 100vh;
  background-color: #0f172a;
  background-image:
    radial-gradient(
      ellipse at 20% 50%,
      rgba(26, 115, 232, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 20%,
      rgba(7, 94, 84, 0.2) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 60% 80%,
      rgba(99, 102, 241, 0.15) 0%,
      transparent 50%
    );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin: 0;
}

.login-card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  max-width: 420px;
  width: 100%;
  padding: 40px;
  position: relative;
  z-index: 1;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  padding: 0 12px;
}

.form-control:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
}

.btn-primary {
  width: 100%;
  height: 40px;
  background: #075e54;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}

.btn-primary:hover {
  background: #064a45;
}

.branding {
  text-align: center;
  margin-bottom: 28px;
}

.branding-title {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.branding-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.form-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  text-align: center;
}

.form-header p {
  font-size: 13px;
  color: #6b7280;
  text-align: center;
  margin-bottom: 24px;
}

.form-footer {
  margin-top: 20px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

.form-footer a {
  color: #1a73e8;
  text-decoration: none;
}

.form-footer a:hover {
  text-decoration: underline;
}

.input-error {
  border-color: #e24b4a !important;
  box-shadow: 0 0 0 3px rgba(226, 75, 74, 0.1) !important;
}

.field-error-msg {
  font-size: 12px;
  color: #e24b4a;
  margin-top: 4px;
  display: none;
  align-items: center;
  gap: 4px;
}

.field-error-msg.show {
  display: flex;
}

.field-wrapper {
  margin-bottom: 16px;
}

@keyframes float1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, 20px) scale(1.05);
  }
}

@keyframes float2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-20px, -30px) scale(1.08);
  }
}

@keyframes float3 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(15px, 25px) scale(0.95);
  }
}