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

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.5 !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;
  color: #f4f4f5 !important;
}

.login-container {
  background: rgba(14, 14, 18, 0.94) !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(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  animation: dxLoginIn 0.5s ease both;
  transform: translateZ(0);
  backface-visibility: hidden;
}

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

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

.logo h1,
.login-container h1,
.login-title {
  font-family: 'Sora', 'Outfit', sans-serif !important;
  color: #fff !important;
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  text-rendering: geometricPrecision;
}

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

.sistema-login,
.login-kicker,
.login-subtitle {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.55) !important;
}

.form-group label {
  color: rgba(244, 244, 245, 0.7) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.02em;
}

.form-group input,
.login-container input[type="text"],
.login-container input[type="password"] {
  background: #0a0a0c !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-font-smoothing: antialiased;
}

.form-group input::placeholder,
.login-container input::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
  font-weight: 400 !important;
  opacity: 1;
}

.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-family: 'Sora', 'Outfit', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 10px 28px rgba(220, 20, 60, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-font-smoothing: antialiased;
}

.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;
}

.fa, .fas, .far, .fab {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}