.login-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 18px;
}

.login-card-top .back-home {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #64748b;
    font-size: 12px;
}

.login-card-top .back-home:hover {
    color: #15803d;
}

.login-card-top .eyebrow {
    margin: 0;
    white-space: nowrap;
}

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

        .login-brand-logo {
            width: 58px;
            height: 58px;
            flex: 0 0 58px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-brand-logo img {
            width: 60px;
            height: 60px;
            object-fit: contain;
            display: block;
        }

        .login-brand-text {
            display: flex;
            flex-direction: column;
        }

        .login-brand-text b {
            display: block;
            color: #172033;
            font-size: 15px;
            line-height: 1.3;
        }

        .login-brand-text span {
            display: block;
            margin-top: 4px;
            color: #64748b;
            font-size: 11px;
        }

        .login-error {

            display: flex;

            align-items: flex-start;

            gap: 10px;

            background: #fff5f5;

            border: 1px solid #f5c2c7;

            color: #9d2424;

            padding: 13px 15px;

            border-radius: 10px;

            margin-bottom: 18px;

            font-size: 14px;

            line-height: 1.5;

        }


        .login-error i {

            font-size: 18px;

            margin-top: 1px;

        }


        .login-error ul {

            margin: 0;

            padding-left: 18px;

        }


        .login-error li + li {

            margin-top: 4px;

        }


        .password-wrap {

            position: relative;

        }


        .password-wrap .input {

            padding-right: 45px;

        }


        .password-toggle {

            position: absolute;

            right: 12px;

            top: 50%;

            transform: translateY(-50%);

            border: 0;

            background: transparent;

            cursor: pointer;

            color: #718096;

            font-size: 17px;

        }


        .login-info {

            display: flex;

            align-items: center;

            gap: 8px;

            margin-top: 16px;

            color: #7b8ba5;

            font-size: 12px;

        }


/* =========================================================
   SIPPS DARK MODE
========================================================= */

html[data-theme="dark"] .login-card-top .back-home {
    color: #9fb3a6;
}

html[data-theme="dark"] .login-card-top .back-home:hover {
    color: #4ade80;
}

html[data-theme="dark"] .login-brand-text b {
    color: #f0fdf4;
}

html[data-theme="dark"] .login-brand-text span,
html[data-theme="dark"] .login-info {
    color: #9fb3a6;
}

html[data-theme="dark"] .password-toggle {
    color: #a8b9ae;
}

html[data-theme="dark"] .password-toggle:hover {
    color: #4ade80;
}

/* Error remains semantic red */
html[data-theme="dark"] .login-error {
    background: #321515;
    border-color: #6b2626;
    color: #fca5a5;
}