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

body{
    font-family:'Inter',sans-serif;
    background:#ffffff;
    color:#222;
}
.login-logo{

width:95px;

margin-bottom:15px;


}

/* MAIN */

.app-bg{
    min-height:100vh;
    background:
    linear-gradient(
        135deg,
        #ffffff,
        #fff7ed
    );

    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}


/* CARD */

.card{

    width:100%;
    max-width:420px;

    background:#ffffff;

    padding:35px;

    border-radius:22px;
border-top:5px solid #123B8C;
    /* border:1px solid #f1f1f1; */

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);

}


/* BRAND */

.brand{
    text-align:center;
    margin-bottom:25px;
}


.brand h1{

    font-size:28px;
    font-weight:800;

    color:#111827;

}


.brand p{

    margin-top:6px;

    color:#123B8C;

    font-weight:600;

}



/* TEXT */

h2{

    text-align:center;

    color:#111827;

    margin-bottom:15px;

}


.muted{

    text-align:center;

    color:#6b7280;

    line-height:1.6;

    margin-bottom:20px;

}


/* INPUT */


input{

    width:100%;

    padding:14px;

    margin-top:12px;

    border-radius:12px;

    border:1px solid #ddd;

    background:#fff;

    color:#111;

    font-size:15px;

}


input:focus{

    outline:none;

    border-color:#123B8C;

    box-shadow:
    0 0 0 3px rgba(249,115,22,.15);

}



/* BUTTON */


button{

    width:100%;

    margin-top:18px;

    padding:14px;

    border-radius:12px;

    border:none;

    cursor:pointer;


    background:
    linear-gradient(
    135deg,
    #123B8C,
    #052870
    );


    color:white;

    font-size:16px;

    font-weight:700;

}


button:disabled{

    opacity:.7;

}


/* ERROR */

.error{

    color:#dc2626;

    font-size:14px;

    margin-top:10px;

    text-align:center;

}



/* LOADER BUTTON */


.spinner{

width:18px;
height:18px;

border:3px solid rgba(255,255,255,.4);

border-top:3px solid white;

border-radius:50%;

display:inline-block;

vertical-align:middle;

margin-right:8px;

animation:spin .8s linear infinite;

}


@keyframes spin{

to{
transform:rotate(360deg);
}

}



/* POPUP */


.popup{

position:fixed;

inset:0;

background:rgba(0,0,0,.35);

display:none;

align-items:center;

justify-content:center;

z-index:999;

}



.popup.show{

display:flex;

}



.popup-card{


background:white;

max-width:380px;

width:90%;

padding:30px;

border-radius:20px;

box-shadow:
0 20px 50px rgba(0,0,0,.25);

position:relative;

text-align:center;

line-height:1.6;

color:#374151;

}


.close-btn{

position:absolute;

right:15px;

top:10px;

font-size:22px;

cursor:pointer;

color:#123B8C;

}



/* mobile */

@media(max-width:480px){

.card{

padding:25px;

}

}


.note{
font-size:13px;
color:#666;
text-align:center;
line-height:1.5;
margin-top:15px;
}


.close-btn{
position:absolute;
right:15px;
top:8px;
font-size:25px;
cursor:pointer;
color:#123B8C;
}


.popup-card{
position:relative;
max-width:380px;
line-height:1.6;
}