/* ===========================================

   LOGIN PAGE — BASE LAYOUT

   =========================================== */


html, body {

    margin: 0;

    padding: 0;

}





.login-body {

    margin: 0;

    height: 100dvh;

    background: #121212;

    color: #eee;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: Arial, sans-serif;

    overflow-y: hidden;

}





/* ===========================================

   LOGIN CONTAINER

   =========================================== */



.login-container {

    background: #1e1e1e;

    padding: 30px 40px;

    width: 330px;

    text-align: center;

    border-radius: 10px;

    box-shadow: 0 0 25px rgba(0,0,0,0.6);

}



.login-container h2 {

    margin-bottom: 20px;

    font-weight: 300;

    color: #fff;

    letter-spacing: 1px;

}





/* ===========================================

   INPUT FIELDS

   =========================================== */



.input-field {

    width: 260px;

    margin: 0 auto 14px auto;

    padding: 12px;

    border: none;

    border-radius: 6px;

    text-align: center;

    background: #2c2c2c;

    color: #eee;

    font-size: 15px;

    outline: none;

    transition: background 0.2s ease, box-shadow 0.2s ease;

}



.input-field:focus {

    background: #333;

    box-shadow: 0 0 6px #5c9dff;

}





/* ===========================================

   LOGIN BUTTON

   =========================================== */



.login-btn {

    width: 260px;

    padding: 12px;

    border: none;

    border-radius: 6px;

    background: #5c9dff;

    color: #fff;

    font-size: 15px;

    cursor: pointer;

    transition: background 0.2s ease;

}



.login-btn:hover {

    background: #78adff;

}





/* ===========================================

   ERROR MESSAGE

   =========================================== */



.error-message {

    margin-top: 10px;

    color: #ff6363;

    font-size: 14px;

}





/* ===========================================

   RESPONSIVE (MOBILE)

   =========================================== */



@media (max-width: 678px) {



    /* Larger, more touch-friendly container */

    .login-container {

        width: 90%;

        max-width: 380px;

        padding: 24px;

        border-radius: 12px;

        font-size: 1.1rem;

    }



    /* Inputs scale to full width */



    .login-body {

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        padding: 20px 0;

    }





    .login-container {

        width: 85%;                  /* fills most of screen */

        max-width: 300px;             /* remove desktop width limit */

        padding: 24px 20px;

        border-radius: 12px;

        font-size: 1.1rem;

    }



    .input-field,

    .login-btn {

        width: 100%;

	max-width: 80%;

        font-size: 1.1rem;

        padding: 14px;

    }

}