/* Dream Xiter — Login (Dark Red) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

body {
  font-family: 'Outfit', system-ui, sans-serif !important;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(220, 20, 60, 0.22), transparent 55%),
    radial-gradient(700px 400px at 90% 80%, rgba(220, 20, 60, 0.1), transparent 50%),
    linear-gradient(160deg, #060607 0%, #0c0c0f 50%, #050506 100%) !important;
}

.login-container {
  background: rgba(14, 14, 18, 0.92) !important;
  border: 1px solid rgba(220, 20, 60, 0.28) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(220, 20, 60, 0.08) !important;
  backdrop-filter: blur(22px) !important;
  animation: dxLoginIn 0.5s ease both;
}

@keyframes dxLoginIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.login-container::before {
  background: linear-gradient(90deg, transparent, rgba(220, 20, 60, 0.12), transparent) !important;
}

.logo h1 {
  font-family: 'Sora', 'Outfit', sans-serif !important;
  color: #fff !important;
  letter-spacing: -0.04em !important;
  text-shadow: 0 0 40px rgba(220, 20, 60, 0.35) !important;
}

.logo h1 span,
.logo .brand-accent {
  color: #dc143c !important;
}

.form-group label {
  color: rgba(244, 244, 245, 0.65) !important;
  font-weight: 500 !important;
}

.form-group input,
.login-container input[type="text"],
.login-container input[type="password"] {
  background: #0a0a0c !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  color: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-group input:focus,
.login-container input:focus {
  border-color: #dc143c !important;
  box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.2) !important;
  outline: none !important;
}

.login-btn,
button[type="submit"].login-btn,
.btn-entrar {
  background: linear-gradient(135deg, #e11d48, #9b0f2a) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 10px 28px rgba(220, 20, 60, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.login-btn:hover,
button[type="submit"].login-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 36px rgba(220, 20, 60, 0.45) !important;
}