@charset "utf-8";
/* ==========================================================================
   哇虎科技 - 商家端登录 / 注册 / 找回密码 专用样式
   ---------------------------------------------------------------------------
   适用范围：仅 app/merchant/view/index/{login,register,forget}.html 三个页面。

   为什么单独建一个文件：
     mall.css 是商家后台全部页面共用的样式表（6700+ 行），
     .user-login / .login-loginForm / .el-button 这些选择器一旦直接修改，
     会污染整个后台。所以这里把所有规则都限制在 .auth-page 作用域内，
     只在上述三个页面引入，mall.css 保持零改动。

   设计对齐首页（static/css/index/home.css）：
     主色 #2563eb → #4f46e5 渐变、文字 #0f172a、次要文字 #64748b、
     分割线 #e6ebf2、浅底 #f6f8fc、卡片圆角 16~20px、按钮胶囊形。
   ========================================================================== */

.auth-page {
    /* 覆盖 common.css 的 html,body 背景与字号，避免边缘露出 #f7f8fa */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: #0f172a;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: hidden;
}

/* 与首页 hero 同款的径向光斑，避免纯白背景显得空旷 */
.auth-page::before {
    content: "";
    position: absolute;
    top: -300px;
    left: 50%;
    width: 1100px;
    height: 780px;
    margin-left: -550px;
    background: radial-gradient(closest-side, rgba(37, 99, 235, .14), rgba(37, 99, 235, 0));
    pointer-events: none;
}

.auth-page::after {
    content: "";
    position: absolute;
    bottom: -220px;
    right: -180px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(79, 70, 229, .13), rgba(79, 70, 229, 0));
    pointer-events: none;
}

.auth-page a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: color .2s, border-color .2s, background .2s, box-shadow .2s, -webkit-transform .2s;
    transition: color .2s, border-color .2s, background .2s, box-shadow .2s, transform .2s;
}

/* ------------------- 顶部：logo + 返回首页 ------------------- */
.auth-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 22px 24px;
}

.auth-brand {
    display: inline-flex;
    align-items: center;
}

.auth-brand img {
    display: block;
    height: 50px;
    width: auto;
}

.auth-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #e6ebf2;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
}

.auth-back:hover {
    color: #2563eb;
    border-color: #bcd0f5;
    background: #eff6ff;
}

/* ------------------- 主体：表单卡 + 品牌侧栏 ------------------- */
.auth-main {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: grid;
    /* 桌面端：品牌侧栏在左（1fr），登录表单在右（500px） */
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    /* 两栏等高：align-items: stretch 让两块拉伸到同一高度。
       align-content: center 用来把整行按内容高度居中，
       否则 auto 行会被拉满整个 .auth-main 高度，两块都变得极高。 */
    align-content: center;
    align-items: stretch;
    gap: 40px;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 24px 24px 48px;
}

/* 表单在 DOM 中保持在前：读屏与键盘用户应优先到达登录表单，
   而不是先 Tab 过品牌侧栏里的电话链接。
   桌面端只用 order 把它摆到右侧（不改 DOM），
   移动端在下方媒体查询里再把表单放回第一位。 */
.auth-aside {
    order: 1;
}

.auth-card {
    order: 2;
}

/* 两栏高度由内容较多的一侧决定，较短的一侧会被拉伸，
   所以把两侧内容各自垂直居中，避免在底部留出一段空白 */
.auth-card,
.auth-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-card {
    padding: 40px 40px 34px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e6ebf2;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .10);
}

.auth-card-head h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #0b1220;
}

.auth-card-head p {
    margin: 8px 0 0;
    font-size: 14px;
    color: #64748b;
}

/* ------------------- 表单（Element UI 覆盖） ------------------- */
.auth-form {
    margin-top: 26px;
}

.auth-page .auth-form .el-form-item {
    margin-bottom: 18px;
}

.auth-page .auth-form .el-form-item__label {
    display: block;
    float: none;
    width: 100% !important;
    padding: 0 0 7px;
    line-height: 1.4;
    text-align: left;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
}

.auth-page .auth-form .el-form-item__content {
    margin-left: 0 !important;
    line-height: normal;
}

.auth-page .auth-form .el-input__inner {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    background: #fff;
    font-size: 15px;
    color: #0f172a;
    box-shadow: none;
    -webkit-transition: border-color .2s, box-shadow .2s;
    transition: border-color .2s, box-shadow .2s;
}

.auth-page .auth-form .el-input__inner::-webkit-input-placeholder {
    color: #a8b4c4;
}

.auth-page .auth-form .el-input__inner::placeholder {
    color: #a8b4c4;
}

.auth-page .auth-form .el-input__inner:hover {
    border-color: #c9d6ea;
}

.auth-page .auth-form .el-input__inner:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.auth-page .auth-form .el-form-item.is-error .el-input__inner {
    border-color: #ef4444;
}

.auth-page .auth-form .el-form-item.is-error .el-input__inner:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}

.auth-page .auth-form .el-form-item__error {
    padding-top: 5px;
    font-size: 12.5px;
    color: #ef4444;
}

/* 主按钮：与首页 btn-primary 同一套渐变与胶囊形 */
.auth-page .auth-form .el-button--primary,
.auth-page .auth-form .el-button {
    width: 100%;
    height: 48px;
    margin: 8px 0 0;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: -webkit-linear-gradient(135deg, #2563eb, #4f46e5);
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .28);
}

