/* --- Secure System Login Page --- */


#login-screen {
    /* Different background and font from the main site */
    background-color: #0a0a0a; /* A near-black background */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: fixed;
    z-index: 1000;
    inset: 0;
}

.login-card {
    background-color: #1c1c1c; /* Dark grey card */
    border: 1px solid #333;
    border-radius: 8px;
    padding: 32px;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 0 40px rgba(0, 255, 65, 0.1); /* Subtle green glow */
}

.login-title {
    font-family: inherit; /* System font */
    color: #f5f5f5; /* Off-white */
    font-size: 1.8em;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.login-subtitle {
    color: #888;
    margin-bottom: 24px;
    font-size: 0.9em;
    text-align: center;
}

#login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    text-align: left;
}

.form-group label {
    display: block;
    font-size: 0.75em;
    font-weight: 700;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 1px; /* Add some letter spacing for a techy feel */
    text-transform: uppercase;
}

/* This is where the "terminal vibe" comes in */
.form-group input {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-family: 'Fira Code', 'Source Code Pro', monospace; /* Monospace font for inputs */
    color: #00FF41; /* Terminal green text */
    background-color: #000; /* Pure black input background */
    border: 1px solid #333;
    border-radius: 4px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
}
.form-group input[readonly] {
    color: #888;
    cursor: not-allowed;
}

.form-group input::placeholder {
    color: #00FF41;
    opacity: 0.5;
}

.form-group input:focus {
    border-color: #00FF41; /* Green focus border */
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); /* Green focus glow */
}

.login-button {
    margin-top: 8px;
    padding: 14px;
    font-size: 1.1em;
    font-weight: 700;
    font-family: 'Fira Code', 'Source Code Pro', monospace;
    letter-spacing: 1px;
    color: #f5f5f5;
    background-color: #333; /* Dark grey button */
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.login-button:hover {
    background-color: #00FF41; /* Green on hover */
    color: #000; /* Black text on hover */
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.5);
}

#error-message {
    color: #ff4d4d; /* Bright red for error */
    font-family: 'Fira Code', 'Source Code Pro', monospace;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
}

.hidden {
    display: none !important;
}