/* Only detail routes need a data skeleton outside their page template.
   Primary pages keep their existing layout and collection placeholders. */
[v-cloak] { display: none; }
body { margin: 0; }
html { background: #fff; }
html.dark { background: #0a0a0a; }
#site-boot { position: absolute; inset: 0 0 auto; min-height: 100vh; padding-top: 64px; box-sizing: border-box; background: #fff; }
.dark #site-boot { background: #0a0a0a; }
.home-loading-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: #fff; }
.dark .home-loading-overlay { background: #0a0a0a; }
.home-loading-overlay.fade-leave-active { transition: opacity .2s ease; pointer-events: none; }
.list-crossfade-grid { position: relative; align-content: start; }
.list-crossfade-grid > [data-list-skeleton] { box-sizing: border-box; }
.list-crossfade-grid > [data-list-item] { transition-property: color, background-color, border-color, box-shadow, opacity; }
.home-loading-spinner { width: 32px; height: 32px; box-sizing: border-box; border: 3px solid #e5e5e5; border-top-color: #262626; border-radius: 50%; animation: home-loading-spin .75s linear infinite; }
.dark .home-loading-spinner { border-color: #262626; border-top-color: #fff; }
@keyframes home-loading-spin { to { transform: rotate(360deg); } }
.route-skeleton { box-sizing: border-box; min-height: 100vh; padding: 48px 0 80px; }
.route-skeleton-inner { max-width: 768px; padding: 0 16px; margin: 0 auto; box-sizing: border-box; }
.route-skeleton-block { display: block; background: #e5e5e5; border-radius: 6px; animation: route-pulse 1.8s ease-in-out infinite; }
.dark .route-skeleton-block { background: #262626; }
.route-skeleton-back { width: 112px; height: 24px; margin-bottom: 40px; }
.route-skeleton-label { width: 80px; height: 20px; margin-bottom: 12px; }
.route-skeleton-title { width: 76%; max-width: 536px; height: 40px; margin-bottom: 24px; }
.route-skeleton-meta { width: 160px; height: 20px; margin-bottom: 24px; }
.route-skeleton-cover { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; margin-bottom: 40px; }
.route-skeleton-line { width: 100%; height: 16px; margin-bottom: 16px; }
.route-skeleton-lines .route-skeleton-line:last-child { width: 68%; }
.route-skeleton-section { width: 112px; height: 28px; margin-bottom: 24px; }
.route-skeleton-media { background: #fff; }
.dark .route-skeleton-media { background: #171717; }
.route-skeleton-media .route-skeleton-inner { max-width: 1024px; }
.route-skeleton-app { padding: 32px 0 80px; background: #f8fafc; }
.dark .route-skeleton-app { background: #000; }
.route-skeleton-app-container { max-width: 1280px; padding: 0 20px; margin: 0 auto; box-sizing: border-box; }
.route-skeleton-app .app-hero-toolbar { min-height: 20px; }
.route-skeleton-app .route-skeleton-back { height: 20px; margin: 0; }
.route-skeleton-app .app-product-logo { border: 0; background: #e5e5e5; }
.dark .route-skeleton-app .app-product-logo { background: #262626; }
.route-skeleton-app .route-skeleton-title { height: 46px; width: 240px; max-width: 100%; margin-bottom: 14px; }
.route-skeleton-app .app-product-details > .route-skeleton-line { width: 320px; max-width: 100%; height: 24px; margin: 0; }
.route-skeleton-action { width: 132px; height: 44px; border-radius: 12px; margin-top: 24px; }
.route-skeleton-app-shelf { padding: 32px 0; }
.route-skeleton-app-shelf .route-skeleton-cover { height: 160px; aspect-ratio: auto; margin: 0; }
.route-skeleton-app-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 64px; margin-top: 48px; }
.route-skeleton-changelog { min-height: 75vh; padding: 48px 0 96px; }
.route-skeleton-changelog .route-skeleton-back { height: 36px; margin-bottom: 32px; }
.route-skeleton-icon { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; }
.route-skeleton-changelog .changelog-identity > .route-skeleton-line { width: 120px; margin: 0; }
.route-skeleton-changelog .route-skeleton-title { height: 45px; width: 220px; margin: 0; }
.route-skeleton-changelog .route-skeleton-section { width: 100px; margin-bottom: 16px; }
@keyframes route-pulse { 50% { opacity: .45; } }
@media (min-width: 640px) {
    .route-skeleton-inner { padding-inline: 24px; }
    .route-skeleton-app, .route-skeleton-changelog { padding-inline: 0; }
    .route-skeleton-app-container { padding-inline: 24px; }
}
@media (min-width: 768px) {
    .route-skeleton-app { padding-top: 48px; }
    .route-skeleton-app .app-hero-toolbar { min-height: 36px; }
    .route-skeleton-app-columns { margin-top: 80px; }
}
@media (min-width: 1024px) {
    .route-skeleton-inner { padding-inline: 32px; }
    .route-skeleton-app, .route-skeleton-changelog { padding-inline: 0; }
    .route-skeleton-app-container { padding-inline: 32px; }
}
@media (max-width: 767px) {
    .route-skeleton-app .app-product-details > .route-skeleton-block { margin-inline: auto; }
    .route-skeleton-app .route-skeleton-title { height: 35px; }
    .route-skeleton-app .app-product-details > .route-skeleton-line { height: 24px; }
    .route-skeleton-action { margin-top: 20px; }
    .route-skeleton-app-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 16px; }
}
@media (max-width: 639px) {
    .route-skeleton-changelog { padding: 24px 0 64px; }
    .route-skeleton-changelog .route-skeleton-back { height: 44px; margin-bottom: 24px; }
    .route-skeleton-changelog .route-skeleton-title { height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .route-skeleton-block { animation: none; } }