.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: #4a5cf0;
    z-index: 100000;
    transition: width 200ms ease-out, opacity 250ms ease-out;
    pointer-events: none;
    opacity: 0;
}
.page-progress.is-active,
.page-progress.is-done {
    opacity: 1;
}
.page-progress.is-active::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    box-shadow: 0 0 8px #4a5cf0, 0 0 4px #4a5cf0;
    opacity: 0.8;
}
.page-progress.is-done {
    opacity: 0;
    transition-delay: 150ms;
}

body.page-transitioning main,
body.page-transitioning .main-content-wrapper {
    pointer-events: none;
    cursor: progress;
}
body.page-transitioning-slow main,
body.page-transitioning-slow .main-content-wrapper {
    opacity: 0.7;
    transition: opacity 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .page-progress,
    body.page-transitioning-slow main,
    body.page-transitioning-slow .main-content-wrapper {
        transition: none;
    }
}

/* Reusable card-level skeleton for arbitrary panels while their data loads.
   Any element with class `pt-skeleton-card` shows a gently shimmering block.
   Set width/height inline or via a modifier class. */
.pt-skeleton-card {
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%);
    background-size: 400% 100%;
    animation: pt-skeleton-shimmer 1.4s ease infinite;
    min-height: 20px;
}
@keyframes pt-skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}