.auth-page .auth-form .el-button:hover,
.auth-page .auth-form .el-button:focus {
    color: #fff;
    border-color: transparent;
    background: -webkit-linear-gradient(135deg, #1d4ed8, #4338ca);
    background: linear-gradient(135deg, #1d4ed8, #4338ca);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, .34);
}

.auth-page .auth-form .el-button.is-loading {
    -webkit-transform: none;
    transform: none;
    opacity: .85;
}

.auth-page .auth-form .el-button--primary.is-disabled,
.auth-page .auth-form .el-button--primary.is-disabled:hover {
    -webkit-transform: none;
    transform: none;
    opacity: .7;
    box-shadow: none;
}

/* 短信验证码：输入框 + 右侧获取按钮 同一行 */
.auth-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-code-row .el-input {
    flex: 1 1 auto;
    min-width: 0;
}

.auth-code {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #c9d6ea;
    background: #fff;
    color: #2563eb;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}

.auth-code:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

.auth-code.is-counting,
.auth-code:disabled {
    border-color: #e6ebf2;
    background: #f6f8fc;
    color: #94a3b8;
    cursor: not-allowed;
}

/* ------------------- 卡内辅助信息 ------------------- */
.auth-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
    font-size: 13.5px;
    color: #64748b;
}

.auth-links a {
    color: #2563eb;
    font-weight: 600;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-terms {
    margin: 16px 0 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: #94a3b8;
}

.auth-hint {
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #eff6ff;
    border: 1px solid #d7e6ff;
    font-size: 13px;
    line-height: 1.7;
    color: #1d4ed8;
}

/* 「注册后会发生什么」三步说明 */
.auth-next {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px dashed #e6ebf2;
}

.auth-next h2 {
    margin: 0 0 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
}

.auth-next ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    counter-reset: auth-step;
}

.auth-next li {
    position: relative;
    padding-left: 34px;
    counter-increment: auth-step;
}

.auth-next li::before {
    content: counter(auth-step);
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.auth-next li b {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #0f172a;
}

.auth-next li span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #64748b;
}

/* ------------------- 品牌侧栏 ------------------- */
.auth-aside {
    position: relative;
    padding: 44px 40px;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(150deg, #1e40af 0%, #4f46e5 60%, #06b6d4 135%);
}

.auth-aside::before {
    content: "";
    position: absolute;
    left: -110px;
    bottom: -170px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}

.auth-aside > * {
    position: relative;
}

.auth-aside-badge {
    display: inline-block;
    margin: 0;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 12.5px;
    font-weight: 600;
}

.auth-aside h2 {
    margin: 20px 0 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.6px;
}

.auth-aside ul {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.auth-aside li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    line-height: 1.8;
    opacity: .95;
}

.auth-aside li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 12px;
    height: 7px;
    border-left: 2px solid rgba(255, 255, 255, .85);
    border-bottom: 2px solid rgba(255, 255, 255, .85);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.auth-aside-contact {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 13px;
    opacity: .92;
}

.auth-aside-contact span {
    display: block;
    margin-bottom: 2px;
}

.auth-aside-contact a {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .3px;
}

.auth-aside-contact a:hover {
    text-decoration: underline;
}

/* ------------------- 页脚 ------------------- */
.auth-foot {
    position: relative;
    z-index: 2;
    padding: 18px 24px 26px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.9;
    color: #94a3b8;
}

.auth-foot a {
    color: #64748b;
}

.auth-foot a:hover {
    color: #2563eb;
}

/* ------------------- 键盘可达性 ------------------- */
.auth-page a:focus-visible,
.auth-page button:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ------------------- 响应式 ------------------- */
@media (max-width: 1024px) {
    .auth-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        max-width: 560px;
        padding: 16px 24px 40px;
    }

    /* 表单优先：移动端先看到输入框，品牌内容在下方 */
    .auth-card {
        order: 1;
    }

    .auth-aside {
        order: 2;
        padding: 32px 28px;
    }

    .auth-aside h2 {
        font-size: 24px;
    }
}

@media (max-width: 560px) {
    .auth-page {
        font-size: 14.5px;
    }

    .auth-header {
        padding: 16px;
    }

    .auth-brand img {
        height: 28px;
    }

    .auth-back {
        padding: 6px 13px;
        font-size: 12.5px;
    }

    .auth-main {
        padding: 8px 16px 32px;
    }

    .auth-card {
        padding: 28px 20px 24px;
        border-radius: 16px;
    }

    .auth-card-head h1 {
        font-size: 23px;
    }

    .auth-aside {
        padding: 26px 22px;
        border-radius: 16px;
    }

    .auth-foot {
        padding: 14px 16px 22px;
    }

    /* 验证码按钮变窄，避免与小屏输入框挤压 */
    .auth-code {
        padding: 0 12px;
        font-size: 13px;
    }
}

/* ------------------- 减少动效 ------------------- */
@media (prefers-reduced-motion: reduce) {
    .auth-page a,
    .auth-page .auth-form .el-input__inner,
    .auth-code {
        -webkit-transition: none !important;
        transition: none !important;
    }

    .auth-page .auth-form .el-button:hover {
        -webkit-transform: none;
        transform: none;
    }
}