:root{
  --sk-base: rgba(58, 71, 80, .10);
  --sk-base-strong: rgba(58, 71, 80, .14);
  --sk-wave: rgba(255,255,255,.62);
  --sk-radius: .75rem;
  --sk-radius-sm: .5rem;
  --sk-gap: 1rem;
  --sk-transition: 220ms ease;
}

[data-bs-theme=dark]{
  --sk-base: rgba(255,255,255,.08);
  --sk-base-strong: rgba(255,255,255,.12);
  --sk-wave: rgba(255,255,255,.14);
}

@keyframes sk-wave {
  to { transform: translateX(100%); }
}

.skeleton,
.skeleton-line,
.skeleton-avatar,
.skeleton-circle,
.skeleton-chip{
  position:relative;
  overflow:hidden;
  background: var(--sk-base);
}

.skeleton,
.skeleton-card{
  border-radius: var(--sk-radius);
}

.skeleton::after,
.skeleton-line::after,
.skeleton-avatar::after,
.skeleton-circle::after,
.skeleton-chip::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, var(--sk-wave), transparent);
  transform: translateX(-100%);
  animation: sk-wave 1.25s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .skeleton::after,
  .skeleton-line::after,
  .skeleton-avatar::after,
  .skeleton-circle::after,
  .skeleton-chip::after{
    animation:none;
  }
}

.skeleton-card{
  border:1px solid rgba(67, 83, 95, 0.08);
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 .75rem 1.5rem rgba(15, 23, 42, .04);
}

.skeleton-line{
  height:.8rem;
  margin-bottom:.5rem;
  border-radius:999px;
}

.skeleton-line:last-child{
  margin-bottom:0;
}

.skeleton-avatar,
.skeleton-circle{
  width:48px;
  height:48px;
  border-radius:50%;
}

.skeleton-circle.skeleton-circle-sm{
  width:32px;
  height:32px;
}

.skeleton-circle.skeleton-circle-lg{
  width:72px;
  height:72px;
}

.skeleton-chip{
  display:inline-flex;
  min-width:84px;
  height:1.9rem;
  border-radius:999px;
}

.skeleton-stack{
  display:flex;
  flex-direction:column;
  gap:var(--sk-gap);
}

.skeleton-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.skeleton-grid{
  display:grid;
  gap:1rem;
}

/* Width helpers used across templates */
.skeleton-line.w-10{width:10%;}
.skeleton-line.w-15{width:15%;}
.skeleton-line.w-20{width:20%;}
.skeleton-line.w-25{width:25%;}
.skeleton-line.w-30{width:30%;}
.skeleton-line.w-35{width:35%;}
.skeleton-line.w-40{width:40%;}
.skeleton-line.w-45{width:45%;}
.skeleton-line.w-50{width:50%;}
.skeleton-line.w-55{width:55%;}
.skeleton-line.w-60{width:60%;}
.skeleton-line.w-65{width:65%;}
.skeleton-line.w-70{width:70%;}
.skeleton-line.w-75{width:75%;}
.skeleton-line.w-80{width:80%;}
.skeleton-line.w-85{width:85%;}
.skeleton-line.w-90{width:90%;}
.skeleton-line.w-100{width:100%;}

/* Block-level shell */
.skeleton-block{
  position:relative;
}

.skeleton-block .skeleton-slot{
  display:none;
}

.skeleton-block .skeleton-real{
  display:block;
  min-width:0;
  transition: opacity var(--sk-transition), visibility var(--sk-transition);
}

.skeleton-block.is-loading .skeleton-slot{
  display:block;
}

.skeleton-block.is-loading .skeleton-real{
  display:none;
}

.skeleton-block[data-skeleton-mode="overlay"]{
  position:relative;
}

.skeleton-block[data-skeleton-mode="overlay"] .skeleton-slot{
  display:none;
  position:absolute;
  inset:0;
  z-index:10;
  padding:0;
  background: rgba(var(--bs-body-bg-rgb,255,255,255), .78);
  backdrop-filter: blur(2px);
  border-radius: inherit;
}

.skeleton-block[data-skeleton-mode="overlay"].is-loading .skeleton-slot{
  display:block;
}

.skeleton-block[data-skeleton-mode="overlay"].is-loading .skeleton-real{
  display:block;
  pointer-events:none;
  user-select:none;
  opacity:.82;
}