.kcv-stories { margin-top: 12px; }
.kcv-stories-title { text-align:center; font-size:16px; font-weight:700; margin-bottom:10px; }
.kcv-stories-tiles { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

.kcv-tile {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 56px;
  height: 56px;
  position: relative;
}

.kcv-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.kcv-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, #ff7800 0%, #ffffff 50%, #00baff 100%);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.kcv-thumb {
  position:absolute;
  inset:3px;
  border-radius: 50%;
  overflow:hidden;
  background:#fff;
}

.kcv-thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kcv-modal { position: fixed; inset:0; z-index: 9999; }
.kcv-modal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.65); }
.kcv-modal-dialog {
  position: relative;
  width: min(520px, calc(100% - 24px));
  margin: 8vh auto 0;
  background: #000;
  border-radius: 10px;
  overflow:hidden;
}
.kcv-modal-video { width: 100%; height: auto; display:block; }
.kcv-modal-close {
  position:absolute; right:8px; top:6px;
  z-index:2;
  border:0; background: rgba(255,255,255,.2);
  color:#fff; width:32px; height:32px; border-radius: 16px;
  font-size: 20px; line-height: 32px;
}