:root{
  --sp-gap:.75rem;
  --sp-backdrop:rgba(0,0,0,.9);
  --sp-radius:10px;
  --sp-aspect:9/16;
  --sp-cols-mobile:3.5;
  --sp-cols-desktop:6;
  --sp-thumb-size:72px;
  --sp-thumb-size-desktop:75px;
  --sp-card-max-width:180px;
  --sp-card-max-width-mobile:200px;
  --sp-thumb-ring:2px;
}
.spstories-rowwrap{ position:relative; margin:.25rem 0 1rem; }
.spstories-row{
  display:flex;
  gap:var(--sp-gap);
  overflow:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:.25rem 2.25rem;
  mask-image:linear-gradient(to right, black calc(100% - 24px), transparent);
}
.spstories-rowwrap.scrolled-left .spstories-row{
  mask-image:linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}
.spstories-row::-webkit-scrollbar{ display:none; }

/* —— Card layout (rect / rounded / square presets) —— */
.spstories-rowwrap--card .spstories-card{
  flex:0 0 auto;
  width:calc((100vw - 4.5rem - (var(--sp-cols-mobile) - 1) * var(--sp-gap)) / var(--sp-cols-mobile));
  max-width:var(--sp-card-max-width-mobile);
  aspect-ratio:var(--sp-aspect);
  border-radius:var(--sp-radius);
  overflow:hidden;
  background:#111;
  scroll-snap-align:start;
  position:relative;
  cursor:pointer;
}
@media (min-width:992px){
  .spstories-rowwrap--card .spstories-card{
    width:calc((min(1200px, 100vw) - 4.5rem - (var(--sp-cols-desktop) - 1) * var(--sp-gap)) / var(--sp-cols-desktop));
    max-width:var(--sp-card-max-width);
  }
}
.spstories-rowwrap--card .spstories-thumb{
  width:100%;
  height:100%;
  display:block;
  border-radius:inherit;
  overflow:hidden;
}
.spstories-rowwrap--card .spstories-thumb img,
.spstories-rowwrap--card .spstories-card-placeholder{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}
.spstories-rowwrap--card .spstories-card:hover img{ transform:scale(1.03); }
.spstories-rowwrap--card .spstories-card img{ transition:transform .25s ease; }

/* —— Circle / avatar layout —— */
.spstories-rowwrap--circle .spstories-row{ padding:.5rem 2.25rem; }
.spstories-rowwrap--circle .spstories-card{
  width:auto;
  max-width:none;
  aspect-ratio:auto;
  background:transparent;
  overflow:visible;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--sp-gap) * 0.55);
  scroll-snap-align:start;
  cursor:pointer;
  border-radius:0;
}
.spstories-rowwrap--circle .spstories-thumb{
  width:var(--sp-thumb-size);
  height:var(--sp-thumb-size);
  border-radius:var(--sp-radius);
  overflow:hidden;
  background:#111;
  flex-shrink:0;
  box-shadow:0 0 0 var(--sp-thumb-ring) rgba(255,255,255,.65), 0 2px 10px rgba(0,0,0,.35);
}
@media (min-width:992px){
  .spstories-rowwrap--circle .spstories-thumb{
    width:var(--sp-thumb-size-desktop);
    height:var(--sp-thumb-size-desktop);
  }
  .spstories-rowwrap--circle .spstories-rowbtn{ display:none !important; }
}
.spstories-rowwrap--circle .spstories-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.spstories-rowwrap--circle .spstories-circletitle{
  font-size:11px;
  max-width:calc(var(--sp-thumb-size) + 24px);
  color:#555;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (min-width:992px){
  .spstories-rowwrap--circle .spstories-circletitle{
    max-width:calc(var(--sp-thumb-size-desktop) + 24px);
  }
}

