/* -------------------- 通用样式 -------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: url(/images/bg.png);
    /* color: #ffffff; */
    display: flex;
    justify-content: center;
    align-items: center; /* 改为居中对齐 */
    min-height: 100vh;
    padding: clamp(5px, 1.5vh, 15px) clamp(8px, 1.5vw, 20px); /* 减小垂直padding */
    padding-top: clamp(4vh, 8vh, 12vh); /* 减小顶部padding */
    overflow-x: hidden; /* 防止横向滚动 */
}

/* -------------------- 背景容器 -------------------- */
.background-container {
    width: 100%;
    max-width: 100%; /* 移除最大宽度限制，允许100%显示 */
    position: relative;
    padding: clamp(8px, 1.5vh, 25px) clamp(10px, 2vw, 40px); /* 减小垂直padding */
    padding-bottom: clamp(8px, 2vh, 25px); /* 减少底部padding */
    z-index: 1;
    box-sizing: border-box; /* 确保padding包含在宽度内 */
}

/* -------------------- 主体布局容器 -------------------- */
.login-page-container {
    display: flex;
    justify-content: center; /* 确保内容在可用宽度内居中 */
    align-items: center; /* 改为居中对齐 */
    gap: clamp(8px, 1.8vw, 35px); /* 减小间距，让左右更紧凑 */
    padding: 0; /* 移除padding，由外层控制 */
    max-width: 100%; /* 确保不超过容器宽度 */
    margin: 0 auto; /* 居中 */
    flex-wrap: wrap; /* 允许换行，防止重叠 */
    width: 100%; /* 确保不超出父容器 */
    box-sizing: border-box; /* 确保padding和gap包含在宽度内 */
}

/* -------------------- 左侧内容区（标语图和轮播图） -------------------- */
.left-content {
    display: flex;
    flex-direction: column;
    /* 不强制整体居中，保留上下标语图的左右错位布局 */
    flex-shrink: 1; /* 允许收缩，避免重叠 */
    /* 设置最小和最大宽度，避免太窄或太宽 */
    min-width: clamp(380px, 32vw, 450px); /* 恢复一些最小宽度，确保左侧内容不被移除 */
    max-width: 700px; /* 减小最大宽度，避免溢出 */
    width: clamp(380px, 44vw, 700px); /* 减小宽度比例，避免溢出 */
    margin-left: clamp(80px, 10vw, 150px); /* 继续大幅增加左边距，让左侧元素更靠右移动 */
}

.slogan-img {
    max-width: 100%;
    height: auto;
    /* 控制标语图的上下间距 */
    margin: clamp(8px, 1.5vh, 12px) 0; /* 减小垂直margin */
}

    .slogan-img.top {
        align-self: flex-start; /* 关键：顶部标语图靠左 */
    }

    .slogan-img.bottom {
        align-self: flex-end; /* 关键：底部标语图靠右 */
    }

.ad-banner-wrapper {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin: clamp(10px, 2vh, 15px) 0; /* 减小垂直margin */
    /* 轮播图保持居中，同时不影响标语图错位布局 */
    align-self: center;
    width: 100%; /* 确保轮播图容器撑满 */
}

.ad-banner {
    display: block;
    max-width: 100%;
    height: auto;
}


/* -------------------- 右侧登录卡片 -------------------- */
.login-card {
    background-color: rgba(86, 52, 127, 0.70); /* 等效于 #56347FB2 */
    padding: clamp(15px, 2.5vh, 35px) clamp(22px, 3.5vw, 55px); /* 减小垂直和水平内边距 */
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    /* 使用 clamp 自动缩放宽度，避免溢出和固定宽度导致的挤压 */
    width: clamp(330px, 25vw, 420px); /* 稍微减小宽度 */
    min-width: 330px; /* 稍微减小最小宽度 */
    max-width: 420px; /* 稍微减小最大宽度 */
    flex-shrink: 0;
    position: relative;
    overflow: visible; /* 改为visible，让内容正常显示 */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box; /* 确保padding包含在宽度内 */
    /* 移除高度限制，让内容自然显示 */
}

