/* ================================
   GLOBAL RESET
================================ */
*{
margin:0;
padding:0;
box-sizing:border-box
}

html,body{
width:100%;
overflow-x:hidden
}

body{
font-family:"Figtree",sans-serif;
min-height:100vh;
background:linear-gradient(-45deg,#0f172a,#1e293b,#0f172a,#111827);
background-size:400% 400%;
animation:gradientMove 15s ease infinite;
display:flex;
align-items:center;
justify-content:center;
padding:16px;
}

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

@keyframes gradientMove{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

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

.login-wrapper{
width:100%;
display:flex;
justify-content:center;
}

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

.login-card{
width:100%;
max-width:420px;
background:#1e293bbf;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(148,163,184,.15);
border-radius:22px;
padding:40px 36px;
box-shadow:
0 25px 60px #0009,
inset 0 0 0 1px #ffffff05;
}

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

.login-logo{
text-align:center;
margin-bottom:28px
}

.login-logo img{
width:70px;
max-width:100%
}

/* ================================
   TITLE
================================ */

.login-title{
text-align:center;
color:#fff;
font-size:26px;
font-weight:600;
margin-bottom:6px
}

.login-subtitle{
text-align:center;
color:#94a3b8;
font-size:14px;
margin-bottom:32px
}

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

.form-group{
margin-bottom:20px
}

.form-group label{
display:block;
font-size:13px;
color:#cbd5e1;
margin-bottom:6px
}

.form-control{
width:100%;
padding:13px 15px;
border-radius:12px;
border:1px solid #475569;
background:#1e293b;
color:#fff;
font-size:14px
}

.form-control::placeholder{
color:#94a3b8
}

.form-control:focus{
outline:none;
border-color:#6366f1;
box-shadow:0 0 0 3px #6366f159
}

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

.form-footer{
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
margin-bottom:24px;
flex-wrap:wrap;
gap:10px
}

.form-footer label{
color:#94a3b8;
display:flex;
gap:6px;
align-items:center
}

.form-footer input[type="checkbox"]{
accent-color:#6366f1
}

.form-footer a{
color:#818cf8;
text-decoration:none
}

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

.btn-login{
width:100%;
padding:14px;
border-radius:14px;
border:none;
background:linear-gradient(135deg,#6366f1,#4f46e5);
color:#fff;
font-weight:600;
font-size:15px;
cursor:pointer
}

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

@media (max-width:420px){

body{
padding:12px
}

.login-card{
padding:28px 22px
}

.login-title{
font-size:22px
}

.form-control{
padding:12px 14px;
font-size:13px
}

.btn-login{
padding:13px;
font-size:14px
}

}

/* ================================
   VERY SMALL PHONE
================================ */

@media (max-width:360px){

.login-card{
padding:22px 18px
}

.login-title{
font-size:20px
}

.login-logo img{
width:58px
}

.form-footer{
flex-direction:column;
align-items:flex-start
}

}