/* ===== PURE CSS Background Login Page by Manus ===== */

/* --- 1. Create a background similar to your image using only CSS --- */
body {
    background-color: #0c0a1a !important; /* Very dark space blue */
    background-image: 
        radial-gradient(at 50% 100%, hsla(240, 60%, 30%, 0.5) 0px, transparent 50%),
        radial-gradient(at 50% 95%, hsla(225, 70%, 50%, 0.4) 0px, transparent 50%),
        radial-gradient(at 50% 90%, hsla(210, 80%, 60%, 0.2) 0px, transparent 50%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    position: relative !important;
}

/* --- Center the login form --- */
#auth {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: 2 !important;
}

/* --- 3. Add a stylish box (card) around the form --- */
#auth .card {
    background: rgba(30, 30, 30, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) !important;
    padding: 2rem !important;
}

/* --- 2. Force ALL text elements to be PURE WHITE --- */
/* This targets the main title and all other text */
#auth #auth-left > h1,
#auth h1, 
#auth .auth-title, 
#auth p, 
#auth a, 
#auth label, 
#auth .form-check-label {
    color: #FFFFFF !important;
}

/* --- Input fields styling to match the box --- */
#auth .form-control {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
    border: 1px solid #555 !important;
    border-radius: 10px !important;
}