/* ==============================================
   全局公共基础样式（所有认证页面统一复用）
   ============================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 0.95rem; /* 全局字体缩小，奠定统一视觉基调 */
}

body {
    /* 整页背景图：所有认证页面共用同一背景，如需单独修改可在页面专属CSS中覆盖 */
    background: #000000 url("/images/auth/login-bg.png") no-repeat center center/cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* 小屏幕内边距，防止内容溢出 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative; /* 为背景遮罩、全局Logo提供定位上下文 */
    z-index: 1;
}

/* 整页背景遮罩：提升内容可读性，不遮挡背景图层次感 */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* 轻微暗化，突出核心容器 */
    z-index: -1; /* 层级低于页面内容，不遮挡核心元素 */
}

/* 全局网站Logo：桌面端无背景色，仅保留基础样式 */
.login-logo {
    /* 核心：移除任何移动端隐藏规则，确保全设备可见 */
    position: fixed; /* 固定定位，保证布局稳定 */
    top: 1rem; /* 桌面端顶部间距 */
    left: 1rem; /* 桌面端左侧间距 */
    z-index: 9999; /* 提高层级，避免被登录容器、模态框遮挡 */
    display: block; /* 强制显示，覆盖任何可能的隐藏样式 */
    width: auto; /* logo图片宽度自适应，不拉伸变形 */
    height: auto; /* logo图片高度自适应，不拉伸变形 */
    pointer-events: auto; /* 确保点击功能正常（原有javascript:;链接有效） */
    /* 桌面端：无背景色、无额外内边距（仅保持基础定位） */
    background: none; /* 明确取消背景色 */
    padding: 0; /* 桌面端无额外内边距 */
    margin: 0;
    box-sizing: border-box;
}

.login-logo img{
    width: 110px;
    height: 28px;
}

/* 主题切换按钮：固定右上角，统一布局位置 */
.theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
}

/* ==============================================
   核心公共容器（所有认证页面统一布局）
   ============================================== */
/* 通用核心容器：左右分栏+强制等高+统一外观 */
.login-container,
.register-container,
.forgot-password-container,
.reset-password-container,
.email-verification-container {
    display: grid;
    /* 核心修改：左侧固定574px，右侧固定516px */
    grid-template-columns: 574px 516px;
    grid-auto-rows: 1fr; /* 强制左右两栏高度完全一致 */
    /* 容器总宽度 = 左侧宽度 + 右侧宽度，取消自适应 */
    max-width: 1090px;
    width: 100%;
    /*border-radius: 16px;*/
    overflow: hidden;
    box-shadow: unset !important;
    position: relative;
    z-index: 2; /* 层级高于背景遮罩 */
    /* 新增：防止子元素溢出导致的视觉异常 */
    align-items: start;
}

/* ==============================================
   左侧企业信息区域（所有认证页面统一复用）
   ============================================== */
.enterprise-section {
    padding-left: 58px;
    padding-right: 58px;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    /*gap: 1.8rem;*/
    height: 100%;
    width: 100%;
    position: relative; /* 为伪元素提供定位上下文 */
    z-index: 1;
    overflow: hidden; /* 隐藏超出容器的部分，杜绝空隙 */
    box-sizing: border-box; /* 确保padding不撑开容器，尺寸精准 */
    /* 新增：强制容器拉伸，避免高度不足（应对父容器尺寸波动） */
    min-height: 686px;
    border: rgba(160, 170, 236, 0.4) 1px solid;
    --border-opacity: 0.5;
    border-right: none;
    box-shadow: unset !important;
    /* 核心修复1：添加背景色，覆盖右侧白色背景的透色 */
    background-color: rgba(0, 0, 0, 0.1);
    /* 核心修复2：提升层级，避免被右侧内容覆盖/透色 */
    z-index: 2;
}

