/* One quiet loading surface, shared by thumbnails, viewers and page placeholders. */
.skeleton,
.media .placeholder.working,
img[data-media-state="loading"],
:has(> video[data-media-state="loading"]) {
  background-color: var(--surface-2, #1d2432);
  background-image: linear-gradient(105deg, transparent 25%, color-mix(in srgb, var(--primary, #51b6e8) 7%, transparent) 42%, color-mix(in srgb, var(--text, #f5f7fc) 9%, transparent) 50%, color-mix(in srgb, var(--violet, #a58bff) 7%, transparent) 58%, transparent 75%);
  background-size: 250% 100%;
  animation: skeleton-sweep 1.8s ease-in-out infinite;
}
img[data-media-state="loading"] { color: transparent; }
video[data-media-state="loading"], video[data-media-state="error"] { opacity: 0; }
img[data-media-state="error"], :has(> video[data-media-state="error"]) {
  background-color: var(--surface-2, #1d2432);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%238a96a3' stroke-width='1.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='m3 16 5-5 5 5 3-3 5 5M4 3l16 18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.skeleton { display: block; border-radius: 9px; }
.skeleton-page { display: grid; gap: 28px; padding-block: 8px; }
.skeleton-heading { display: grid; gap: 12px; }
.skeleton-title { width: min(240px, 45%); height: 30px; }
.skeleton-line { width: 70%; height: 12px; }
.skeleton-line.short { width: 44%; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.skeleton-card { display: grid; gap: 14px; padding-bottom: 14px; }
.skeleton-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; }
.skeleton-detail > .skeleton-photo { width: min(100%, 38.4vh); margin-inline: auto; }
.skeleton-detail > .skeleton-heading { gap: 24px; }
.skeleton-panel { height: 180px; border-radius: 16px; }
.skeleton-review { width: min(100%, 430px, 80cqh); aspect-ratio: 4 / 5; border-radius: 19px; }
.skeleton-boot { width: min(420px, 70vw); display: grid; gap: 18px; }
@keyframes skeleton-sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton, .media .placeholder.working, img[data-media-state="loading"], :has(> video[data-media-state="loading"]) { animation: none; }
}