/* University of SEO: skeleton placeholder between pages (js/uos-skeleton.js), public site and admin.
   The header, sidebar and footer keep their place; only the content area shows the placeholder.
   No cross-document @view-transition opt-in here: Chromium reported "Transition was aborted because of invalid
   state" on reloads and form posts, and the placeholder does not need it. */

html.usk-on [data-uos-page] > :not(.usk) { display: none !important; }
.usk {
    --usk-fill: var(--uos-line-2, var(--ad-border-strong, rgba(127, 127, 127, .18)));
    --usk-card: var(--uos-surface-solid, var(--ad-surface, transparent));
    --usk-line: var(--uos-line, var(--ad-border, rgba(127, 127, 127, .14)));
    min-height: 72vh;
    padding: clamp(16px, 3vw, 32px) 0 48px;
    animation: usk-in .15s ease-out;
}
.usk-b { display: block; height: 14px; border-radius: 7px; background: var(--usk-fill); margin: 0 0 12px; animation: usk-pulse 1.8s ease-in-out .6s infinite; }
.usk-crumb { height: 12px; margin-bottom: 22px; }
.usk-h28 { height: 28px; border-radius: 9px; margin-bottom: 18px; }
.usk-h40 { height: 40px; border-radius: 12px; margin-bottom: 14px; }
.usk-gap { margin-top: 28px; }
.usk-w20 { width: 20%; } .usk-w30 { width: 30%; } .usk-w40 { width: 40%; } .usk-w50 { width: 50%; } .usk-w60 { width: 60%; }
.usk-w70 { width: 70%; } .usk-w80 { width: 80%; } .usk-w90 { width: 90%; } .usk-w100 { width: 100%; }
.usk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 30px; }
.usk-grid-4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 6px; }
.usk-card { border: 1px solid var(--usk-line); border-radius: 16px; background: var(--usk-card); padding: 0 0 6px; overflow: hidden; }
.usk-card .usk-b { margin-left: 16px; margin-right: 16px; max-width: calc(100% - 32px); }
.usk-card .usk-b:first-of-type { margin-top: 16px; }
.usk-stat, .usk-table { padding: 18px 2px 8px; }
.usk-table { margin-top: 16px; }
.usk-media { aspect-ratio: 240 / 140; background: var(--usk-fill); opacity: .55; animation: usk-pulse-m 1.8s ease-in-out .6s infinite; }
.usk-wrap > .usk-media { border-radius: 16px; margin: 22px 0 24px; aspect-ratio: 16 / 7; }
.usk-media-short { border-radius: 16px; aspect-ratio: 3 / 1; margin-bottom: 22px; }
.usk-narrow { max-width: 860px; }
.usk-panel { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
.usk-side { border: 1px solid var(--usk-line); border-radius: 16px; background: var(--usk-card); padding: 22px 18px; }
.usk-avatar { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 18px; }
.usk-admin { padding: 8px 4px 0; }
@keyframes usk-in { from { opacity: 0; } }
@keyframes usk-pulse { 50% { opacity: .7; } }
@keyframes usk-pulse-m { 50% { opacity: .4; } }
@media (max-width: 767px) {
    .usk-panel { grid-template-columns: minmax(0, 1fr); }
    .usk-side { display: none; }
    .usk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .usk, .usk-b, .usk-media { animation: none; } }