html{overscroll-behavior:none}
:root{--bg:#fafafa;--card:#fff;--border:#dbdbdb;--text:#262626;--text2:#8e8e8e;--accent:#d4705f;--like:#ed4956;--blue:#0095f6;--green:#00c853;--ig:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);--shadow:0 1px 3px rgba(0,0,0,.1)}
.dark{--bg:#000;--card:#121212;--border:#262626;--text:#fafafa;--text2:#a8a8a8;--shadow:0 1px 3px rgba(255,255,255,.05)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{overscroll-behavior:none;touch-action:pan-y pinch-zoom;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;padding-bottom:80px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%}
/* Header */
.header{background:var(--ig);color:#fff;padding:12px 16px;position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);transition:transform .3s ease}
.header-left{display:flex;align-items:center;gap:8px}
.header h1{font-size:1.2rem;font-weight:700}
.header-right{display:flex;align-items:center;gap:12px}
.header-btn{background:rgba(255,255,255,.2);border:none;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;position:relative;transition:background .2s}
.header-btn:hover{background:rgba(255,255,255,.3)}
.header-btn .badge{position:absolute;top:-2px;right:-2px;background:#ed4956;color:#fff;font-size:.65rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.dark-toggle{display:flex;align-items:center;gap:6px;font-size:.85rem}
.dark-toggle input{display:none}
.dark-toggle label{width:40px;height:22px;background:rgba(255,255,255,.3);border-radius:11px;position:relative;cursor:pointer;transition:background .2s}
.dark-toggle label::after{content:'';position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform .2s}
.dark-toggle input:checked+label{background:rgba(0,0,0,.3)}
.dark-toggle input:checked+label::after{transform:translateX(18px)}
/* Stories Bar */
.stories-bar{background:var(--card);border-bottom:1px solid var(--border);padding:12px 0;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.stories-bar::-webkit-scrollbar{display:none}
.stories-inner{display:inline-flex;gap:12px;padding:0 12px}
.story-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:66px}
.story-avatar-wrap{width:62px;height:62px;border-radius:50%;padding:2px;background:var(--ig);position:relative}
.story-avatar-wrap.viewed{background:var(--border)}
.story-avatar-wrap.add{background:none;border:2px dashed var(--border)}
.story-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--card)}
.story-add-icon{position:absolute;bottom:0;right:0;width:20px;height:20px;background:var(--blue);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2px solid var(--card)}
.story-name{font-size:.7rem;color:var(--text);max-width:64px;overflow:hidden;text-overflow:ellipsis;text-align:center}
/* Tabs */
.tabs{display:flex;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:60px;z-index:99}
.tab{flex:1;padding:12px 8px;background:none;border:none;font-size:.8rem;font-weight:600;color:var(--text2);cursor:pointer;position:relative;transition:color .2s}
.tab.active{color:var(--text)}
.tab.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--text);border-radius:1px}
/* Feed */
.feed{max-width:470px;margin:0 auto}
.post{background:var(--card);border-bottom:8px solid var(--bg)}
.post-head{display:flex;align-items:center;padding:10px 12px;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;cursor:pointer;flex-shrink:0}
.user-info{flex:1;min-width:0;cursor:pointer}
.username{font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:4px}
.username .vb{display:inline-flex;align-items:center;gap:2px;margin-left:3px;flex-shrink:0}
.username .vb .vc{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;flex-shrink:0}
.username .vb .vc svg{width:9px;height:9px;fill:#fff}
.username .vb .ve{font-size:12px;line-height:1}
.story-user-name .vb{display:inline-flex;align-items:center;gap:2px;margin-left:3px;flex-shrink:0}.story-user-name .vb .vc{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;flex-shrink:0}.story-user-name .vb .vc svg{width:9px;height:9px;fill:#fff}.story-user-name .vb.chef .vc{background:linear-gradient(135deg,#ff6b35,#f7c948)}.story-user-name .vb.foodie .vc{background:#0095f6}.story-user-name .vb.creator .vc{background:#8a2be2}.story-user-name .vb .ve{font-size:12px;line-height:1}
.vb.chef .vc{background:linear-gradient(135deg,#ff6b35,#f7c948)}.vb.foodie .vc{background:#0095f6}.vb.creator .vc{background:#8a2be2}
.repost-info{font-size:.7rem;color:var(--text2);margin-top:1px}
.post-menu{position:relative}
.post-menu-btn{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text);padding:4px 8px}
.post-menu-dd{display:none;position:absolute;right:0;top:100%;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.15);min-width:180px;z-index:50;overflow:visible;max-height:70vh;overflow-y:auto}
.post-menu-dd.show{display:block}
.post-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;text-align:left;background:none;border:none;font-size:.9rem;cursor:pointer;color:var(--text);transition:background .1s}
.post-menu-item:hover{background:var(--bg)}
.post-menu-item.danger{color:#ed4956}
/* Media Container */
.media-wrap{position:relative;width:100%;background:#000;overflow:hidden}
.media-wrap.square{aspect-ratio:1}
.media-wrap img,.media-wrap video{width:100%;height:100%;object-fit:cover;display:block}
.media-wrap video{object-fit:cover;background:#000;width:100%;height:100%;display:block}
/* ═══ Instagram-style Reels Friends ═══ */
.reels-subnav{display:none;align-items:center;gap:12px;padding:8px 16px;background:transparent;position:absolute;top:0;left:0;right:0;z-index:20;pointer-events:none}
.reels-subnav.show{display:flex}
.reels-subnav-btn{pointer-events:all;background:none;border:none;font-size:1.05rem;font-weight:800;color:rgba(255,255,255,.5);padding:6px 2px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.reels-subnav-btn.active{color:#fff}
.reels-subnav-btn .fr-dots{display:flex;margin-left:2px}
.reels-subnav-btn .fr-dots img{width:22px;height:22px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-8px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.reels-subnav-btn .fr-dots img:first-child{margin-left:0}
.reels-subnav-btn .reel-arrow{font-size:.7rem;margin-left:2px;opacity:.7}
.fr-float{position:absolute;left:12px;bottom:140px;display:flex;flex-direction:column;gap:8px;z-index:15}
.fr-float-item{display:flex;align-items:center;gap:8px;cursor:pointer}
.fr-float-item img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.fr-float-item span{color:#fff;font-size:.75rem;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.fr-float-item::after{content:'💗';font-size:.6rem;position:absolute;left:20px;bottom:-2px}
.fr-liked-row{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:.82rem;color:var(--text2,#888)}
.fr-liked-row .fr-av{width:20px;height:20px;border-radius:50%;object-fit:cover;border:2px solid var(--card,#fff);margin-left:-6px}
.fr-liked-row .fr-av:first-child{margin-left:0}
.fr-liked-row b{color:var(--text,#000);font-weight:600}
/* ═══ Mobile Menu & Report Fix ═══ */
@media(max-width:600px){
.post-menu-dd{min-width:auto;max-width:200px;right:0;left:auto}
.post-menu-item{padding:10px 12px;font-size:.82rem;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-modal-content{padding:12px 8px}
.share-btns{gap:8px}
.share-btn{min-width:56px;font-size:.7rem}
.share-btn .si{width:36px;height:36px}
}
@media(max-width:380px){
.post-menu-dd{max-width:170px}
.post-menu-item{padding:8px 10px;font-size:.78rem}
}
/* Mobile Report Page Fix */
@media(max-width:600px){.post-menu-dd{min-width:160px;max-width:200px;right:-10px}.post-menu-item{padding:10px 14px;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.flag{display:none!important}
.filter-label{display:none!important}
.heart-pop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:80px;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 10px rgba(0,0,0,.3))}
.heart-pop.pop{animation:heartPop .8s ease-out}
.dbl-tap-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:80px;pointer-events:none;opacity:0;z-index:50;transition:transform .3s ease-out, opacity .3s ease-out;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
@keyframes heartPop{0%{transform:translate(-50%,-50%) scale(0);opacity:0}15%{transform:translate(-50%,-50%) scale(1.3);opacity:1}30%,60%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{opacity:0}}
/* Carousel */
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.carousel-slide{flex:0 0 100%;scroll-snap-align:start}
.carousel-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .2s}
.carousel-dot.active{background:#fff}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;background:rgba(255,255,255,.9);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity .2s}
.media-wrap:hover .carousel-nav{opacity:1}
.carousel-nav.prev{left:8px}
.carousel-nav.next{right:8px}
/* Video Controls */
.video-controls{position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,.6));display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .2s}
.media-wrap:hover .video-controls{opacity:1}
.video-progress{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;cursor:pointer}
.video-progress-fill{height:100%;background:#fff;border-radius:2px;width:0}
.video-time{color:#fff;font-size:.7rem}
.video-btn{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer}
.mute-btn{display:none!important}
/* Actions */
.actions{display:flex;padding:8px 12px;gap:14px;align-items:center}
.act-btn{background:none;border:none;font-size:24px;cursor:pointer;padding:4px;transition:transform .1s}
.act-btn:active{transform:scale(.9)}
.act-btn.liked{color:var(--like);animation:likeAnim .3s}
@keyframes likeAnim{50%{transform:scale(1.2)}}
@keyframes followPop{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
.follow-btn.just-followed{animation:followPop .3s ease}
.act-count{font-size:12px;color:var(--text2);margin-left:-2px;margin-right:10px;font-weight:500}
.act-btn.saved{color:var(--text)}
.save-btn{margin-left:auto}
/* Content */
.content{padding:0 12px 12px}
.likes{font-weight:600;font-size:.9rem;margin-bottom:4px}
.caption{font-size:.9rem;line-height:1.4;margin-bottom:4px}
.caption-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.caption-text.expanded{display:inline;-webkit-line-clamp:unset;-webkit-box-orient:unset}
.caption-more{color:var(--text2,#8e8e8e);cursor:pointer;font-weight:600;display:inline-block;margin-left:2px;white-space:nowrap}
.caption b{font-weight:600;cursor:pointer}
.hashtag{color:#00376b;font-weight:500}.dark .hashtag{color:#e0f1ff}
.view-comments{font-size:.85rem;color:var(--text2);cursor:pointer;margin-bottom:4px}
.time{font-size:.7rem;color:var(--text2);text-transform:uppercase}
/* Comments Section */
.comments-section{border-top:1px solid var(--border);max-height:0;overflow:hidden;transition:max-height .3s}
.comments-section.show{max-height:500px;overflow-y:auto}
.comments-inner{padding:12px}
.comment{display:flex;gap:10px;margin-bottom:12px}
.comment-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer;flex-shrink:0}
.comment-body{flex:1;min-width:0}
.comment-main{background:var(--bg);padding:8px 12px;border-radius:16px}
.comment-text{font-size:.9rem;line-height:1.3;word-wrap:break-word}
.comment-text b{font-weight:600;cursor:pointer}
.comment-meta{display:flex;align-items:center;gap:12px;margin-top:4px;padding-left:4px}
.comment-time{font-size:.7rem;color:var(--text2)}
.comment-action{background:none;border:none;font-size:.75rem;cursor:pointer;color:var(--text2);font-weight:600}
.comment-action:hover{color:var(--text)}
.comment-likes{font-size:.75rem;color:var(--text2);display:flex;align-items:center;gap:2px}
.comment-like-btn{background:none;border:none;cursor:pointer;font-size:.9rem;padding:2px}
.comment-like-btn.liked{color:var(--like)}
/* Replies */
.replies-toggle{font-size:.75rem;color:var(--text2);cursor:pointer;margin:4px 0 4px 44px;display:flex;align-items:center;gap:4px}
.replies-toggle::before{content:'';width:24px;height:1px;background:var(--border)}
.replies{margin-left:44px;display:none}
.replies.show{display:block}
.reply{margin-bottom:10px}
.reply .comment-avatar{width:28px;height:28px}
.reply .comment-main{padding:6px 10px}
.reply-to{color:var(--blue);font-weight:500}
/* Comment Input */
.comment-input-wrap{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--card)}
.comment-input{flex:1;border:none;background:transparent;font-size:.9rem;color:var(--text);outline:none}
.comment-input::placeholder{color:var(--text2)}
.comment-send{background:none;border:none;color:var(--blue);font-weight:700;cursor:pointer;font-size:.9rem;opacity:.5;transition:opacity .2s}
.comment-send.active{opacity:1}
/* Empty State */
.empty{text-align:center;padding:60px 20px;color:var(--text2)}
.empty-icon{font-size:60px;margin-bottom:16px}
.empty h3{color:var(--text);margin-bottom:8px}
.empty-btn{display:inline-block;margin-top:20px;padding:12px 28px;background:var(--ig);color:#fff;border:none;border-radius:24px;font-weight:600;text-decoration:none;cursor:pointer;font-size:.95rem}
/* Loading */
.loading{text-align:center;padding:30px}
.spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
/* FAB */
@keyframes fabMenuIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fab.active{transform:rotate(45deg)}
/* Push Notification Button */
.push-notif-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(102,126,234,.5)}50%{box-shadow:0 0 0 8px rgba(102,126,234,0)}}
/* Modals */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;justify-content:center;align-items:flex-start;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.modal-bg.show{display:flex}
.modal{background:var(--card);border-radius:16px;width:100%;max-width:420px;max-height:90vh;max-height:90dvh;overflow:hidden;margin:auto;animation:modalIn .2s}
@keyframes modalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.modal-head h2{font-size:1rem;font-weight:600}
.modal-close{background:none;border:none;font-size:28px;cursor:pointer;color:var(--text);line-height:1}
.modal-body{padding:16px;max-height:70vh;max-height:70dvh;overflow-y:auto}
/* Notifications Panel */
.notif-panel{position:fixed;top:0;right:-100%;width:100%;max-width:380px;height:100%;height:100dvh;background:var(--card);z-index:1001;transition:right .3s;box-shadow:-4px 0 20px rgba(0,0,0,.2);display:flex;flex-direction:column}
.notif-panel.show{right:0}
.notif-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000}
.notif-overlay.show{display:block}
.notif-header{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.notif-header h2{font-size:1.1rem;font-weight:700}
.notif-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text)}
.notif-list{flex:1;overflow-y:auto;padding:8px 0}
.notif-group-title{padding:8px 16px;font-size:.75rem;font-weight:600;color:var(--text2);text-transform:uppercase}
.notif-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .1s}
.notif-item:hover{background:var(--bg)}
.notif-item.unread{background:rgba(0,149,246,.05)}
.notif-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.notif-content{flex:1;min-width:0}
.notif-text{font-size:.9rem;line-height:1.3}
.notif-text b{font-weight:600}
.notif-time{font-size:.75rem;color:var(--text2);margin-top:2px}
.notif-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0}
.notif-empty{text-align:center;padding:60px 20px;color:var(--text2)}
/* Story Viewer */
.story-viewer{position:fixed;inset:0;background:#000;z-index:2000;display:none;-webkit-overflow-scrolling:touch}
.story-viewer.show{display:flex;flex-direction:column}
/* STORY_LIKES_CSS */ .story-like-btn{background:none;border:none;font-size:1.8rem;cursor:pointer;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));transition:transform .2s;padding:4px}.story-like-btn:active{transform:scale(1.3)}.story-like-btn.liked{animation:storyHeartPop .4s ease}.story-like-count{color:#fff;font-size:.75rem;text-shadow:0 1px 3px rgba(0,0,0,.5);min-width:20px;text-align:center}
@keyframes storyHeartPop{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
.story-progress{display:flex;gap:4px;padding:8px 12px;position:absolute;top:0;left:0;right:0;z-index:10}
.story-progress-bar{flex:1;height:2px;background:rgba(255,255,255,.3);border-radius:1px;overflow:hidden}
.story-progress-fill{height:100%;background:#fff;width:0}
.story-header{position:absolute;top:20px;left:0;right:0;display:flex;align-items:center;padding:0 12px;z-index:100}
.story-user{display:flex;align-items:center;gap:10px;flex:1}
.story-user img{width:36px;height:36px;border-radius:50%;border:2px solid #fff;object-fit:cover}
.story-user-info{color:#fff}
.story-user-name{font-weight:600;font-size:.9rem}
.story-user-time{font-size:.75rem;opacity:.8}
.story-close{display:none!important}
.story-media{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.story-media img,.story-media video{max-width:100%;max-height:100%;object-fit:contain}
.story-nav{position:absolute;top:50%;width:50%;height:60%;cursor:pointer;z-index:5}
.story-nav.prev{left:0;transform:translateY(-50%)}
.story-nav.next{right:0;transform:translateY(-50%)}
.story-reply-input{position:absolute;bottom:0;left:0;right:0;z-index:10;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.7));display:flex;flex-direction:column;gap:6px;z-index:20}
.story-reply-input input{flex:1;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);border-radius:24px;padding:12px 16px;color:#fff;font-size:1rem}
.story-reply-input input::placeholder{color:rgba(255,255,255,.7)}
.food-react-btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:4px 10px;border-radius:16px;font-size:.75rem;cursor:pointer;transition:all .2s;backdrop-filter:blur(4px)}
.food-react-btn:hover,.food-react-btn:active{background:rgba(255,255,255,.35);transform:scale(1.05)}
.story-reply-input button{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}
.story-viewers{position:fixed;bottom:60px;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.9));padding:16px;color:#fff;z-index:9997;border-radius:16px 16px 0 0}
.story-viewers-count{font-size:.85rem;display:flex;align-items:center;gap:6px;cursor:pointer}
.story-opts-wrap{position:relative;display:inline-block;margin-left:auto}
.story-opts-btn{background:rgba(255,255,255,.15);color:#fff;border:none;width:36px;height:36px;border-radius:50%;font-size:1.2rem;cursor:pointer;backdrop-filter:blur(8px)}
.story-opts-dd{display:none;position:absolute;top:44px;right:0;background:rgba(30,30,30,.97);backdrop-filter:blur(16px);border-radius:14px;overflow:hidden;min-width:200px;box-shadow:0 8px 32px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);z-index:9999}
.story-opts-dd.show{display:block}
.story-opts-dd button{display:block;width:100%;padding:13px 16px;border:none;background:transparent;color:#fff;text-align:left;font-size:.88rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.08)}
.story-opts-dd button:last-child{border-bottom:none;color:#ed4956}
.story-opts-dd button:active{background:rgba(255,255,255,.08)}
.story-delete-btn{background:rgba(255,255,255,.2);border:none;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1rem;margin-left:auto}
/* Share Modal */
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:8px 0}
.share-btn{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:var(--text)}
.si-wa{background:#25d366}.si-tg{background:#0088cc}.si-tw{background:#000}.si-fb{background:#1877f2}.si-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}.si-tk{background:#010101}.si-na{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045)}.si-cp{background:var(--border)}.si-dm{background:linear-gradient(135deg,#667eea,#764ba2)}.si-st{background:linear-gradient(135deg,#f09433,#e6683c)}.si-rp{background:#4cd964}
.si{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.si svg{width:24px;height:24px;fill:#fff}
.si-cp svg{fill:var(--text)}
.share-btn-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.share-btn-icon.wa{background:#25d366;color:#fff}
.share-btn-icon.tg{background:#0088cc;color:#fff}
.share-btn-icon.tw{background:#1da1f2;color:#fff}
.share-btn-icon.fb{background:#1877f2;color:#fff}
.share-btn-icon.link{background:var(--border);color:var(--text)}
.share-btn-icon.native{background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);color:#fff}
.share-btn-icon.repost{background:var(--green);color:#fff}
.share-btn-icon.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.share-btn-icon.tk{background:#000;color:#fff}
.share-btn span{font-size:.75rem}
/* Edit Profile */
.edit-field{margin-bottom:16px}
.edit-field label{display:block;font-size:.8rem;font-weight:600;color:var(--text2);margin-bottom:6px}
.edit-field input,.edit-field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:.9rem;background:var(--bg);color:var(--text);outline:none;transition:border-color .2s}
.edit-field input:focus,.edit-field textarea:focus{border-color:var(--blue)}
.edit-field textarea{resize:none;min-height:80px}
.edit-avatar-section{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.edit-avatar{width:70px;height:70px;border-radius:50%;object-fit:cover}
.edit-avatar-btn{background:var(--blue);color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer}
.edit-save-btn{width:100%;padding:12px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;margin-top:8px}
/* Profile Modal */
.modal.profile-modal .modal-body{padding:0}
.profile-header{padding:20px;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,.02) 0%,transparent 100%)}
.dark .profile-header{background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 100%)}
.profile-avatar-wrap{position:relative;display:inline-block}
.profile-avatar{width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid var(--card);box-shadow:0 2px 15px rgba(0,0,0,.1)}
.verified-badge{position:absolute;bottom:2px;right:2px;background:#0095f6;color:#fff;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;border:2px solid var(--card);font-weight:700}
.profile-name{font-size:1.2rem;font-weight:700;margin-top:12px}
.profile-username{font-size:.9rem;color:var(--text2);margin-top:2px}
.profile-bio{font-size:.9rem;margin-top:12px;padding:0 20px;line-height:1.4}
.profile-meta{display:flex;justify-content:center;gap:16px;margin-top:10px;font-size:.8rem;color:var(--text2);flex-wrap:wrap}
.profile-meta span{display:flex;align-items:center;gap:4px}
.profile-stats{display:flex;justify-content:space-around;padding:16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.profile-stat{text-align:center;cursor:pointer;padding:8px 16px;border-radius:8px;transition:background .2s}
.profile-stat:hover{background:var(--bg)}
.profile-stat-value{font-weight:700;font-size:1.15rem}
.profile-stat-label{font-size:.75rem;color:var(--text2);margin-top:2px}
.profile-actions{display:flex;gap:8px;padding:12px 16px}
.profile-actions button{flex:1;padding:10px;border-radius:8px;font-weight:600;cursor:pointer;font-size:.9rem;transition:all .2s}
.btn-follow{background:var(--blue);color:#fff;border:none}
.btn-follow.following{background:var(--card);border:1px solid var(--border);color:var(--text)}
.btn-message{background:var(--card);border:1px solid var(--border);color:var(--text)}
.btn-edit{background:var(--card);border:1px solid var(--border);color:var(--text)}
.profile-posts-title{padding:12px 16px;font-weight:600;font-size:.9rem;border-bottom:1px solid var(--border)}
.profile-posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.profile-post{aspect-ratio:1;position:relative;cursor:pointer;overflow:hidden}
.profile-post img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.profile-post:hover img{transform:scale(1.05)}
.profile-post-overlay{position:absolute;inset:0;background:rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity .2s}
.profile-post:hover .profile-post-overlay{opacity:1}
.profile-post-stat{color:#fff;font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:4px}
.profile-post .video-icon{position:absolute;top:8px;right:8px;color:#fff;font-size:1.1rem}
.profile-post .carousel-icon{position:absolute;top:8px;right:8px;color:#fff;font-size:1rem}
.profile-empty{padding:40px;text-align:center;color:var(--text2);font-size:.9rem}
/* Users List Modal */
.users-list-modal .modal-body{padding:0}
.user-list-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.user-list-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;cursor:pointer}
.user-list-info{flex:1;min-width:0;cursor:pointer}
.user-list-name{font-weight:600;font-size:.95rem}
.user-list-username{font-size:.8rem;color:var(--text2)}
.user-list-btn{padding:8px 16px;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer}
.user-list-btn.follow{background:var(--blue);color:#fff;border:none}
.user-list-btn.following{background:var(--card);border:1px solid var(--border);color:var(--text)}
/* Post Modal (Create) */
.upload-zone{border:2px dashed var(--border);border-radius:12px;padding:40px 20px;text-align:center;cursor:pointer;margin-bottom:16px;transition:border-color .2s,background .2s}
.upload-zone:hover{border-color:var(--blue);background:rgba(0,149,246,.02)}
.upload-zone-icon{font-size:48px;margin-bottom:8px}
.upload-zone p{color:var(--text2);font-size:.9rem}
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.preview-item{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden}
.preview-item img,.preview-item video{width:100%;height:100%;object-fit:cover}
.preview-item-rm{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.preview-single{margin-bottom:16px;border-radius:12px;overflow:hidden;position:relative}
.preview-single img,.preview-single video{width:100%;max-height:400px;object-fit:contain;background:#000}
.cover-picker{background:#111;border-radius:10px;padding:10px;margin-top:8px}
.cover-picker label{font-size:.75rem;color:#aaa;font-weight:700}
.cover-scrubber{width:100%;margin:6px 0;cursor:pointer;accent-color:#ff6b35}
.cover-preview{display:flex;gap:8px;align-items:center}
.cover-preview canvas{width:80px;height:80px;border-radius:8px;border:2px solid #ff6b35;object-fit:cover}
.cover-preview span{font-size:.75rem;color:#888}
.caption-input{width:100%;padding:14px;border:1px solid var(--border);border-radius:10px;font-size:1.05rem;resize:none;margin-bottom:12px;background:var(--bg);color:var(--text);outline:none;line-height:1.5;font-weight:400}
.caption-input:focus{border-color:var(--blue)}
/* Filters */
.filters-row{display:flex;gap:8px;overflow-x:auto;padding:8px 0;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.filter-btn{flex-shrink:0;width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px;border-radius:8px;border:2px solid transparent;transition:border-color .2s}
.filter-btn.active{border-color:var(--blue)}
.filter-preview{width:56px;height:56px;border-radius:6px;overflow:hidden}
.filter-preview img{width:100%;height:100%;object-fit:cover}
.filter-name{font-size:.65rem;color:var(--text2)}
.filter-golden_hour{filter:brightness(1.08) contrast(1.05) saturate(1.3) sepia(.15) hue-rotate(-5deg)}
.filter-chefs_table{filter:brightness(1.05) contrast(1.12) saturate(1.2)}
.filter-magazine{filter:brightness(1.02) contrast(1.2) saturate(1.45)}
.filter-rustic{filter:brightness(1.05) contrast(.95) saturate(.85) sepia(.2) hue-rotate(-8deg)}
.filter-vivid{filter:brightness(1.05) contrast(1.15) saturate(1.7)}
.filter-noir{filter:grayscale(1) contrast(1.3) brightness(1.05)}
.filter-none{filter:none}
.filter-clarendon{filter:contrast(1.2) saturate(1.35)}
.filter-gingham{filter:brightness(1.05) hue-rotate(-10deg)}
.filter-moon{filter:grayscale(1) contrast(1.1) brightness(1.1)}
.filter-lark{filter:contrast(.9) saturate(1.5) brightness(1.1)}
.filter-reyes{filter:sepia(.22) brightness(1.1) contrast(.85) saturate(.75)}
.filter-juno{filter:sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8)}
.filter-slumber{filter:saturate(.66) brightness(1.05)}
.filter-crema{filter:sepia(.5) contrast(.9) brightness(1.1) saturate(.8)}
.filter-ludwig{filter:brightness(1.05) saturate(1.3)}
.filter-aden{filter:hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2)}
.filter-perpetua{filter:contrast(1.1) brightness(1.25) saturate(1.1)}
.pub-btn{width:100%;padding:14px;background:var(--ig);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s}
.pub-btn:disabled{opacity:.5;cursor:not-allowed}
/* Toast */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(100px);background:#333;color:#fff;padding:12px 24px;border-radius:24px;font-weight:600;opacity:0;transition:all .3s;z-index:3000;font-size:.9rem;box-shadow:0 4px 15px rgba(0,0,0,.3)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* Search */
/* ═══ STICKERS ═══ */
.stk-t{position:absolute;top:58px;right:10px;z-index:15;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.2);color:#fff;width:42px;height:42px;border-radius:50%;font-size:1.15rem;cursor:pointer;display:none;align-items:center;justify-content:center;transition:.25s;box-shadow:0 4px 15px rgba(0,0,0,.3)}.stk-t:hover{transform:scale(1.1)}.stk-t.vis{display:flex}
.stk-ov{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center}.stk-ov.on{display:flex}
.stk-sh{background:#1a1a2e;width:100%;max-width:500px;max-height:50vh;border-radius:24px 24px 0 0;overflow:hidden;display:flex;flex-direction:column;animation:stkU .35s cubic-bezier(.16,1,.3,1)}@keyframes stkU{from{transform:translateY(100%)}to{transform:translateY(0)}}
.stk-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}.stk-hd h3{color:#fff;font-size:1rem;font-weight:700;margin:0}.stk-hd .x{background:none;border:none;color:rgba(255,255,255,.5);font-size:1.4rem;cursor:pointer}
.stk-gr{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:4px 16px 20px;overflow-y:auto;max-height:calc(50vh - 50px);-webkit-overflow-scrolling:touch}
.stk-ch{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 6px;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:.2s;color:#fff}.stk-ch:active{transform:scale(.93);background:rgba(255,255,255,.12)}
.stk-ch .ic{font-size:1.6rem;height:44px;width:44px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(255,255,255,.08)}.stk-ch .lb{font-size:.62rem;font-weight:600;opacity:.75;text-align:center;letter-spacing:.3px}
.stk-fp{position:relative;display:none;padding:0 20px 20px;flex-direction:column;gap:10px;animation:stkF .25s;overflow-y:auto;max-height:calc(50vh - 50px);-webkit-overflow-scrolling:touch}.stk-fp.on{display:flex}@keyframes stkF{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.stk-bk{background:none;border:none;color:rgba(255,255,255,.5);font-size:.82rem;cursor:pointer;padding:0;text-align:left;width:fit-content}
.stk-lb{color:rgba(255,255,255,.4);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.8px}
.stk-fi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:13px 16px;color:#fff;font-size:.88rem;outline:none;width:100%;box-sizing:border-box}.stk-fi::placeholder{color:rgba(255,255,255,.3)}.stk-fi:focus{border-color:rgba(138,128,255,.5)}
.stk-ab{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:13px;border-radius:14px;font-weight:700;font-size:.88rem;cursor:pointer;width:100%}
.stk-rs{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:3px}.stk-ri{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer;color:#fff;transition:.15s}.stk-ri:hover{background:rgba(255,255,255,.08)}.stk-ri img{width:34px;height:34px;border-radius:50%;object-fit:cover}.stk-ri .nm{font-weight:600;font-size:.82rem}.stk-ri .su{font-size:.72rem;opacity:.5}
.stk-ep{display:flex;gap:6px;flex-wrap:wrap}.stk-ep span{font-size:1.7rem;cursor:pointer;padding:6px;border-radius:10px;border:2px solid transparent;transition:.2s}.stk-ep span.s{border-color:#764ba2;background:rgba(118,75,162,.2);transform:scale(1.1)}
.stk-gg{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:200px;overflow-y:auto}.stk-gg img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:pointer}
.stk-po{display:flex;flex-direction:column;gap:6px}.stk-pr{display:flex;gap:6px}.stk-pr input{flex:1}.stk-pr .dl{background:rgba(255,60,60,.2);border:none;color:#ff3b30;border-radius:10px;padding:0 12px;cursor:pointer;font-size:1.1rem}
.stk-p{position:absolute;z-index:20;cursor:grab;touch-action:none;user-select:none;pointer-events:auto;transition:filter .2s}.stk-p:active{cursor:grabbing;filter:brightness(1.1)}
.stk-p .stk-x{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:#ff3b30;color:#fff;border:2px solid #fff;font-size:.55rem;font-weight:700;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}.stk-p:hover .stk-x{display:flex}
.reels-text-overlay{position:absolute}.reels-text-overlay .rt-x{position:absolute;top:-10px;right:-10px;width:22px;height:22px;border-radius:50%;background:#ff3b30;color:#fff;border:2px solid #fff;font-size:.6rem;font-weight:700;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:11}.reels-text-overlay:hover .rt-x{display:flex}
.s-loc{background:rgba(255,255,255,.92);color:#1a1a2e;padding:8px 14px;border-radius:20px;font-size:.78rem;font-weight:700;display:flex;align-items:center;gap:5px;box-shadow:0 2px 12px rgba(0,0,0,.15);cursor:pointer}
.s-men{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:8px 16px;border-radius:20px;font-size:.82rem;font-weight:700;box-shadow:0 3px 12px rgba(102,126,234,.4);display:flex;align-items:center;gap:6px;cursor:pointer}.s-men img{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.4)}
.s-poll{background:rgba(255,255,255,.95);border-radius:18px;padding:14px 16px;min-width:200px;box-shadow:0 4px 24px rgba(0,0,0,.15)}.s-poll .q{font-size:.82rem;font-weight:800;color:#1a1a2e;margin-bottom:8px;text-align:center}.s-poll .o{padding:9px 12px;margin:4px 0;border-radius:12px;background:linear-gradient(135deg,#f0f0f5,#e8e8f0);text-align:center;font-weight:700;font-size:.78rem;color:#1a1a2e;cursor:pointer;border:2px solid transparent;transition:.2s}.s-poll .o:hover,.s-poll .o.sel{border-color:#667eea;background:#eef0ff}.s-poll .o.voted{cursor:default;pointer-events:none}
.s-cd{background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;padding:14px 20px;border-radius:18px;text-align:center;box-shadow:0 4px 20px rgba(238,90,36,.4);min-width:170px}.s-cd .ev{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;opacity:.9;margin-bottom:8px}.s-cd .ns{display:flex;gap:6px;justify-content:center}.s-cd .n{background:rgba(0,0,0,.2);border-radius:10px;padding:8px 10px;min-width:42px}.s-cd .n b{display:block;font-size:1.3rem}.s-cd .n small{font-size:.5rem;opacity:.8;text-transform:uppercase}
.s-sl{background:rgba(255,255,255,.95);border-radius:18px;padding:14px 16px;min-width:210px;box-shadow:0 4px 20px rgba(0,0,0,.15)}.s-sl .q{font-size:.8rem;font-weight:700;color:#1a1a2e;margin-bottom:12px;text-align:center}.s-sl .tk{height:8px;background:#e0e0e8;border-radius:4px;position:relative;overflow:visible}.s-sl .fl{position:absolute;left:0;top:0;height:100%;border-radius:4px;background:linear-gradient(90deg,#667eea,#764ba2);width:50%;transition:width .15s}.s-sl .em{position:absolute;top:-16px;font-size:1.8rem;left:48%;transition:left .15s}
.s-hash{background:linear-gradient(135deg,rgba(102,126,234,.85),rgba(118,75,162,.85));color:#fff;padding:9px 18px;border-radius:20px;font-size:.9rem;font-weight:800;box-shadow:0 3px 12px rgba(102,126,234,.3);cursor:pointer}
.s-lnk{background:rgba(255,255,255,.92);color:#1a1a2e;padding:10px 16px;border-radius:16px;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 2px 12px rgba(0,0,0,.12);max-width:200px;cursor:pointer}.s-lnk .u{color:#667eea;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.s-don{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border-radius:18px;padding:14px 18px;min-width:180px;text-align:center;box-shadow:0 4px 20px rgba(245,87,108,.35)}.s-don .t{font-size:.75rem;font-weight:700;margin-bottom:4px}.s-don .a{font-size:1.5rem;font-weight:900}.s-don .br{height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:8px 0;overflow:hidden}.s-don .br i{display:block;height:100%;width:25%;border-radius:3px;background:#fff}
.s-gif{border-radius:14px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.3)}.s-gif img{display:block;width:130px;border-radius:14px}
.s-time{background:rgba(0,0,0,.5);backdrop-filter:blur(12px);color:#fff;padding:10px 18px;border-radius:16px;font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums;border:1px solid rgba(255,255,255,.15)}
.s-hr{font-size:3.2rem;filter:drop-shadow(0 4px 12px rgba(255,0,0,.4));animation:sP 1.2s infinite}@keyframes sP{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.s-tmp{background:rgba(255,255,255,.92);color:#1a1a2e;padding:10px 16px;border-radius:16px;font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:6px;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.s-day{background:rgba(0,0,0,.5);backdrop-filter:blur(12px);color:#fff;padding:10px 18px;border-radius:16px;font-weight:800;font-size:.88rem;text-transform:uppercase;letter-spacing:1px;border:1px solid rgba(255,255,255,.15)}
.stk-vl{position:absolute;inset:0;pointer-events:none;z-index:50;overflow:hidden}.stk-vl .stk-p{pointer-events:auto;cursor:pointer;z-index:51}.stk-vl .stk-x{display:none!important}
/* ═══ EXPLORE ═══ */
.exp-wrap{display:none;min-height:80vh;touch-action:pan-y!important;-ms-touch-action:pan-y!important}.exp-wrap.on{display:block}.exp-wrap *{touch-action:pan-y!important}
.exp-sb{position:sticky;top:0;z-index:10;padding:12px 16px;background:var(--bg)}.exp-sb input{width:100%;padding:12px 16px 12px 42px;border:none;border-radius:16px;background:var(--card);color:var(--text);font-size:.88rem;outline:none;box-sizing:border-box;transition:box-shadow .2s}.exp-sb input:focus{box-shadow:0 0 0 2px rgba(102,126,234,.4)}.exp-sb::before{content:'🔍';position:absolute;left:28px;top:50%;transform:translateY(-50%);font-size:.95rem}
.exp-cats{display:flex;gap:8px;padding:8px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y!important}.exp-cats::-webkit-scrollbar{display:none}.exp-cat{flex-shrink:0;padding:8px 16px;border-radius:20px;background:var(--card);color:var(--text);font-size:.78rem;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:.2s;white-space:nowrap}.exp-cat.ac{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent}
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;touch-action:pan-y!important}.exp-grid .ei{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:var(--card)}.exp-grid .ei:nth-child(10n+1){grid-column:span 2;grid-row:span 2}.exp-grid .ei img,.exp-grid .ei video{width:100%;height:100%;object-fit:cover;transition:transform .3s}.exp-grid .ei:active img{transform:scale(1.03)}.ei-ov{position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.6));display:flex;align-items:flex-end;padding:8px;gap:10px;opacity:0;transition:opacity .2s;color:#fff;font-size:.72rem;font-weight:700}.exp-grid .ei:hover .ei-ov{opacity:1}.ei-vid .ei-ov{opacity:1!important}
.ei-car::after{content:'';position:absolute;top:8px;right:8px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='15' height='15' rx='2' fill='none' stroke='white' stroke-width='2'/%3E%3Crect x='6' y='6' width='15' height='15' rx='2' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.exp-users{padding:12px 16px;display:flex;flex-direction:column;gap:6px}.exp-usr{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;background:var(--card);cursor:pointer;transition:transform .15s}.exp-usr:active{transform:scale(.98)}.exp-usr img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}.exp-usr .nm{font-weight:700;font-size:.85rem;color:var(--text)}.exp-usr .un{font-size:.74rem;color:var(--text2)}.exp-usr .vb{font-size:.65rem;color:#667eea}
.exp-lm{display:block;width:calc(100% - 32px);margin:16px 16px;padding:14px;border:none;border-radius:16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;transition:transform .15s}.exp-lm:active{transform:scale(.97)}
.exp-mt{text-align:center;padding:60px 20px;color:var(--text2);font-size:.9rem}
.search-section{background:var(--card);padding:12px;border-bottom:1px solid var(--border);display:none}
.search-section.show{display:block}
.search-input{width:100%;padding:10px 16px;border:none;border-radius:24px;background:var(--bg);color:var(--text);font-size:.9rem;outline:none}
.search-input::placeholder{color:var(--text2)}
.search-results{margin-top:12px;max-height:400px;overflow-y:auto}
.user-item{display:flex;align-items:center;padding:10px;gap:12px;cursor:pointer;border-radius:10px;transition:background .1s}
.user-item:hover{background:var(--bg)}
.user-item img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.user-item-info{flex:1;min-width:0}
.user-item-name{font-weight:600;font-size:.95rem}
.user-item-bio{font-size:.8rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-item-btn{padding:8px 16px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:.8rem;cursor:pointer}
.hashtag-item{display:flex;align-items:center;gap:12px;padding:12px 10px;cursor:pointer;border-radius:10px}
.hashtag-item:hover{background:var(--bg)}
.hashtag-icon{width:48px;height:48px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.hashtag-info{flex:1}
.hashtag-name{font-weight:600}
.hashtag-count{font-size:.8rem;color:var(--text2)}
/* Responsive */
@media(max-width:500px){
.header{padding:10px 12px}
.header h1{font-size:1.1rem}
.header-btn{width:32px;height:32px;font-size:1rem}
.modal{max-width:100%;border-radius:16px 16px 0 0;margin-top:auto;max-height:95vh}
.notif-panel{max-width:100%}
/* Fullscreen profile on mobile */
.modal.profile-modal{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;border-radius:0!important;margin:0!important;z-index:10000}
.modal.profile-modal .modal-body{height:calc(100% - 52px);overflow-y:auto}
.modal.profile-modal .profile-header{padding:30px 20px 20px}
.modal.profile-modal .profile-avatar{width:100px;height:100px}
.profile-posts-grid{gap:1px}
}
/* 🔥 PROFILE MODAL ULTIMATE FIX 🔥 */
@media(max-width:768px){
#profileModal{
padding:0!important;
background:var(--bg)!important
}
#profileModal>.modal,
.modal.profile-modal{
position:fixed!important;
inset:0!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
border-radius:0!important;
margin:0!important;
display:flex!important;
flex-direction:column!important
}
#profileModal .modal-head{
flex-shrink:0
}
#profileModal .modal-body{
flex:1!important;
overflow-y:auto!important;
-webkit-overflow-scrolling:touch!important;
padding-bottom:80px!important;
background:var(--card)!important
}
.profile-posts-grid{
gap:1px!important
}
.profile-post{
aspect-ratio:1!important
}
}
/* 🎬 REELS/VIDEO TRUE FULLSCREEN */
@media(max-width:768px){
.post .media-wrap{
margin:0 -16px!important;
width:calc(100% + 32px)!important
}
.media-wrap video{
width:100%!important;
height:100%!important;
object-fit:cover!important;
background:#000!important
}
/* Reels tab - full viewport */
.feed[data-type="reels"]{position:relative}
.feed[data-type="reels"] .post{
margin:0!important;
padding:0!important;
border-radius:0!important
}
.feed[data-type="reels"] .media-wrap{
margin:0!important;
width:100%!important;
position:relative!important
}
.feed[data-type="reels"] .media-wrap video{
width:100vw!important;
height:calc(100vh - 200px)!important;
max-height:none!important;
object-fit:cover!important
}
}
/* 🎬 FULLSCREEN VIDEO VIEWER */
.video-fullscreen-overlay {
display:none;
position:fixed;
inset:0;
background:#000;
z-index:9999;
}
.video-fullscreen-overlay.show { display:flex; align-items:center; justify-content:center; }
.video-fullscreen-header {
position:absolute;
top:0;
left:0;
right:0;
padding:16px;
padding-top:max(16px, env(safe-area-inset-top));
background:linear-gradient(to bottom, rgba(0,0,0,.8), transparent);
display:flex;
justify-content:space-between;
align-items:center;
z-index:10;
}
.video-fullscreen-close {
background:rgba(255,255,255,.2);
border:none;
color:#fff;
width:44px;
height:44px;
border-radius:50%;
font-size:24px;
cursor:pointer;
}
.video-fullscreen-container {
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
.video-fullscreen-container video {
max-width:100vw;
max-height:100vh;
object-fit:contain;
}
@media (orientation: landscape) {
.video-fullscreen-container video {
width:100vw;
height:100vh;
}
}
.notif-actions{display:flex;gap:8px;margin-left:auto}.notif-accept{background:#0095f6;color:#fff;border:none;padding:6px 16px;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer}.notif-reject{background:transparent;color:var(--text);border:1px solid var(--border);padding:6px 12px;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer}
/* Block/Mute Lists */
.edit-section-divider{margin:16px 0 12px;padding-top:16px;border-top:1px solid var(--border)}
.edit-section-title{font-size:.85rem;font-weight:600;color:var(--text2);margin-bottom:10px}
.edit-section-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;color:var(--text);font-size:.9rem;margin-bottom:8px;transition:.2s}
.edit-section-btn:hover{background:var(--card)}
.edit-section-btn .count{font-size:.8rem;color:var(--text2)}
.bm-list{max-height:300px;overflow-y:auto}
.bm-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.bm-item:last-child{border-bottom:none}
.bm-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.bm-info{flex:1}
.bm-name{font-weight:600;font-size:.85rem}
.bm-username{color:var(--text2);font-size:.8rem}
.bm-action{padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:.8rem;cursor:pointer;font-weight:600}
.bm-action:hover{background:var(--card)}
.bm-action.danger{color:#ed4956;border-color:#ed495644}
/* Text Post Creator */
.tp-modal{position:fixed;inset:0;z-index:500;background:#000;display:none;flex-direction:column}
.tp-modal.show{display:flex}
.tp-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(0,0,0,.8)}
.tp-back{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:4px}
.tp-title{color:#fff;font-weight:600}
.tp-done{background:var(--ig);color:#fff;border:none;padding:8px 20px;border-radius:20px;font-weight:600;cursor:pointer}
.tp-done:disabled{opacity:.4}
.tp-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;position:relative}
.tp-preview{width:100%;max-width:400px;aspect-ratio:1;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:32px;position:relative;overflow:hidden}
.tp-text-input{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:none;outline:none;resize:none;text-align:center;padding:32px;font-size:24px;color:#fff;display:flex;align-items:center;z-index:2;font-family:inherit}
.tp-text-input::placeholder{color:rgba(255,255,255,.5)}
.tp-tools{padding:12px 16px 24px;background:rgba(0,0,0,.8);display:flex;flex-direction:column;gap:12px}
.tp-row{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.tp-row::-webkit-scrollbar{display:none}
.tp-bg-btn{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;flex-shrink:0;transition:.2s}
.tp-bg-btn.active{border-color:#fff;transform:scale(1.15)}
.tp-font-btn{padding:6px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:.8rem;cursor:pointer;white-space:nowrap;transition:.2s}
.tp-font-btn.active{background:#fff;color:#000}
.tp-color-btn{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;flex-shrink:0}
.tp-color-btn.active{border-color:#fff;transform:scale(1.15)}
.tp-align-btn{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.tp-align-btn.active{background:rgba(255,255,255,.2)}
.tp-caption{width:100%;padding:10px 14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;font-size:.9rem;outline:none}
.tp-caption::placeholder{color:rgba(255,255,255,.4)}
/* Story Text Overlay */
.st-text-btn{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;font-size:1rem;font-weight:700;z-index:10;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.st-text-btn.show{display:flex!important}
.st-preview-wrap{position:relative;display:inline-block;width:100%}
/* Instagram-style text items on mobile */
.st-text-item{position:absolute;cursor:grab;-webkit-user-select:none;user-select:none;white-space:pre-wrap;line-height:1.3;pointer-events:auto;padding:4px 8px;border-radius:4px;transform:translate(-50%,-50%)}
.st-text-item.selected{outline:2px solid #0095f6;outline-offset:4px}
.st-text-item .st-item-x{display:none;position:absolute;top:-14px;right:-14px;width:28px;height:28px;border-radius:50%;background:#ed4956;color:#fff;border:2px solid #fff;font-size:.8rem;cursor:pointer;align-items:center;justify-content:center;z-index:10;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.st-text-item.selected .st-item-x{display:flex}
@media(max-width:768px){
/* ===== MOBILE TEXT EDITOR - INSTAGRAM STYLE ===== */
.st-text-tools{
position:fixed!important;bottom:0!important;left:0!important;right:0!important;
z-index:999!important;padding:12px 12px calc(12px + env(safe-area-inset-bottom))!important;
background:rgba(10,10,10,.97)!important;backdrop-filter:blur(20px)!important;
-webkit-backdrop-filter:blur(20px)!important;border-top:1px solid rgba(255,255,255,.12)!important;
border-radius:20px 20px 0 0!important;max-height:60vh!important;overflow-y:auto!important;
-webkit-overflow-scrolling:touch;box-shadow:0 -8px 30px rgba(0,0,0,.5)
}
.st-text-tools.show{display:flex!important;flex-direction:column!important;gap:6px!important}
/* Input - 16px avoids iOS zoom */
/* Input row on mobile - side by side */
.st-input-row{gap:10px!important;align-items:stretch!important}
.st-input-row .st-text-input{flex:1!important;margin-bottom:0!important;min-height:48px!important}
.st-add-main{width:52px!important;height:52px!important;font-size:1.6rem!important;align-self:flex-end!important}
.st-text-input{
font-size:16px!important;min-height:50px!important;-webkit-text-size-adjust:100%!important;
border-radius:12px!important;padding:12px 14px!important;
background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.25)!important;
color:#fff!important;text-shadow:none!important;font-weight:400!important;
margin-bottom:10px!important;width:100%!important;display:block!important;
-webkit-appearance:none!important;appearance:none!important;resize:none!important
}
.st-text-input::placeholder{color:rgba(255,255,255,.4)!important}
/* Colors - horizontal scroll */
.st-colors-row{
display:flex!important;gap:8px!important;padding:8px 0!important;
overflow-x:auto!important;flex-wrap:nowrap!important;
-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center
}
.st-colors-row::-webkit-scrollbar{display:none}
.st-color-dot{
width:34px!important;height:34px!important;border-width:3px!important;
flex-shrink:0!important;touch-action:manipulation!important;
-webkit-tap-highlight-color:transparent
}
.st-color-dot.active{border-color:#fff!important;box-shadow:0 0 0 2px rgba(0,149,246,.6)!important}
/* Fonts - horizontal scroll */
/* Colors + Add button row */
.st-colors-add-row{display:flex;align-items:center;gap:8px;padding:4px 0}
/* Input + Add button row */
.st-input-row{display:flex;gap:8px;align-items:flex-end;margin-bottom:4px}
.st-input-row .st-text-input{flex:1;margin-bottom:0!important}
.st-add-main{width:48px!important;height:48px!important;font-size:1.5rem!important;border-radius:50%!important;background:#0095f6!important;border:none!important;color:#fff!important;font-weight:700!important;flex-shrink:0!important;cursor:pointer;box-shadow:0 3px 10px rgba(0,149,246,.4);display:flex!important;align-items:center;justify-content:center}
.st-colors-add-row .st-colors-row{flex:1;margin:0;padding:0}
.st-colors-add-row .st-add-btn{flex-shrink:0}
.st-fonts-row{
display:flex!important;gap:6px!important;padding:6px 0!important;
overflow-x:auto!important;flex-wrap:nowrap!important;
-webkit-overflow-scrolling:touch;scrollbar-width:none
}
.st-fonts-row::-webkit-scrollbar{display:none}
.st-font-btn{
padding:8px 16px!important;font-size:.85rem!important;min-height:38px!important;
touch-action:manipulation!important;white-space:nowrap!important;flex-shrink:0!important;
border-radius:20px!important;-webkit-tap-highlight-color:transparent
}
.st-font-btn.active{background:rgba(255,255,255,.25)!important;border-color:rgba(255,255,255,.5)!important}
/* Size slider */
.st-size-row{
display:flex!important;align-items:center!important;gap:10px!important;padding:8px 0!important
}
.st-size-row input[type=range]{
-webkit-appearance:none!important;appearance:none!important;
height:36px!important;background:rgba(255,255,255,.12)!important;
border-radius:18px!important;outline:none!important;flex:1!important;
touch-action:manipulation!important
}
.st-size-row input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none!important;width:28px!important;height:28px!important;
border-radius:50%!important;background:#fff!important;cursor:pointer!important;
box-shadow:0 2px 8px rgba(0,0,0,.4)!important
}
.st-size-label{font-size:.9rem!important;min-width:40px!important;color:#fff!important;font-weight:600!important;text-align:center}
/* Add button - big and blue */
.st-add-btn{
width:50px!important;height:50px!important;font-size:1.5rem!important;
flex-shrink:0!important;border-radius:50%!important;
background:#0095f6!important;border:none!important;color:#fff!important;
font-weight:700!important;touch-action:manipulation!important;
box-shadow:0 4px 12px rgba(0,149,246,.4)!important;
-webkit-tap-highlight-color:transparent
}
/* Aa button */
.st-text-btn{width:44px!important;height:44px!important;font-size:1.1rem!important}
/* Text items on preview - bigger touch targets */
.st-text-item{min-width:40px;min-height:30px;padding:4px 8px!important}
.st-text-item .st-item-x{
width:32px!important;height:32px!important;top:-16px!important;right:-16px!important;
font-size:1rem!important;display:flex!important;opacity:0;pointer-events:none;
transition:opacity .2s!important
}
.st-text-item.selected .st-item-x{opacity:1!important;pointer-events:auto!important}
/* Delete zone */
.st-delete-zone{
font-size:.9rem!important;padding:14px 28px!important;bottom:70px!important
}
}
.st-delete-zone{display:none;position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:rgba(237,73,86,.9);color:#fff;padding:12px 24px;border-radius:20px;font-size:.85rem;font-weight:600;z-index:30;pointer-events:none;transition:transform .2s,background .2s}
.st-delete-zone.active{background:#ed4956;transform:translateX(-50%) scale(1.15)}
.st-delete-zone.show{display:block}
.st-text-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.st-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 0}
.st-tool-row{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:2px 0;width:100%}
.st-tool-row::-webkit-scrollbar{display:none}
.st-size-slider{width:80px;accent-color:#fff;height:3px}
.st-add-text-bar{display:flex;gap:6px;align-items:center;margin-top:6px}
.st-add-text-bar input{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 12px;border-radius:8px;font-size:.85rem;outline:none}
.st-add-text-bar input::placeholder{color:rgba(255,255,255,.4)}
.st-add-text-bar button{padding:8px 14px;border-radius:8px;border:none;font-weight:600;cursor:pointer;font-size:.8rem}
.st-add-btn{background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.5);color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:768px){
.st-text-tools{position:fixed!important;bottom:0!important;left:0!important;right:0!important;z-index:999!important;padding:12px 14px 20px!important;background:rgba(15,15,15,.97)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;border-top:1px solid rgba(255,255,255,.15)!important;border-radius:16px 16px 0 0!important;max-height:55vh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
.st-text-input{font-size:16px!important;min-height:48px;-webkit-text-size-adjust:100%;border-radius:10px;padding:10px 14px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.3)!important;color:#fff!important;margin-bottom:8px}
.st-color-dot{width:36px!important;height:36px!important;border-width:3px!important;flex-shrink:0;touch-action:manipulation}
.st-colors-row{padding:8px 0!important;gap:10px!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.st-colors-row::-webkit-scrollbar{display:none}
.st-font-btn{padding:8px 16px!important;font-size:.85rem!important;min-height:40px!important;touch-action:manipulation;white-space:nowrap}
.st-fonts-row{padding:6px 0!important;gap:8px!important;display:flex!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap!important}
.st-fonts-row::-webkit-scrollbar{display:none}
.st-size-row{padding:8px 0!important;gap:10px!important;display:flex!important;align-items:center!important}
.st-size-row input[type=range]{-webkit-appearance:none!important;appearance:none!important;height:36px!important;background:rgba(255,255,255,.15)!important;border-radius:18px!important;outline:none!important;flex:1!important;touch-action:manipulation}
.st-size-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;width:30px!important;height:30px!important;border-radius:50%!important;background:#fff!important;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.st-add-btn{width:52px!important;height:52px!important;font-size:1.6rem!important;flex-shrink:0!important;border-radius:50%!important;background:#0095f6!important;border:none!important;color:#fff!important;font-weight:700!important;touch-action:manipulation;box-shadow:0 4px 12px rgba(0,149,246,.4)}
.st-size-label{font-size:.95rem!important;min-width:44px!important;color:#fff!important;font-weight:600}
.st-text-btn{width:40px!important;height:40px!important;font-size:1.1rem!important}
}
.st-trash-zone.show{display:flex!important;animation:trashPulse .5s ease}
.st-trash-zone.active{background:rgba(237,73,86,.8)!important;border-color:#ed4956!important;transform:translateX(-50%) scale(1.3)!important}
@keyframes trashPulse{0%{transform:translateX(-50%) scale(0)}50%{transform:translateX(-50%) scale(1.15)}100%{transform:translateX(-50%) scale(1)}}
.st-text-item{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:opacity .15s}
.st-del-btn{background:#ed4956;color:#fff;font-size:.7rem;padding:4px 8px;border-radius:6px;border:none;cursor:pointer;margin-left:4px}
/* Long-press delete overlay */
.lp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}
.lp-menu{background:var(--card);border-radius:16px;padding:8px;min-width:220px;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.lp-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;border:none;background:none;cursor:pointer;font-size:.95rem;color:var(--text);border-radius:12px;transition:background .15s}
.lp-menu button:hover{background:var(--bg)}
.lp-menu .lp-delete{color:#ed4956;font-weight:600}
.likers-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center}
.likers-modal{background:var(--card);border-radius:16px;width:90%;max-width:380px;max-height:70vh;display:flex;flex-direction:column;overflow:hidden}
.likers-head{padding:14px 18px;font-weight:700;font-size:1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.likers-head button{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text)}
.likers-list{flex:1;overflow-y:auto;padding:8px 0}
.liker-item{display:flex;align-items:center;gap:12px;padding:10px 18px;cursor:pointer}
.liker-item:hover{background:var(--bg)}
.liker-item img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.liker-name{font-weight:600;font-size:.9rem}
.liker-user{font-size:.8rem;color:var(--text2)}
/* === AI FOOD STUDIO === */
.ai-chef-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ff6b35,#f7c948,#ff6b35);background-size:200% 200%;animation:aiShim 3s ease infinite;color:#fff;font-weight:700;font-size:.85rem;border:none;border-radius:12px;padding:10px 18px;cursor:pointer;margin:10px 0 4px;box-shadow:0 4px 15px rgba(255,107,53,.3);transition:transform .2s,box-shadow .2s}
.ai-chef-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,107,53,.4)}
.ai-chef-btn:active{transform:scale(.97)}
@keyframes aiShim{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.ai-ov{position:fixed;inset:0;background:rgba(10,10,12,.92);z-index:99999;display:flex;flex-direction:column;animation:aiFI .25s ease}
@keyframes aiFI{from{opacity:0}to{opacity:1}}
.ai-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;color:#fff}
.ai-hd h2{font-size:1.05rem;font-weight:800;margin:0;background:linear-gradient(135deg,#ff6b35,#f7c948);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ai-hd small{display:block;font-size:.7rem;color:rgba(255,255,255,.4);font-weight:400;margin-top:2px}
.ai-hd button{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:4px 8px;opacity:.7}
.ai-img-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 16px;position:relative;min-height:0}
.ai-img-wrap img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;transition:filter .4s ease}
.ai-lbl{position:absolute;bottom:10px;padding:4px 12px;border-radius:20px;font-size:.65rem;font-weight:700;color:#fff;backdrop-filter:blur(8px);pointer-events:none}
.ai-lbl-b{left:10px;background:rgba(0,0,0,.5)}
.ai-lbl-a{right:10px;background:linear-gradient(135deg,#ff6b35,#f7c948);display:none}
.ai-tip{margin:8px 20px 0;padding:8px 12px;background:rgba(247,201,72,.06);border-radius:10px;border-left:3px solid #f7c948;font-size:.72rem;color:rgba(255,255,255,.55);display:none;align-items:center;gap:6px}
.ai-tip b{color:#f7c948;font-size:.65rem;white-space:nowrap}
.ai-cap{margin:6px 20px 0;display:none;gap:8px;align-items:center}
.ai-cap-txt{flex:1;font-size:.78rem;color:rgba(255,255,255,.65);background:rgba(255,255,255,.06);border-radius:10px;padding:9px 12px;font-style:italic;line-height:1.35;max-height:48px;overflow:hidden}
.ai-cap-use{background:linear-gradient(135deg,#ff6b35,#f7c948);color:#fff;font-size:.68rem;font-weight:700;border:none;border-radius:8px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.ai-presets{display:flex;gap:8px;padding:12px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ai-presets::-webkit-scrollbar{display:none}
.ai-pr{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:transform .15s}
.ai-pr:active{transform:scale(.95)}
.ai-pr.act .ai-pr-img{border-color:#ff6b35;box-shadow:0 0 12px rgba(255,107,53,.4)}
.ai-pr-img{width:56px;height:56px;border-radius:10px;overflow:hidden;border:2px solid rgba(255,255,255,.12);transition:all .2s}
.ai-pr-img img{width:100%;height:100%;object-fit:cover}
.ai-pr span{font-size:.58rem;color:rgba(255,255,255,.55);white-space:nowrap;font-weight:600}
.ai-pr.act span{color:#f7c948}
.ai-btns{display:flex;gap:10px;padding:10px 20px 24px;justify-content:center}
.ai-btn-ok{background:linear-gradient(135deg,#ff6b35,#e8590c);color:#fff;font-weight:700;font-size:.9rem;border:none;border-radius:14px;padding:13px 36px;cursor:pointer;box-shadow:0 4px 20px rgba(255,107,53,.3)}
.ai-btn-no{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);font-weight:600;font-size:.85rem;border:none;border-radius:14px;padding:13px 24px;cursor:pointer}
.ai-load{position:fixed;inset:0;background:rgba(10,10,12,.9);z-index:999999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.ai-spin{width:72px;height:72px;position:relative}
.ai-spin::before{content:'\2728';font-size:2.2rem;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;animation:aiP 1.5s ease-in-out infinite}
.ai-spin::after{content:'';position:absolute;inset:-6px;border:3px solid transparent;border-top-color:#ff6b35;border-right-color:#f7c948;border-radius:50%;animation:aiR 1s linear infinite}
@keyframes aiP{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes aiR{to{transform:rotate(360deg)}}
.ai-load p{color:#fff;font-weight:600;font-size:.85rem}
.filter-golden_hour{filter:brightness(1.08) contrast(1.05) saturate(1.3) sepia(.15) hue-rotate(-5deg)}
.filter-chefs_table{filter:brightness(1.05) contrast(1.12) saturate(1.2)}
.filter-magazine{filter:brightness(1.02) contrast(1.2) saturate(1.45)}
.filter-rustic{filter:brightness(1.05) contrast(.95) saturate(.85) sepia(.2) hue-rotate(-8deg)}
.filter-vivid{filter:brightness(1.05) contrast(1.15) saturate(1.7)}
.filter-noir{filter:grayscale(1) contrast(1.3) brightness(1.05)}
.food-react-popup{position:absolute;bottom:100%;left:0;right:0;background:rgba(20,20,20,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:16px;padding:8px;display:none;gap:4px;flex-wrap:wrap;justify-content:center;border:1px solid rgba(255,255,255,.1);box-shadow:0 -4px 20px rgba(0,0,0,.4);margin-bottom:6px;z-index:10}
.food-react-popup.show{display:flex}
.food-react-popup .food-react-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);color:#fff;padding:4px 10px;border-radius:16px;font-size:.75rem;cursor:pointer;transition:all .15s}
.food-react-popup .food-react-btn:hover{background:rgba(255,255,255,.25);transform:scale(1.05)}
.st-text-tools{display:none;position:absolute;bottom:60px;left:0;right:0;z-index:20;padding:10px 12px;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);border-radius:16px 16px 0 0}
.st-text-tools.show{display:flex;flex-direction:column;gap:6px}
.st-text-input{width:100%;background:transparent;border:none;color:#fff;font-size:24px;text-align:center;outline:none;padding:8px;resize:none;min-height:60px;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.6);-webkit-text-size-adjust:100%;touch-action:manipulation}
.st-text-input::placeholder{color:rgba(255,255,255,.5)}
.st-controls{display:flex;align-items:center;gap:8px;padding:8px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-colors-row{display:flex;gap:6px;align-items:center;padding:4px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-color-dot{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.4);flex-shrink:0;transition:transform .15s}
.st-color-dot.active{border-color:#fff;transform:scale(1.25)}
.st-fonts-row{display:flex;gap:6px;padding:4px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-font-btn{padding:5px 12px;border-radius:20px;border:1.5px solid rgba(255,255,255,.3);background:rgba(0,0,0,.3);color:#fff;font-size:.75rem;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
.st-font-btn.active{background:#fff;color:#000;border-color:#fff}
.st-size-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.st-size-row input[type=range]{flex:1;height:28px;accent-color:#fff}
.st-size-row input[type=range]{flex:1;accent-color:#fff}
.st-size-label{color:#fff;font-size:.7rem;min-width:30px;text-align:center}
.st-text-item{position:absolute;font-weight:700;cursor:move;user-select:none;-webkit-user-select:none;touch-action:none;z-index:10;max-width:90%;word-wrap:break-word;text-align:center}
.st-add-btn{background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.5);color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:768px){
#postTextTools{position:relative!important;bottom:auto!important;background:var(--bg,#f5f5f5)!important;border:1px solid var(--border,#ddd)!important;border-radius:12px!important;padding:10px!important;margin-bottom:8px}
#postTextTools .st-text-input{background:var(--card,#fff)!important;color:var(--text,#000)!important;border:1px solid var(--border,#ddd)!important}
#postTextTools .st-color-dot{width:32px!important;height:32px!important}
#postTextTools .st-add-btn{width:44px!important;height:44px!important;font-size:1.3rem!important}
#postTextTools .st-size-row input[type=range]{background:var(--border,#ddd)!important}
#postTextTools .st-size-label{color:var(--text,#000)!important}
}
@media(max-width:768px){
#stTextTools{position:relative!important;bottom:auto!important;left:auto!important;right:auto!important;z-index:1!important;padding:10px!important;background:rgba(0,0,0,.06)!important;backdrop-filter:none!important;border-radius:12px!important;max-height:none!important;overflow:visible!important;margin-bottom:8px!important;border-top:none!important}
#stTextTools.show{display:flex!important;flex-direction:column!important;gap:6px!important}
#stTextTools .st-text-input{font-size:16px!important;min-height:44px!important;background:rgba(255,255,255,.9)!important;color:#222!important;border:1px solid #ccc!important;border-radius:10px!important;padding:10px 14px!important;text-shadow:none!important;font-weight:400!important;text-align:left!important;resize:none}
#stTextTools .st-colors-add-row{display:flex!important;align-items:center!important;gap:8px!important}
#stTextTools .st-colors-row{flex:1!important;overflow-x:auto!important;gap:8px!important;padding:4px 0!important;flex-wrap:nowrap!important}
#stTextTools .st-color-dot{width:32px!important;height:32px!important;border-width:2.5px!important}
#stTextTools .st-add-btn{width:48px!important;height:48px!important;font-size:1.5rem!important;background:#0095f6!important;border:none!important;color:#fff!important;border-radius:50%!important;flex-shrink:0!important;box-shadow:0 3px 10px rgba(0,149,246,.35)}
#stTextTools .st-fonts-row{gap:6px!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding:4px 0!important}
#stTextTools .st-font-btn{padding:7px 12px!important;min-height:36px!important}
#stTextTools .st-size-row{display:none!important}
}
@keyframes slideDown{from{transform:translateX(-50%) translateY(-20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
/* ═══ DRAW ON STORIES ═══ */
.draw-canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:15;display:none;touch-action:none;-ms-touch-action:none;cursor:crosshair;background:transparent;-webkit-user-select:none;user-select:none}
.draw-canvas-overlay.active{display:block}
.draw-tools-bar{display:none;position:absolute;bottom:4px;left:4px;right:4px;z-index:16;pointer-events:none;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px;padding:6px 8px;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;max-height:44px}
.draw-tools-bar.active{display:flex}
.draw-tools-bar .dc{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.3);cursor:pointer;flex-shrink:0;pointer-events:auto}
.draw-tools-bar .dc.sel{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.draw-tools-bar *{pointer-events:auto}.draw-tools-bar input[type=range]{flex:1;min-width:50px;-webkit-appearance:none;background:rgba(255,255,255,.2);height:3px;border-radius:3px;outline:none}
.draw-tools-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer}
.draw-tools-bar button{background:none;border:none;color:#fff;font-size:1rem;cursor:pointer;padding:2px 4px}
/* ═══ STORY CAPTION ═══ */
.story-caption-textarea{width:100%;padding:12px 14px;border:2px solid var(--ig,#667eea);border-radius:12px;background:var(--bg);color:var(--text);font-size:.9rem;resize:none;margin-top:10px;box-sizing:border-box}
/* ═══ INSTAGRAM CAPTION PILL (Fixed position) ═══ */
.fg-story-pill{position:fixed!important;bottom:20px;left:14px;width:48px;height:48px;z-index:9998;border-radius:50%;overflow:visible;background:rgba(0,0,0,.35);border:none;padding:0;cursor:pointer;pointer-events:auto;animation:igBob 3s ease-in-out infinite;display:flex!important;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.6)}
.fg-story-pill img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #fff;display:block}
.fg-story-pill .fg-pill-arrow,.fg-story-pill .fg-pill-badge{display:none!important}
.fg-pill-txt{display:none}
.fg-pill-txt b{font-weight:700;margin-right:5px}
.fg-pill-badge{background:#0095f6;color:#fff;font-size:.65rem;padding:2px 7px;border-radius:10px;font-weight:700;flex-shrink:0;min-width:18px;text-align:center}
.fg-pill-arrow{color:rgba(255,255,255,.5);font-size:14px;flex-shrink:0}
/* Expanded panel — fixed fullscreen overlay */
.fg-story-exp{position:fixed!important;bottom:0;left:0;right:0;z-index:9999;background:rgba(0,0,0,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:20px 20px 0 0;max-height:60vh;display:flex;flex-direction:column;pointer-events:auto;animation:fgExpUp .3s ease}
@keyframes fgExpUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.fg-exp-handle{width:40px;height:4px;background:rgba(255,255,255,.3);border-radius:2px;margin:10px auto 6px;cursor:pointer;flex-shrink:0}
.fg-exp-caption{display:flex;align-items:flex-start;gap:10px;padding:8px 16px 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.fg-exp-caption img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.fg-exp-caption-text{color:#fff;font-size:.88rem;line-height:1.4;flex:1}
.fg-exp-caption-text b{font-weight:700;margin-right:5px}
.fg-exp-comments{flex:1;overflow-y:auto;padding:8px 16px;max-height:30vh}
.fg-exp-comment{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.fg-exp-comment img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.fg-exp-comment-body{color:#fff;font-size:.82rem;line-height:1.4;flex:1}
.fg-exp-comment-body b{font-weight:700;margin-right:4px}
.fg-exp-comment-time{font-size:.7rem;color:rgba(255,255,255,.4);margin-top:2px}
.fg-exp-empty{color:rgba(255,255,255,.3);font-size:.82rem;text-align:center;padding:20px 0}
.fg-exp-input{display:flex;align-items:center;gap:8px;padding:10px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1)}
.fg-exp-input img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.fg-exp-input input{flex:1;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:8px 14px;color:#fff;font-size:.85rem;outline:none}
.fg-exp-input input::placeholder{color:rgba(255,255,255,.4)}
.fg-exp-input button{background:#0095f6;color:#fff;border:none;border-radius:50%;width:32px;height:32px;font-size:.8rem;cursor:pointer;font-weight:700;flex-shrink:0}
.don-dd-item{padding:10px 14px;color:#fff;font-size:.82rem;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06)}.don-dd-item:active{background:rgba(255,255,255,.15)}
.story-caption-overlay{position:absolute;bottom:80px;left:16px;right:16px;color:#fff;font-size:.95rem;text-shadow:0 1px 6px rgba(0,0,0,.95);padding:16px 20px;background:rgba(0,0,0,.65);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:14px;max-height:120px;overflow-y:auto;line-height:1.5;z-index:10;pointer-events:auto;word-break:break-word;font-weight:500}
/* Instagram-style story bottom panel */
/* ═══ IG-Style Story Caption Pill ═══ */
.story-bottom-panel{position:absolute;bottom:0;left:0;right:0;z-index:50;pointer-events:auto;display:flex;flex-direction:column;justify-content:flex-end;padding:0 12px 14px;padding-bottom:max(14px,env(safe-area-inset-bottom));transition:all .3s cubic-bezier(.4,0,.2,1)}
/* Caption pill — collapsed state (Instagram style) */
.sbp-pill{position:fixed;top:120px;right:14px;width:42px;height:42px;border-radius:50%;overflow:visible;background:none;border:none;padding:0;cursor:pointer;pointer-events:auto;z-index:100000;animation:igBob 3s ease-in-out infinite}
@keyframes igBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.sbp-pill-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.7);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.sbp-pill-text{display:none}.sbp-pill-badge{display:none}.sbp-pill-arrow{display:none}
.sbp-pill:active{transform:scale(.9)!important}
.sbp-pill:active{transform:scale(.9)!important}
.sbp-pill-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.4)}
.sbp-pill-text{color:#fff;font-size:.82rem;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:normal;flex:1;font-weight:400;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.sbp-pill-text b{font-weight:700;margin-right:4px}
.sbp-pill-badge{display:none}
.sbp-pill-arrow{display:none}
/* Expanded state */
.sbp-expanded{position:absolute;bottom:0;left:0;right:0;z-index:60;background:rgba(0,0,0,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:20px 20px 0 0;padding:0;max-height:55vh;display:none;flex-direction:column;pointer-events:auto;animation:sbpSlideUp .3s cubic-bezier(.4,0,.2,1)}
.sbp-expanded.show{display:flex}
@keyframes sbpSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
/* Drag handle */
.sbp-handle{width:36px;height:4px;background:rgba(255,255,255,.3);border-radius:2px;margin:10px auto 6px;flex-shrink:0}
/* Caption in expanded view */
.sbp-exp-caption{display:flex;align-items:flex-start;gap:10px;padding:8px 16px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.sbp-exp-caption img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.3)}
.sbp-exp-caption-text{color:#fff;font-size:.88rem;line-height:1.4;word-break:break-word}
.sbp-exp-caption-text b{font-weight:700;margin-right:5px}
/* Comments list in expanded */
.sbp-exp-comments{flex:1;overflow-y:auto;padding:8px 16px;scrollbar-width:none;-ms-overflow-style:none;max-height:30vh}
.sbp-exp-comments::-webkit-scrollbar{display:none}
.sbp-exp-comment{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;animation:fadeInComment .3s ease}
.sbp-exp-comment img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sbp-exp-comment-body{flex:1}
.sbp-exp-comment-body b{color:#fff;font-weight:700;font-size:.82rem;margin-right:4px}
.sbp-exp-comment-body span{color:rgba(255,255,255,.85);font-size:.82rem;line-height:1.35}
.sbp-exp-comment-time{color:rgba(255,255,255,.35);font-size:.68rem;margin-top:2px}
.sbp-exp-empty{text-align:center;padding:20px;color:rgba(255,255,255,.3);font-size:.8rem}
/* Comment input in expanded */
.sbp-exp-input{display:flex;align-items:center;gap:8px;padding:10px 16px 12px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.sbp-exp-input img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sbp-exp-input input{flex:1;padding:9px 16px;border-radius:22px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-size:.84rem;outline:none;transition:all .2s}
.sbp-exp-input input::placeholder{color:rgba(255,255,255,.35)}
.sbp-exp-input input:focus{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.sbp-exp-input button{background:none;border:none;color:#3b82f6;font-weight:700;font-size:.85rem;cursor:pointer;padding:6px 4px;white-space:nowrap}
.sbp-exp-input button:active{opacity:.6}
/* Hide old reply input when panel active */
.story-bottom-panel ~ .story-reply-input{display:none!important}
@keyframes fadeInComment{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInComment{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* ═══ STORY LAYOUT ═══ */
.story-layout-bar{display:none;gap:6px;padding:8px 0;justify-content:center}
.story-layout-bar.show{display:flex}
.story-layout-bar button{background:var(--bg-secondary,#f5f5f5);border:1px solid var(--border);border-radius:10px;padding:10px 16px;font-size:.85rem;cursor:pointer;color:var(--text);touch-action:manipulation;min-height:40px}
.story-layout-bar button.active{background:var(--accent,#0095f6);color:#fff;border-color:var(--accent,#0095f6)}
.story-booth-grid{display:none;gap:3px;aspect-ratio:3/4;max-height:350px;margin:10px auto;border-radius:12px;overflow:hidden;width:100%}
.story-booth-grid.show{display:grid}
.story-booth-grid.g2x2{grid-template:1fr 1fr/1fr 1fr}
.story-booth-grid.g1x2{grid-template:1fr/1fr 1fr}
.story-booth-grid.g2x1{grid-template:1fr 1fr/1fr}
.story-booth-cell{background:var(--bg-secondary,#f5f5f5);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;touch-action:manipulation;min-height:80px}
.story-booth-cell img{width:100%;height:100%;object-fit:cover}
.story-booth-cell .plus{font-size:1.5rem;opacity:.4}
/* ═══ STORY COMMENTS ═══ */
.story-comments-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--card,#fff);border-radius:16px 16px 0 0;max-height:60vh;z-index:2100;transform:translateY(100%);transition:transform .3s ease;display:flex;flex-direction:column}
.story-comments-sheet.show{transform:translateY(0)}
.story-comments-sheet .sc-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.story-comments-sheet .sc-list{flex:1;overflow-y:auto;padding:12px 16px}
.story-comments-sheet .sc-item{display:flex;gap:10px;margin-bottom:14px}
.story-comments-sheet .sc-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}
.story-comments-sheet .sc-body{flex:1}
.story-comments-sheet .sc-name{font-weight:600;font-size:.85rem}
.story-comments-sheet .sc-text{font-size:.85rem;margin-top:2px}
.story-comments-sheet .sc-time{font-size:.7rem;opacity:.5;margin-top:2px}
.story-comments-sheet .sc-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.story-comments-sheet .sc-input input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:20px;background:var(--bg);color:var(--text);font-size:.85rem}
.story-comments-sheet .sc-input button{background:var(--accent,#0095f6);color:#fff;border:none;border-radius:20px;padding:8px 18px;font-weight:600;font-size:.85rem;cursor:pointer}
.sc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:2099;display:none}
.sc-overlay.show{display:block}
/* ═══ MOBILE FULLSCREEN STORIES ═══ */
@media(max-width:768px){
.story-media{max-width:100%!important;margin:0!important}
.story-media img,.story-media video{width:100%!important;height:100%!important;object-fit:contain!important;background:#000}
}
/* ═══ REELS EDITOR ═══ */
.reels-modal{position:fixed;inset:0;background:#000;z-index:3000;display:none;flex-direction:column}
.reels-modal.show{display:flex}
.reels-header{display:flex;align-items:center;padding:12px 16px;gap:12px}
.reels-header h3{color:#fff;flex:1;font-size:1rem;margin:0}
.reels-header button{background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer}
.reels-preview{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#111}
.reels-preview video{width:100%;height:100%;object-fit:contain}
@media(max-width:768px){.reels-preview video{object-fit:cover}}
.reels-preview .no-video{color:rgba(255,255,255,.4);text-align:center;padding:40px}
.reels-preview .no-video .icon{font-size:3rem;margin-bottom:12px}
.reels-text-overlay{position:absolute;color:#fff;font-size:1.2rem;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.8);padding:8px 16px;cursor:move;z-index:10;user-select:none}
.reels-tools{background:#111;border-top:1px solid #222}
.reels-tool-tabs{display:flex;overflow-x:auto;gap:0;border-bottom:1px solid #222;scrollbar-width:none}
.reels-tool-tabs::-webkit-scrollbar{display:none}
.reels-tool-tab{flex:none;padding:12px 18px;color:rgba(255,255,255,.5);font-size:.85rem;cursor:pointer;border:none;border-bottom:2px solid transparent;white-space:nowrap;background:none;touch-action:manipulation;min-height:42px}
.reels-tool-tab.active{color:#fff;border-bottom-color:#0095f6}
.reels-tool-panel{display:none;padding:12px 16px;max-height:180px;overflow-y:auto}
.reels-tool-panel.active{display:block}
.reels-upload-area{display:flex;gap:12px}
.reels-upload-btn{flex:1;padding:20px;border-radius:14px;border:2px dashed rgba(255,255,255,.2);color:rgba(255,255,255,.7);text-align:center;cursor:pointer;font-size:.85rem;background:none}
.reels-upload-btn:active{background:rgba(255,255,255,.05)}
.reels-upload-btn .ic{font-size:1.8rem;margin-bottom:6px}
.reels-trim-row{display:flex;align-items:center;gap:10px;color:#fff;font-size:.8rem}
.reels-trim-row input[type=range]{flex:1;-webkit-appearance:none;background:rgba(255,255,255,.15);height:4px;border-radius:4px;outline:none}
.reels-trim-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#0095f6;cursor:pointer}
.reels-speed-row{display:flex;gap:8px}
.reels-speed-btn{padding:8px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.85rem;cursor:pointer;background:none}
.reels-speed-btn.active{background:#0095f6;border-color:#0095f6}
.reels-filters-row{display:flex;gap:10px;overflow-x:auto;padding:4px 0;scrollbar-width:none}
.reels-filters-row::-webkit-scrollbar{display:none}
.reels-filter-chip{flex:none;width:64px;text-align:center;cursor:pointer}
.filter-warm{filter:saturate(1.3) sepia(0.15)}
.filter-cool{filter:saturate(0.9) hue-rotate(20deg)}
.filter-vintage{filter:sepia(0.4) contrast(1.1)}
.filter-dramatic{filter:contrast(1.4) saturate(1.2)}
.filter-bw{filter:grayscale(1)}
.filter-bright{filter:brightness(1.2)}
.filter-fade{filter:brightness(1.1) saturate(0.8)}
.filter-golden{filter:sepia(0.25) saturate(1.4)}
.filter-night{filter:brightness(0.8) contrast(1.3)}
.filter-vivid{filter:saturate(1.6) contrast(1.15)}
.filter-moody{filter:contrast(1.3) brightness(0.85) saturate(0.9)}
.filter-pastel{filter:saturate(0.6) brightness(1.15) contrast(0.9)}
.filter-noir{filter:grayscale(1) contrast(1.4) brightness(0.9)}
.filter-sunset{filter:sepia(0.3) saturate(1.5) hue-rotate(-10deg)}
.filter-arctic{filter:saturate(0.7) hue-rotate(180deg) brightness(1.1)}
.filter-rosegold{filter:sepia(0.2) saturate(1.2) hue-rotate(-5deg) brightness(1.05)}
.filter-cinema{filter:contrast(1.25) saturate(0.85) brightness(0.95)}
.filter-summer{filter:saturate(1.4) brightness(1.1) hue-rotate(-5deg)}
.filter-crisp{filter:contrast(1.2) saturate(1.1) brightness(1.05)}
.reels-filter-chip .preview{width:58px;height:58px;border-radius:10px;border:2px solid transparent;overflow:hidden;margin:0 auto 4px;background:linear-gradient(135deg,#ff6b35 0%,#f7c548 25%,#4ecdc4 50%,#556270 75%,#ff8c94 100%);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.filter-none{filter:none}
.reels-filter-chip.active .preview{border-color:#0095f6}
.reels-filter-chip .name{color:rgba(255,255,255,.7);font-size:.7rem}
.reels-text-input{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:.9rem}
.reels-text-colors{display:flex;gap:8px;margin-top:8px}
.reels-text-colors .tc{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent}
.reels-text-colors .tc.sel{border-color:#fff}
.reels-caption-input{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:.85rem;resize:none}
.reels-pub-btn{width:100%;padding:14px;background:linear-gradient(135deg,#405de6,#833ab4,#c13584,#e1306c,#fd1d1d);border:none;color:#fff;font-weight:700;font-size:1rem;border-radius:12px;cursor:pointer;margin-top:10px}
.reels-pub-btn:disabled{opacity:.5}
.reels-timeline{height:48px;background:#1a1a1a;position:relative;margin:8px 0;border-radius:8px;overflow:hidden}
.reels-timeline .track{position:absolute;inset:4px;display:flex;gap:1px}
.reels-timeline .frame{flex:1;background:rgba(255,255,255,.1);border-radius:2px}
.reels-timeline .selected-range{position:absolute;top:0;bottom:0;background:rgba(0,149,246,.15);border:2px solid #0095f6;border-radius:4px}
.suggested-section{padding:12px 0;border-bottom:1px solid var(--border)}
.suggested-title{font-weight:600;font-size:.9rem;padding:0 16px 10px;color:var(--text)}
.suggested-scroll{display:flex;overflow-x:auto;gap:12px;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.suggested-scroll::-webkit-scrollbar{display:none}
.sug-card{flex:none;width:140px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center}
.sug-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:8px}
.sug-card .sn{font-weight:600;font-size:.82rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-card .sm{font-size:.72rem;color:var(--text2);margin-bottom:10px}
.sug-card .sf{width:100%;padding:7px;border:none;border-radius:8px;font-weight:600;font-size:.8rem;cursor:pointer;background:var(--accent,#0095f6);color:#fff}
.sug-card .sf.done{background:var(--bg-secondary,#efefef);color:var(--text)}
.post-layout-bar{display:none;gap:6px;padding:8px 0;justify-content:center}
.post-layout-bar.show{display:flex}
.post-layout-bar button{background:var(--bg-secondary,#f5f5f5);border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:.8rem;cursor:pointer;color:var(--text)}
.post-layout-bar button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.pb-grid{display:none;gap:3px;aspect-ratio:1;max-height:280px;margin:8px auto;border-radius:10px;overflow:hidden}
.pb-grid.show{display:grid}
.pb-grid.g2x2{grid-template:1fr 1fr/1fr 1fr}
.pb-grid.g1x2{grid-template:1fr/1fr 1fr}
.pb-grid.g2x1{grid-template:1fr 1fr/1fr}
.pb-cell{background:var(--bg-secondary,#f5f5f5);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.pb-cell img{width:100%;height:100%;object-fit:cover}
.pb-cell .plus{font-size:1.5rem;opacity:.4}
.reel-export-ov{position:absolute;inset:0;background:rgba(0,0,0,.85);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;backdrop-filter:blur(8px)}
.reel-export-ov .re-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.1);border-top-color:#667eea;border-radius:50%;animation:reSpin .8s linear infinite}
@keyframes reSpin{to{transform:rotate(360deg)}}
.reel-export-ov .re-text{color:#fff;font-size:14px;font-weight:600}
.reel-export-ov .re-bar{width:80%;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.reel-export-ov .re-bar-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:3px;transition:width .3s;width:0}
.reel-export-ov .re-pct{color:#667eea;font-size:28px;font-weight:900;font-variant-numeric:tabular-nums}
.sub-list{max-height:220px;overflow-y:auto;font-size:.8rem;scrollbar-width:thin}
.sub-overlay{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);z-index:50;pointer-events:none;text-align:center;width:92%;transition:opacity .15s;will-change:transform;-webkit-transform:translateZ(0);transform:translateZ(0)}
.sub-overlay.pos-top{bottom:auto;top:8%}
.sub-overlay.pos-mid{bottom:auto;top:50%;transform:translate(-50%,-50%)}
.sub-overlay-text{display:inline-block;padding:5px 14px;border-radius:6px;font-weight:700;line-height:1.35;max-width:100%;word-wrap:break-word;letter-spacing:.2px}
.sub-overlay-text.classic{background:rgba(0,0,0,.75);color:#fff;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.sub-overlay-text.outline{background:transparent;color:#fff;font-family:-apple-system,BlinkMacSystemFont,sans-serif;text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 -2px 0 #000,0 2px 0 #000,-2px 0 0 #000,2px 0 0 #000}
.sub-overlay-text.box{background:#fff;color:#000;font-family:-apple-system,BlinkMacSystemFont,sans-serif;border-radius:4px;padding:4px 10px}
.sub-overlay-text.neon{background:transparent;color:#0ff;font-family:-apple-system,BlinkMacSystemFont,sans-serif;text-shadow:0 0 7px #0ff,0 0 20px #0ff,0 0 40px #08f}
.sub-overlay-text.sz-s{font-size:clamp(11px,2.5vw,14px)}
.sub-overlay-text.sz-m{font-size:clamp(14px,3.5vw,18px)}
.sub-overlay-text.sz-l{font-size:clamp(18px,5vw,26px)}
.sub-interim{opacity:.55;font-style:italic}
.sub-recording{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:55;background:rgba(255,59,48,.92);color:#fff;padding:5px 16px;border-radius:20px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;pointer-events:none;backdrop-filter:blur(4px)}
.sub-recording::before{content:'';width:8px;height:8px;background:#fff;border-radius:50%;animation:subPulse .8s infinite}
@keyframes subPulse{0%,100%{opacity:1}50%{opacity:.2}}
.sub-item{display:flex;gap:6px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.08);align-items:center;font-size:.78rem}
.sub-item:last-child{border-bottom:none}
.sub-time{color:#667eea;font-weight:700;min-width:42px;font-size:.72rem;font-variant-numeric:tabular-nums}
.sub-del{background:none;border:none;color:#f85149;cursor:pointer;padding:2px 6px;font-size:.9rem;opacity:.6;transition:opacity .15s}
.sub-del:hover{opacity:1}
.sub-timeline{width:100%;height:28px;background:rgba(255,255,255,.06);border-radius:6px;position:relative;overflow:hidden;margin:6px 0;cursor:pointer;touch-action:none}
.sub-tl-block{position:absolute;top:3px;height:22px;background:rgba(102,126,234,.5);border-radius:4px;border:1px solid rgba(102,126,234,.8);font-size:9px;color:#fff;overflow:hidden;padding:0 4px;display:flex;align-items:center;white-space:nowrap}
.sub-tl-cursor{position:absolute;top:0;width:2px;height:100%;background:#ff3b30;z-index:2;pointer-events:none;transition:left 50ms linear}
.sub-mode-btn{padding:8px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.85);font-weight:600;cursor:pointer;font-size:.82rem;width:100%;transition:all .15s;text-align:center}
.sub-mode-btn:active{transform:scale(.97)}
.sub-mode-btn.recording{background:rgba(255,59,48,.15);border-color:rgba(255,59,48,.5);color:#ff6b6b;animation:subGlow 1.5s infinite}
@keyframes subGlow{0%,100%{box-shadow:0 0 0 rgba(255,59,48,0)}50%{box-shadow:0 0 12px rgba(255,59,48,.3)}}
.sub-opts{display:flex;gap:4px}
.sub-opt{flex:1;padding:5px 2px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:none;color:rgba(255,255,255,.6);font-size:.68rem;cursor:pointer;text-align:center;transition:all .15s}
.sub-opt.active{border-color:#667eea;background:rgba(102,126,234,.2);color:#fff}
.sub-opt:active{transform:scale(.95)}
/* AI Story Translation */
.str-tr-hdr{display:flex;align-items:center;gap:4px;cursor:pointer;margin-top:1px;-webkit-tap-highlight-color:transparent}.str-tr-hdr .str-dot{width:6px;height:6px;border-radius:50%;background:#fff;flex-shrink:0}.str-tr-hdr .str-label{color:#fff;font-size:.7rem;font-weight:500}.str-tr-hdr:active{opacity:.5}
.str-tr-box{color:#fff;font-size:.78rem;line-height:1.35;padding:8px 12px;margin-top:4px;background:rgba(0,0,0,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:10px;border-left:3px solid rgba(102,126,234,.6);word-break:break-word;max-width:80%}.str-tr-box .str-tr-ai{color:rgba(255,255,255,.4);font-size:.58rem;margin-top:2px}
.str-tr{display:inline-flex;align-items:center;gap:4px;cursor:pointer;padding:2px 0;-webkit-tap-highlight-color:transparent}
.str-tr .str-globe{font-size:14px}
.str-tr .str-label{color:#fff;font-size:.72rem;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.9)}
.str-tr:active{opacity:.5}
.str-tr-box .str-tr-ai{color:rgba(255,255,255,.4);font-size:.6rem;margin-top:2px}
.c-tr{display:inline;cursor:pointer;color:var(--text2,#8e8e8e);font-size:.75rem;font-weight:600;margin-left:6px}.c-tr:hover{color:var(--text,#000)}.c-tr-box{margin-top:4px;padding:6px 10px;background:var(--bg,#fafafa);border-radius:8px;border-left:2px solid rgba(102,126,234,.5);font-size:.82rem;line-height:1.3}.c-tr-ai{color:var(--text2);font-size:.6rem;margin-top:2px}
/* PTR CSS removed — native-feel.php handles it */
.sse-overlay{position:fixed;inset:0;z-index:10000;background:#000;display:flex;flex-direction:column}
.sse-top{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;flex-shrink:0}
.sse-top h3{margin:0;font-size:.95rem;font-weight:600;color:#fff}
.sse-top button{background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.sse-top button:active{background:rgba(255,255,255,.1)}
.sse-area{flex:1;position:relative;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center}
.sse-blur{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(30px) brightness(.4) saturate(1.2);transform:scale(1.3)}
.sse-post{position:absolute;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.5);cursor:grab;user-select:none;-webkit-user-select:none;width:220px;max-width:55vw;transform-origin:center center}
.sse-post.grabbing{cursor:grabbing;box-shadow:0 16px 60px rgba(0,0,0,.7)}
.sse-post-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff}
.sse-post-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sse-post-info{flex:1;min-width:0;overflow:hidden}
.sse-post-name{font-size:.78rem;font-weight:700;color:#262626;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sse-post-sub{font-size:.6rem;color:#8e8e8e}
.sse-post-media{width:100%;max-height:44vh;object-fit:contain;display:block;background:#111}
.sse-post-media-wrap{position:relative;width:100%;background:#000}
.sse-post-media-wrap video{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.sse-post-play{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;font-size:.6rem;padding:3px 8px;border-radius:10px;pointer-events:none}
.sse-bottom{flex-shrink:0;padding:8px 16px 24px;display:flex;flex-direction:column;align-items:center;gap:6px}
.sse-bottom small{color:rgba(255,255,255,.5);font-size:.7rem}
.sse-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:24px;padding:13px 48px;font-size:.95rem;font-weight:700;cursor:pointer;letter-spacing:.3px}
.sse-btn:active{transform:scale(.95)}
.sse-btn:disabled{opacity:.6}
@media(max-width:480px){
.sse-post{width:52vw;max-width:52vw;border-radius:12px}
.sse-post-head{gap:6px;padding:8px 10px}
.sse-post-av{width:24px;height:24px}
.sse-post-name{font-size:.72rem}
.sse-post-sub{font-size:.55rem}
.sse-post-play{font-size:.55rem;padding:2px 6px;bottom:6px;left:6px}
.sse-btn{padding:12px 36px;font-size:.88rem}
}
.s-shared{background:#fff;border-radius:14px;box-shadow:0 4px 20px rgba(0,0,0,.3);overflow:hidden;width:200px;cursor:pointer}
.s-shared:active{transform:scale(.95)}
.repost-info{font-size:.78rem;color:var(--text2);padding:2px 0 4px;display:flex;align-items:center;gap:4px;cursor:pointer}.repost-info span{color:var(--primary);font-weight:600}.repost-info:hover span{text-decoration:underline}
.s-shared-h{display:flex;align-items:center;gap:6px;padding:8px 10px}
.s-shared-av{width:24px;height:24px;border-radius:50%;object-fit:cover}
.s-shared-n{font-size:.7rem;font-weight:600;color:#262626}
.s-shared-sub{font-size:.55rem;color:#8e8e8e}
.s-shared img,.s-shared video{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.sp-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.5);width:220px;transform-origin:center center}
.sp-card-hd{display:flex;align-items:center;gap:8px;padding:10px 12px}
.sp-card-av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.sp-card-info{flex:1;min-width:0;overflow:hidden}
.sp-card-nm{font-size:.78rem;font-weight:700;color:#262626;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-card-sub{font-size:.55rem;color:#8e8e8e}
.sp-card-img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.sp-card-vid{position:relative;width:100%;background:#000}
.sp-card-vid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.sp-card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sp-card-play i{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-style:normal;color:#000;padding-left:3px}
@media(max-width:600px){.stk-vl .sp-card{transform:scale(0.7)}}
/* VTRIM */
.vtrim-wrap{margin:8px 0 12px;padding:0 4px;user-select:none;-webkit-user-select:none}
.vtrim-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.78rem;color:var(--text2,#888)}
.vtrim-info b{color:#ffd23f;font-weight:700;font-size:.85rem}
.vtrim-timeline{position:relative;height:52px;background:#0a0a0a;border-radius:10px;overflow:hidden;touch-action:none;-webkit-touch-callout:none}
.vtrim-frames{position:absolute;inset:0;display:flex;border-radius:10px;overflow:hidden;pointer-events:none}
.vtrim-frame{flex:1 1 0;background:#222 center/cover no-repeat;border-right:1px solid rgba(0,0,0,.4)}
.vtrim-frame:last-child{border-right:0}
.vtrim-mask{position:absolute;top:0;bottom:0;background:rgba(0,0,0,.55);pointer-events:none;z-index:2}
.vtrim-range{position:absolute;top:0;bottom:0;border:3px solid #ffd23f;border-radius:6px;pointer-events:none;z-index:3}
.vtrim-handle{position:absolute;top:-6px;bottom:-6px;width:24px;background:#ffd23f;border-radius:6px;display:flex;align-items:center;justify-content:center;z-index:4;cursor:ew-resize;touch-action:none;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.vtrim-handle::before{content:"";position:absolute;inset:-12px -10px}
.vtrim-handle::after{content:"";width:3px;height:18px;background:rgba(0,0,0,.6);border-radius:2px;box-shadow:5px 0 0 rgba(0,0,0,.6),-5px 0 0 rgba(0,0,0,.6)}
.vtrim-playhead{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;box-shadow:0 0 4px #fff;pointer-events:none;z-index:5}
.vtrim-hint{margin-top:5px;text-align:center;font-size:.7rem;color:var(--text2,#888);opacity:.7}
.vtrim-warn{margin-top:5px;text-align:center;font-size:.72rem;color:#ff9d00;font-weight:600}
@media(min-width:600px){.vtrim-timeline{height:60px}.vtrim-handle{width:26px}}
/* GIF_PICKER_CSS_UP */ .gif-btn{background:none;border:none;font-size:.75rem;cursor:pointer;padding:4px 8px;opacity:.5;transition:.2s;font-weight:700;color:var(--text2,#8e8e8e);letter-spacing:.5px}.gif-btn:hover,.gif-btn:active{opacity:1}.gif-picker{position:absolute;bottom:100%;left:0;right:0;background:var(--card,#fff);border:1px solid var(--border);border-radius:12px 12px 0 0;max-height:280px;display:none;flex-direction:column;box-shadow:0 -4px 20px rgba(0,0,0,.15);z-index:100}.gif-picker.show{display:flex}.gif-picker input{border:none;padding:10px 14px;font-size:.85rem;background:var(--bg);color:var(--text);border-bottom:1px solid var(--border);outline:none}.gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;overflow-y:auto;flex:1}.gif-grid img{width:100%;height:80px;object-fit:cover;border-radius:6px;cursor:pointer}.gif-preview-bar{display:flex;align-items:center;gap:8px;padding:4px 12px;border-top:1px solid var(--border);background:var(--bg)}.gif-preview-bar img{height:40px;border-radius:4px}.gif-preview-bar button{background:none;border:none;color:var(--text2);cursor:pointer;font-size:.9rem}