/* =====================================================================
   Ez Compliance — Auth pages (login / register) "Cinematic Dark"
   Bridges the dark landing and the light app. Loaded LAST to win.
   ===================================================================== */

:root {
  --av-grad: linear-gradient(120deg, #8b5cf6, #6366f1 45%, #22d3ee);
  --av-line: rgba(255,255,255,.10);
  --av-muted: #9aa3b5;
}

body, body.login-page {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: #e5e7f0 !important;
  background: #05060c !important;
  background-image:
    radial-gradient(38rem 38rem at 10% -8%, rgba(139,92,246,.35), transparent 60%),
    radial-gradient(36rem 36rem at 96% 6%, rgba(34,211,238,.28), transparent 55%),
    radial-gradient(34rem 34rem at 50% 115%, rgba(99,102,241,.30), transparent 60%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

h1, h2, h3, .navbar-brand { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -.02em; }

/* Glass dark navbar + gradient brand */
.navbar, .navbar.bg-dark, .navbar-dark.bg-dark {
  background: rgba(8,10,18,.6) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--av-line) !important;
}
.navbar-brand {
  background: var(--av-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important; font-weight: 700;
}
.navbar .nav-link { color: var(--av-muted) !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff !important; }

/* Glass card containers (login + register) */
.login-container, .login-box, .demo-card, .card, .auth-card {
  background: rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--av-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 60px -30px rgba(99,102,241,.55) !important;
  color: #e5e7f0 !important;
}
.login-box h2, .demo-header h1, .card h1, .card h2 { color: #fff !important; }
.demo-header, .card-header { background: transparent !important; border-color: var(--av-line) !important; }
label, .form-label, .form-text, p, small { color: var(--av-muted) !important; }

/* Inputs */
.form-control, .form-select {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--av-line) !important;
  color: #fff !important; border-radius: 12px !important;
}
.form-control::placeholder { color: #6b7280 !important; }
.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,.08) !important; border-color: #8b5cf6 !important;
  box-shadow: 0 0 0 4px rgba(139,92,246,.22) !important; color: #fff !important;
}

/* Buttons */
.btn { border-radius: 999px !important; font-weight: 600; }
.btn-primary, .btn-block, .btn-success {
  background: var(--av-grad) !important; border: none !important; color: #06070d !important;
  box-shadow: 0 12px 30px -10px rgba(99,102,241,.7);
}
.btn-primary:hover, .btn-block:hover { filter: brightness(1.06); transform: translateY(-1px); color: #06070d !important; }
.btn-outline-primary, .btn-outline-secondary { color: #fff !important; border: 1px solid var(--av-line) !important; background: rgba(255,255,255,.05) !important; }

a { color: #a5b4fc; }
a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }