:root {
    --auth-rose: #ef3158;
    --auth-rose-deep: #d91f49;
    --auth-rose-soft: #fff0f3;
    --auth-rose-mist: #fff8fa;
    --auth-ink: #28191f;
    --auth-muted: #7b6a71;
    --auth-line: #ecdde2;
    --auth-white: #ffffff;
}

.default-home-auth,
.default-home-auth input,
.default-home-auth button {
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

.default-home-auth {
    min-height: 100dvh;
    overflow-x: hidden;
    color: var(--auth-ink);
    background:
        radial-gradient(circle at 8% 0%, rgba(239, 49, 88, .11), transparent 29rem),
        radial-gradient(circle at 92% 100%, rgba(247, 151, 174, .14), transparent 32rem),
        #fffafb;
}

.default-home-auth .auth-site-header {
    width: min(1240px, calc(100% - 48px));
    height: 76px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.default-home-auth .auth-site-brand {
    min-width: 130px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    color: var(--auth-ink);
    text-decoration: none;
}

.default-home-auth .auth-site-brand img {
    display: block;
    width: auto;
    max-width: 176px;
    height: 48px;
    object-fit: contain;
}

.default-home-auth .auth-site-brand strong {
    font-size: 20px;
    font-weight: 800;
}

.default-home-auth .auth-site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.default-home-auth .auth-site-nav a {
    position: relative;
    color: #5f5056;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.default-home-auth .auth-site-nav a:hover,
.default-home-auth .auth-site-nav a:focus-visible {
    color: var(--auth-rose);
}

.default-home-auth .auth-site-nav .auth-role-link {
    min-width: 94px;
    height: 38px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--auth-rose);
    border: 1px solid #f4cbd5;
    border-radius: 10px;
    background: rgba(255, 255, 255, .76);
}

.default-home-auth > .container {
    position: relative;
    isolation: isolate;
    width: min(1240px, calc(100% - 48px));
    height: calc(100dvh - 100px);
    min-height: 590px;
    max-height: 720px;
    margin: 10px auto 14px;
    overflow: hidden;
    background: var(--auth-white);
    border: 1px solid rgba(228, 204, 211, .72);
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(80, 31, 46, .12);
}

.default-home-auth > .container::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 0;
    width: 48%;
    height: 100%;
    border-radius: 0;
    transform: none;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .94) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 72%, rgba(239, 49, 88, .16) 0 2px, transparent 3px),
        linear-gradient(145deg, #fff8fa 0%, #ffe9ef 56%, #fff4f7 100%);
    transition: none;
}

.default-home-auth > .container::after {
    content: "";
    position: absolute;
    left: -120px;
    bottom: -250px;
    z-index: 1;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(239, 49, 88, .18);
    border-radius: 50%;
    box-shadow:
        0 0 0 48px rgba(239, 49, 88, .035),
        0 0 0 108px rgba(239, 49, 88, .025);
    pointer-events: none;
}

.default-home-auth .forms-container {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 5;
    width: 52%;
    height: 100%;
}

.default-home-auth .signin-signup,
.default-home-auth .container.sign-up-mode .signin-signup {
    position: absolute;
    top: 50%;
    right: 0;
    left: auto;
    width: 100%;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 1fr;
    transition: none;
}

.default-home-auth .signin-signup form {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 34px 50px;
    overflow: visible;
    align-items: stretch;
    transition: opacity .24s ease, transform .24s ease;
}

.default-home-auth .signin-signup form.sign-in-form {
    z-index: 2;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.default-home-auth .signin-signup form.sign-up-form {
    z-index: 1;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.default-home-auth .container.sign-up-mode form.sign-in-form {
    z-index: 1;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.default-home-auth .container.sign-up-mode form.sign-up-form {
    z-index: 2;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.default-home-auth .title {
    margin: 0 0 8px;
    color: var(--auth-ink);
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -.04em;
    text-align: left;
}

.default-home-auth .title::after {
    display: block;
    margin-top: 9px;
    color: var(--auth-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
}

.default-home-auth.auth-role-buyer .sign-in-form .title::after {
    content: "登录后集中查看订单、卡密与售后进度";
}

.default-home-auth.auth-role-buyer .sign-up-form .title::after {
    content: "使用 QQ 邮箱创建账号，统一管理购买记录";
}

.default-home-auth.auth-role-merchant .sign-in-form .title::after {
    content: "进入经营工作台，继续处理商品、订单与资金";
}

.default-home-auth.auth-role-merchant .sign-up-form .title::after {
    content: "创建商户账号，开启你的数字经营空间";
}

.default-home-auth.auth-mode-forget .sign-in-form .title::after {
    content: "完成身份验证后设置新的登录密码";
}

.default-home-auth .input-field {
    width: 100%;
    max-width: none;
    height: 54px;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.default-home-auth .input-field:focus-within {
    background: #fff;
    border-color: #f07b95;
    box-shadow: 0 0 0 4px rgba(239, 49, 88, .09);
}

.default-home-auth .input-field i {
    flex: 0 0 48px;
    width: 48px;
    line-height: 54px;
    color: #b8a5ac;
    font-size: 17px;
}

.default-home-auth .input-field input {
    width: 100%;
    min-width: 0;
    height: 52px;
    padding: 0 14px 0 0;
    color: var(--auth-ink);
    font-size: 15px;
    font-weight: 600;
}

.default-home-auth .input-field input::placeholder {
    color: #aa9ba1;
    font-weight: 500;
}

.default-home-auth .login-captcha {
    position: static;
    flex: 0 0 136px;
    width: 136px;
    height: 50px;
    margin-right: 2px;
    border-radius: 10px;
    object-fit: fill;
}

.default-home-auth .get_mobile {
    position: static;
    flex: 0 0 auto;
    width: auto;
    min-width: 122px;
    height: 42px;
    margin-right: 5px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--auth-rose);
    background: var(--auth-rose-soft);
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    opacity: 1;
    white-space: nowrap;
}

.default-home-auth .btn {
    width: 100%;
    max-width: none;
    height: 52px;
    margin: 18px 0 0;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--auth-rose), var(--auth-rose-deep));
    border: 0;
    border-radius: 12px;
    box-shadow: 0 14px 28px rgba(217, 31, 73, .2);
    font-size: 15px;
    font-weight: 800;
    line-height: 1 !important;
    text-decoration: none;
    text-transform: none;
    opacity: 1;
    transition: transform .18s ease, box-shadow .18s ease;
}

.default-home-auth .btn:hover {
    background: linear-gradient(135deg, #f33a60, #d51b45);
    box-shadow: 0 17px 32px rgba(217, 31, 73, .25);
}

.default-home-auth .btn:active {
    transform: translateY(1px);
}

.default-home-auth .sign-in-form > div[style*="max-width"] {
    width: 100% !important;
    max-width: none !important;
    margin-top: 13px;
    font-size: 13px;
}

.default-home-auth .sign-in-form > div[style*="max-width"] a {
    color: var(--auth-rose) !important;
    font-weight: 700;
}

.default-home-auth .social-text {
    padding: 14px 0 8px;
    color: var(--auth-muted);
    font-size: 12px;
    text-align: center;
}

.default-home-auth .social-icon {
    width: 40px;
    height: 40px;
    color: var(--auth-rose);
    border-color: #f0ccd5;
}

.default-home-auth .social-icon:hover {
    color: #fff;
    background: var(--auth-rose);
    border-color: var(--auth-rose);
}

.default-home-auth .panels-container {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 3;
    width: 48%;
    height: 100%;
    display: block;
}

.default-home-auth .panel {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 80px 70px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    pointer-events: none;
    transition: opacity .24s ease, transform .24s ease;
}

.default-home-auth .panel .content {
    position: relative;
    z-index: 3;
    max-width: 390px;
    color: var(--auth-ink);
    transform: none;
    transition: none;
}

.default-home-auth .panel .content::before {
    content: "SECURE ACCESS";
    display: inline-flex;
    height: 28px;
    margin-bottom: 24px;
    padding: 0 11px;
    align-items: center;
    color: var(--auth-rose);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(239, 49, 88, .18);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.default-home-auth.auth-role-buyer .panel .content::before {
    content: "BUYER ACCESS";
}

.default-home-auth.auth-role-merchant .panel .content::before {
    content: "MERCHANT ACCESS";
}

.default-home-auth .panel h3 {
    color: var(--auth-ink);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.045em;
}

.default-home-auth .panel p {
    max-width: 370px;
    padding: 18px 0 28px;
    color: #705e65;
    font-size: 15px;
    line-height: 1.85;
}

.default-home-auth .panel .btn.transparent {
    width: auto;
    min-width: 144px;
    height: 44px;
    margin: 0;
    padding: 0 20px;
    color: var(--auth-rose);
    background: #fff;
    border: 1px solid #efbdc9;
    border-radius: 11px;
    box-shadow: 0 10px 24px rgba(116, 43, 63, .08);
    font-size: 13px;
}

.default-home-auth .panel .image {
    display: none;
}


.default-home-auth .left-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.default-home-auth .right-panel {
    opacity: 0;
    transform: translateY(12px);
}

.default-home-auth .container.sign-up-mode .left-panel {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.default-home-auth .container.sign-up-mode .right-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.default-home-auth.auth-mode-forget .panel .content::before {
    content: "ACCOUNT RECOVERY";
}

.default-home-auth.auth-mode-forget .panel h3,
.default-home-auth.auth-mode-forget .panel p {
    font-size: 0;
}

.default-home-auth.auth-mode-forget.auth-role-buyer .panel h3::before {
    content: "找回你的购买记录";
}

.default-home-auth.auth-mode-forget.auth-role-merchant .panel h3::before {
    content: "安全返回经营工作台";
}

.default-home-auth.auth-mode-forget .panel h3::before {
    display: block;
    font-size: 38px;
    line-height: 1.22;
}

.default-home-auth.auth-mode-forget.auth-role-buyer .panel p::before {
    content: "通过绑定邮箱完成验证，重新设置买家账号密码。";
}

.default-home-auth.auth-mode-forget.auth-role-merchant .panel p::before {
    content: "通过绑定手机号完成验证，重新设置商户账号密码。";
}

.default-home-auth.auth-mode-forget .panel p::before {
    display: block;
    font-size: 15px;
    line-height: 1.85;
}

@media (prefers-reduced-motion: no-preference) {
    .default-home-auth > .container {
        animation: auth-enter .45s cubic-bezier(.2, .75, .25, 1) both;
    }

    .default-home-auth .panel .content {
        animation: auth-content-enter .55s .08s cubic-bezier(.2, .75, .25, 1) both;
    }
}

@keyframes auth-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes auth-content-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .default-home-auth .auth-site-header {
        width: min(100% - 32px, 680px);
    }

    .default-home-auth .auth-site-nav {
        gap: 16px;
    }

    .default-home-auth .auth-site-nav > a:not(.auth-role-link) {
        display: none;
    }

    .default-home-auth > .container {
        width: min(680px, calc(100% - 32px));
        min-height: 650px;
        height: auto;
        max-height: none;
    }

    .default-home-auth > .container::before {
        width: 100%;
        height: 164px;
    }

    .default-home-auth > .container::after {
        top: -370px;
        right: -220px;
        bottom: auto;
        left: auto;
    }

    .default-home-auth .panels-container {
        inset: 0 0 auto;
        width: 100%;
        height: 164px;
    }

    .default-home-auth .panel {
        padding: 28px 34px;
        justify-content: flex-start;
    }

    .default-home-auth .panel .content {
        max-width: 100%;
    }

    .default-home-auth .panel .content::before {
        margin-bottom: 10px;
    }

    .default-home-auth .panel h3 {
        font-size: 24px;
    }

    .default-home-auth .panel p {
        display: none;
    }

    .default-home-auth .panel .btn.transparent {
        position: absolute;
        top: 68px;
        right: 34px;
    }

    .default-home-auth .forms-container {
        inset: 164px 0 0;
        width: 100%;
        height: calc(100% - 164px);
    }

    .default-home-auth .signin-signup,
    .default-home-auth .container.sign-up-mode .signin-signup {
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
    }
}

@media (max-width: 560px) {
    .default-home-auth .auth-site-header {
        width: calc(100% - 28px);
        height: 66px;
    }

    .default-home-auth .auth-site-brand img {
        max-width: 140px;
        height: 42px;
    }

    .default-home-auth .auth-site-nav {
        gap: 10px;
    }

    .default-home-auth .auth-site-nav .auth-role-link {
        min-width: 82px;
        height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }

    .default-home-auth > .container {
        width: calc(100% - 20px);
        min-height: 548px;
        margin-top: 4px;
        border-radius: 20px;
    }

    .default-home-auth > .container.sign-up-mode,
    .default-home-auth.auth-mode-forget > .container {
        min-height: 580px;
    }

    .default-home-auth > .container.sign-up-mode:has(#reg_mobile_code) {
        min-height: 644px;
    }

    .default-home-auth > .container::before {
        height: 82px;
        background: linear-gradient(135deg, #fff8fa 0%, #ffedf2 100%);
    }

    .default-home-auth > .container::after {
        display: none;
    }

    .default-home-auth .panels-container {
        height: 82px;
    }

    .default-home-auth .panel {
        padding: 0 22px;
        align-items: center;
    }

    .default-home-auth .panel .content::before {
        display: none;
    }

    .default-home-auth .panel h3 {
        display: none;
    }

    .default-home-auth .panel .content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    .default-home-auth .panel .content::after {
        color: var(--auth-ink);
        font-size: 14px;
        font-weight: 800;
        line-height: 1.45;
        white-space: nowrap;
    }

    .default-home-auth.auth-role-buyer .left-panel .content::after {
        content: "还没有买家账号？";
    }

    .default-home-auth.auth-role-buyer .right-panel .content::after {
        content: "已有买家账号？";
    }

    .default-home-auth.auth-role-merchant .left-panel .content::after {
        content: "还没有商户账号？";
    }

    .default-home-auth.auth-role-merchant .right-panel .content::after {
        content: "已有商户账号？";
    }

    .default-home-auth.auth-mode-forget .left-panel .content::after {
        content: "返回账号登录";
    }

    .default-home-auth .panel .btn.transparent {
        position: static;
        order: 2;
        flex: 0 0 auto;
        min-width: 82px;
        height: 36px;
        padding: 0 14px;
        border-radius: 10px;
        box-shadow: none;
    }

    .default-home-auth .panel .content::after {
        order: 1;
    }

    .default-home-auth .forms-container {
        inset: 82px 0 0;
        height: calc(100% - 82px);
    }

    .default-home-auth .signin-signup form {
        padding: 24px 22px 28px;
    }

    .default-home-auth .title {
        font-size: 26px;
    }

    .default-home-auth .input-field {
        height: 52px;
    }

    .default-home-auth .login-captcha {
        flex-basis: 126px;
        width: 126px;
        height: 48px;
    }

    .default-home-auth .get_mobile {
        min-width: 106px;
        padding: 0 10px;
    }
}