.user-register-page,
.user-login-page {
    font-family: 'Space Mono', monospace;
    color: #ddd;
    display: flex;
    flex-direction: column; /* stack logo and credentials */
    align-items: center;
    background: #0f111a;
    min-height: 100vh;
}


/* Shared container styling */
.user-login-container {
    background-color: #1b1b1b;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    width: 300px;
    height: 600px;
    font-family: 'Space Mono', monospace;
    color: #ddd;
}
.user-register-container {
    background-color: #1b1b1b;  
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    width: 500px;
    height:800px;
    font-family: 'Space Mono', monospace;
    color: #ddd;
}

    .user-register-container p,
    .user-login-container p {
        word-break: break-word; /* break long words/strings */
        overflow-wrap: anywhere; /* ensure wrapping anywhere */
        max-width: 100%; /* don’t exceed container width */
        color: #ff5555; /* error color, optional */
        margin-top: 0.5rem; /* spacing from above */
    }


    /* Headings */
    .user-login-container h3,
    .user-register-container h3 {
        font-family: 'VT323', monospace;
        font-size: 1.8rem;
        margin-bottom: 1rem;
        color: #ddd;
    }

    /* Inputs */
    .user-login-container input,
    .user-register-container input {
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 1rem;
        font-family: 'Space Mono', monospace;
        background-color: #222;
        border: 1px solid #555;
        border-radius: 4px;
        color: #ddd;
    }

    /* Buttons */
    .user-login-container button,
    .user-register-container button {
        font-family: 'VT323', monospace;
        font-size: 1rem;
        font-weight:normal;
        padding: 0.35rem 1rem;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        background-color: #007bff;
        color: white;

    }

        .user-login-container button:hover,
        .user-register-container button:hover {
            background-color: #0056b3;
        }


    /* Links */
    .user-login-container a {
        color: #007bff;
        text-decoration: none;
    }

        .user-login-container a:hover {
            text-decoration: underline;
        }

.checkbox-container {
    display: flex;
    align-items: center; /* vertically center checkbox and label */
    gap: 0.5rem; /* spacing between checkbox and label */
    margin-bottom: 1rem;
}

    .checkbox-container input[type="checkbox"] {
        width: auto; /* important! don't stretch checkbox */
        margin: 0;
    }


/* Early access notice above register/login forms */
.early-access-notice {
    background-color: #2563eb; /* blue accent, stands out from dark bg */
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Space Mono', monospace;
}

    .early-access-notice p {
        margin: 0 0 0.5rem 0;
        font-size: .95rem;
        color:#ff5555;
    }

    .early-access-notice button {
        font-family: 'VT323', monospace;
        font-size: 1.5rem;
        padding: 0.35rem 0.75rem;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        background-color: #2563eb; /* matches your container */
        color: #fff;
    }

        .early-access-notice button:hover {
            background-color: #0056b3; /* slightly darker hover */
        }