.stories-section{padding:0 0 34px;background:var(--bg,#faf7f2)}
.stories-section>.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:28px}
.stories-track{display:flex;align-items:flex-start;justify-content:space-between;width:100%;gap:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 6px}
.stories-track::-webkit-scrollbar{display:none}
.story-bubble{flex:0 0 auto;width:92px;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:transparent;padding:0;cursor:pointer;scroll-snap-align:start}
.story-ring{width:80px;height:80px;padding:3px;border-radius:50%;background:linear-gradient(35deg,#ffd776 4%,#ff9b43 31%,#ed3f77 62%,#aa38a8 90%);transition:transform .2s ease,filter .2s ease}
.story-ring-inner{display:grid;width:100%;height:100%;place-items:center;border:3px solid var(--bg,#faf7f2);border-radius:50%;background:linear-gradient(145deg,#352a26,#9a6745);color:#fff;font-family:Georgia,serif;font-size:28px}
.story-bubble-title{max-width:100%;overflow:hidden;color:#493d34;font-size:12px;font-weight:500;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.story-bubble:hover .story-ring{filter:brightness(1.08);transform:scale(1.05)}
.story-viewer{position:fixed;z-index:10000;inset:0;display:none;align-items:center;justify-content:center;padding:18px}
.story-viewer.is-open{display:flex}
.story-viewer-backdrop{position:absolute;inset:0;background:rgba(12,10,10,.88);backdrop-filter:blur(8px)}
.story-viewer-card{position:relative;width:min(420px,calc(100vw - 34px));height:min(760px,calc(100dvh - 36px));overflow:hidden;border-radius:20px;background:#171311;box-shadow:0 25px 90px rgba(0,0,0,0.85);color:white}
.story-video{width:100%;height:100%;object-fit:cover;background:#171311}
.story-viewer-card:after{position:absolute;inset:0;content:"";pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.65),transparent 24%,transparent 66%,rgba(0,0,0,.75))}
.story-progress{position:absolute;z-index:4;top:14px;right:14px;left:14px;display:flex;gap:5px}
.story-progress span{height:3px;flex:1;overflow:hidden;border-radius:3px;background:rgba(255,255,255,0.35)}
.story-progress span i{display:block;width:0;height:100%;background:#fff}
.story-progress span.done i{width:100%}
.story-viewer-top{position:absolute;z-index:4;top:28px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.story-viewer-profile{display:flex;align-items:center;gap:10px;min-width:0}
.story-viewer-avatar{display:grid;width:36px;height:36px;flex:none;place-items:center;border:2px solid #fc744e;border-radius:50%;background:#352a26;color:#fff;font-family:Georgia,serif;font-size:15px;font-weight:700}
.story-viewer-profile strong{overflow:hidden;font-size:14.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,0.85)}
.story-viewer-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.story-play-toggle,.story-viewer-close{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.18);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:all .2s ease;padding:0}
.story-play-toggle:hover,.story-viewer-close:hover{background:rgba(0,0,0,0.78);transform:scale(1.08);border-color:rgba(255,255,255,0.35)}
.story-viewer-nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,0.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.18);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}
.story-viewer-nav:hover{background:rgba(0,0,0,0.8);transform:translateY(-50%) scale(1.1);border-color:rgba(255,255,255,0.4)}
.story-viewer-prev{left:14px}
.story-viewer-next{right:14px}
.story-viewer-bottom{position:absolute;z-index:4;right:16px;bottom:20px;display:flex;justify-content:flex-end;align-items:center}
.story-like{display:flex;align-items:center;gap:7px;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.18);border-radius:999px;padding:7px 14px;color:#fff;font-size:13px;cursor:pointer;transition:all .2s ease}
.story-like:hover{background:rgba(0,0,0,0.78);transform:scale(1.05)}
.story-like span{font-size:16px;line-height:1;display:flex;align-items:center;transition:transform .2s ease}
.story-like.is-liked{border-color:rgba(255,71,111,0.5)}
.story-like.is-liked span{color:#ff476f;transform:scale(1.15)}
.story-like:disabled{opacity:.7;cursor:wait}
.story-viewer.is-paused .story-progress span i{animation-play-state:paused!important}
@media(max-width:1080px){
.stories-track{justify-content:flex-start;gap:14px;padding:2px 0 6px}
.story-bubble{width:84px}
.story-ring{width:74px;height:74px}
.story-ring-inner{font-size:26px}
}
@media(max-width:768px){
.stories-section{padding:0 0 24px}
.stories-section>.container{padding-inline:14px}
.stories-track{display:flex;gap:10px;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 6px 0;margin:0}
.stories-track::-webkit-scrollbar{display:none}
.story-bubble{flex:0 0 calc((100% - 30px) / 4);width:calc((100% - 30px) / 4);min-width:0;gap:6px;scroll-snap-align:start;scroll-snap-stop:always}
.story-ring{width:min(66px, 18vw);height:min(66px, 18vw);padding:2.5px}
.story-ring-inner{border-width:2px;font-size:min(22px, 6vw)}
.story-bubble-title{font-size:11px;max-width:100%;font-weight:500;letter-spacing:-0.2px}
.story-viewer{padding:0}
.story-viewer-card{width:100%;height:100dvh;max-height:none;border-radius:0}
.story-viewer-nav{width:36px;height:36px;font-size:13px;background:rgba(0,0,0,0.3)}
.story-viewer-prev{left:8px}
.story-viewer-next{right:8px}
}