.story-viewer-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000f2;z-index:9999;display:flex;align-items:center;justify-content:center}.story-viewer-container{position:relative;width:100%;max-width:500px;height:90vh;background:#000;border-radius:16px;overflow:hidden}.story-header{position:absolute;top:0;left:0;right:0;z-index:10;padding:20px;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 100%)}.story-progress-bars{display:flex;gap:4px;margin-bottom:16px}.story-progress-bar{flex:1;height:3px;background:#ffffff4d;border-radius:2px;overflow:hidden}.story-progress-fill{height:100%;background:#fff;width:0%;transition:width .1s linear}.story-user-info{display:flex;align-items:center;gap:12px}.story-user-avatar{width:40px;height:40px;border-radius:50%;border:2px solid white;object-fit:cover}.avatar-placeholder{width:40px;height:40px;border-radius:50%;border:2px solid white;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center}.story-user-details{display:flex;flex-direction:column}.story-user-name{color:#fff;font-weight:600;font-size:14px}.story-timestamp{color:#ffffffb3;font-size:12px}.story-close-btn{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:#fff6;border:2px solid rgba(255,255,255,.6);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;z-index:20}.story-close-btn:hover{background:#fff9;border-color:#fffc;transform:scale(1.1)}.story-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.story-content img,.story-content video{max-width:100%;max-height:100%;object-fit:contain}.story-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:#fff6;border:2px solid rgba(255,255,255,.6);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;z-index:20}.story-nav:hover{background:#fff9;border-color:#fffc;transform:translateY(-50%) scale(1.1)}.story-prev{left:20px}.story-next{right:20px}.story-actions{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,transparent 100%);display:flex;justify-content:space-between;align-items:center}.story-views{color:#fff;font-size:14px;display:flex;align-items:center;gap:6px}.story-delete-btn{padding:8px 16px;background:#dc3545e6;color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .2s}.story-delete-btn:hover{background:#dc3545}@media (max-width: 768px){.story-viewer-container{max-width:100%;height:100vh;border-radius:0}}