.stories-container{-webkit-overflow-scrolling:touch;display:flex;flex-wrap:wrap;gap:15px;justify-content:center;overflow-x:auto;padding:20px 0;scroll-behavior:smooth}.stories-container::-webkit-scrollbar{height:6px}.stories-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.stories-container::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.stories-container::-webkit-scrollbar-thumb:hover{background:#555}.story-item{background:#769f6e;border-radius:12px;cursor:pointer;flex-shrink:0;height:150px;padding:3px;position:relative;transition:transform .2s ease;width:150px}.story-item:hover{transform:scale(1.05)}.story-item.viewed{background:#c7c7c7}.story-image{border:2px solid #fff;border-radius:8px;height:100%;object-fit:cover;width:100%}.image-viewer-modal{background:rgba(0,0,0,.9);display:none;height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity .3s ease;width:100%;z-index:9999}.image-viewer-modal.active{display:flex;opacity:1}.modal-content{align-items:center;display:flex;height:100%;justify-content:center;margin:0 auto;max-width:400px;position:relative;width:100%}.progress-bars{display:flex;gap:4px;left:20px;position:absolute;right:20px;top:20px;z-index:10001}.progress-bar{background:hsla(0,0%,100%,.3);border-radius:1px;flex:1;height:2px;overflow:hidden}.progress-fill{background:#769f6e;height:100%;transition:width .1s linear;width:0}.progress-fill.active{transition:width 5s linear}.image-container{align-items:center;display:flex;height:100%;justify-content:center;position:relative;touch-action:pan-y;width:100%}.viewer-image{-webkit-user-drag:none;border-radius:8px;max-height:90%;max-width:90%;object-fit:contain;user-select:none}.nav-button{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:rgba(0,0,0,.6);border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:24px;height:50px;position:absolute;top:50%;transform:translateY(-50%);transition:background .2s ease;width:50px;z-index:10001}.nav-button:hover{background:rgba(0,0,0,.8)}.nav-button.prev{left:20px}.nav-button.next{right:20px}.close-button{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:rgba(0,0,0,.6);border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:24px;height:40px;position:absolute;right:20px;top:20px;transition:background .2s ease;width:40px;z-index:10001}.close-button:hover{background:rgba(0,0,0,.8)}.touch-area{bottom:0;cursor:pointer;position:absolute;top:0;width:50%;z-index:10000}.touch-area.left{left:0}.touch-area.right{right:0}.image-info{bottom:20px;color:#fff;left:20px;position:absolute;right:20px;text-align:center;z-index:10001}.image-title{font-size:16px;font-weight:600;margin-bottom:5px}.image-description{font-size:14px;opacity:.8}.story-image[data-src]{opacity:0;transition:opacity .3s ease}.story-image.loaded{opacity:1}@media (max-width:768px){.stories-container{gap:12px;padding:15px 0}.story-item{height:120px;width:120px}.nav-button{font-size:20px;height:40px;width:40px}.progress-bars{left:15px;right:15px;top:15px}.close-button{font-size:20px;height:35px;right:15px;top:15px;width:35px}.image-info{bottom:15px;left:15px;right:15px}}@keyframes storyOpen{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.image-viewer-modal.active .modal-content{animation:storyOpen .3s ease}.story-item.loading:after{animation:spin 1s linear infinite;border:2px solid #fff;border-radius:50%;border-top-color:transparent;content:"";height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}