.enterprise-section::before {
    content: "";
    position: absolute;
    /* 关键1：超出容器上下边界，彻底覆盖留白区域（核心修复） */
    top: -10%; /* 向上延伸10%，覆盖顶部可能的空隙 */
    left: -10%; /* 向左延伸10%，兼顾左右（可选，按需保留） */
    right: -10%; /* 向右延伸10%，兼顾左右（可选，按需保留） */
    bottom: -10%; /* 向下延伸10%，覆盖底部可能的空隙 */
    /* 关键2：背景图完全覆盖伪元素，强制拉伸无留白（比cover更极致） */
    background: url("/images/auth/exprise-corner-bg.png") no-repeat;
    /*background: url("https://picsum.photos/id/1041/1920/1080") no-repeat center center;*/
    /* 强制背景图铺满，避免模糊后出现缝隙 */
    /*background-size: cover;*/
    /* 可选：background-size: cover; 若想保持图片比例，替换上面一行，配合上下延伸也可无空隙 */
    /*opacity: 0.4;*/
    z-index: -1;
    /* 新增：背景图模糊效果（核心修改） */
    /*background: #062150;*/
    backdrop-filter: saturate(100%) blur(10px);
    box-shadow: unset !important;
    /* 核心修复3：限制伪元素右边界，避免模糊到右侧区域 */
    right: 0;
}

.enterprise-title {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    padding-top: 48px;
    width: 458px;
    line-height: 33px;
    text-align: left;
    font-style: normal;
}

.enterprise-desc {
    font-size: 16px;
    line-height: 22px;
    width: 458px;
    font-weight: 400;
    margin-top: 16px;
    margin-bottom: 33px;
    color: rgba(255,255,255,0.65);
    text-align: left;
    font-style: normal;
}

/* 品牌Logo网格：3列布局，统一图片展示样式 */
.brand-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 47px;
    justify-items: stretch;
    max-width: 458px;
    width: 100%;
    margin-bottom: 30px;
}

.brand-logos .brand-item {
    width: 116px;
    height: 32px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: transparent; /* 移除多余背景色，融合父容器 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logos .brand-item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 保证图片完整，不拉伸变形 */
    display: block; /* 移除图片默认间隙 */
}

/* 区域分隔线：半透明横线，不突兀 */
.section-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(226, 232, 240, 0.2);
}

.section-divider-middle{
    margin-bottom: 30px;
}

.section-divider-bottom{
    margin-bottom: 20px;
}


/* 数据统计项：纵向布局，统一图标与文本样式 */
.stats-grid {
    display: flex;
    flex-direction: column;
    /*gap: 30px 0;*/
    max-width: 458px;
    width: 100%;
    margin-bottom: 30px;
}

.stat-item {
    display: flex;
    align-items: center;
    /*gap: 3px;*/
    width: 100%;
    padding-bottom: 30px;
}

.stat-item:last-child {
    padding-bottom: 0;
}

.stat-item .icon {
    color: #3b82f6;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    margin-right: 10px;
}

.stat-item .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.stat-item .text {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 三分栏布局，间距统一 */
    align-items: center;
    /*gap: 0 103px;*/
    flex: 1;
    flex-wrap: nowrap;
}

.stat-item .text strong {
    color: #ffffff;
    white-space: nowrap;
    font-weight: 400;
    width: 80px;
    margin-right: 63px;
    font-size: 16px;
    line-height: 25px;
    text-align: left;
    font-style: normal;
}

.stat-item .text span {
    font-weight: 400;
    font-size: 16px;
    color: rgba(255,255,255,0.65);
    line-height: 25px;
    text-align: left;
    font-style: normal;
}

/* 评分区域：统一样式，移除多余动画和背景 */
.rating {
    display: flex;
    flex-direction: column;
    /*gap: 0.3rem;*/
    max-width: 458px;
    width: 100%;
    opacity: unset !important;
    animation: unset;
    margin-bottom: 47px;
}

.rating .rating-top {
    width: 100%;
    flex-shrink: 0;
    opacity: unset !important;
    background: unset;
    animation: unset;
    margin-bottom: 1px;
}

.rating .score {
    font-size: 18px;
    color: #ffffff;
    opacity: unset !important;
    background: unset;
    animation: unset;
    font-weight: 500;
    line-height: 26px;
    text-align: left;
    font-style: normal;
    margin-right: 6px;
}

