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