.story-viewer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.95);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.story-viewer{position:relative;width:100%;max-width:500px;height:90vh;max-height:900px;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}.story-header{position:absolute;top:0;left:0;right:0;z-index:10;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,.7),transparent)}.story-progress-bars{display:flex;gap:4px;margin-bottom:12px}.progress-bar-container{flex:1;height:3px;background:hsla(0,0%,100%,.3);border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background:#fff;transition:width .1s linear;border-radius:2px}.story-header-info{display:flex;align-items:center;justify-content:space-between}.close-button{background:hsla(0,0%,100%,.2);border:none;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;backdrop-filter:blur(10px)}.close-button:hover{background:hsla(0,0%,100%,.3)}.story-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.story-media{width:100%;height:100%;object-fit:cover}.story-footer{position:absolute;bottom:0;left:0;right:0;padding:16px 24px 32px;display:flex;align-items:center;justify-content:flex-end;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);z-index:100}.story-actions-group{display:flex;align-items:center;gap:24px}.action-item{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:transform .2s}.action-item:hover{transform:scale(1.1)}.action-icon{font-size:26px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.action-icon.liked{color:#ff3040;animation:pulseHeart .3s ease}@keyframes pulseHeart{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.action-count{font-size:11px;color:#fff;font-weight:700}.story-products{position:absolute;bottom:100px;left:0;right:0;display:flex;justify-content:center;gap:12px;overflow-x:auto;scrollbar-width:none;padding:0 16px 8px;z-index:50}.story-products::-webkit-scrollbar{display:none}.story-navigation{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);display:flex;gap:24px;z-index:20;pointer-events:none}.nav-button{background:hsla(0,0%,100%,.1);border:none;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;backdrop-filter:blur(10px);font-size:16px;pointer-events:auto;opacity:0}.story-viewer:hover .nav-button{opacity:1}.nav-button:hover:not(:disabled){background:hsla(0,0%,100%,.3);transform:scale(1.1)}.nav-button:disabled{opacity:.1;cursor:not-allowed}.story-tap-areas{position:absolute;top:0;left:0;right:0;bottom:80px;display:grid;grid-template-columns:1fr 1fr;pointer-events:none;z-index:5}.tap-area{pointer-events:auto;cursor:pointer}.tap-left{grid-column:1}.tap-right{grid-column:2}@media (max-width:768px){.story-viewer{max-width:100%;height:100vh;max-height:100vh;border-radius:0}.story-navigation{display:none}.story-tap-areas{display:grid;bottom:100px}.story-footer{padding-bottom:40px}}.user-info{gap:10px}.user-avatar,.user-info{display:flex;align-items:center}.user-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;background:#fff;border:1px solid hsla(0,0%,100%,.2);justify-content:center}.user-avatar img{width:100%;height:100%;object-fit:contain}.user-text{display:flex;align-items:center;gap:8px}.user-name{font-weight:600;color:#fff;font-size:.9rem}.post-time{color:hsla(0,0%,100%,.7);font-size:.85rem}.stories-bar{width:100%;padding:16px 0;margin-bottom:20px;background:linear-gradient(180deg,#fff,#fafafa);border-bottom:1px solid #e0e0e0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}.stories-bar::-webkit-scrollbar{display:none}.stories-container{display:flex;gap:16px;padding:0 16px;min-width:min-content}.story-circle-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .2s ease;flex-shrink:0}.story-circle-wrapper:hover{transform:scale(1.05)}.story-circle-wrapper:active{transform:scale(.95)}.story-circle{position:relative;width:80px;height:80px;border-radius:50%;border:3px solid #ff6b6b;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .3s ease}.story-circle:hover{box-shadow:0 4px 16px rgba(0,0,0,.15)}.story-icon{font-size:32px;user-select:none}.story-badge{position:absolute;top:-4px;right:-4px;background:linear-gradient(135deg,#ff6b6b,#ff4757);color:#fff;font-weight:700;padding:2px 6px;border-radius:12px;min-width:20px;box-shadow:0 2px 4px rgba(0,0,0,.2);border:2px solid #fff}.story-badge,.story-label{font-size:12px;text-align:center}.story-label{font-weight:500;color:#333;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stories-bar-skeleton{display:flex;gap:16px;padding:16px;overflow-x:hidden}.story-circle-skeleton{width:80px;height:80px;border-radius:50%;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:loading 1.5s infinite;flex-shrink:0}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width:768px){.stories-bar{padding:12px 0}.stories-container{gap:12px;padding:0 12px}.story-circle{width:70px;height:70px}.story-icon{font-size:28px}.story-label{font-size:11px;max-width:70px}}