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

html{
    width:100%;
    min-height:100%;
}

body{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    font-family:"Segoe UI",Roboto,Arial,sans-serif;
    background:#f7f8fb;
    color:#172033;
    overflow-x:hidden;
}

button,
input{
    font:inherit;
}

.login-page{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px 20px;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(99,102,241,.055),
            transparent 30%
        ),
        #f8f9fc;
}

.login-container{
    width:100%;
    max-width:460px;
    margin:auto;
    animation:pageEnter .55s cubic-bezier(.22,.8,.35,1) both;
}

.back-btn{
    width:100%;
    min-height:46px;
    margin-bottom:14px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid #e2e6ec;
    border-radius:11px;
    background:#fff;
    color:#667085;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    box-shadow:0 2px 8px rgba(16,24,40,.025);
    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.back-btn i{
    font-size:12px;
    transition:transform .22s ease;
}

.back-btn:hover{
    background:#f9fafb;
    border-color:#d4d9e1;
    color:#344054;
    transform:translateY(-1px);
    box-shadow:0 5px 14px rgba(16,24,40,.055);
}

.back-btn:hover i{
    transform:translateX(-3px);
}

.back-btn:active{
    transform:translateY(0);
}

.login-card{
    position:relative;
    width:100%;
    padding:36px;
    overflow:hidden;
    background:#fff;
    border:1px solid #e5e8ed;
    border-radius:18px;
    box-shadow:
        0 2px 5px rgba(16,24,40,.02),
        0 14px 38px rgba(16,24,40,.065);
}

.login-card::before{
    content:"";
    position:absolute;
    top:0;
    left:36px;
    right:36px;
    height:3px;
    border-radius:0 0 6px 6px;
    background:linear-gradient(
        90deg,
        #6366f1,
        #7c5ce7
    );
}

.login-brand{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:30px;
    animation:contentEnter .5s .08s ease both;
}

.brand-icon{
    width:54px;
    height:54px;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border-radius:13px;
    background:#6366f1;
    color:#fff;
    font-size:20px;
    box-shadow:0 8px 20px rgba(99,102,241,.20);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.brand-icon:hover{
    transform:translateY(-2px);
    box-shadow:0 11px 24px rgba(99,102,241,.26);
}

.brand-content{
    width:100%;
    min-width:0;
}

.admin-label{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    margin-bottom:10px;
    padding:0 10px;
    border-radius:20px;
    background:#eef2ff;
    color:#5b5cf0;
    font-size:10px;
    font-weight:750;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.brand-content h1{
    margin:0 0 8px;
    color:#172033;
    font-size:27px;
    line-height:1.2;
    font-weight:750;
    letter-spacing:-.5px;
}

.brand-content p{
    max-width:340px;
    margin:0;
    color:#98a2b3;
    font-size:13px;
    line-height:1.6;
}

.login-error{
    width:100%;
    min-height:48px;
    margin-bottom:21px;
    padding:11px 13px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #fecdd3;
    border-radius:10px;
    background:#fff7f7;
    color:#c2414b;
    font-size:12px;
    font-weight:600;
    line-height:1.45;
    animation:errorEnter .35s ease both;
}

.error-icon{
    width:29px;
    height:29px;
    flex:0 0 29px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#ffe4e6;
    color:#e5484d;
    font-size:12px;
}

.login-error span{
    min-width:0;
    flex:1;
}

.login-form{
    width:100%;
}

.input-group{
    width:100%;
    margin-bottom:19px;
    animation:contentEnter .5s ease both;
}

.input-group:nth-child(1){
    animation-delay:.14s;
}

.input-group:nth-child(2){
    animation-delay:.20s;
}

.input-group label{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:8px;
    color:#475467;
    font-size:13px;
    font-weight:650;
}

.input-group label i{
    width:15px;
    color:#7c8494;
    font-size:12px;
    text-align:center;
}

.input-wrapper{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    border:1px solid #dfe3e8;
    border-radius:10px;
    background:#fbfcfd;
    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.input-wrapper:hover{
    background:#fff;
    border-color:#cdd3dc;
}

.input-wrapper:focus-within{
    background:#fff;
    border-color:#6366f1;
    box-shadow:0 0 0 3px rgba(99,102,241,.10);
}

.input-wrapper .input-icon{
    position:absolute;
    left:15px;
    z-index:1;
    width:17px;
    color:#98a2b3;
    font-size:13px;
    text-align:center;
    pointer-events:none;
    transition:
        color .2s ease,
        transform .2s ease;
}

.input-wrapper:focus-within .input-icon{
    color:#6366f1;
    transform:scale(1.06);
}

.input-wrapper input{
    display:block;
    width:100%;
    height:50px;
    padding:0 15px 0 44px;
    border:0;
    outline:0;
    border-radius:10px;
    background:transparent;
    color:#172033;
    font-size:14px;
    font-weight:500;
    caret-color:#6366f1;
}

.input-wrapper input::placeholder{
    color:#a8b0bd;
    font-weight:400;
}

.input-wrapper input:-webkit-autofill,
.input-wrapper input:-webkit-autofill:hover,
.input-wrapper input:-webkit-autofill:focus{
    -webkit-text-fill-color:#172033;
    -webkit-box-shadow:0 0 0 1000px #fff inset;
    transition:background-color 9999s ease-in-out 0s;
}

.login-btn{
    position:relative;
    width:100%;
    min-height:50px;
    margin-top:3px;
    padding:0 18px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border:1px solid #6366f1;
    border-radius:10px;
    outline:0;
    background:#6366f1;
    color:#fff;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(99,102,241,.18);
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
    animation:contentEnter .5s .26s ease both;
}

.login-btn span,
.login-btn i{
    position:relative;
    z-index:1;
}

.login-btn i{
    font-size:12px;
    transition:transform .22s ease;
}

.login-btn:hover{
    background:#5558e8;
    border-color:#5558e8;
    transform:translateY(-1px);
    box-shadow:0 9px 20px rgba(99,102,241,.24);
}

.login-btn:hover i{
    transform:translateX(3px);
}

.login-btn:active{
    transform:translateY(0);
    box-shadow:0 4px 10px rgba(99,102,241,.16);
}

.login-btn:focus-visible,
.back-btn:focus-visible{
    outline:3px solid rgba(99,102,241,.16);
    outline-offset:2px;
}

.login-footer{
    width:100%;
    margin-top:25px;
    padding-top:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border-top:1px solid #eef0f3;
    color:#98a2b3;
    font-size:11px;
    font-weight:500;
    animation:contentEnter .5s .32s ease both;
}

.login-footer i{
    color:#22a06b;
    font-size:11px;
}

@keyframes pageEnter{
    from{
        opacity:0;
        transform:translateY(16px) scale(.99);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes contentEnter{
    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes errorEnter{
    from{
        opacity:0;
        transform:translateY(-6px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:900px){

    .login-page{
        padding:26px 18px;
    }

    .login-container{
        max-width:450px;
    }
}

@media(max-width:768px){

    .login-page{
        padding:22px 16px;
    }

    .login-container{
        max-width:430px;
    }

    .login-card{
        padding:32px 28px;
        border-radius:16px;
    }

    .login-card::before{
        left:28px;
        right:28px;
    }

    .brand-content h1{
        font-size:25px;
    }
}

@media(max-width:600px){

    .login-page{
        padding:18px 12px;
    }

    .login-container{
        max-width:420px;
    }

    .back-btn{
        min-height:44px;
        margin-bottom:12px;
        font-size:13px;
    }

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

    .login-brand{
        margin-bottom:27px;
    }

    .brand-icon{
        width:51px;
        height:51px;
        margin-bottom:17px;
        font-size:19px;
    }

    .brand-content h1{
        font-size:23px;
    }

    .brand-content p{
        font-size:12px;
    }
}

@media(max-width:480px){

    body{
        background:#fff;
    }

    .login-page{
        min-height:100dvh;
        align-items:center;
        padding:12px 10px;
        background:#fff;
    }

    .login-container{
        max-width:none;
    }

    .back-btn{
        min-height:43px;
        margin-bottom:10px;
        padding:0 12px;
        border-radius:9px;
        font-size:12px;
        box-shadow:none;
    }

    .login-card{
        padding:25px 17px;
        border-radius:14px;
        box-shadow:0 6px 22px rgba(16,24,40,.055);
    }

    .login-card::before{
        left:17px;
        right:17px;
        height:2px;
    }

    .login-brand{
        margin-bottom:24px;
    }

    .brand-icon{
        width:48px;
        height:48px;
        margin-bottom:16px;
        border-radius:11px;
        font-size:18px;
    }

    .admin-label{
        min-height:23px;
        margin-bottom:8px;
        padding:0 9px;
        font-size:9px;
    }

    .brand-content h1{
        margin-bottom:6px;
        font-size:22px;
    }

    .brand-content p{
        max-width:290px;
        font-size:12px;
        line-height:1.5;
    }

    .login-error{
        min-height:45px;
        margin-bottom:18px;
        padding:9px 10px;
        gap:8px;
        font-size:11px;
    }

    .error-icon{
        width:27px;
        height:27px;
        flex-basis:27px;
        font-size:11px;
    }

    .input-group{
        margin-bottom:16px;
    }

    .input-group label{
        margin-bottom:7px;
        font-size:12px;
    }

    .input-group label i{
        font-size:11px;
    }

    .input-wrapper{
        border-radius:9px;
    }

    .input-wrapper input{
        height:47px;
        padding:0 12px 0 40px;
        border-radius:9px;
        font-size:13px;
    }

    .input-wrapper .input-icon{
        left:13px;
        font-size:12px;
    }

    .login-btn{
        min-height:47px;
        margin-top:2px;
        border-radius:9px;
        font-size:13px;
    }

    .login-footer{
        margin-top:21px;
        padding-top:17px;
        font-size:10px;
    }
}

@media(max-width:380px){

    .login-page{
        padding:8px 7px;
    }

    .back-btn{
        min-height:41px;
        margin-bottom:8px;
        font-size:11px;
    }

    .login-card{
        padding:21px 13px;
        border-radius:12px;
    }

    .login-card::before{
        left:13px;
        right:13px;
    }

    .login-brand{
        margin-bottom:21px;
    }

    .brand-icon{
        width:45px;
        height:45px;
        margin-bottom:14px;
        border-radius:10px;
        font-size:17px;
    }

    .brand-content h1{
        font-size:20px;
    }

    .brand-content p{
        font-size:11px;
    }

    .input-group{
        margin-bottom:14px;
    }

    .input-group label{
        font-size:11px;
    }

    .input-wrapper input{
        height:45px;
        font-size:12px;
    }

    .login-btn{
        min-height:45px;
        font-size:12px;
    }

    .login-footer{
        margin-top:18px;
        padding-top:15px;
    }
}

@media(max-height:650px) and (orientation:landscape){

    .login-page{
        align-items:flex-start;
        padding:12px;
    }

    .login-container{
        margin:auto;
    }

    .back-btn{
        min-height:39px;
        margin-bottom:8px;
    }

    .login-card{
        padding:20px 25px;
    }

    .login-brand{
        margin-bottom:17px;
    }

    .brand-icon{
        width:43px;
        height:43px;
        margin-bottom:11px;
        font-size:16px;
    }

    .admin-label{
        min-height:21px;
        margin-bottom:6px;
    }

    .brand-content h1{
        margin-bottom:4px;
        font-size:20px;
    }

    .brand-content p{
        font-size:11px;
    }

    .input-group{
        margin-bottom:11px;
    }

    .input-group label{
        margin-bottom:5px;
    }

    .input-wrapper input{
        height:42px;
    }

    .login-btn{
        min-height:42px;
    }

    .login-footer{
        margin-top:14px;
        padding-top:12px;
    }
}

@media(min-width:1600px){

    .login-container{
        max-width:480px;
    }

    .login-card{
        padding:40px;
    }

    .login-card::before{
        left:40px;
        right:40px;
    }
}

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}