/* ===== 骨架屏加载动画 ===== */
#skeleton-wrap {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .4s ease, visibility .4s ease;
}
.page-loaded #skeleton-wrap {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.skel-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: skelShimmer 1.6s ease-in-out infinite;
}
@keyframes skelShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skel-circle {
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    margin: 0 auto;
}
.skel-line {
    height: 14px; border-radius: 7px; margin: 8px auto;
    background: rgba(255,255,255,0.08);
}
.skel-line.short { width: 100px; }
.skel-line.medium { width: 180px; }
.skel-line.long { width: 260px; }
.skel-card {
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    margin: 12px auto;
}
.skel-card.sm { width: 80%; max-width: 300px; height: 60px; }
.skel-card.md { width: 90%; max-width: 400px; height: 120px; }
.skel-card.lg { width: 100%; max-width: 460px; height: 200px; }