/* Сториз: лента кружков и полноэкранный плеер */
.stories-strip { display:flex; gap:14px; overflow-x:auto; padding:4px 2px 14px; margin-bottom:6px; scrollbar-width:none; }
.stories-strip::-webkit-scrollbar { display:none; }
.stories-strip { cursor:grab; user-select:none; }
.stories-strip.dragging { cursor:grabbing; }
.stories-strip.dragging .stories-item { pointer-events:none; }
.stories-item { flex:none; width:100px; text-align:center; cursor:pointer; font-size:13px; background:none; border:0; padding:0; color:inherit; }
.stories-ring { width:96px; height:96px; border-radius:50%; padding:4px; margin:0 auto 6px; display:flex;
  background:conic-gradient(#d4537e,#ef9f27,#7f77dd,#d4537e); }
.stories-ring.seen { background:#b4b2a9; }
.stories-ring img { flex:1; width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid var(--bg,#111010); background:#ddd; }
/* Мобильный — размеры как в ленте сториз Instagram: кружок 76px, ~4,5 штуки на экран */
@media (max-width:767px) {
  .stories-strip { gap:10px; }
  .stories-item { width:78px; font-size:12px; }
  .stories-ring { width:76px; height:76px; padding:3px; margin-bottom:4px; }
}
.stories-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.stories-badge { position:absolute; top:10px; left:10px; z-index:3; display:flex; align-items:center; gap:6px; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; border:0; border-radius:20px; padding:3px 12px 3px 3px; font-size:12px; }
.stories-badge .stories-ring { width:28px; height:28px; padding:2px; margin:0; }
.stories-badge .stories-ring img { border-width:2px; }

.stories-ov { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.88); display:none; align-items:center; justify-content:center; }
.stories-ov.on { display:flex; }
.stories-ov { touch-action:none; overscroll-behavior:contain; }
html.stories-lock { overflow:hidden; }
.stories-pl { position:relative; width:min(420px,100vw); height:min(100vh,760px); background:#000; overflow:hidden; border-radius:14px; color:#fff; }
@media (max-width:480px) { .stories-pl { border-radius:0; height:100vh; height:100dvh; } }
.stories-pl img.sm, .stories-pl video.sm { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.stories-bars { position:absolute; top:8px; left:8px; right:8px; display:flex; gap:3px; z-index:3; }
.stories-bars u { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.35); overflow:hidden; text-decoration:none; }
.stories-bars u b { display:block; height:100%; width:0; background:#fff; }
.stories-hd { position:absolute; top:18px; left:10px; right:10px; z-index:3; display:flex; align-items:center; gap:8px; font-size:14px;
  text-shadow:0 1px 3px rgba(0,0,0,.7); }
.stories-hd img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.stories-hd a { color:#fff; font-weight:600; text-decoration:underline; }
.stories-hd .ago { opacity:.75; font-size:12px; }
.stories-hd .btn-i { background:none; border:0; color:#fff; font-size:22px; cursor:pointer; line-height:1; padding:0 4px; }
.stories-hd .js-mute { margin-left:auto; }
.stories-zl, .stories-zr { position:absolute; top:60px; bottom:90px; width:38%; z-index:2; cursor:pointer; }
.stories-zl { left:0; } .stories-zr { right:0; }
.stories-cp { position:absolute; left:12px; right:12px; bottom:68px; z-index:3; background:rgba(0,0,0,.5); padding:8px 10px; border-radius:8px; font-size:14px; word-break:break-word; }
.stories-go { position:absolute; left:12px; right:12px; bottom:14px; z-index:3; text-align:center; background:#fff; color:#222 !important;
  border-radius:8px; padding:10px; font-weight:600; font-size:14px; text-decoration:none !important; }

/* Идёт переход на анкету (медленный интернет): затемняем и показываем индикатор */
.stories-ov.nav .stories-media { opacity:.35; transition:opacity .2s; }
.stories-ov.nav .stories-pl::after { content:''; position:absolute; top:50%; left:50%; width:36px; height:36px; margin:-18px 0 0 -18px;
  border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; z-index:4; animation:stories-spin .8s linear infinite; }
@keyframes stories-spin { to { transform:rotate(360deg); } }