/* Use the rendered dashboard itself so ordering, dimensions and breakpoints match. */
.cloud-skeleton{display:none!important}
html.cloud-unavailable:not(.cloud-skeleton-active) #app{display:none!important}
html.cloud-skeleton-active #app{pointer-events:none;user-select:none}
html.cloud-skeleton-active #app *{visibility:hidden!important}
html.cloud-skeleton-active #app :is(.card,.hero){visibility:visible!important;position:relative;overflow:hidden;color:transparent!important;background:var(--panel,var(--c-panel,var(--bg)));box-shadow:none}
html.cloud-skeleton-active #app :is(.card,.hero)::after{content:"";position:absolute;inset:22px;visibility:visible;border-radius:8px;background:linear-gradient(90deg,#82909a20,#82909a20) left top/35% 12px no-repeat,linear-gradient(90deg,#82909a20,#82909a20) left 34px/55% 28px no-repeat,linear-gradient(90deg,#82909a18,#82909a18) left 82px/80% calc(100% - 82px) no-repeat}
html.cloud-skeleton-active #app :is(.card,.hero)::before{content:"";position:absolute;inset:0;visibility:visible;z-index:1;background:linear-gradient(100deg,transparent 25%,#82909a15 50%,transparent 75%);transform:translateX(-100%);animation:cloud-shimmer 1.7s ease-in-out infinite}
@keyframes cloud-shimmer{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){html.cloud-skeleton-active #app :is(.card,.hero)::before{animation:none;background:none}}