/* 首屏骨架屏：JS 执行前立刻渲染，避免用户体感"白屏卡一下" */
html, body { margin: 0; padding: 0; background: #fff; }
.boot-skeleton { font-family: system-ui, -apple-system, Segoe UI, sans-serif; color: #64748b; }
.sk-bar { background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%); background-size: 200% 100%; animation: sk-shimmer 1.4s ease-in-out infinite; border-radius: 6px; }
@keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk-top { height: 72px; display: flex; align-items: center; padding: 0 24px; gap: 24px; border-bottom: 1px solid #f1f5f9; }
.sk-logo { width: 40px; height: 40px; border-radius: 8px; }
.sk-nav { display: flex; gap: 16px; flex: 1; justify-content: flex-end; }
.sk-nav span { width: 68px; height: 14px; display: inline-block; }
.sk-hero { width: 100%; aspect-ratio: 1920 / 750; min-height: 260px; border-radius: 0; }
.sk-main { max-width: 1200px; margin: 40px auto; padding: 0 24px; }
.sk-h { width: 36%; height: 22px; margin: 0 0 8px; }
.sk-sub { width: 52%; height: 14px; margin: 0 0 28px; }
.sk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sk-card .sk-img { aspect-ratio: 4 / 3; width: 100%; margin-bottom: 12px; }
.sk-card .sk-t { width: 72%; height: 14px; margin-bottom: 8px; }
.sk-card .sk-d { width: 90%; height: 10px; }
@media (max-width: 900px) { .sk-nav span:nth-child(n+5) { display: none; } .sk-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px) { .sk-nav span:nth-child(n+3) { display: none; } .sk-logo { width: 32px; height: 32px; } .sk-top { height: 60px; padding: 0 16px; gap: 16px; } }
/* Vue app 挂载后，自动隐藏骨架屏 */
body:has(#app > *) .boot-skeleton { display: none; }