/* 语言选择 */
/* 语言选择容器 */
.language-select {
    position: absolute;
    top: clamp(10px, 2vh, 20px); /* 响应式定位 */
    right: clamp(15px, 2vw, 20px); /* 响应式定位 */
    font-size: clamp(12px, 1.5vw, 14px); /* 响应式字体大小 */
    color: #99aab5;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
    padding-right: 25px; /* 预留箭头位置 */
    z-index: 10; /* 确保下拉层高于卡片内容 */
}

    /* 文本和箭头的悬停效果 */
    .language-select:hover {
        color: #ffffff;
    }

/* 下拉箭头样式 */
.dropdown-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-top: 2px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #99aab5;
    transition: border-top-color 0.3s ease;
    /* 箭头固定在右侧 */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.language-select:hover .dropdown-arrow {
    border-top-color: #ffffff;
}

/* -------------------- 语言下拉列表 -------------------- */
.language-dropdown {
    /* 相对 language-select 绝对定位 */
    position: absolute;
    top: 100%; /* 显示在触发器下方 */
    right: 0;
    min-width: 120px;
    padding: 5px 0;
    /* 深色背景，和登录卡片风格一致 */
    background-color: #121f35;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none; /* 默认不响应鼠标事件 */
}

/* 悬停时显示语言列表 */
.language-select:hover .language-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* 悬停时恢复交互 */
}

.lang-item {
    display: block;
    padding: 8px 15px;
    color: #99aab5;
    text-decoration: none;
    white-space: nowrap;
}

    .lang-item:hover {
        background-color: #1a2a47; /* 悬停背景色 */
        color: #ffffff; /* 悬停文字色 */
    }

/* Logo 区域 */
.logo-area {
    margin-bottom: clamp(8px, 1.5vh, 15px); /* 减小间距 */
    text-align: center;
    width: 100%;
}

.full-logo-img {
    max-width: clamp(100px, 10vw, 130px); /* 减小Logo尺寸 */
    height: auto;
    display: block;
    margin: 0 auto;
}

.welcome-text {
    font-size: clamp(16px, 2.2vw, 22px); /* 减小字体大小 */
    font-weight: 400;
    margin-top: clamp(3px, 0.8vh, 8px); /* 减小间距 */
    margin-bottom: clamp(12px, 2.5vh, 25px); /* 减小间距 */
    color: #ffffff;
    width: 100%;
    text-align: center;
}

