/* 壳子公共样式 —— loader 骨架屏
 * VIP HTML 和 Markdown 文档共用，避免在 vip-html.css 和 markdown-shell.css 重复定义。 */

/* Loader 骨架屏 + 进度条 */
#loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #fff; z-index: 9999;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding: 24px; box-sizing: border-box; text-align: center;
    transition: opacity 0.35s ease;
}
#loader.fade-out { opacity: 0; pointer-events: none; }
#loader .ld-title {
    font-size: 20px; font-weight: 600; color: #1a1a1a;
    margin: 0 0 16px; max-width: 640px; line-height: 1.4;
}
#loader .ld-skel {
    background: linear-gradient(90deg, #f0f0f3 25%, #e4e4ea 37%, #f0f0f3 63%);
    background-size: 400% 100%;
    animation: ld-shimmer 1.4s ease infinite;
    border-radius: 6px;
}
#loader .ld-line { height: 12px; margin: 8px 0; width: 100%; max-width: 520px; }
#loader .ld-line.short { width: 60%; }
#loader .ld-h { height: 16px; margin: 14px 0 6px; width: 45%; }
@keyframes ld-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
#loader .ld-progress {
    margin-top: 28px; width: 180px; height: 3px;
    background: #ececf0; border-radius: 99px; overflow: hidden;
}
#loader .ld-progress::after {
    content: ''; display: block; height: 100%; width: 30%;
    background: #4f7cff; border-radius: 99px;
    animation: ld-slide 1.2s ease-in-out infinite;
}
@keyframes ld-slide {
    0% { transform: translateX(-100%); width: 30%; }
    50% { width: 50%; }
    100% { transform: translateX(333%); width: 30%; }
}
#loader .ld-tip { margin-top: 14px; font-size: 13px; color: #999; }
@media (prefers-reduced-motion: reduce) {
    #loader .ld-skel, #loader .ld-progress::after { animation: none; }
    #loader .ld-skel { background: #f0f0f3; }
}