/* ========================================
RESET
======================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#07111f;
    --card:#101826;
    --border:rgba(255,255,255,.08);

    --primary:#2563eb;
    --primaryHover:#3b82f6;

    --text:#ffffff;
    --muted:#94a3b8;

    --danger:#ef4444;

    --radius:22px;

}

body{

    font-family:"Inter",sans-serif;

    background:linear-gradient(135deg,#07111f,#0d1729,#081320);

    color:var(--text);

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

/* ========================================
BACKGROUND
======================================== */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:0;

}

.blur{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    opacity:.45;

    animation:float 10s ease-in-out infinite;

}

.blur1{

    width:350px;
    height:350px;

    background:#2563eb;

    left:-80px;
    top:-100px;

}

.blur2{

    width:420px;
    height:420px;

    background:#1d4ed8;

    right:-120px;
    bottom:-150px;

    animation-delay:3s;

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-30px);

    }

    100%{

        transform:translateY(0px);

    }

}

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

.login-container{

    width:100%;

    display:flex;

    justify-content:center;

    padding:25px;

    position:relative;

    z-index:2;

}

.login-card{

    width:430px;

    background:rgba(16,24,38,.88);

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    padding:38px;

    box-shadow:
        0 30px 60px rgba(0,0,0,.45),
        0 0 80px rgba(37,99,235,.15);

}

/* ========================================
LOGO
======================================== */

.logo{

    display:flex;

    justify-content:center;

    margin-bottom:22px;

}

.logo img{

    width:92px;

    height:92px;

    object-fit:contain;

    border-radius:50%;

    box-shadow:0 0 25px rgba(37,99,235,.45);

}

h1{

    text-align:center;

    font-size:32px;

    font-weight:800;

    margin-bottom:8px;

}

.subtitle{

    text-align:center;

    color:var(--muted);

    margin-bottom:32px;

}

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

.input-group{

    margin-bottom:20px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    color:#dbeafe;

}

input{

    width:100%;

    height:52px;

    border:none;

    outline:none;

    border-radius:14px;

    background:#0b1322;

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

    color:#fff;

    padding:0 16px;

    transition:.25s;

    font-size:15px;

}

input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.18);

}

.password-wrapper{

    position:relative;

}

.password-wrapper input{

    padding-right:58px;

}

#togglePassword{

    position:absolute;

    right:6px;

    top:6px;

    width:40px;

    height:40px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:transparent;

    color:#9ca3af;

    transition:.2s;

}

#togglePassword:hover{

    background:#18233a;

    color:white;

}

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

#loginBtn{

    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    font-size:16px;

    margin-top:12px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );

    color:white;

    transition:.25s;

}

#loginBtn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 35px rgba(37,99,235,.35);

}

#loginBtn:active{

    transform:scale(.98);

}

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

#loginMessage{

    text-align:center;

    margin-top:18px;

    min-height:20px;

    font-size:14px;

    font-weight:600;

}

.error{

    color:#ef4444;

}

.success{

    color:#22c55e;

}

/* ========================================
FOOTER
======================================== */

.footer{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:34px;

}

.line{

    flex:1;

    height:1px;

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

}

.footer span{

    color:#64748b;

    font-size:13px;

}

.version{

    margin-top:18px;

    text-align:center;

    color:#64748b;

    font-size:13px;

}

/* ========================================
ANIMATION
======================================== */

.shake{

    animation:shake .35s;

}

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    20%{

        transform:translateX(-8px);

    }

    40%{

        transform:translateX(8px);

    }

    60%{

        transform:translateX(-6px);

    }

    80%{

        transform:translateX(6px);

    }

    100%{

        transform:translateX(0);

    }

}

/* ========================================
RESPONSIVE
======================================== */

@media(max-width:500px){

    .login-card{

        padding:28px;

        width:100%;

    }

    h1{

        font-size:28px;

    }

}