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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    min-height:100%;

    font-family:
        Inter,
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #eef2ff 100%
        );

    color:#0f172a;

}

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

.km-login-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    position:relative;

    overflow:hidden;

}

/* glow */

.km-login-page::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        rgba(59,130,246,.12);

    filter:blur(60px);

    top:-120px;
    right:-120px;

}

.km-login-page::after{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    border-radius:50%;

    background:
        rgba(16,185,129,.10);

    filter:blur(60px);

    bottom:-120px;
    left:-120px;

}

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

.km-login-card{

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

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

    backdrop-filter:
        blur(18px);

    border:
        1px solid
        rgba(255,255,255,.6);

    border-radius:32px;

    padding:42px 34px;

    position:relative;

    z-index:2;

    box-shadow:
        0 30px 80px
        rgba(15,23,42,.08);

}

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

.km-login-logo{

    width:auto;
    height:84px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.km-login-logo img{

    width:210px;
    height:auto;

}

/* =========================
   HEADING
========================= */

.km-login-heading{

    text-align:center;

    font-size:32px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:10px;

    color:#0f172a;

}

.km-login-subtitle{

    text-align:center;

    font-size:15px;

    color:#64748b;

    line-height:1.7;

    margin-bottom:34px;

}

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

.km-login-error{

    background:#fef2f2;

    color:#dc2626;

    border:
        1px solid #fecaca;

    border-radius:16px;

    padding:14px 16px;

    font-size:14px;

    margin-bottom:24px;

    text-align:center;

}

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

.km-login-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/* group */

.km-form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.km-form-group label{

    font-size:14px;

    font-weight:700;

    color:#334155;

}

/* input */

.km-form-group input{

    width:100%;

    height:54px;

    border-radius:16px;

    border:
        1px solid #dbe2ea;

    background:#fff;

    padding:0 18px;

    font-size:15px;

    color:#0f172a;

    outline:none;

    transition:.2s;

}

.km-form-group input:focus{

    border-color:#3b82f6;

    box-shadow:
        0 0 0 4px
        rgba(59,130,246,.12);

}

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

.km-login-options{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    margin-top:-6px;

}

/* remember */

.km-remember{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

    color:#475569;

    cursor:pointer;

}

.km-remember input{

    width:18px;
    height:18px;

    accent-color:#2563eb;

}

/* forgot */

.km-forgot{

    font-size:14px;

    font-weight:600;

    color:#2563eb;

    text-decoration:none;

}

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

.km-login-btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color:#fff;

    font-size:16px;

    font-weight:800;

    cursor:pointer;

    transition:.2s;

    box-shadow:
        0 16px 30px
        rgba(37,99,235,.24);

}

.km-login-btn:hover{

    transform:
        translateY(-2px);

}

.km-login-btn:active{

    transform:
        scale(.98);

}

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

.km-login-footer{

    margin-top:28px;

    text-align:center;

    font-size:14px;

    color:#64748b;

}

.km-login-footer a{

    color:#2563eb;

    text-decoration:none;

    font-weight:700;

}

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

@media(max-width:640px){

    .km-login-card{

        padding:34px 24px;

        border-radius:28px;

    }

    .km-login-heading{

        font-size:28px;

    }

}