.story_overlay {
	position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
	height:100vh;height:-webkit-fill-available;height:100dvh;
	background:#000;
}
body.story_open .small_modal_out{z-index:100000 !important}
body.story_open .large_modal_out{z-index:100000 !important}
body.story_open .over_modal_out{z-index:100001 !important}
body.story_open .over_emodal_out{z-index:100001 !important}
body.story_open .top_modal_out{z-index:100002 !important}
body.story_open #top_notify{z-index:100010 !important}
.story_bg{position:absolute;inset:0;overflow:hidden}
.story_bg_media{position:absolute;inset:-12%;background:#000 center/cover no-repeat;filter:blur(28px);transform:scale(1.1);opacity:.95}
.story_bg_dim{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.story_card{position:relative;width:100vw;height:100%;background:transparent;border:0;border-radius:0;overflow:hidden;display:flex;flex-direction:column}
@media(min-width:700px){.story_card{width:min(420px,92vw);height:min(92dvh,920px);border-radius:16px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 28px 84px rgba(0,0,0,.55)}}
.story_segments{display:flex;gap:4px;padding:calc(8px + env(safe-area-inset-top,0px)) 8px 0;position:absolute;top:0;left:0;right:0;z-index:10}
.story_seg{flex:1;height:2px;background:rgba(255,255,255,.3);border-radius:999px;overflow:hidden}
.story_seg_fill{height:100%;width:0;background:#fff;border-radius:999px}
.story_header{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:0;right:0;z-index:9;display:flex;justify-content:space-between;align-items:center;padding:0 8px}
.story_header_spacer{flex:1}
.story_close_btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;background:rgba(0,0,0,.25);border:0;border-radius:50%;cursor:pointer;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.story_close_btn:hover{background:rgba(0,0,0,.45)}
.story_more_box{position:relative;display:flex;align-items:center;margin-right:6px}
.story_more_btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;background:rgba(0,0,0,.25);border:0;border-radius:50%;cursor:pointer;text-shadow:0 2px 8px rgba(0,0,0,.5);transition:background .15s}
.story_more_btn:hover{background:rgba(0,0,0,.45)}
.story_more_menu{position:absolute;top:100%;right:0;margin-top:4px;min-width:140px;background:rgba(30,30,36,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:12px;border:1px solid rgba(255,255,255,.08);overflow:hidden;z-index:30;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.story_more_item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border:none;background:none;color:rgba(255,255,255,.85);font-size:14px;cursor:pointer;text-align:left;transition:background .1s}
.story_more_item:hover{background:rgba(255,255,255,.08)}
.story_more_item i{width:18px;text-align:center}
.story_body{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.story_swipe_wrap{position:absolute;inset:0;z-index:0;width:100%;height:100%;will-change:transform}
.story_mute_btn{width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.5);border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s,transform .15s;padding:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:story_mute_in .35s ease-out}
@keyframes story_mute_in{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:scale(1)}}
.story_mute_btn:hover{background:rgba(0,0,0,.65);transform:scale(1.08)}
.story_mute_btn:active{transform:scale(.92)}
.story_mute_btn svg{display:block;pointer-events:none}
.story_nav_vertical{position:absolute;left:12px;top:50%;z-index:6;transform:translateY(-50%);width:48px;height:112px;background:rgba(25,25,25,.96);border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border:1px solid rgba(255,255,255,.05);box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:auto;overflow:hidden;opacity:0;transition:opacity .2s ease}
.story_nav_horizontal{position:absolute;left:50%;bottom:80px;z-index:6;transform:translateX(-50%);width:112px;height:48px;background:rgba(25,25,25,.96);border-radius:28px;display:flex;align-items:center;justify-content:center;gap:0;border:1px solid rgba(255,255,255,.05);box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:auto;overflow:hidden;opacity:0;transition:opacity .2s ease}
.story_card:hover .story_nav_vertical,.story_card:hover .story_nav_horizontal{opacity:1}
@media(hover:none){.story_nav_vertical,.story_nav_horizontal{display:none}}
.story_nav_half{flex:1;display:flex;align-items:center;justify-content:center;height:100%;width:100%;background:transparent;border:none;cursor:pointer;color:#fff;padding:0;margin:0;outline:none;-webkit-tap-highlight-color:transparent;transition:background .2s ease,transform .15s ease,opacity .2s ease}
.story_nav_half:hover{background:rgba(255,255,255,.08)}
.story_nav_half:active{transform:scale(.92)}
.story_nav_half svg{display:block}
.story_nav_vertical .story_nav_sep{width:24px;height:1px;background:rgba(255,255,255,.04);flex-shrink:0}
.story_nav_horizontal .story_nav_sep{width:1px;height:24px;background:rgba(255,255,255,.04);flex-shrink:0}
@media(max-width:700px){.story_nav_vertical{width:44px;height:100px;border-radius:24px;left:8px}.story_nav_horizontal{width:100px;height:44px;border-radius:24px;bottom:60px}.story_nav_half svg{width:18px;height:18px}.story_nav_vertical .story_nav_sep{width:20px}.story_nav_horizontal .story_nav_sep{height:20px}}
.story_body_blur{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000 center/cover no-repeat;filter:blur(22px);transform:scale(1.12);opacity:.92;will-change:filter}
.story_body_blur:after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.story_media_wrap{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.story_media_wrap img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.story_media_wrap video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:transparent}
.story_text_media{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 24px 120px;text-align:center;font-weight:900;line-height:1.4;font-size:24px;color:#fff;white-space:pre-wrap;word-break:break-word;box-sizing:border-box}
.story_text_media[data-bg="g1"]{background:linear-gradient(135deg,#0ea5e9,#7c3aed)}
.story_text_media[data-bg="g2"]{background:linear-gradient(135deg,#22c55e,#16a34a)}
.story_text_media[data-bg="g3"]{background:linear-gradient(135deg,#ef4444,#f97316)}
.story_text_media[data-bg="g4"]{background:linear-gradient(135deg,#111827,#334155)}
.story_text_media[data-bg="g5"]{background:linear-gradient(135deg,#e11d48,#db2777)}
.story_text_media[data-bg="g6"]{background:linear-gradient(135deg,#0f172a,#06b6d4)}
.story_text_media[data-bg="g7"]{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.story_text_media[data-bg="g8"]{background:linear-gradient(135deg,#64748b,#0f172a)}
.story_play_overlay{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;pointer-events:none}
.story_play_btn{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.story_play_btn i{color:#fff;font-size:28px}
.story_actions{position:absolute;right:8px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:8;display:flex;flex-direction:column;align-items:center;gap:18px;pointer-events:none}
.story_actions .story_action_btn{pointer-events:auto}
.story_action_btn{display:flex;flex-direction:column;align-items:center;color:#fff;gap:2px;font-size:11px;background:none;border:none;padding:0;cursor:pointer;min-width:48px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.story_action_btn i{font-size:26px;transition:transform .1s ease}
.story_action_btn:active i{transform:scale(1.2)}
.story_action_btn span{font-weight:700}
#story_views_btn:not(.story_views_clickable){cursor:default}
#story_views_btn.story_views_clickable:hover i{filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
@media(max-height:520px){.story_actions{gap:8px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}.story_action_btn{min-width:40px}.story_action_btn i{font-size:22px}.story_actions .story_action_avatar{width:38px;height:38px}.story_actions .story_music_disc{width:40px;height:40px}.story_actions .story_music_disc_ring{width:24px;height:24px}}
.story_action_avatar{width:48px;height:48px;border-radius:50%;border:2px solid #fff;object-fit:cover;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.story_music_disc{position:relative;width:48px;height:48px;flex:0 0 auto;border-radius:50%;overflow:hidden;background:repeating-radial-gradient(circle at center,#29292d 0 2px,#111114 3px 5px,#242428 6px 7px);border:1px solid rgba(255,255,255,.22);box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);animation:storyDiscSpin 3.2s linear infinite}
.story_music_disc::after{content:"";position:absolute;inset:4px;border-radius:50%;background:conic-gradient(from 45deg,transparent 0 12%,rgba(255,255,255,.13) 13% 15%,transparent 16% 46%,rgba(255,255,255,.08) 47% 49%,transparent 50%);pointer-events:none}
.story_music_disc_ring{position:absolute;top:50%;left:50%;z-index:1;width:28px;height:28px;padding:2px;box-sizing:border-box;border-radius:50%;background:linear-gradient(135deg,#12b7f5,#fff 45%,#fe2c55);transform:translate(-50%,-50%)}
.story_music_disc_ring img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#222}
@keyframes storyDiscSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.story_music_disc{animation:none}}
.story_liked .story_action_btn[data-action="like"] i{color:#ef4444}
.story_liked .story_action_btn[data-action="like"]{animation:storyLikePop .3s ease}
@keyframes storyLikePop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}
.story_info{position:absolute;left:12px;right:80px;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:8;color:#fff;pointer-events:none}
.story_info_name{font-weight:900;font-size:15px;margin-bottom:4px;text-shadow:0 2px 8px rgba(0,0,0,.6);display:inline-block;pointer-events:auto;cursor:pointer}
.story_info_name:hover{opacity:.85}
.story_upload_time{margin:-1px 0 5px;font-size:11px;font-weight:600;line-height:1.25;color:rgba(255,255,255,.76);text-shadow:0 1px 5px rgba(0,0,0,.7);direction:ltr;unicode-bidi:plaintext}
.story_info_text{font-size:13px;opacity:.95;text-shadow:0 1px 6px rgba(0,0,0,.5);max-height:60px;overflow:hidden;text-overflow:ellipsis;white-space:pre-line;transition:max-height .25s ease}
.story_info_text.expanded{max-height:45vh;overflow-y:auto;-webkit-overflow-scrolling:touch;pointer-events:auto}
.story_see_more{pointer-events:auto;cursor:pointer;background:none;border:none;padding:2px 0 0;margin:0;display:block;color:#fff;font-weight:700;font-size:12px;text-decoration:underline;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.story_comments_backdrop{position:fixed;inset:0;z-index:100002;background:rgba(0,0,0,.55);opacity:0;transition:opacity .35s ease;pointer-events:none;-webkit-tap-highlight-color:transparent}
.story_comments_backdrop.open{opacity:1;pointer-events:auto}
.story_comments_panel{position:fixed;left:0;right:0;bottom:0;z-index:100003;background:rgba(22,22,28,.96);border-radius:16px 16px 0 0;max-height:65%;overflow:hidden;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:0 -8px 40px rgba(0,0,0,.5);will-change:transform}
.story_comments_panel.open{transform:translateY(0)}
.story_comments_handle{width:36px;height:4px;background:rgba(255,255,255,.2);border-radius:999px;margin:8px auto 0}
.story_comments_header{padding:6px 14px 8px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0}
.story_comments_header span{font-weight:800}
.story_comments_header button{background:none;border:none;color:rgba(255,255,255,.5);font-size:20px;cursor:pointer;padding:2px 6px;transition:color .15s}
.story_comments_header button:hover{color:#fff}
.story_comments_list{flex:1;overflow-y:auto;padding:0 14px 6px}
.story_comment_form{display:flex;align-items:center;gap:8px;padding:8px 14px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));flex-shrink:0;border-top:1px solid rgba(255,255,255,.06)}
.story_comment_form .full_input{flex:1;min-width:0;width:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:24px;height:38px;line-height:38px;padding:0 16px;font-size:14px;outline:none;transition:background .15s ease}
.story_comment_form .full_input::placeholder{color:rgba(255,255,255,.4)}
.story_comment_form .full_input:focus{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2)}
#story_comment_send{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .15s ease}
#story_comment_send:hover{background:rgba(255,255,255,.18)}
.story_no_comments{color:rgba(255,255,255,.4);text-align:center;padding:24px 12px;font-size:14px}
.story_upload_progress{z-index:999999;display:flex;align-items:center;justify-content:center}
.story_upload_progress .modal_content{width:360px}
.story_bg_pick{cursor:pointer;transition:transform .1s ease}
.story_bg_pick:active{transform:scale(.92)}
.story_delete_btn{min-width:42px;padding:4px 0}
.story_delete_btn i{margin:0}

/* Story custom modal (views/likes/shares) */
.story_modal_backdrop{position:fixed;inset:0;z-index:100002;background:rgba(0,0,0,.55);opacity:0;transition:opacity .35s ease;pointer-events:none;-webkit-tap-highlight-color:transparent}
.story_modal_backdrop.open{opacity:1;pointer-events:auto}
.story_modal_panel{position:fixed;left:0;right:0;bottom:0;z-index:100003;background:rgba(22,22,28,.96);border-radius:16px 16px 0 0;max-height:65%;overflow:hidden;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:0 -8px 40px rgba(0,0,0,.5);will-change:transform}
.story_modal_panel.open{transform:translateY(0)}
.story_modal_handle{width:36px;height:4px;background:rgba(255,255,255,.2);border-radius:999px;margin:8px auto 0;flex-shrink:0}
.story_modal_header{padding:6px 14px 8px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:700;font-size:16px;flex-shrink:0}
.story_modal_header button{background:none;border:none;color:rgba(255,255,255,.5);font-size:20px;cursor:pointer;padding:2px 6px;transition:color .15s}
.story_modal_header button:hover{color:#fff}
.story_modal_list{flex:1;overflow-y:auto;padding:0 14px 6px}

/* Comment item */
.story_citem{display:flex;gap:8px;padding:10px 10px;margin-bottom:6px;align-items:flex-start;background:rgba(255,255,255,.04);border-radius:10px}
.story_citem:last-child{margin-bottom:0}
.story_cav{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-top:2px}
.story_ctxt{color:#fff;font-size:13px;line-height:1.5;min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.story_cname{font-weight:800;font-size:13px;display:block;line-height:1.3}
.story_ctext{color:rgba(255,255,255,.9);font-size:13px;line-height:1.4;word-break:break-word}
.story_cdate{color:rgba(255,255,255,.4);font-size:11px;line-height:1.2}
.story_cdel{min-width:30px;padding:2px 0;font-size:11px;background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;flex-shrink:0;align-self:flex-start}
.story_cdel:hover{color:#ef4444}

.story_ring.story_self{position:relative}
.story_ring.story_self:after{content:"+";position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#12b7f5;color:#fff;font-weight:900;font-size:20px;line-height:18px;z-index:2}
.story_ring.story_uploading{animation:storyRingPulse .8s ease-in-out infinite}
@keyframes storyRingPulse{0%,100%{box-shadow:0 0 0 0 rgba(18,183,245,.5)}50%{box-shadow:0 0 0 6px rgba(18,183,245,0)}}

/* Share modal */
.story_share_friend{border-radius:10px;padding:8px 10px;margin-bottom:4px}
.story_share_send_btn{font-size:12px;padding:4px 12px;border-radius:16px;white-space:nowrap}