/* ===== 加载遮罩 - 全屏覆盖 ===== */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f172a;            /* 深色背景，视觉聚焦 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;                /* 确保在所有内容之上 */
    transition: opacity 0.6s ease;
    pointer-events: none;           /* 本身不阻挡点击，但内部子元素可交互 */
}

/* 当加载完成时，淡出并隐藏 */
#loader-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ===== 旋转动画 ===== */
.loader-spinner {
    width: 52px;
    height: 52px;
    border: 4px solid rgba(255, 255, 255, 0.08);
    border-top-color: #8b5cf6;       /* 紫色高亮 */
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== 主标题 ===== */
.loader-title {
    color: #f1f5f9;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* ===== 副标题 ===== */
.loader-sub {
    color: #94a3b8;
    font-size: 15px;
    margin-bottom: 24px;
}

/* ===== 进度条轨道 ===== */
.progress-track {
    width: 320px;
    max-width: 80vw;
    height: 6px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ===== 进度条填充 ===== */
.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4f46e5, #8b5cf6, #a78bfa);
    border-radius: 12px;
    transition: width 0.15s ease-out;
}

/* ===== 百分比数字 ===== */
.progress-percent {
    color: #e2e8f0;
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

.progress-percent small {
    font-size: 18px;
    font-weight: 400;
    color: #94a3b8;
}

/* ===== 底部提示文字 ===== */
.loader-hint {
    color: #94a3b8;
    font-size: 14px;
    margin-top: 14px;
    min-height: 22px;
    transition: opacity 0.3s ease;
}

/* ===== 内容容器（主应用） ===== */
#app {
    display: none;          /* 默认隐藏，加载完成后显示 */
    opacity: 0;
    transition: opacity 0.5s ease;
}

#app.visible {
    display: block;
    opacity: 1;
}