/* 登录表单 */
.login-form {
    display: flex;
    flex-direction: column;
    gap: clamp(15px, 2.5vh, 28px); /* 减小间距 */
    width: 100%;
    max-width: 100%; /* 改为100%，让表单自适应登录卡片宽度 */
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #121f35;
    height: clamp(42px, 5.5vh, 48px); /* 减小高度 */
    width: 100%;
    margin: 0 auto;
    overflow: visible !important;
    padding-bottom: 0;
    /* 统一容器圆角和默认边框状态 */
    border-radius: 6px;
    border: 1px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

    /* 聚焦时高亮整个输入容器 */
    .input-group:focus-within {
        border-color: #00aaff;
        box-shadow: 0 0 8px rgba(0, 170, 255, 0.3);
    }

.icon img {
    width: 20px; /* 图标图片实际尺寸 */
    height: 20px;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: clamp(42px, 5.5vh, 48px); /* 与input-group保持一致 */
    padding: 0;
    flex-shrink: 0;
    /* 子元素不单独处理圆角，统一跟随输入容器 */
    /* border-top-left-radius: 6px; */
    /* border-bottom-left-radius: 6px; */
}

.input-group input {
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    color: #ffffff;
    padding-right: 15px;
    padding-left: 0;
    font-size: clamp(14px, 2vw, 16px); /* 响应式字体大小 */
    outline: none;
    /* 输入框圆角交给外层容器控制 */
    /* border-top-right-radius: 6px; */
    /* border-bottom-right-radius: 6px; */
}

    .input-group input::placeholder {
        color: #FFFFFF;
    }

/* 验证区域 */
.captcha-group {
    /* 不写死高度，按验证码组件实际高度展开 */
    height: auto;
    /* 滑块组件需要自然块布局，这里去掉 flex 影响 */
    display: block;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

    .captcha-group #__Verification {
        margin: 0px auto;
    }

/* 登录按钮 */
.login-button {
    background: linear-gradient(to right,#D69DFE, #3564F9);
    border: none;
    color: #ffffff;
    padding: clamp(9px, 1.3vh, 11px) 20px; /* 减小内边距 */
    border-radius: 6px;
    font-size: clamp(15px, 2vw, 17px); /* 减小字体大小 */
    font-weight: bold;
    cursor: pointer;
    /* margin-top: 15px; */
    transition: background 0.3s ease, box-shadow 0.3s ease;
    width: 100%; /* 按钮占满容器宽度 */
}

    .login-button:hover {
        background: linear-gradient(to right, #D69DFE, #3564F9);
        box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
    }

/* -------------------- 响应式布局 -------------------- */
/* 针对 1440px 及以上屏幕的优化 */
@media (min-width: 1440px) {
    .login-page-container {
        gap: clamp(80px, 10vw, 120px); /* 进一步增加间距，让左右元素更协调 */
        justify-content: center; /* 保持居中对齐 */
    }
    
    .left-content {
        width: clamp(600px, 45vw, 800px); /* 使用clamp自适应 */
        max-width: 800px;
        margin-left: clamp(20px, 3vw, 40px); /* 适当增加左边距 */
    }
    
    .login-card {
        width: clamp(400px, 28vw, 450px); /* 使用clamp自适应 */
        max-width: 450px;
    }
}

/* 针对 1366px 屏幕的优化 */
@media (min-width: 1280px) and (max-width: 1439px) {
    body {
        padding-top: clamp(4vh, 8vh, 10vh) !important; /* 减小顶部padding */
        padding-left: clamp(8px, 1vw, 15px) !important; /* 减小左右padding */
        padding-right: clamp(8px, 1vw, 15px) !important;
    }
    
    .background-container {
        padding-top: clamp(6px, 1.2vh, 20px) !important; /* 减小垂直padding */
        padding-bottom: clamp(6px, 1.8vh, 20px) !important;
        padding-left: clamp(12px, 1.8vw, 28px) !important; /* 减小左右padding */
        padding-right: clamp(10px, 1.5vw, 25px) !important;
    }
    
    .login-page-container {
        gap: clamp(8px, 1.8vw, 35px) !important; /* 减小间距，让左右更紧凑 */
        flex-wrap: nowrap; /* 不允许换行，保持在一行 */
        align-items: center; /* 保持居中对齐 */
        justify-content: space-between; /* 使用space-between分布空间 */
        max-width: 100%; /* 确保不超过容器 */
        margin-left: 0; /* 确保从左侧开始 */
        width: 100%; /* 确保占满可用空间 */
    }
    
    .left-content {
        width: clamp(380px, 41vw, 650px) !important; /* 减小宽度，避免溢出 */
        min-width: 380px; /* 保持最小宽度 */
        max-width: 650px !important; /* 降低最大宽度 */
        flex-shrink: 1; /* 允许收缩 */
        margin-right: 0; /* 移除右边距 */
        margin-left: clamp(80px, 10vw, 150px) !important; /* 继续大幅增加左边距，让左侧元素更靠右移动 */
    }
    
    .login-card {
        width: clamp(330px, 27vw, 410px) !important; /* 稍微减小宽度 */
        min-width: 330px; /* 稍微减小最小宽度 */
        max-width: 410px !important; /* 稍微减小最大宽度 */
        flex-shrink: 0; /* 不允许收缩 */
        margin-left: 0 !important; /* 移除margin-left */
    }
}

/* 针对 1400px宽度且高度在900px左右的屏幕优化，往上调整位置 */
@media (min-width: 1400px) and (max-width: 1400px) and (min-height: 850px) and (max-height: 950px) {
    body {
        padding-top: clamp(0vh, 2vh, 4vh) !important; /* 进一步减少顶部padding，往上移动 */
    }
    
    .background-container {
        padding-top: 0px !important; /* 移除顶部padding */
        padding-bottom: clamp(5px, 1vh, 15px) !important; /* 减少底部padding */
    }
}

/* 针对 1280px 屏幕的优化 */
@media (min-width: 1024px) and (max-width: 1279px) {
    body {
        padding-top: clamp(3vh, 6vh, 8vh) !important; /* 减小顶部padding */
        padding-left: clamp(5px, 1vw, 12px) !important; /* 减小左右padding */
        padding-right: clamp(5px, 1vw, 12px) !important;
    }
    
    .background-container {
        padding-top: clamp(6px, 1vh, 18px) !important; /* 减小垂直padding */
        padding-bottom: clamp(6px, 1.5vh, 18px) !important;
        padding-left: clamp(10px, 1.5vw, 25px) !important; /* 减小左右padding */
        padding-right: clamp(8px, 1.2vw, 20px) !important;
    }
    
    .login-page-container {
        gap: clamp(8px, 1.8vw, 35px) !important; /* 减小间距，让左右更紧凑 */
        flex-wrap: nowrap; /* 不允许换行，保持在一行 */
        align-items: center; /* 保持居中对齐 */
        justify-content: space-between; /* 使用space-between分布空间 */
        max-width: 100%; /* 确保不超过容器 */
        margin-left: 0; /* 确保从左侧开始 */
        width: 100%; /* 确保占满可用空间 */
    }
    
    .left-content {
        width: clamp(380px, 40vw, 620px) !important; /* 减小宽度，避免溢出 */
        min-width: 380px; /* 保持最小宽度 */
        max-width: 620px !important; /* 降低最大宽度 */
        flex-shrink: 1; /* 允许收缩 */
        margin-right: 0; /* 移除右边距 */
        margin-left: clamp(80px, 10vw, 150px) !important; /* 继续大幅增加左边距，让左侧元素更靠右移动 */
    }
    
    .login-card {
        width: clamp(330px, 27vw, 400px) !important; /* 稍微减小宽度 */
        min-width: 330px; /* 稍微减小最小宽度 */
        max-width: 400px !important; /* 稍微减小最大宽度 */
        padding: clamp(15px, 2.2vw, 32px) clamp(20px, 2.8vw, 42px) !important; /* 减小内边距 */
        flex-shrink: 0; /* 不允许收缩 */
        margin-left: 0 !important; /* 移除margin-left */
    }
}


/* 1200px 以下切换为垂直布局，避免左右重叠 */
@media (max-width: 1200px) {
    body {
        align-items: center; /* 保持居中对齐 */
        padding-top: clamp(5vh, 8vh, 12vh); /* 调整顶部padding */
    }
    
    .login-page-container {
        flex-direction: column; /* 关键：切换为纵向堆叠 */
        gap: 30px;
        align-items: center; /* 垂直布局时居中对齐 */
    }

    .left-content {
        margin-bottom: 0; /* 移除底部margin，保持对齐 */
        width: 100%;
        max-width: 700px; /* 垂直布局时限制最大宽度 */
        min-width: auto; /* 移除最小宽度限制 */
        align-self: center; /* 关键：左侧内容整体居中 */
        align-items: center; /* 纵向布局时内部元素居中 */
    }
    /* 纵向布局时，标语图也改为居中，避免超出屏幕 */
    .slogan-img.top,
    .slogan-img.bottom {
        align-self: center;
    }
    
    .login-card {
        width: clamp(320px, 90vw, 430px);
        min-width: 320px;
    }
    
    .login-form {
        max-width: 100%; /* 确保表单能适应登录卡片宽度 */
    }
}

/* 针对1280px宽度屏幕的特殊处理，确保不重叠 */
@media (min-width: 1201px) and (max-width: 1350px) {
    body {
        padding-top: clamp(4vh, 8vh, 10vh) !important; /* 减小顶部padding */
        padding-left: clamp(8px, 1vw, 15px) !important; /* 减小左右padding */
        padding-right: clamp(8px, 1vw, 15px) !important;
    }
    
    .background-container {
        padding-top: clamp(6px, 1.2vh, 20px) !important; /* 减小垂直padding */
        padding-bottom: clamp(6px, 1.8vh, 20px) !important;
        padding-left: clamp(12px, 1.8vw, 28px) !important; /* 减小左右padding */
        padding-right: clamp(10px, 1.5vw, 25px) !important;
    }
    
    .login-page-container {
        gap: clamp(8px, 1.8vw, 35px) !important; /* 减小间距，让左右更紧凑 */
        align-items: center; /* 保持居中对齐 */
        justify-content: space-between; /* 使用space-between分布空间 */
        flex-wrap: nowrap; /* 不允许换行 */
        max-width: 100%; /* 确保不超过容器 */
        margin-left: 0; /* 确保从左侧开始 */
        width: 100%; /* 确保占满可用空间 */
    }
    
    .left-content {
        min-width: 380px; /* 恢复最小宽度，确保左侧内容不被移除 */
        width: clamp(380px, 41vw, 640px) !important; /* 减小宽度，避免溢出 */
        max-width: 640px !important; /* 降低最大宽度 */
        flex-shrink: 1; /* 允许收缩 */
        margin-right: 0; /* 移除右边距 */
        margin-left: clamp(80px, 10vw, 150px) !important; /* 继续大幅增加左边距，让左侧元素更靠右移动 */
    }
    
    .login-card {
        width: clamp(330px, 27vw, 410px) !important; /* 稍微减小宽度 */
        min-width: 330px; /* 稍微减小最小宽度 */
        max-width: 410px !important; /* 稍微减小最大宽度 */
        flex-shrink: 0; /* 不允许收缩 */
        margin-left: 0 !important; /* 移除margin-left */
    }
}

/* 针对 1280px宽度且高度在800px左右的屏幕优化，往上调整位置 */
@media (min-width: 1280px) and (max-width: 1280px) and (min-height: 750px) and (max-height: 850px) {
    body {
        padding-top: clamp(2vh, 4vh, 6vh) !important; /* 进一步减少顶部padding */
        padding-left: clamp(5px, 0.8vw, 10px) !important; /* 最小化左右padding */
        padding-right: clamp(5px, 0.8vw, 10px) !important;
    }
    
    .background-container {
        padding-top: clamp(4px, 0.8vh, 12px) !important; /* 进一步减少垂直padding */
        padding-bottom: clamp(4px, 0.8vh, 12px) !important;
        padding-left: clamp(8px, 1.2vw, 20px) !important; /* 减小左右padding */
        padding-right: clamp(8px, 1.2vw, 20px) !important;
    }
    
    .login-page-container {
        gap: clamp(8px, 1.8vw, 35px) !important; /* 减小间距，让左右更紧凑 */
        justify-content: space-between !important; /* 使用space-between分布空间 */
    }
    
    .left-content {
        min-width: 380px !important; /* 恢复最小宽度，确保左侧内容不被移除 */
        width: clamp(380px, 40vw, 600px) !important; /* 减小宽度，避免溢出 */
        max-width: 600px !important;
        margin-left: clamp(80px, 10vw, 150px) !important; /* 继续大幅增加左边距，让左侧元素更靠右移动 */
    }
    
    .login-card {
        min-width: 330px !important; /* 稍微减小最小宽度 */
        width: clamp(330px, 26vw, 400px) !important; /* 稍微减小宽度 */
        max-width: 400px !important;
        padding-top: clamp(12px, 2vh, 30px) !important; /* 减小垂直内边距 */
        padding-bottom: clamp(12px, 2vh, 30px) !important;
        padding-left: clamp(18px, 2.3vw, 38px) !important; /* 减小水平内边距 */
        padding-right: clamp(18px, 2.3vw, 38px) !important;
    }
}

@media (max-width: 450px) {
    .login-card {
        width: 100%;
        min-width: auto;
        padding: 30px 20px;
    }

    .full-logo-img {
        max-width: 180px;
    }

    .login-form {
        max-width: 100%;
    }

    .left-content {
        max-width: 100%; /* 小屏下左侧内容允许占满宽度 */
        padding: 0 10px;
    }
}

/* -------------------- 针对低高度屏幕的优化（720px高度） -------------------- */
/* 只在宽度足够时才应用高度优化，避免影响布局 */
@media (max-height: 800px) and (min-width: 1280px) {
    body {
        padding: 4px clamp(8px, 1.5vw, 15px) !important; /* 减小垂直和左右padding */
        padding-top: clamp(3vh, 5vh, 7vh) !important; /* 减小顶部padding */
        align-items: center; /* 保持居中对齐 */
    }
    
    .background-container {
        padding-top: clamp(6px, 1vh, 18px) !important; /* 减小垂直padding */
        padding-bottom: clamp(6px, 1.5vh, 18px) !important;
        padding-left: clamp(10px, 1.8vw, 30px) !important; /* 减小左右padding */
        padding-right: clamp(10px, 1.8vw, 30px) !important;
    }
    
    .login-page-container {
        gap: clamp(8px, 1.8vw, 35px) !important; /* 减小间距，让左右更紧凑 */
        align-items: center; /* 保持居中对齐 */
        justify-content: space-between !important; /* 使用space-between分布空间 */
    }
    
    .left-content {
        margin-left: clamp(80px, 10vw, 150px) !important; /* 继续大幅增加左边距，让左侧元素更靠右移动 */
    }
    
    .slogan-img {
        margin: clamp(6px, 1.2vh, 10px) 0 !important; /* 减小slogan图片的margin */
    }
    
    .ad-banner-wrapper {
        margin: clamp(8px, 1.5vh, 12px) 0 !important; /* 减小轮播图的margin */
    }
}

/* 针对720px高度的特殊优化，只在宽度足够时应用 */
@media (max-height: 750px) and (min-width: 1280px) {
    body {
        padding-top: clamp(3vh, 5vh, 7vh); /* 调整顶部padding */
    }
    
    .login-page-container {
        gap: clamp(15px, 2.5vw, 35px);
    }
}

#global-loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0b1120; /* 与 body 背景色保持一致 */
    z-index: 9999; /* 确保遮罩层盖住所有内容 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.loading-spinner {
    /* 使用 CSS 画一个简单的加载转圈 */
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #00aaff; /* 蓝色高亮边 */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#global-loading-mask p {
    color: #ffffff;
    font-size: 16px;
}

label.error {
    position: absolute !important;
    left: 0;
    /* 定位到 input-group 下边缘 */
    top: 100%;
    margin-top: 6px;
    /* 关键：层级要高于输入容器 */
    z-index: 10;
    padding-left: 18px;
    color: #ff4d4f;
    font-size: 15px !important;
    font-weight: 500;
    line-height: 1.4;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23ff4d4f" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>') no-repeat left center;
    background-size: 15px 15px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

    label.error.show {
        opacity: 1;
        transform: translateY(0);
    }

.input-group.error {
    /* 错误态边框和背景都作用在外层容器上 */
    border: 1px solid #ff4d4f !important;
    box-shadow: 0 0 15px rgba(255, 77, 79, 0.4);
    background-color: rgba(255, 77, 79, 0.08);
    transition: border 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

    .input-group.error:focus-within {
        border-color: #ff4d4f !important;
        box-shadow: 0 0 20px rgba(255, 77, 79, 0.6);
    }

    /* 错误态下调整图标视觉效果，保持图片资源不变 */
    /* 样式作用到 input-group 内的图标图片 */
    .input-group.error .icon img {
        filter: sepia(100%) saturate(300%) hue-rotate(330deg) brightness(1.2);
        opacity: 1;
        transition: filter 0.3s ease, opacity 0.3s ease;
    }