/* ------------------- CSS 变量 ------------------- */
:root {
    /* 主背景色（通常用于 body 或 app 容器） */
    --body-color: #f8fafcff;
    --background-color: #2c3e50;
    /* 旋转边框颜色 */
    --color2: #fd79a8; /* 粉色 */
    --color3: #0984e3; /* 蓝色 */
    --color6: #e056fd; /* 紫色 */
}
body{
    background-color: var(--body-color);
}
 /* ------------------- 自定义消息框样式 ------------------- */
        .message-box {
            position: fixed;
            top: 20px;
            left: 50%;
            min-width: 300px;
            transform: translateX(-50%);
            padding: 10px 20px;
            background-color: #e74c3c;
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 10000;
            font-size: 16px;
            text-align: center;
        }
/* ------------------- Loading Overlay (全屏遮罩) ------------------- */
.loader-overlay {
    /* 固定定位，覆盖整个视口 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 半透明黑色背景，确保内容不透光 */
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    /* 居中显示加载器 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ------------------- Loading Spinner (三色旋转器) ------------------- */
.loader {
    position: relative;
    width: 100px;
    height: 100px;
    color: #fff; /* loading... 文本颜色 */
    border-radius: 50%;
    
    /* 主元素的第一条边框 */
    border-top: 5px solid var(--color2);
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid var(--color6);
    
    /* 内容居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 主旋转动画 */
    animation: animate 1.5s linear infinite; 
    background-clip: padding-box; 
}

/* 伪元素用于创建第二和第三条旋转边框 */
.loader::after, .loader::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    background-clip: padding-box;
}

/* 第二条边框 */
.loader::after {
    border-top: 5px solid var(--color3);
    border-left: 5px solid var(--color3); 
    border-right: 5px solid transparent;
    /* 旋转 120 度 */
    transform: rotate(120deg);
}

/* 第三条边框 */
.loader::before {
    border-top: 5px solid var(--color6);
    border-left: 5px solid var(--color6); 
    border-right: 5px solid transparent;
    /* 反向旋转 120 度 */
    transform: rotate(-120deg);
}

/* 旋转关键帧 */
@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* loading 文本，与旋转器反向旋转 */
.loader span {
    animation: animate 1.5s linear infinite reverse;
    font-size: 14px;
}