/* ======================== 启动画面（Splash） ======================== */
/* 加载期页面背景 = Splash 同款深蓝渐变（窗口创建即显示渐变而非纯色，
   到 Splash 动画元素淡入全程视觉连续，无纯色画面） */
html, body {
    margin: 0;
    padding: 0;
    /* 渐变基于 Splash 主题色变量（--splash-c1/c2/c3），
       由下方脚本按保存的主题色生成（无保存值回退默认蓝系） */
    background: linear-gradient(135deg,
    var(--splash-c1, #0f172a) 0%,
    var(--splash-c2, #1e3a8a) 55%,
    var(--splash-c3, #1d4ed8) 100%);
}

/* 隐藏页面级滚动条（不占位）：视口宽度恒定，Splash 内容不受滚动条出现/消失影响，
   永不发生水平/垂直偏移；内容区滚动条（工作台表格等）不受影响 */
html::-webkit-scrollbar {
    display: none;
}

#app-splash {
    position: fixed;
    inset: 0;
    /* zoom 缩放下 vw / vh 不受影响，需按补偿变量设置，否则启动画面盖不满屏幕 */
    width: var(--screen-vw, 100vw);
    height: var(--screen-vh, 100vh);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 渐变基于 Splash 主题色（由 head 脚本按保存的主题色生成） */
    background: linear-gradient(135deg,
    var(--splash-c1, #0f172a) 0%,
    var(--splash-c2, #1e3a8a) 55%,
    var(--splash-c3, #1d4ed8) 100%);
    overflow: hidden;
    transition: opacity 0.6s ease;
    /* 统一行高：字体加载（FOUT）不改变任何文字行高，
       内容总高度恒定，居中布局不发生垂直偏移 */
    line-height: 1.4;
}

/* 固定字体：Splash 文字不继承 body（Vue 挂载后全局样式会切换 body 字体），
   避免字体切换导致文字形状/间距变化（如"·"中点形状差异） */
#app-splash, #app-splash * {
    font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* 背景装饰光斑 */
#app-splash::before,
#app-splash::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
}

#app-splash::before {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.55) 0%, transparent 70%);
    top: -120px;
    left: -100px;
    animation: splash-float 7s ease-in-out infinite;
}

#app-splash::after {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.35) 0%, transparent 70%);
    bottom: -140px;
    right: -100px;
    animation: splash-float 9s ease-in-out infinite reverse;
}

@keyframes splash-float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(30px, -20px) scale(1.08);
    }
}

.splash-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 固定宽度：布局不随字体加载（FOUT）变化，避免内容高度/宽度变化导致偏移 */
    width: 300px;
    /* 元素创建即完整显示（不淡入）：用户第一眼看到的就是完整 Splash 画面（Logo+文字+进度条） */
}

/* Logo 容器：白色圆形底 + 柔和投影 */
.splash-logo-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.splash-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    animation: splash-logo-breathe 2.4s ease-in-out infinite;
}

@keyframes splash-logo-breathe {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

/* Logo 外圈旋转光环 */
.splash-ring {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 255, 255, 0.9);
    animation: splash-spin 1.6s linear infinite;
}

.splash-ring::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    animation: splash-spin 9s linear infinite reverse;
}

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

/* 品牌名 */
.splash-title {
    margin-top: 34px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    user-select: none;
    /* 固定行高 + 禁止换行：字体加载后行高/宽度变化不引起布局偏移 */
    line-height: 1.4;
    white-space: nowrap;
}

.splash-subtitle {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.5);
    user-select: none;
    /* 固定行高 + 禁止换行：字体加载后行高/宽度变化不引起布局偏移 */
    line-height: 1.4;
    white-space: nowrap;
}

/* 加载进度条 */
.splash-bar {
    margin-top: 30px;
    width: 220px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.splash-bar-fill {
    height: 100%;
    width: 38%;
    border-radius: 4px;
    background: linear-gradient(90deg, #60a5fa, #ffffff);
    animation: splash-bar-move 1.4s ease-in-out infinite;
}

@keyframes splash-bar-move {
    0% {
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(320%);
    }
}

.splash-text {
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
    user-select: none;
}

/* 隐藏状态（应用就绪后淡出） */
#app-splash.splash-hide {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    /* 尊重系统"减弱动画"设置：关闭 Splash 动画，避免用户晕动 */
    #app-splash .splash-logo {
        animation: none;
    }

    #app-splash .splash-ring {
        animation: none;
    }

    #app-splash .splash-bar-fill {
        animation: none;
    }
}