.instagram-stories-bar { display: flex; justify-content: flex-start; gap: 20px; padding: 15px 20px; overflow-x: auto; background: #fff; scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap; position: relative; z-index: 100; touch-action: pan-x; cursor: grab; }
.instagram-stories-bar::-webkit-scrollbar { display: none; }
.instagram-stories-bar.dragging { cursor: grabbing; }
.story-circle { text-align: center; cursor: pointer; flex: 0 0 auto; min-width: 70px; }
.story-ring { width: 70px; height: 70px; padding: 2px; background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.story-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid #fff; }
.story-circle p { margin-top: 7px; font-size: 12px; color: #333; max-width: 80px; word-wrap: break-word; }
@media (max-width: 480px) { .story-ring { width: 60px; height: 60px; } .story-circle p { font-size: 11px; max-width: 70px; } .instagram-stories-bar { padding: 15px 10px; gap: 15px; } }
.stories-fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; display: flex; flex-direction: column; color: white; }
.progress-bars { display: flex; gap: 4px; padding: 8px; }
.progress-bar { flex: 1; height: 3px; background: rgba(255,255,255,0.4); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: white; width: 0; transition: width 0.1s linear; }
.story-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.close-btn { position: absolute; top: 20px; left: 20px; font-size: 28px; cursor: pointer; }
.tap-left, .tap-right { position: absolute; top: 0; width: 30%; height: 100%; }
.tap-left { left: 0; } .tap-right { right: 0; }