.shringaar-stories-bar { background: #ffffff; padding: 16px; border-radius: 16px; border: 1px solid #e2e8f0; font-family: inherit; margin-bottom: 20px; }
.shringaar-stories-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.shringaar-live-pill { background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 9999px; display: inline-flex; align-items: center; gap: 6px; }
.shringaar-live-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #dc2626; animation: pulse 1.5s infinite; }
.shringaar-timer-pill { font-size: 11px; color: #64748b; }
.shringaar-stories-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.shringaar-story-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; shrink-0; }
.shringaar-ring { width: 68px; height: 68px; border-radius: 50%; padding: 2.5px; background: linear-gradient(45deg, #f09433, #dc2743, #cc2366); box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; }
.shringaar-ring.dashed { background: transparent; border: 2px dashed #cbd5e1; padding: 2px; }
.shringaar-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #ffffff; }
.plus-badge { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; border-radius: 50%; background: #25D366; color: #fff; font-size: 14px; font-weight: bold; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.story-name { font-size: 11px; font-weight: 700; color: #1e293b; max-width: 72px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Modal */
.shringaar-story-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.story-modal-inner { position: relative; width: 100%; max-width: 420px; height: 90vh; max-height: 720px; background: #000; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.story-progress-segments { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 40; display: flex; gap: 4px; height: 3px; }
.story-segment { flex: 1; background: rgba(255,255,255,0.3); border-radius: 999px; overflow: hidden; }
.story-segment-fill { height: 100%; width: 0%; background: #fff; }
.story-top-info { position: absolute; top: 22px; left: 14px; right: 14px; z-index: 40; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.story-shop-meta strong { display: block; font-size: 13px; font-weight: 800; }
.story-shop-meta span { font-size: 11px; opacity: 0.8; }
.story-close-btn { background: rgba(0,0,0,0.5); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.story-screen-touch { position: absolute; top: 60px; bottom: 90px; z-index: 30; }
.left-touch { left: 0; width: 30%; }
.right-touch { right: 0; width: 70%; }
.story-media-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.story-media-container img { width: 100%; height: 100%; object-fit: contain; }
.story-bottom-bar { position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 40; display: flex; flex-direction: column; gap: 8px; }
.story-reactions { display: flex; justify-content: center; gap: 8px; }
.emoji-btn { background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; width: 34px; height: 34px; font-size: 16px; cursor: pointer; }
.story-reply-box { display: flex; gap: 6px; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); border-radius: 999px; padding: 4px 6px 4px 14px; border: 1px solid rgba(255,255,255,0.2); }
.story-reply-box input { flex: 1; background: transparent; border: none; color: #fff; font-size: 12px; outline: none; }
.story-reply-box button { background: #25D366; border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-weight: bold; cursor: pointer; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }