:root {
  --skeleton-base: #eceef5;
  --skeleton-soft: #f5f6fa;
  --skeleton-shine: #fafbfe;
  --skeleton-radius: .7rem;
}

.skeleton-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skeleton-route { width: 100%; color: transparent; pointer-events: none; user-select: none; }
[data-loading="true"] > :not(.skeleton-route):not(.skeleton-status) { display: none !important; }

.skeleton {
  display: block;
  overflow: hidden;
  border-radius: var(--skeleton-radius);
  background: linear-gradient(100deg, var(--skeleton-base) 20%, var(--skeleton-shine) 38%, var(--skeleton-base) 56%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
}
.skeleton--line { width: 100%; height: .75rem; border-radius: 999px; }
.skeleton--line-sm { height: .55rem; }.skeleton--line-lg { height: 1.1rem; }
.skeleton--title { width: min(100%, 32rem); height: clamp(2.2rem, 5vw, 4rem); border-radius: .9rem; }
.skeleton--avatar { width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: 50%; }
.skeleton--button { width: 9rem; height: 2.8rem; border-radius: .7rem; }
.skeleton--image { width: 100%; aspect-ratio: 16 / 9; }
.skeleton-text { display: grid; gap: .65rem; }
.skeleton-card { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: #fff; }

.sk-home-shell { display: grid; width: 100%; grid-template-columns: 190px minmax(0, 1fr) 250px; gap: 1.5rem; margin: 0; padding: 1rem clamp(16px, 2vw, 32px) 2rem; }
.sk-home-sidebar { display: grid; align-content: start; gap: .75rem; padding-right: 1rem; border-right: 1px solid var(--color-line); }
.sk-home-sidebar .skeleton--line { height: 1.8rem; }.sk-home-sidebar-group { display: grid; gap: .55rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
.sk-home-feed { display: grid; align-content: start; gap: 1.1rem; min-width: 0; }
.sk-home-hero { display: grid; min-height: 246px; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; padding: 1.6rem; border-radius: 1rem; background: linear-gradient(120deg, #fff1f4, #f2eeff 55%, #edf7ff); }
.sk-home-hero-copy { display: grid; gap: .85rem; }.sk-home-hero-copy .skeleton--title { height: 4rem; }.sk-home-actions { display: flex; gap: .7rem; }.sk-home-hero .skeleton--image { aspect-ratio: 1.75; border: 1px solid #e2e4ed; background-color: rgb(255 255 255 / 72%); }
.sk-section { display: grid; gap: .7rem; }.sk-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.sk-section-heading > div { display: grid; width: 15rem; gap: .4rem; }
.sk-app-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }.sk-app-card { overflow: hidden; }.sk-app-card .skeleton--image { aspect-ratio: 1.5; border-radius: 0; }.sk-app-card-body { display: grid; gap: .55rem; padding: .7rem; }.sk-app-card-title { display: flex; align-items: center; gap: .5rem; }.sk-app-card-title .skeleton--avatar { width: 1.5rem; height: 1.5rem; flex-basis: 1.5rem; border-radius: .35rem; }
.sk-editorial-grid, .sk-collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }.sk-editorial-card { overflow: hidden; }.sk-editorial-card .skeleton--image { aspect-ratio: 2.35; border-radius: 0; }.sk-editorial-body { display: grid; gap: .55rem; padding: .7rem; }.sk-collection-grid .skeleton--image { aspect-ratio: 2.3; }
.sk-home-rail { display: grid; align-content: start; gap: 1rem; }.sk-rail-card { display: grid; gap: .75rem; min-height: 8rem; padding: 1rem; border-radius: .9rem; background: #f7f7fc; }.sk-rail-item { display: flex; align-items: center; gap: .65rem; }.sk-rail-item .skeleton--avatar { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; border-radius: .6rem; }.sk-rail-item .skeleton-text { min-width: 0; flex: 1; gap: .4rem; }

.sk-public-shell { width: min(calc(100% - 2rem), var(--container)); margin: 0 auto; padding: 3rem 0 5rem; }
.sk-public-hero { display: grid; gap: 1rem; padding: 1.5rem 0 2.5rem; }.sk-public-hero .skeleton--line { max-width: 43rem; }.sk-public-toolbar { display: flex; max-width: 45rem; gap: .75rem; margin-top: .5rem; }.sk-public-toolbar .skeleton:first-child { flex: 1; }
.sk-catalog-list { display: grid; gap: 1rem; }.sk-list-row { display: grid; min-height: 7.3rem; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding: 1.25rem; }.sk-list-row .skeleton--avatar { width: 4.5rem; height: 4.5rem; flex-basis: 4.5rem; border-radius: 1rem; }.sk-list-copy { display: grid; gap: .65rem; }.sk-list-row .skeleton--button { width: 7.5rem; }
.sk-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.sk-grid-card { display: grid; min-height: 11rem; align-content: start; gap: 1rem; padding: 1.4rem; }.sk-grid-card .skeleton--avatar { border-radius: .8rem; }

.sk-detail-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding: 3rem 0 2rem; }.sk-detail-heading .skeleton--avatar { width: 6.6rem; height: 6.6rem; flex-basis: 6.6rem; border-radius: 1rem; }.sk-detail-copy { display: grid; gap: .8rem; }.sk-detail-tabs { display: flex; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--color-line); }.sk-detail-tabs .skeleton { width: 6rem; }.sk-detail-content { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; padding: 2rem 0 5rem; }.sk-detail-panel { display: grid; align-content: start; gap: 1rem; min-height: 15rem; padding: 1.5rem; }

.sk-dashboard { display: grid; gap: 1.25rem; }.sk-dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; }.sk-dashboard-heading > div { display: grid; width: min(100%, 38rem); gap: .8rem; }.sk-dashboard-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }.sk-metric { display: grid; gap: .7rem; min-height: 7rem; padding: 1.25rem; }.sk-metric .skeleton:first-child { width: 4rem; height: 2rem; }.sk-table { overflow: hidden; padding: 1.5rem; }.sk-table-head, .sk-table-row { display: grid; grid-template-columns: 1fr 2fr 8rem; gap: 1rem; align-items: center; }.sk-table-head { padding-bottom: 1rem; }.sk-table-row { min-height: 4rem; border-top: 1px solid var(--color-line); }
.sk-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; }.sk-form-card, .sk-form-aside { display: grid; align-content: start; gap: 1rem; padding: 1.5rem; }.sk-form-field { display: grid; gap: .55rem; }.sk-form-field .skeleton:last-child { height: 3rem; }.sk-form-field--area .skeleton:last-child { height: 8rem; }

.sk-profile { display: grid; width: min(calc(100% - 2rem), var(--container)); grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; margin: 0 auto; padding: 3rem 0 5rem; }.sk-profile-sidebar { display: grid; align-content: start; gap: .9rem; min-height: 30rem; padding: 1.4rem; }.sk-profile-main { display: grid; align-content: start; gap: 1rem; }.sk-profile-panel { display: grid; gap: 1rem; min-height: 14rem; padding: 1.5rem; }

@keyframes skeleton-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }

@media (max-width: 1250px) {
  .sk-home-shell { grid-template-columns: 170px minmax(0, 1fr); }
  .sk-home-rail { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .sk-app-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .sk-home-shell { grid-template-columns: 1fr; }.sk-home-sidebar { display: none; }.sk-home-rail { grid-template-columns: 1fr 1fr; }.sk-home-hero { grid-template-columns: 1fr; }.sk-home-hero .skeleton--image { display: none; }
  .sk-editorial-grid, .sk-collection-grid, .sk-dashboard-metrics { grid-template-columns: 1fr 1fr; }
  .sk-card-grid { grid-template-columns: 1fr 1fr; }
  .sk-table-head, .sk-table-row { grid-template-columns: 1fr; gap: .45rem; padding-block: 1rem; }
}
@media (max-width: 800px) { .sk-detail-heading { grid-template-columns: auto 1fr; }.sk-detail-heading > .skeleton--button { grid-column: 1 / -1; }.sk-detail-content, .sk-form-layout { grid-template-columns: 1fr; }.sk-profile { grid-template-columns: 1fr; }.sk-profile-sidebar { min-height: 12rem; } }
@media (max-width: 600px) {
  .sk-home-shell { width: 100%; padding-right: 12px; padding-left: 12px; }.sk-public-shell, .sk-profile { width: min(calc(100% - 1rem), var(--container)); }.sk-home-hero { min-height: 19rem; padding: 1.25rem; }.sk-home-hero-copy .skeleton--title { height: 5rem; }.sk-home-actions { flex-direction: column; }.sk-home-actions .skeleton { width: 100%; }
  .sk-app-grid, .sk-editorial-grid, .sk-collection-grid, .sk-home-rail, .sk-card-grid, .sk-dashboard-metrics { grid-template-columns: 1fr; }
  .sk-list-row { grid-template-columns: auto 1fr; }.sk-list-row > .skeleton--button { grid-column: 1 / -1; width: 100%; }.sk-dashboard-heading { align-items: stretch; flex-direction: column; }.sk-dashboard-heading > .skeleton { width: 100%; }
  .sk-detail-heading { align-items: start; }.sk-detail-heading .skeleton--avatar { width: 4.5rem; height: 4.5rem; flex-basis: 4.5rem; }.sk-detail-tabs { gap: 1rem; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: var(--skeleton-base); } }