/* -------------------- 通用样式重置 -------------------- */
* {
    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; /* ȷ�������� max-width ��Χ�ھ��� */
    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包含在宽度内 */
}

/* -------------------- 左侧内容 (Slogan图片和轮播图) -------------------- */
.left-content {
    display: flex;
    flex-direction: column;
    /* �Ƴ� align-items: center; �Ա� slogan ͼƬ�����Ҷ��� */
    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 */
    margin: clamp(8px, 1.5vh, 12px) 0; /* 减小垂直margin */
}

    .slogan-img.top {
        align-self: flex-start; /* **�ؼ����������� Slogan ͼƬ����** */
    }

    .slogan-img.bottom {
        align-self: flex-end; /* **�ؼ��������ײ� Slogan ͼƬ����** */
    }

.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 */
    /* ȷ�� Banner ���У�ͬʱ��֤ Slogan ���Ҷ��� */
    align-self: center;
    width: 100%; /* ȷ�� Layui �ֲ�ͼ�ܳſ� */
}

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


/* -------------------- 右侧内容 (登录卡片) -------------------- */
.login-card {
    background-color: rgba(36, 82, 134, 0.70); /* ��Ч #245286B2 - 代理后台保持原有背景色 */
    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; /* ȷ�������б��ڿ�Ƭ���ݵ��Ϸ� */
}

    /* 改变图标和箭头 Hover 效果 */
    .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; /* Ĭ�ϲ���������¼� */
}

/* Hover ��ʾ�����б� */
.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;
    /* �����Г��A�Ǻ�Ĭ�J߅�� */
    border-radius: 6px;
    border: 1px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

    /* �Ż�: �۽�ʱ����ɫ�߿�Ӧ�õ� input-group ������ */
    .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;
    /* �Ƴ����ЈA�ǣ�׌���� input-group ̎�� */
    /* 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;
    /* �Ƴ����ЈA�ǣ�׌���� input-group ̎�� */
    /* border-top-right-radius: 6px; */
    /* border-bottom-right-radius: 6px; */
}

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

/* 验证码组 */
.captcha-group {
    /* ���� height: 234px; ����߶���Ȼ��Ϊ������֤��׼���� */
    height: auto;
    /* ����ʹ���� layui/SliderCode��������Ҫ�Ƴ������ flex ���֣��������������� */
    display: block;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
}

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

.image-captcha-group {
    overflow: hidden !important;
}

.image-captcha-group input {
    padding-left: 15px;
    padding-right: 12px;
}

.image-code {
    width: 110px;
    height: 100%;
    flex-shrink: 0;
    cursor: pointer;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    object-fit: cover;
}

/* 登录按钮 */
.login-button {
    background: linear-gradient(to right, #02B2F1, #2969F9); /* 代理后台保持原有渐变色 */
    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, #02B2F1, #2969F9); /* 代理后台保持原有渐变色 */
        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 ͼƬҲ���ж��룬������ܻᳬ����Ļ�򲻺ÿ� */
    .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, 24px) !important; /* 减小间距 */
    }
    
    .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;
    /* top: 100%; ���� input-group �ײ��߽� */
    top: 100%;
    margin-top: 6px;
    /* -------------------- �ؼ����� -------------------- */
    /* ȷ���㼶���� .input-group (z-index: 2) */
    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-box��������ʽ����������ͼ�� */
    .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;
    }