:root{
  --sk-bg: #ececec;           /* day */
  --sk-bg-alpha: .28;         /* <— reduce base fill */
  --sk-rail-alpha: .20;       /* shimmer intensity */
  --sk-speed: 1.0s;
  --sk-radius: 10px;
  --sk-z: 2147483000;
}
body.night-mode{
  --sk-bg: #1f1f1f;           /* night */
  --sk-bg-alpha: .10;         /* darker UIs need lighter fill */
  --sk-rail-alpha: .18;
}

/* SOFT overlay — translucent, never hides content completely */
.sk-overlay{
  position:absolute; inset:0; border-radius:inherit;
  overflow:hidden; pointer-events:none; z-index:var(--sk-z);
  background: rgba( var(--sk-bg-r,255), var(--sk-bg-g,255), var(--sk-bg-b,255), var(--sk-bg-alpha) );
  opacity:.95;                         /* gentle veil */
  transition: opacity .18s ease;       /* smooth peel */
}

/* If your CSS doesn't have channels, approximate via var color */
.sk-overlay{ background: color-mix(in srgb, var(--sk-bg) calc(var(--sk-bg-alpha)*100%), transparent); }

/* shimmer rail */
.sk-overlay::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,var(--sk-rail-alpha)) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: sk-rail var(--sk-speed) ease-in-out infinite;
}
@keyframes sk-rail { 100% { transform: translateX(100%); } }

/* host */
.is-skeleton{ position:relative; border-radius:var(--sk-radius); }