.rating .stars {
    color: #fbbf24;
    font-size:18px;
    white-space: nowrap;
    opacity: unset !important;
    background: unset;
    animation: unset;
}

.rating .rating-desc {
    font-size: 16px;
    white-space: normal;
    width: 100%;
    opacity: unset !important;
    background: unset;
    animation: unset;
    font-weight: 400;
    color: rgba(255,255,255,0.65);
    line-height: 22px;
    text-align: left;
    font-style: normal;
    height: 22px;
}

/* ==============================================
   右侧表单公共样式（所有认证页面统一复用）
   ============================================== */
/* 通用表单区域：白色背景，统一内边距和布局 */
.login-section,
.register-section,
.forgot-password-section,
.reset-password-section,
.email-verification-section {
    background: #ffffff;
    padding-top: 36px;
    padding-left: 65px;
    padding-right: 65px;
    display: flex;
    flex-direction: column;
    /*justify-content: flex-start;*/
    /*gap: 1.2rem;*/
    height: 100%;
    width: 100%;
    /* 核心修复4：设置层级，避免和左侧重叠 */
    z-index: 1;
    /* 核心修复5：强制左边界对齐，无溢出 */
    margin-left: 0;
    padding-left: 65px;
    box-sizing: border-box;
}

/* 通用表单头部：居中对齐，统一标题和副标题样式 */
.login-header,
.register-header,
.forgot-password-header,
.reset-password-header,
.email-verification-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.login-header-title,
.register-header-title,
.forgot-password-title,
.reset-password-title,
.email-verification-title {
    font-size: 22px;
    font-weight: 500;
    color: #000000;
    height: 30px;
    line-height: 30px;
    font-style: normal;
    margin-bottom: 9px;
}

.login-subtitle,
.register-subtitle,
.forgot-password-subtitle,
.reset-password-subtitle,
.email-verification-subtitle {
    font-size: 14px;
    height: 20px;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
    font-style: normal;
}

/* 通用提示框：成功/错误状态统一样式 */
.alert-box,
.error-alert {
    padding: 0.7rem;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
    width: 100%;
    /* 适配右侧516px宽度，提示框最大宽度调整为450px */
    max-width: 450px;
    align-self: center;
}

.alert-box.alert-success,
.alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #065f46;
}

