html,
body {
    min-height: 100%;
}

body.ac-auth-body {
    margin: 0;
    background: #ffffff !important;
    overflow-x: hidden;
}

.ac-auth,
.ac-auth * {
    box-sizing: border-box;
}

.ac-auth {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    color: #101828;
    background: #ffffff;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
    letter-spacing: 0;
}

.ac-visual {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 4vw, 52px);
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 22%, rgba(255,255,255,.16), transparent 30%),
        linear-gradient(135deg, #6c3ff5 0%, #5a34e2 48%, #4d2dc4 100%);
    color: #ffffff;
}

.ac-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.22));
    pointer-events: none;
}

.ac-brand,
.ac-mobile-brand {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
}

.ac-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.ac-mobile-brand {
    display: none;
    justify-content: center;
    color: #111827;
    margin-bottom: 42px;
}

.ac-mobile-brand .ac-brand-mark {
    background: #f0ebff;
    color: #6c3ff5;
}

.ac-character-stage {
    position: relative;
    z-index: 2;
    width: min(58vw, 590px);
    height: min(54vh, 440px);
    min-height: 350px;
    align-self: center;
    margin: auto 0 28px;
}

.ac-character {
    position: absolute;
    bottom: 0;
    transform-origin: bottom center;
    transition: height .7s ease, transform .7s ease, border-radius .3s ease;
    will-change: transform;
}

.ac-purple {
    left: 74px;
    width: 180px;
    height: 400px;
    z-index: 1;
    background: #6c3ff5;
    border-radius: 12px 12px 0 0;
    transform: skewX(var(--body-skew, 0deg));
}

.ac-black {
    left: 244px;
    width: 122px;
    height: 310px;
    z-index: 2;
    background: #2d2d2d;
    border-radius: 10px 10px 0 0;
    transform: skewX(calc(var(--body-skew, 0deg) * 1.35));
}

.ac-orange {
    left: 0;
    width: 242px;
    height: 202px;
    z-index: 3;
    background: #ff9b6b;
    border-radius: 122px 122px 0 0;
    transform: skewX(var(--body-skew, 0deg));
}

.ac-yellow {
    left: 318px;
    width: 142px;
    height: 232px;
    z-index: 4;
    background: #e8d754;
    border-radius: 72px 72px 0 0;
    transform: skewX(var(--body-skew, 0deg));
}

.ac-eyes,
.ac-dot-eyes {
    position: absolute;
    display: flex;
    align-items: center;
    transition: left .7s ease, top .7s ease, transform .2s ease;
    transform: translate(var(--face-x, 0px), var(--face-y, 0px));
}

.ac-purple .ac-eyes {
    left: 45px;
    top: 40px;
    gap: 28px;
}

.ac-black .ac-eyes {
    left: 26px;
    top: 32px;
    gap: 22px;
}

.ac-eye {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    background: #ffffff;
    transition: height .15s ease, margin-top .15s ease;
}

.ac-black .ac-eye {
    width: 16px;
    height: 16px;
}

.ac-eye i,
.ac-dot-eyes span {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 999px;
    background: #2d2d2d;
    transform: translate(var(--pupil-x, 0px), var(--pupil-y, 0px));
    transition: transform .1s ease-out;
}

.ac-black .ac-eye i {
    width: 6px;
    height: 6px;
}

.ac-dot-eyes {
    gap: 30px;
}

.ac-dot-eyes span {
    width: 12px;
    height: 12px;
}

.ac-orange .ac-dot-eyes {
    left: 82px;
    top: 90px;
}

.ac-yellow .ac-dot-eyes {
    left: 52px;
    top: 40px;
    gap: 24px;
}

.ac-mouth {
    position: absolute;
    left: 40px;
    top: 88px;
    width: 80px;
    height: 4px;
    border-radius: 999px;
    background: #2d2d2d;
    transform: translate(var(--face-x, 0px), var(--face-y, 0px));
    transition: transform .2s ease-out, left .7s ease, top .7s ease;
}

.ac-auth.is-typing .ac-purple {
    height: 440px;
    transform: skewX(calc(var(--body-skew, 0deg) - 12deg)) translateX(40px);
}

.ac-auth.is-typing .ac-black {
    transform: skewX(calc(var(--body-skew, 0deg) * 1.35));
}

.ac-auth.is-looking .ac-purple .ac-eyes {
    left: 55px;
    top: 65px;
}

.ac-auth.is-looking .ac-black {
    transform: skewX(calc(var(--body-skew, 0deg) + 10deg)) translateX(20px);
}

.ac-auth.is-looking .ac-black .ac-eyes {
    left: 32px;
    top: 12px;
}

.ac-auth.is-password-visible .ac-purple {
    transform: skewX(0deg);
}

.ac-auth.is-password-visible .ac-black,
.ac-auth.is-password-visible .ac-orange,
.ac-auth.is-password-visible .ac-yellow {
    transform: skewX(0deg);
}

.ac-auth.is-password-visible .ac-purple .ac-eyes {
    left: 20px;
    top: 35px;
}

.ac-auth.is-password-visible .ac-black .ac-eyes {
    left: 10px;
    top: 28px;
}

.ac-auth.is-password-visible .ac-orange .ac-dot-eyes {
    left: 50px;
    top: 85px;
}

