.auth-card button[type="submit"] {
    border-radius: 10px;
    background: #078454;
    color: #fff;
}

.auth-card button[type="submit"]:hover {
    background: #05643f;
}

.auth-card a,
.auth-card a:visited,
.auth-switch a,
.auth-switch a:visited {
    color: #078454;
}

.auth-card a:hover,
.auth-switch a:hover {
    color: #05643f;
    text-decoration: underline;
}

.auth-card .auth-input {
    position: relative;
}

.auth-card .auth-input > i {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: #6e7d74;
    font-size: 14px;
    pointer-events: none;
}

.auth-card .auth-input input {
    min-height: 48px;
    padding-left: 42px;
    padding-right: 46px;
}

.auth-card .auth-input input:focus {
    border-color: #078454;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(7, 132, 84, .18);
}

.auth-card .password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    z-index: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64736a;
}

.auth-card .password-toggle:hover {
    background: #edf3ef;
    color: #078454;
}

.login-layout {
    width: min(1240px, 100%);
    min-height: calc(100vh - clamp(56px, 10vw, 120px));
    margin: auto;
    display: grid;
    grid-template-columns: minmax(330px, 410px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 6vw, 84px);
}

.login-panel {
    min-height: min(720px, calc(100vh - clamp(56px, 10vw, 120px)));
    padding: clamp(22px, 4vw, 52px);
    border: 1px solid #dce5e1;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(13, 38, 23, .1);
}

.login-layout .login-card {
    width: 100%;
    max-width: 390px;
    margin: 0;
    padding: clamp(25px, 3.5vw, 36px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.login-brand img {
    display: block;
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    border-radius: 13px;
    object-fit: contain;
    box-shadow: 0 7px 18px rgba(7, 132, 84, .15);
}


.login-layout .login-card h1 {
    font-size: clamp(28px, 3vw, 35px);
}

.login-visual {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
}

.login-visual::before {
    content: "";
    position: absolute;
    left: calc(clamp(32px, 6vw, 84px) / -2);
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: #dce5e1;
}

.login-visual img {
    display: block;
    width: 100%;
    max-width: 760px;
    max-height: 76vh;
    object-fit: contain;
}

@media (max-width: 800px) {
    .login-layout {
        min-height: auto;
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .login-panel {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .login-layout .login-card {
        margin: 0 auto;
    }

    .login-visual {
        display: none;
    }

    .login-visual::before {
        display: none;
    }
}