.alert-box.alert-error,
.alert-error {
    background-color: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

.alert-box strong,
.error-alert strong {
    font-weight: 600;
}

/* 通用表单容器：统一布局和间距 */
.login-form,
.register-form,
.forgot-password-form,
.reset-password-form,
.email-verification-form {
    display: flex;
    flex-direction: column;
    /*gap: 18px;*/
    width: 100%;
    /* 适配右侧516px宽度，表单最大宽度调整为450px */
    max-width: 450px;
    align-self: center;
    flex: 1; /* 填充剩余空间，保证布局稳定 */
}

/* 通用字段集：统一图例和输入框布局 */
.fieldset {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*width: 100%;*/
    margin-bottom: 18px;
}


.fieldset-legend {
    height: 20px;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #666666 !important;
    line-height: 20px !important;
    text-align: left;
    font-style: normal;
    margin-bottom: 6px;
}

/* 通用输入框：带图标布局，统一聚焦样式 */
.input {
    display: flex;
    align-items: center;
    gap: unset !important;
    padding: 13px 0 13px 11px;
    width: 100%;
    height: 46px;
    border-radius: 8px;
    border: 1px solid #A3A6B1;
}

.input:focus-within {
    border-color: #3b82f6;
    outline: none;
}

.input .iconify {
    width: 20px;
    height: 20px;
    color: #666666;
    margin-right: 7px;
}

.input .grow,
.input input {
    font-size: 14px;
    height: 20px;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
    text-align: left;
    font-style: normal;
}

.input :where(input){
    color: #222222 !important;
}

/* 验证码输入框特殊样式：居中对齐，加大字体 */
.email-verification-form .input .grow {
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

.input input::placeholder {
    color: #94a3b8;
    font-size: 0.8rem;
}

.input .swap {
    margin-right: 11px;
    cursor: pointer;
    flex-shrink: 0;
}

/* 验证码图片：统一大小和样式 */
.captcha-group {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    width: 100%;
}

.captcha-group .input {
    flex: 1;
    width: 100%;
}

.captcha-img {
    width: 90px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

/* 通用表单选项：复选框+链接样式统一 */
.form-options {
    display: flex;
    flex-direction: column;
    /*gap: 15px;*/
    margin-top: 14px;
    width: 100%;
    margin-bottom: 23px;
}

.option-item {
    display: flex;
    align-items: center;
    /*gap: 0.8rem;*/
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 15px;
    height: 20px;
    font-weight: 400;
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    text-align: left;
    font-style: normal;
}

.option-item:last-child {
    margin-bottom: 0;
}

.checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid #177BFF;
    margin-right: 8px;
}

.checkbox:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.checkbox:checked::after,
.checkbox:checked::before {
    color: #ffffff;
    width: 11px;
    height: 11px;
}

.option-item a,
.option-item .text-primary {
    color: #3b82f6;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}

.option-item a:hover,
.option-item .text-primary:hover {
    text-decoration: underline;
}

/* 通用按钮：主按钮/轮廓按钮样式统一 */
.btn {
    padding: 13px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /*gap: 0.8rem;*/
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    max-width: unset;
    height: 46px;
    margin-bottom: 20px;
}

.btn .iconify{
    width: 18px;
    height: 18px;
    margin-right: 5px;
}

.btn-primary {
    height: 46px;
    background: #177BFF;
    border-radius: 8px;
    gap: unset;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 20px;
    text-align: left;
    font-style: normal;
}

.btn-primary:hover {
    background-color: #2563eb;
    /*box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);*/
}

.btn-outline {
    color: #475569;
    border-radius: 8px;
    border: 1px solid #000000;
    padding: 14px 0;
    gap: unset;
    margin-bottom: 15px;
}

.btn-outline img{
    width: 22px;
    height: 22px;
    margin-right: 8px;
}

.btn-outline:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.05);
}

/* 通用表单链接：居中对齐，统一样式 */
.form-links {
    font-size: 14px;
    width: 100%;
    text-align: center;
    height: 20px;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
    font-style: normal;
    margin-bottom: 22px;
}

.form-links:last-child {
    margin-bottom: 39px;
}

.form-links a {
    color: #3b82f6;
    text-decoration: none;
}

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

/* 通用分隔线：or分隔样式统一 */
.divider {
    display: flex;
    align-items: center;
    width: 100%;
    height: 20px;
    font-weight: 400;
    font-size: 14px;
    color: #222222;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    margin-bottom: 29px;
}

.divider:not(:empty){
    gap: 14px;
}

.divider::before,
.divider::after {
    content: "";
    height: 2px;
    background-color: #E7E7E8;
    /* 核心修复6：限制分隔线伪元素宽度，避免溢出 */
    flex: 1;
    max-width: 180px;
}

.divider span {
    white-space: nowrap;
}

/* 通用模态框：统一弹窗样式和动画 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.modal[open] {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.6rem;
    max-width: 450px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    color: #1e293b;
}

.modal-box h3 {
    font-size: 1rem;
    color: #1e293b;
    margin-bottom: 0.7rem;
    font-weight: 600;
}

.modal-box p {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0.7rem;
}

.modal-box h4 {
    font-size: 0.9rem;
    color: #1e293b;
    margin: 1.2rem 0 0.4rem;
    font-weight: 600;
}

.modal-action {
    margin-top: 1.6rem;
    text-align: right;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 验证码说明文本：统一辅助文本样式 */
.verification-desc {
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.verification-desc .email-highlight {
    font-weight: 500;
    color: #1e293b;
}

/* ==============================================
   响应式适配（所有认证页面统一复用）
   ============================================== */
/* 平板端（≤1024px）：全屏铺满，显示logo背景色，消除左右空白 */
@media (max-width: 1024px) {
    .enterprise-section,
    body::before {
        display: none !important;
    }
    .login-logo {
        top: 0;
        left: 0;
        right: 0;
        width: 100vw; /* 元素本身宽度强制占满视口 */
        max-width: 100vw; /* 取消任何最大宽度限制 */
        margin: 0; /* 清除所有外边距 */
        padding: 1.8rem 0 1.8rem 1.8rem; /* 右侧内边距0，仅保留左侧和上下 */
        background: #00031C; /* 平板端背景色 */
        box-sizing: border-box; /* 内边距不撑开宽度 */
        position: fixed; /* 锁定固定定位 */
        /* 移除transform缩放，改为直接控制logo图片尺寸（替代scale(0.9)） */
        max-height: 60px; /* 按需调整，对应原scale(0.9)的视觉大小，可自行微调 */
        object-fit: contain; /* 保证logo图片不变形 */
        transform: none; /* 强制清除任何缩放变形 */
        transform-origin: unset; /* 清除缩放基准，无需再使用 */
        display: flex;
        align-items: center;
    }
    body {
        background: #f9fafb;
        padding: 0;
        margin: 0;
        align-items: stretch;
        justify-content: stretch;
        width: 100vw;
        overflow-x: hidden;
    }

    .login-container,
    .register-container,
    .forgot-password-container,
    .reset-password-container,
    .email-verification-container {
        display: block;
        max-width: 100vw;
        height: 100vh;
        box-shadow: none;
        border-radius: 0;
        overflow: auto;
        padding: 0;
        margin: 0;
    }

    .login-section,
    .register-section,
    .forgot-password-section,
    .reset-password-section,
    .email-verification-section {
        padding: 6.5rem 2rem;
        gap: 1.5rem;
        height: 100%;
        overflow-y: auto;
    }

    .login-form,
    .register-form,
    .forgot-password-form,
    .reset-password-form,
    .email-verification-form {
        max-width: 100%;
    }

    .alert-box,
    .error-alert,
    .btn {
        max-width: 100%;
        width: 100%;
    }

    .login-header-title,
    .register-header-title,
    .forgot-password-title,
    .reset-password-title,
    .email-verification-title {
        font-size: 1.6rem;
        margin-bottom: 0.8rem;
    }
}

/* 手机端（≤768px）：严格遵循指定内边距，显示logo背景色，消除左右空白 */
@media (max-width: 768px) {
    .login-logo {
        top: 0;
        left: 0;
        right: 0;
        width: 100vw; /* 元素本身宽度强制占满视口 */
        max-width: 100vw; /* 取消任何最大宽度限制 */
        margin: 0; /* 清除所有外边距 */
        padding: 1.8rem 0 1.8rem 1.8rem; /* 右侧内边距0，保留你指定的左侧和上下 */
        background: #00031C; /* 手机端背景色 */
        box-sizing: border-box; /* 内边距不撑开宽度 */
        position: fixed; /* 锁定固定定位 */
        /* 移除transform缩放，改为直接控制logo图片尺寸（替代scale(0.9)） */
        max-height: 55px; /* 按需调整，对应原scale(0.9)的视觉大小，可自行微调 */
        object-fit: contain; /* 保证logo图片不变形 */
        transform: none; /* 强制清除任何缩放变形 */
        transform-origin: unset; /* 清除缩放基准，无需再使用 */
        display: flex;
        align-items: center;
    }
    .login-section,
    .register-section,
    .forgot-password-section,
    .reset-password-section,
    .email-verification-section {
        padding: 6.5rem 1.5rem;
        gap: 1.2rem;
    }

    .input {
        padding: 0.8rem 0.9rem;
    }

    .checkbox {
        width: 18px;
        height: 18px; /* 增大复选框，提升触屏点击精准度 */
    }

    .btn {
        padding: 0.8rem 0.9rem;
    }

    .login-header-title,
    .register-header-title,
    .forgot-password-title,
    .reset-password-title,
    .email-verification-title {
        font-size: 1.4rem;
        margin-bottom: 0.6rem;
    }
}