/* =========================================================
   BUDGETSTREAM PRO LOGIN
========================================================= */

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

body{

    font-family:'Poppins',sans-serif;

    background:
        radial-gradient(circle at top left,
        rgba(140,255,47,0.10),
        transparent 30%),

        radial-gradient(circle at bottom right,
        rgba(78,161,255,0.10),
        transparent 30%),

        #040b16;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    color:#fff;

}

/* =========================================================
   LOGIN PAGE
========================================================= */

.login-page{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}

.login-wrapper{

    width:100%;

    max-width:460px;

}

/* =========================================================
   LOGIN BOX
========================================================= */

.login-box{

    background:
        linear-gradient(
            180deg,
            rgba(7,15,28,0.88),
            rgba(5,10,20,0.92)
        );

    border:
        1px solid rgba(255,255,255,0.06);

    border-radius:28px;

    padding:34px;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(12px);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.45);

}

.login-box::before{

    content:'';

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:28px;

    background:
        linear-gradient(
            135deg,
            rgba(140,255,47,0.35),
            rgba(78,161,255,0.35)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

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

.login-logo{

    width:230px;

    max-width:100%;

    display:block;

    margin:0 auto 24px;

}

/* =========================================================
   TITLES
========================================================= */

.welcome-title{

    font-size:38px;

    font-weight:800;

    text-align:center;

    margin-bottom:14px;

    line-height:1.1;

}

.welcome-subtitle{

    text-align:center;

    color:#93a5c3;

    font-size:14px;

    line-height:1.7;

    margin-bottom:28px;

}

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

.input-group{

    margin-bottom:22px;

}

.input-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    color:#dce6f8;

    font-weight:500;

}

.input-icon-wrap{

    position:relative;

}

.input-icon-wrap i{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    color:#8cff2f;

    font-size:16px;

}

.input-icon-wrap input{

    width:100%;

    height:58px;

    background:#e9edf5;

    border:none;

    border-radius:18px;

    padding:0 20px 0 55px;

    font-size:15px;

    color:#111827;

    outline:none;

    transition:.25s ease;

}

.input-icon-wrap input:focus{

    box-shadow:
        0 0 0 4px rgba(140,255,47,0.12);

}

/* =========================================================
   OPTIONS
========================================================= */

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

    font-size:14px;

}

.remember-box{

    display:flex;

    align-items:center;

    gap:10px;

    color:#d7e1f2;

}

.forgot-link{

    color:#4ea1ff;

    text-decoration:none;

}

.forgot-link:hover{

    text-decoration:underline;

}

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

.login-btn{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #8cff2f,
            #57dc20
        );

    color:#07101d;

    font-size:20px;

    font-weight:800;

    cursor:pointer;

    transition:.25s ease;

    box-shadow:
        0 15px 40px rgba(140,255,47,0.25);

}

.login-btn:hover{

    transform:translateY(-3px);

}

/* =========================================================
   SECURITY LINE
========================================================= */

.security-line{

    display:flex;

    align-items:center;

    gap:15px;

    margin:28px 0;

    color:#7184a5;

    font-size:13px;

}

.security-divider{

    flex:1;

    height:1px;

    background:rgba(255,255,255,0.05);

}

/* =========================================================
   FEATURES
========================================================= */

.feature-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:12px;

}

.feature-item{

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:18px;

    padding:16px 12px;

    text-align:center;

}

.feature-icon{

    font-size:24px;

    margin-bottom:10px;

}

.green{
    color:#8cff2f;
}

.blue{
    color:#4ea1ff;
}

.purple{
    color:#8f63ff;
}

.feature-title{

    font-size:14px;

    font-weight:700;

    margin-bottom:6px;

}

.feature-text{

    font-size:12px;

    color:#92a5c3;

    line-height:1.5;

}

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

.login-footer{

    text-align:center;

    margin-top:24px;

    color:#7184a5;

    font-size:13px;

}

/* =========================================================
   ERROR
========================================================= */

.error-box{

    background:
        rgba(255,75,75,0.10);

    border:
        1px solid rgba(255,75,75,0.18);

    color:#ff9b9b;

    padding:15px;

    border-radius:16px;

    margin-bottom:22px;

    font-size:14px;

}

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

@media(max-width:700px){

    .login-box{

        padding:28px 22px;

    }

    .welcome-title{

        font-size:32px;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }

    .login-logo{

        width:200px;

    }

}
/* =========================================================
   BACKGROUND GLOW
========================================================= */

body::before{

    content:'';

    position:fixed;

    inset:0;

    background:

        radial-gradient(
            circle at left center,
            rgba(140,255,47,0.12),
            transparent 35%
        ),

        radial-gradient(
            circle at right center,
            rgba(78,161,255,0.12),
            transparent 35%
        ),

        radial-gradient(
            circle at top center,
            rgba(140,255,47,0.05),
            transparent 45%
        );

    pointer-events:none;

    z-index:-1;

}