/**
 * ============================================================
 * IOTManager Chat v10 Enterprise
 *
 * Authentication UI
 *
 * Compatible:
 * - login.php
 * - register.php
 * - forgot_password.php
 *
 * PHP:
 * 8.0.30+
 *
 * Founder:
 * Gafforov Hamid Olimjonovich
 *
 * ============================================================
*/


:root {

    --bg:
        #070b16;

    --panel:
        rgba(18,28,52,.96);

    --panel2:
        rgba(12,20,40,.96);

    --text:
        #eef4ff;

    --muted:
        #95a4c4;

    --primary:
        #5b8cff;

    --primary-hover:
        #3f72f5;

    --danger:
        #ff6b7a;

    --success:
        #43d19e;

    --border:
        rgba(255,255,255,.12);

    --shadow:
        0 30px 80px rgba(0,0,0,.45);

}





* {

    box-sizing:border-box;

}




html,
body {

    width:100%;

    min-height:100%;

}





body {


    margin:0;


    min-height:100vh;


    display:flex;


    align-items:center;


    justify-content:center;


    font-family:

        Inter,
        Segoe UI,
        Roboto,
        Arial,
        sans-serif;


    color:var(--text);


    background:


        radial-gradient(

            circle at top,

            #1c3264,

            #0b1328 40%,

            #070b16 80%

        );


}







a {


    color:#8fb4ff;


    text-decoration:none;


}


a:hover {


    color:white;


}







/*
============================================================
AUTH WRAPPER
============================================================
*/


.auth-shell {


    width:100%;


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;


    padding:30px;


}







/*
============================================================
CARD
============================================================
*/


.auth-card {


    width:min(460px,100%);


    padding:38px;


    border-radius:26px;


    background:


        linear-gradient(

            145deg,

            var(--panel),

            var(--panel2)

        );


    border:1px solid var(--border);


    box-shadow:var(--shadow);


    backdrop-filter:blur(18px);


    animation:

        fadeIn .35s ease;


}






@keyframes fadeIn {


    from {


        opacity:0;


        transform:translateY(20px);


    }


    to {


        opacity:1;


        transform:translateY(0);


    }


}








/*
============================================================
BRAND
============================================================
*/


.brand {


    text-align:center;


    margin-bottom:25px;


}



.brand strong {


    display:block;


    font-size:30px;


    font-weight:900;


}



.brand span {


    display:block;


    margin-top:8px;


    color:var(--muted);


    font-size:14px;


}








.subtitle {


    text-align:center;


    color:var(--muted);


    margin-bottom:25px;


}









/*
============================================================
FORM
============================================================
*/


form {


    width:100%;


}



.field {


    margin-bottom:18px;


}




.field label {


    display:block;


    margin-bottom:8px;


    color:var(--muted);


    font-size:14px;


}




.field input {


    width:100%;


    height:48px;


    padding:0 15px;


    border-radius:14px;


    border:1px solid var(--border);


    outline:none;


    background:


        rgba(5,12,28,.75);


    color:white;


    font-size:15px;


}



.field input::placeholder {


    color:#6f7d9b;


}



.field input:focus {


    border-color:var(--primary);


    box-shadow:


        0 0 0 3px

        rgba(91,140,255,.2);


}








/*
============================================================
PASSWORD
============================================================
*/


.password-wrapper {


    position:relative;


}



.password-wrapper input {


    padding-right:50px;


}



.password-toggle {


    position:absolute;


    right:10px;


    top:50%;


    transform:translateY(-50%);


    border:0;


    width:35px;


    height:35px;


    border-radius:10px;


    cursor:pointer;


    background:


        rgba(255,255,255,.08);


    color:white;


}









/*
============================================================
BUTTON
============================================================
*/


.btn {


    width:100%;


    height:50px;


    border:0;


    border-radius:14px;


    cursor:pointer;


    color:white;


    font-size:16px;


    font-weight:800;


    background:


        linear-gradient(

            135deg,

            #5b8cff,

            #426ee8

        );


    transition:.25s;


}



.btn:hover {


    background:


        linear-gradient(

            135deg,

            #6d9bff,

            #507df4

        );


    transform:translateY(-2px);


}



.btn:disabled {


    opacity:.6;


    cursor:not-allowed;


}









/*
============================================================
MESSAGE / ALERT
============================================================
*/


#message {


    margin-top:20px;


}



.alert {


    padding:14px;


    border-radius:14px;


    color:#ffb3bc;


    background:

        rgba(255,107,122,.12);


    border:

        1px solid rgba(255,107,122,.35);


}



.success {


    padding:14px;


    border-radius:14px;


    color:#8ff0c8;


    background:

        rgba(67,209,158,.12);


    border:

        1px solid rgba(67,209,158,.35);


}









/*
============================================================
LINKS
============================================================
*/


.auth-actions {


    text-align:center;


    margin-top:25px;


    line-height:1.8;


    color:var(--muted);


}




.auth-actions a {


    font-weight:600;


}









/*
============================================================
CHECKBOX
============================================================
*/


.checkbox {


    display:flex;


    gap:10px;


    align-items:center;


    margin-bottom:20px;


    color:var(--muted);


    font-size:14px;


}









/*
============================================================
MOBILE
============================================================
*/


@media(max-width:600px){


    .auth-shell {


        padding:15px;


    }



    .auth-card {


        padding:25px;


        border-radius:20px;


    }



    .brand strong {


        font-size:24px;


    }


}