.spstories-card-placeholder{ background:#222; min-height:40px; }

.spstories-cardcap{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:.35rem;
  padding:.35rem .45rem;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  color:#fff; font-size:.8rem;
  pointer-events:none;
}
.spstories-cardtitle{ font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.spstories-badge{ background:rgba(0,0,0,.6); color:#fff; font-size:.72rem; padding:.15rem .45rem; border-radius:999px; }

.spstories-rowbtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px; border:0;
  background:rgba(0,0,0,.5); color:#fff; cursor:pointer; z-index:2;
}
.spstories-rowbtn--prev{ left:.25rem; }
.spstories-rowbtn--next{ right:.25rem; }
.spstories-rowbtn[hidden]{ display:none !important; }
@media (max-width:991px){ .spstories-rowbtn{ display:none !important; } }

/* Overlay */
.spstories-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:999999; background:var(--sp-backdrop); padding:24px 0; }
@media (max-width:600px){ .spstories-overlay{ padding:56px 0; } }
.spstories-overlay[aria-hidden="false"]{ display:flex; }
.spstories-backdrop{ position:absolute; inset:0; z-index:0; }
.spstories-wrap{ display:flex; flex-direction:column; align-items:center; gap:5px; width:100%; height:calc(var(--spvh, 1vh) * 100); height:100dvh; position:relative; z-index:1; }
@supports (height:100dvh){ .spstories-wrap{ height:100dvh; } }
.spstories-stage{ position:relative; width:min(96vw, 520px); aspect-ratio:9/16; background:#000; border-radius:12px; overflow:hidden; margin:6px 0; }
@media (max-width:600px){ .spstories-stage{ width:100vw; border-radius:0; } }

.spstories-media{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.spstories-media img, .spstories-media video{ width:100%; height:100%; object-fit:cover; }
.spstories-overlay.spstories-fit-height .spstories-media img,
.spstories-overlay.spstories-fit-height .spstories-media video{ height:100%; width:auto; object-fit:contain; }

.spstories-ui{ position:absolute; inset:0; display:flex; flex-direction:column; pointer-events:none; z-index:2; }
.spstories-bars{ display:flex; gap:.25rem; padding:.5rem; pointer-events:auto; }
.spstories-bar{ flex:1; height:3px; background:rgba(255,255,255,.25); border-radius:999px; overflow:hidden; }
.spstories-bar>span{ display:block; height:100%; width:0%; background:rgba(255,255,255,.9); }

.spstories-top{ display:flex; align-items:center; width:100%; padding:.35rem .5rem 0 .5rem; position:relative; z-index:3; }
.spstories-head{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.spstories-avatar{ width:28px; height:28px; border-radius:50%; background:#333; overflow:hidden; flex:0 0 auto; }
.spstories-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.spstories-title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }
.spstories-labels{ display:flex; gap:.25rem; flex-wrap:wrap; }
.spstories-chip{ background:rgba(0,0,0,.45); color:#fff; border-radius:999px; padding:.15rem .45rem; font-size:.72rem; }

.spstories-top-controls{ margin-left:auto; display:flex; align-items:center; gap:.5rem; pointer-events:auto; }
.spstories-close, .spstories-audiobtn{ position:relative; width:36px; height:36px; border-radius:999px; background:rgba(0,0,0,.45) !important; border:0 !important; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:4; }

.spstories-ctrls{ position:absolute; inset:0; display:grid; grid-template-columns:45% 10% 45%; pointer-events:auto; z-index:1; }
.spstories-ctrls button{ background:transparent !important; border:0 !important; color:transparent; width:100%; height:100%; }
.spstories-ctrls .spstories-gap{ pointer-events:none; }

.spstories-caption{ font-size:11px; margin-top:auto; color:#fff; padding:.75rem; text-shadow:0 1px 2px rgba(0,0,0,.35); pointer-events:none; }
.spstories-cta{ pointer-events:auto; align-self:center; margin:0 auto .75rem; background:#fff; color:#111; text-decoration:none; font-weight:600; font-size:12px; padding:.45rem 1rem; border-radius:999px; z-index:5; }
.spstories-cta[hidden]{ display:none !important; }
.spstories-tapnext{ pointer-events:auto; position:absolute; bottom:4.5rem; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.55); color:#fff; border:0; border-radius:999px; padding:.4rem .9rem; font-size:12px; cursor:pointer; z-index:5; }
.spstories-tapnext[hidden]{ display:none !important; }

.spstories-dock{ display:flex; gap:.5rem; overflow:auto; -webkit-overflow-scrolling:touch; padding:0 .5rem .25rem; max-width:min(96vw, 520px); }
.spdock-item{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.2rem; cursor:pointer; color:#fff; opacity:.8; }
.spdock-item.active{ opacity:1; }
.spdock-thumb{ width:40px; height:40px; border-radius:50%; overflow:hidden; background:#222; border:2px solid rgba(255,255,255,.35); flex-shrink:0; }
.spdock-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.spdock-title{ max-width:50px; font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; margin-top:-5px; }

.spstories-loader{ width:48px; height:48px; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:rgba(255,255,255,.9); animation:spstories-spin 1s linear infinite; }
@keyframes spstories-spin{ to{ transform:rotate(360deg); } }
.spstories-overlay.spstories-reduced-motion .spstories-loader{ animation:none; }

@media (prefers-reduced-motion:reduce){
  .spstories-rowwrap--card .spstories-card img{ transition:none; }
  .spstories-loader{ animation:none; }
}

@media (max-width:600px){
  .spstories-stage{ width:100vw; border-radius:0; }
  .spstories-bars{ padding:.35rem .35rem .25rem; }
  .spstories-top{ padding:.35rem .5rem 0 .5rem; }
  .spstories-caption{ padding:.5rem; }
  .spstories-close, .spstories-audiobtn{ width:32px; height:32px; }
  .spdock-thumb{ width:42px; height:42px; }
}
@media (max-width:380px){ .spdock-thumb{ width:36px; height:36px; } }