.ac-auth.is-password-visible .ac-yellow .ac-dot-eyes {
    left: 20px;
    top: 35px;
}

.ac-auth.is-password-visible .ac-mouth {
    left: 10px;
    top: 88px;
}

.ac-auth.is-purple-blinking .ac-purple .ac-eye,
.ac-auth.is-black-blinking .ac-black .ac-eye {
    height: 2px;
    margin-top: 8px;
}

.ac-auth.is-purple-blinking .ac-purple .ac-eye i,
.ac-auth.is-black-blinking .ac-black .ac-eye i {
    opacity: 0;
}

.ac-visual-links {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
}

.ac-visual-links a {
    color: rgba(255,255,255,.68);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color .16s ease;
}

.ac-visual-links a:hover {
    color: #ffffff;
}

.ac-form-panel {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 5vw, 64px);
    background: #ffffff;
}

.ac-form-shell {
    width: min(100%, 420px);
}

.ac-form-head {
    margin-bottom: 34px;
    text-align: center;
}

.ac-form-head h1 {
    margin: 0 0 10px;
    color: #0b0f19;
    font-size: clamp(28px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0;
}

.ac-form-head p {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

.ac-form {
    display: grid;
    gap: 18px;
}

.ac-field {
    display: grid;
    gap: 8px;
    margin: 0;
}

.ac-field > span {
    color: #273244;
    font-size: 14px;
    font-weight: 800;
}

.ac-field .form-control,
.ac-auth .ac-input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid #d9dee8;
    border-radius: 12px;
    outline: none;
    background: #ffffff;
    color: #101828;
    font-size: 14px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ac-field .form-control::placeholder {
    color: #98a2b3;
}

.ac-field .form-control:focus {
    border-color: #6c3ff5;
    box-shadow: 0 0 0 4px rgba(108, 63, 245, .12);
    background: #ffffff;
    color: #101828;
}

.ac-password-row {
    position: relative;
}

.ac-password-row .form-control {
    padding-right: 48px;
}

.ac-password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: transparent;
    color: #667085;
    cursor: pointer;
}

.ac-password-toggle:hover {
    background: #f2f4f7;
    color: #0b0f19;
}

.ac-password-toggle svg {
    width: 19px;
    height: 19px;
}

.ac-password-toggle .ac-eye-off {
    display: none;
}

.ac-password-toggle.is-visible .ac-eye-open {
    display: none;
}

.ac-password-toggle.is-visible .ac-eye-off {
    display: block;
}

.ac-captcha-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 12px;
    align-items: end;
}

.ac-captcha-img,
.image-code.ac-captcha-img {
    width: 132px;
    height: 50px;
    object-fit: cover;
    border: 1px solid #d9dee8;
    border-radius: 12px;
    margin: 0;
    opacity: 1;
    cursor: pointer;
}

.ac-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: 2px;
}

.ac-form-row a,
.ac-switch a {
    color: #6c3ff5;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.ac-form-row a:hover,
.ac-switch a:hover {
    text-decoration: underline;
}

.ac-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #344054;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.ac-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1px solid #cfd5df;
    border-radius: 5px;
    background: #ffffff;
    position: relative;
    cursor: pointer;
}

.ac-check input:checked {
    border-color: #6c3ff5;
    background: #6c3ff5;
}

.ac-check input:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ac-submit {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 12px;
    margin-top: 2px;
    background: #0b0f19;
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(11,15,25,.16);
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}

.ac-submit:hover {
    background: #000000;
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(11,15,25,.22);
}

.ac-submit:disabled {
    cursor: wait;
    opacity: .72;
    transform: none;
}

.ac-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
    color: #98a2b3;
    font-size: 12px;
    font-weight: 800;
}

.ac-divider::before,
.ac-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eaecf0;
}

.ac-switch {
    margin: 24px 0 0;
    color: #667085;
    text-align: center;
    font-size: 14px;
}

.ac-auth-admin .ac-visual {
    background:
        radial-gradient(circle at 75% 20%, rgba(255,255,255,.15), transparent 28%),
        linear-gradient(135deg, #2f2370 0%, #4f35cd 52%, #211849 100%);
}

.ac-auth-admin .ac-submit {
    background: #111827;
}

@media (max-width: 1100px) {
    .ac-auth {
        grid-template-columns: 1fr;
        background:
            linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
            linear-gradient(135deg, #6c3ff5, #4d2dc4);
    }

    .ac-visual {
        display: none;
    }

    .ac-form-panel {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 28px 18px;
        background: transparent;
    }

    .ac-mobile-brand {
        display: flex;
    }

    .ac-form-shell {
        max-width: 440px;
        padding: 28px;
        border: 1px solid #eaecf0;
        border-radius: 22px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 24px 60px rgba(16,24,40,.12);
    }
}

@media (max-width: 540px) {
    .ac-form-panel {
        align-items: stretch;
        padding: 18px 12px;
    }

    .ac-form-shell {
        width: 100%;
        padding: 22px 18px;
        border-radius: 18px;
    }

    .ac-form-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ac-captcha-grid {
        grid-template-columns: 1fr;
    }

    .ac-captcha-img,
    .image-code.ac-captcha-img {
        width: 100%;
    }
}