:root{--primary:#1a56db;--bg:#f0f4ff;--white:#fff;--text:#050505;--border:#d1d9f0;--green:#25d366;--red:#e53935;--gold:#f5c518;--muted:#6b7280;--shadow:0 1px 4px rgba(26,86,219,.12);--sat:env(safe-area-inset-top);--sar:env(safe-area-inset-right);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);}
.dark,html.dark body{--bg:#18191a;--white:#242526;--text:#e4e6eb;--border:#3a3b3c;--muted:#b0b3b8;--shadow:0 1px 4px rgba(0,0,0,.3);}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;}
::-webkit-scrollbar{display:none;}

html{overflow:hidden;height:100%;width:100%;background:var(--bg);}
body{margin:0;padding:0;overflow:hidden;width:100%;height:100%;background:var(--bg);overscroll-behavior:none;touch-action:manipulation;font-family:'Nunito',sans-serif;color:var(--text);transition:background .3s,color .3s;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
img,a{-webkit-user-drag:none;user-drag:none;}
body.app-ready{background:var(--bg);}
/* Hide until Firebase auth state known - prevents flash */
#authPage,#mainApp{transition:opacity .15s ease;}

/* MARKETPLACE */
.market-header{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--white);margin:8px;border-radius:14px;box-shadow:var(--shadow);}
.market-search{flex:1;margin:0 10px;padding:8px 12px;border-radius:20px;border:1px solid var(--border);background:var(--bg);outline:none;font-family:'Nunito',sans-serif;font-size:.88rem;color:var(--text);}
.market-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px;}
.product-card{background:var(--white);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s;cursor:pointer;}
.product-card:active{transform:scale(.97);}
.product-img{width:100%;height:150px;object-fit:cover;background:var(--bg);display:block;}
.product-info{padding:10px;}
.product-title{font-weight:700;font-size:.9rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-price{color:var(--primary);font-weight:800;font-size:1rem;}
.product-seller{font-size:.7rem;color:var(--muted);margin-top:4px;}
.product-btn{width:100%;padding:8px;margin-top:8px;border:none;border-radius:8px;background:var(--primary);color:#fff;font-weight:700;cursor:pointer;font-size:.8rem;font-family:'Nunito',sans-serif;}
.product-btn.sold{background:var(--muted);cursor:not-allowed;}
.product-btn.mine{background:var(--gold);color:#000;}
.sell-btn-float{position:fixed;bottom:80px;right:20px;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;border:none;font-size:1.5rem;box-shadow:0 4px 12px rgba(37,211,102,.4);cursor:pointer;z-index:99;display:none;align-items:center;justify-content:center;}
.sell-btn-float.show{display:flex;}
/* AI SUPPORT */
@keyframes aiPulse{0%,100%{box-shadow:0 4px 16px rgba(118,75,162,.45)}50%{box-shadow:0 4px 24px rgba(118,75,162,.8)}}
.sell-input{width:100%;padding:10px;margin:6px 0;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);outline:none;font-family:'Nunito',sans-serif;font-size:.9rem;color:var(--text);}
.market-cats{display:flex;gap:8px;padding:4px 10px 8px;overflow-x:auto;scrollbar-width:none;}
.market-cats::-webkit-scrollbar{display:none;}
.mcat{padding:6px 14px;border-radius:20px;border:none;font-weight:700;font-size:.8rem;cursor:pointer;white-space:nowrap;font-family:'Nunito',sans-serif;background:var(--white);color:var(--muted);box-shadow:var(--shadow);}
.mcat.active{background:var(--primary);color:#fff;}
.market-empty{grid-column:span 2;text-align:center;padding:40px 20px;color:var(--muted);}
.market-empty .mkt-icon{font-size:3rem;margin-bottom:12px;}
/* loading spinner */
.loading-spinner{grid-column:span 2;display:flex;justify-content:center;padding:40px;}
.spinner{width:36px;height:36px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* WELCOME */
.welcome-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;}
.welcome-box{background:var(--white);border-radius:28px;padding:32px 24px;text-align:center;max-width:380px;width:100%;animation:popIn .5s cubic-bezier(.175,.885,.32,1.275);}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

/* AUTH PAGE - full screen, NO header/nav */
#authPage{height:100%;background:linear-gradient(135deg,#1877f2,#1558b0);display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;}
.auth-card{background:var(--white);border-radius:24px;padding:32px 24px;width:100%;max-width:400px;box-shadow:0 8px 32px rgba(0,0,0,.2);}
.auth-tabs{display:flex;background:var(--bg);border-radius:12px;padding:4px;gap:4px;margin-bottom:20px;}
.atab{flex:1;padding:9px;border:none;border-radius:9px;font-weight:700;font-size:.88rem;cursor:pointer;background:none;color:var(--muted);font-family:'Nunito',sans-serif;transition:.2s;}
.atab.active{background:#fff;color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.12);}
.afield{margin-bottom:12px;}
.afield label{font-size:.73rem;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:4px;}
.afield input{width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid #e4e6eb;font-size:.92rem;font-family:'Nunito',sans-serif;outline:none;transition:border-color .2s;}
.afield input:focus{border-color:var(--primary);}
.btn-auth{width:100%;padding:13px;border:none;border-radius:12px;background:var(--primary);color:#fff;font-weight:800;font-size:1rem;cursor:pointer;font-family:'Nunito',sans-serif;margin-top:4px;}
.otp-box{width:40px;height:50px;text-align:center;font-size:1.5rem;font-weight:900;border:2px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;}
.otp-box:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(24,119,242,.15);}
.otp-box.otp-filled{border-color:var(--primary);background:rgba(24,119,242,.06);}

/* MAIN APP - hidden until login */
#mainApp{display:none;width:100%;height:100%;flex-direction:column;overflow:hidden;}
/* Header takes 52px, .pg fills the rest */
#mainApp > header{flex-shrink:0;height:52px;}

/* HEADER */
header{background:var(--primary);color:#fff;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.2);height:52px;overflow:hidden;}
.hdr-logo{font-size:1.1rem;font-weight:900;letter-spacing:-0.5px;}
.hdr-icons{display:flex;gap:6px;}
.hdr-btn{background:rgba(255,255,255,.18);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;}
.notif-dot{position:absolute;top:3px;right:3px;width:9px;height:9px;background:var(--red);border-radius:50%;border:2px solid var(--primary);display:none;}
.notif-dot.show{display:block;}

/* BOTTOM NAV */
.bnav{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--border);display:flex;z-index:100;box-shadow:0 -2px 10px rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom);}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;background:none;border:none;cursor:pointer;font-family:'Nunito',sans-serif;-webkit-tap-highlight-color:transparent;}
.bnav-icon{font-size:1.4rem;}
.bnav-lbl{font-size:.62rem;font-weight:700;color:var(--muted);}
.bnav-btn.active .bnav-lbl{color:var(--primary);}
.bnav-btn.active .bnav-icon{transform:scale(1.15);}
.bnav-btn svg{color:var(--muted);transition:color .2s,transform .2s;}
.bnav-btn.active svg{color:var(--primary);transform:scale(1.15);}

/* PAGES */
/* .pg = main-content scroll container */
.pg{display:none;padding-bottom:70px;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.pg.active{display:block;}

/* STORY BAR */
.story-bar{background:var(--white);padding:10px 12px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);}
.story-bar::-webkit-scrollbar{display:none;}
.story-item{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;cursor:pointer;}
.s-ring{width:58px;height:58px;border-radius:50%;padding:2.5px;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.s-inner{width:100%;height:100%;border-radius:50%;border:2.5px solid #fff;overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1rem;}
.s-add{background:var(--bg)!important;border:2px dashed var(--border);font-size:1.4rem;padding:0;}
.story-name{font-size:.63rem;font-weight:600;color:var(--muted);max-width:58px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* COMPOSE */
.compose-box{background:var(--white);margin:8px;border-radius:14px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.compose-row{display:flex;align-items:center;gap:10px;}
.compose-av{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;overflow:hidden;}
.compose-av img{width:100%;height:100%;object-fit:cover;}
.compose-btn{flex:1;padding:10px 16px;background:var(--bg);border:none;border-radius:22px;color:var(--muted);font-size:.9rem;cursor:pointer;text-align:left;font-family:'Nunito',sans-serif;}
.compose-divider{border:none;border-top:1px solid var(--border);margin:12px 0;}
.compose-actions{display:flex;justify-content:space-around;}
.caction{display:flex;align-items:center;gap:5px;padding:7px 10px;background:none;border:none;cursor:pointer;border-radius:8px;font-size:.82rem;font-weight:700;color:var(--muted);font-family:'Nunito',sans-serif;}

/* POST MODAL */
.overlay{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.65);align-items:flex-end;justify-content:center;}
.overlay.open{display:flex;}
.modal-box{background:var(--white);width:100%;max-width:600px;border-radius:20px 20px 0 0;padding:20px;animation:slideUp .3s ease;max-height:88vh;overflow-y:auto;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.modal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-title{font-weight:800;font-size:1.1rem;}
.modal-x{width:32px;height:32px;border-radius:50%;background:var(--bg);border:none;cursor:pointer;font-size:1.1rem;}
.post-ta{width:100%;border:none;outline:none;resize:none;font-size:1.05rem;color:var(--text);background:none;font-family:'Nunito',sans-serif;min-height:80px;}
.preview-media{width:100%;border-radius:12px;margin:10px 0;max-height:220px;object-fit:cover;display:none;}
.preview-media.show{display:block;}
.modal-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;border-top:1px solid var(--border);padding-top:12px;}
.add-media-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--bg);border:none;border-radius:20px;cursor:pointer;font-size:.85rem;font-weight:700;color:var(--primary);font-family:'Nunito',sans-serif;}
.btn-post-go{padding:10px 24px;background:var(--primary);color:#fff;border:none;border-radius:20px;font-weight:800;font-size:.9rem;cursor:pointer;font-family:'Nunito',sans-serif;}
.btn-post-go:disabled{opacity:.5;}

/* FB POST */
.fb-post{background:var(--white);margin:6px 8px;border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,.07);overflow:hidden;border:1px solid var(--border);}
.fb-head{display:flex;align-items:center;gap:10px;padding:12px 14px;}
.fb-av{width:42px;height:42px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;overflow:hidden;}
.fb-av img{width:100%;height:100%;object-fit:cover;}
.fb-media{width:100%;max-height:380px;object-fit:cover;display:block;}
video.fb-media{max-height:420px;object-fit:contain;background:#000;cursor:pointer;}
img.fb-media{cursor:zoom-in;}
/* VIDEO CALL */
.call-overlay{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:9000;display:none;flex-direction:column;align-items:center;justify-content:center;}
.call-overlay.active{display:flex;}
.call-video{width:100%;max-height:55vh;background:#111;border-radius:14px;object-fit:cover;}
.call-controls{display:flex;gap:20px;margin-top:24px;}
.call-btn{width:62px;height:62px;border-radius:50%;border:none;color:#fff;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.call-btn.end{background:#e53935;}
.call-btn.mute{background:rgba(255,255,255,.2);}
.call-btn.muted{background:#f5c518;color:#000;}
.switch{position:relative;display:inline-block;width:50px;height:26px;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ccc;transition:.3s;border-radius:26px;}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:4px;background:#fff;transition:.3s;border-radius:50%;}
input:checked+.slider{background:var(--primary);}
input:checked+.slider:before{transform:translateX(24px);}
.search-results{background:var(--white);margin:8px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
.search-item{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--border);}
.search-item:last-child{border-bottom:none;}

.group-badge{background:var(--primary);color:#fff;font-size:.6rem;padding:2px 6px;border-radius:8px;font-weight:700;margin-left:4px;}
#videoViewer{display:none;position:fixed;inset:0;z-index:6000;background:#000;flex-direction:column;align-items:center;justify-content:center;}
#videoViewer.open{display:flex;}
#videoViewer video{width:100%;max-height:100vh;object-fit:contain;}
.vv-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.2);border:none;color:#fff;width:42px;height:42px;border-radius:50%;font-size:1.3rem;cursor:pointer;z-index:1;}
.like-ripple{position:absolute;pointer-events:none;font-size:3rem;animation:likeRipple .8s ease forwards;z-index:10;}
@keyframes likeRipple{0%{opacity:1;transform:scale(0.5)}70%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(1.6)}}
.fb-post{position:relative;}
.post-menu-btn{position:absolute;right:10px;top:10px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--muted);padding:4px 8px;border-radius:8px;}
.read-more-btn{color:var(--primary);font-weight:700;font-size:.82rem;cursor:pointer;padding:2px 14px 8px;display:block;background:none;border:none;font-family:'Nunito',sans-serif;}
.fb-text{padding:8px 14px 4px;font-size:.9rem;line-height:1.5;}
.fb-stats{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;color:var(--muted);font-size:.8rem;}
.fb-div{border:none;border-top:1px solid var(--border);margin:0 14px;}
.fb-actions{display:flex;}
.fb-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px;background:none;border:none;cursor:pointer;font-size:.85rem;font-weight:700;color:var(--muted);border-radius:8px;margin:4px;font-family:'Nunito',sans-serif;}
.fb-btn.liked{color:var(--primary);}
.comment-section{display:none;padding:10px 14px;border-top:1px solid var(--border);}
.comment-item{display:flex;gap:8px;margin-bottom:8px;}
.comment-av{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0;}
.comment-bubble{background:var(--bg);border-radius:10px;padding:6px 10px;flex:1;}
.comment-input-row{display:flex;gap:8px;margin-top:8px;}
.comment-input-row input{flex:1;padding:8px 12px;border-radius:20px;border:1px solid var(--border);font-size:.85rem;outline:none;font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);}
.comment-send-btn{padding:8px 14px;background:var(--primary);color:#fff;border:none;border-radius:20px;font-weight:700;cursor:pointer;}

/* CHAT LIST */
.chat-search{display:flex;align-items:center;gap:8px;background:var(--white);border-radius:22px;padding:9px 14px;margin:8px;border:1.5px solid var(--border);}
.chat-search input{flex:1;border:none;background:none;outline:none;font-size:.9rem;color:var(--text);font-family:'Nunito',sans-serif;}
.sr-card{display:none;background:var(--white);border:1.5px solid var(--primary);border-radius:14px;padding:12px;margin:0 8px 8px;align-items:center;gap:10px;}
.sr-card.show{display:flex;}
.sr-av{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}
.sr-chat-btn{background:var(--green);color:#fff;border:none;border-radius:8px;padding:7px 12px;font-weight:800;font-size:.78rem;cursor:pointer;}
.chat-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;cursor:pointer;margin:0 6px 4px;transition:background .2s;}
.chat-item:hover{background:var(--white);}
.chat-item-av{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;flex-shrink:0;position:relative;overflow:hidden;}
.chat-item-av img{width:100%;height:100%;object-fit:cover;}
.online-dot{position:absolute;bottom:2px;right:2px;width:12px;height:12px;background:var(--green);border-radius:50%;border:2.5px solid var(--bg);}
.chat-item-info{flex:1;overflow:hidden;}
.chat-item-name{font-weight:800;font-size:.92rem;}
.chat-item-prev{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}

/* CHAT WINDOW - WhatsApp */
#chatWindow{display:none;position:fixed;inset:0;z-index:200;flex-direction:column;background:var(--white);}
#chatWindow.open{display:flex;}
.cw-hdr{background:#075e54;color:#fff;display:flex;align-items:center;gap:10px;padding:10px 14px;flex-shrink:0;}
.cw-back{background:none;border:none;color:#fff;font-size:1.4rem;cursor:pointer;}
.cw-av{width:40px;height:40px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;color:#fff;overflow:hidden;}
.cw-av img{width:100%;height:100%;object-fit:cover;}
.cw-msgs{flex:1;overflow-y:auto;padding:10px 12px;background:#eae6df;display:flex;flex-direction:column;gap:6px;}
.dark .cw-msgs{background:#0d1117;}
.cw-date{text-align:center;margin:8px 0;}
.cw-date span{background:rgba(0,0,0,.18);color:#fff;font-size:.7rem;padding:3px 10px;border-radius:8px;font-weight:600;}
.wmw{display:flex;flex-direction:column;max-width:78%;}
.wmw.mine{align-self:flex-end;}
.wmw.theirs{align-self:flex-start;}
.wbubble{padding:7px 12px 18px;border-radius:12px;font-size:.9rem;line-height:1.4;word-break:break-word;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.1);}
.sent{background:#dcf8c6;color:#000;border-bottom-right-radius:3px;}
.dark .sent{background:#005c4b;color:#e9e9e9;}
.received{background:var(--white);color:var(--text);border-bottom-left-radius:3px;}
.wtime{position:absolute;bottom:4px;right:8px;font-size:.65rem;color:#999;}
.typing-bar{padding:4px 14px;font-size:.78rem;color:var(--muted);background:#eae6df;flex-shrink:0;min-height:22px;}
.dark .typing-bar{background:#0d1117;}
.cw-input{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg);flex-shrink:0;border-top:1px solid var(--border);}
.cw-inp{flex:1;padding:10px 14px;border-radius:22px;border:none;background:var(--white);color:var(--text);font-size:.92rem;outline:none;font-family:'Nunito',sans-serif;box-shadow:0 1px 3px rgba(0,0,0,.1);}
.cw-send{width:44px;height:44px;border-radius:50%;background:var(--green);border:none;color:#fff;font-size:1.1rem;cursor:pointer;box-shadow:0 2px 8px rgba(37,211,102,.4);}
/* VOICE MESSAGE */
.voice-msg{display:flex;align-items:center;gap:8px;padding:8px 12px;background:inherit;border-radius:12px;}
.voice-play{width:32px;height:32px;border-radius:50%;border:none;background:var(--primary);color:#fff;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.voice-wave{flex:1;height:4px;background:rgba(0,0,0,.15);border-radius:2px;overflow:hidden;}
.voice-wave-inner{height:100%;background:var(--primary);border-radius:2px;width:0%;transition:width .1s;}
.voice-duration{font-size:.7rem;color:#999;white-space:nowrap;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* WALLET PIN */
.pin-dot{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--primary);background:transparent;transition:.15s;}
.pin-dot.filled{background:var(--primary);}
.pin-key{padding:16px;border-radius:14px;border:1.5px solid var(--border);background:var(--white);font-size:1.2rem;font-weight:800;cursor:pointer;font-family:'Nunito',sans-serif;color:var(--text);transition:.15s;}
.pin-key:active{background:var(--primary);color:#fff;transform:scale(.95);}
/* CHAT PHOTO */
.chat-img-msg{max-width:200px;border-radius:12px;cursor:zoom-in;display:block;margin-bottom:2px;}
.cw-attach-btn{width:40px;height:40px;border-radius:50%;background:var(--bg);border:1.5px solid var(--border);font-size:1.1rem;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
/* PROFILE EDIT */
.edit-field{margin-bottom:14px;}
.edit-field label{font-size:.73rem;font-weight:700;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:5px;}
.edit-field input,.edit-field select,.edit-field textarea{width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid var(--border);font-size:.92rem;font-family:'Nunito',sans-serif;outline:none;background:var(--bg);color:var(--text);transition:border-color .2s;}
.edit-field input:focus,.edit-field textarea:focus{border-color:var(--primary);}
/* PASSWORD STRENGTH */
.pass-strength-bar{height:5px;border-radius:3px;margin-top:6px;transition:width .3s,background .3s;width:0%;}
.pass-hint{font-size:.72rem;margin-top:3px;}

/* FRIENDS */
.friends-tabs{display:flex;gap:8px;padding:10px;overflow-x:auto;scrollbar-width:none;}
.friends-tabs::-webkit-scrollbar{display:none;}
.ftab{padding:8px 18px;border-radius:20px;border:none;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;font-family:'Nunito',sans-serif;}
.ftab.active{background:var(--primary);color:#fff;}
.ftab:not(.active){background:var(--white);color:var(--text);}
.friend-card{background:var(--white);border-radius:14px;padding:14px;margin:6px 10px;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;align-items:center;gap:12px;}
.friend-av{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1.1rem;flex-shrink:0;position:relative;overflow:hidden;}
.friend-av img{width:100%;height:100%;object-fit:cover;}
.friend-info{flex:1;}
.friend-name{font-weight:800;font-size:.9rem;}
.friend-sub{font-size:.75rem;color:var(--muted);margin-top:2px;}
.follow-btn{padding:7px 16px;border:none;border-radius:20px;font-weight:800;font-size:.8rem;cursor:pointer;font-family:'Nunito',sans-serif;}
.follow-btn.add{background:var(--primary);color:#fff;}
.follow-btn.following{background:var(--bg);color:var(--text);border:1.5px solid var(--border);}
.follow-btn.accept{background:var(--green);color:#fff;}

/* WALLET */
.wallet-hero{background:linear-gradient(135deg,#1e3c72,#2a5298,#1e90ff);border-radius:22px;padding:28px 24px;color:#fff;text-align:center;margin:10px;box-shadow:0 8px 28px rgba(30,60,114,.4);position:relative;overflow:hidden;}
.wallet-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.08);}
.w-label{font-size:.73rem;font-weight:700;opacity:.75;letter-spacing:1.5px;text-transform:uppercase;}
.wbtn{padding:14px;border-radius:16px;border:none;cursor:pointer;font-weight:800;font-size:.88rem;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:'Nunito',sans-serif;}
.card{background:var(--white);border-radius:14px;padding:14px;margin:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.tx-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.tx-item:last-child{border-bottom:none;}

/* PROFILE */
.p-cover{height:130px;background:linear-gradient(135deg,#1877f2,#1558b0);border-radius:16px;margin:10px 10px 50px;position:relative;}
.p-pic-wrap{position:absolute;bottom:-44px;left:50%;transform:translateX(-50%);}
.p-pic{width:88px;height:88px;border-radius:50%;border:4px solid #fff;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.2);display:block;}
.p-edit{position:absolute;bottom:2px;right:2px;width:26px;height:26px;background:var(--bg);border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem;}
.p-info{background:var(--white);border-radius:16px;padding:16px;text-align:center;margin:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.p-name{font-size:1.2rem;font-weight:900;}
.p-handle{color:var(--muted);font-size:.82rem;margin-top:2px;}
.p-stats{display:flex;justify-content:space-around;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.pstat-n{font-size:1.3rem;font-weight:900;color:var(--primary);}
.pstat-l{font-size:.68rem;color:var(--muted);font-weight:600;text-transform:uppercase;}
.p-menu{background:var(--white);border-radius:16px;overflow:hidden;margin:10px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.pmenu-i{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
.pmenu-i:last-child{border-bottom:none;}

/* NOTIFICATIONS */
.notif-panel{display:none;position:fixed;top:58px;right:8px;width:300px;max-width:95vw;background:var(--white);border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.2);z-index:300;max-height:380px;overflow-y:auto;border:1px solid var(--border);}
.notif-panel.open{display:block;}
.notif-hdr{padding:12px 16px;font-weight:800;font-size:.95rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.notif-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
.notif-item.unread{background:rgba(24,119,242,.06);}
.notif-av{width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;}

/* TOAST */
#toast{
    position:fixed;
    bottom:75px;
    left:50%;
    transform:translateX(-50%) translateY(80px);
    background:#333;
    color:#fff;
    padding:10px 22px;
    border-radius:22px;
    font-size:.85rem;
    font-weight:700;
    z-index:9999;
    transition:transform .3s ease, opacity .3s ease;
    white-space:nowrap;
    pointer-events:none;
    box-shadow:0 4px 20px rgba(0,0,0,.3);
    opacity:0;
    max-width:90vw;
    text-align:center;
}
#toast.show{
    transform:translateX(-50%) translateY(0);
    opacity:1;
}
#toast.ok{background:#25a244;}
#toast.err{background:var(--red);}
.sec-title{font-weight:800;font-size:1rem;padding:12px 14px 6px;}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted);}
.status-online{color:var(--green);font-size:.75rem;font-weight:700;}

/* ── STORIES ── */
.story-upload-btn{position:relative;cursor:pointer;}
.story-ring.has-story{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.story-ring.viewed{background:#999;}
.story-viewer{display:none;position:fixed;inset:0;z-index:5000;background:#000;flex-direction:column;}
.story-viewer.open{display:flex;}
.story-bar-top{height:3px;background:rgba(255,255,255,.3);border-radius:2px;margin:8px 6px 0;}
.story-progress{height:100%;background:#fff;border-radius:2px;animation:storyProg 5s linear forwards;}
@keyframes storyProg{from{width:0}to{width:100%}}
.story-img{flex:1;object-fit:contain;width:100%;}
.story-hdr{position:absolute;top:0;left:0;right:0;padding:12px 14px;display:flex;align-items:center;gap:10px;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);}
.story-close{background:none;border:none;color:#fff;font-size:1.5rem;margin-left:auto;cursor:pointer;}

/* ── ANALYTICS ── */

/* ── SPONSORED POSTS ── */
.sponsored-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(24,119,242,.1);color:var(--primary);font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:10px;border:1px solid rgba(24,119,242,.2);}
.boost-btn{display:flex;align-items:center;gap:5px;padding:6px 14px;background:linear-gradient(135deg,#f5c518,#e6a800);color:#000;border:none;border-radius:20px;font-weight:800;font-size:.78rem;cursor:pointer;font-family:'Nunito',sans-serif;}
.boost-overlay{display:none;position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.65);align-items:flex-end;justify-content:center;}
.boost-overlay.open{display:flex;}
.boost-pkg{padding:14px;border:2px solid var(--border);border-radius:14px;cursor:pointer;transition:all .2s;text-align:center;background:var(--bg);}
.boost-pkg.selected{border-color:var(--primary);background:rgba(24,119,242,.08);}
.boost-pkg .pkg-price{font-size:1.1rem;font-weight:900;color:var(--primary);}
.boost-pkg .pkg-reach{font-size:.75rem;color:var(--muted);margin-top:2px;}
.boost-pkg .pkg-days{font-size:.72rem;font-weight:700;color:var(--green);margin-top:2px;}

/* ── ADMIN PANEL ── */
.admin-card{background:var(--white);border-radius:14px;padding:14px;margin:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.admin-stat{text-align:center;padding:12px;}
.admin-stat-n{font-size:1.8rem;font-weight:900;color:var(--primary);}
.admin-stat-l{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;}
/* USER PROFILE VIEW */
.user-profile-view{display:none;position:fixed;inset:0;z-index:3000;background:var(--bg);overflow-y:auto;flex-direction:column;}
.user-profile-view.open{display:flex;}
/* Tab grid items */
#upvPosts_grid > div,#upvReels_grid > div{transition:opacity .15s;}
#upvPosts_grid > div:active,#upvReels_grid > div:active{opacity:.7;}
/* Tab buttons active state handled via JS */
#upvTabBar button{transition:color .2s,border-bottom-color .2s;}

/* LONG PRESS DELETE */
.msg-ctx-menu{position:fixed;background:var(--white);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.2);z-index:8000;padding:6px;border:1px solid var(--border);min-width:140px;}
.msg-ctx-item{padding:10px 14px;border-radius:8px;cursor:pointer;font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:8px;}
.msg-ctx-item:hover{background:var(--bg);}
/* MORE BTN */
.more-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;background:var(--bg);border:none;border-radius:12px;cursor:pointer;font-family:'Nunito',sans-serif;font-size:.62rem;font-weight:700;color:var(--text);}
.more-btn span:first-child{font-size:1.4rem;}
.mico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* EXPLORE TABS */
.explore-tab{padding:7px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);cursor:pointer;font-weight:700;font-size:.82rem;white-space:nowrap;font-family:'Nunito',sans-serif;color:var(--muted);flex-shrink:0;}
.explore-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);}
/* VERIFIED BADGE */
.verified-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:var(--primary);border-radius:50%;margin-left:4px;vertical-align:middle;flex-shrink:0;box-shadow:0 1px 3px rgba(24,119,242,.35);cursor:pointer;transition:transform .15s;}
.verified-badge:hover{transform:scale(1.2);}
.verified-badge svg{width:11px;height:11px;fill:#fff;}
.verified-badge.gold{background:linear-gradient(135deg,#f5c518,#e6a800);box-shadow:0 1px 3px rgba(245,197,24,.45);}
.verified-badge.gold svg{fill:#000;}

/* COINS */
/* AD CARD */
/* EXPLORE GRID */
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.explore-card{background:var(--white);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s;}
.explore-card:active{transform:scale(.97);}
.creator-card{background:var(--white);border-radius:14px;padding:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;margin-bottom:8px;cursor:pointer;}

/* ══ PRIVACY POLICY PAGE ══ */
.pvpg{display:none;position:fixed;inset:0;z-index:7000;background:var(--bg);overflow-y:auto;flex-direction:column;}
.pvpg.open{display:flex;flex-direction:column;}
/* Privacy page uses its own local vars below instead of :root override */
.pvpg-blue{color:#1877f2;}
        *{box-sizing:border-box;margin:0;padding:0;}
        body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);}
        /* HEADER */
        .hdr{background:linear-gradient(135deg,#25d366,#1a9e50);padding:24px 16px 20px;text-align:center;color:#fff;}
        .hdr-logo{width:80px;height:80px;background:#fff;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:2rem;font-weight:900;color:var(--primary);box-shadow:0 4px 16px rgba(0,0,0,.15);}
        .hdr h1{font-size:1.8rem;font-weight:900;margin-bottom:4px;}
        .hdr p{font-size:.85rem;opacity:.85;}
        /* TABS */
        .tabs{display:flex;background:var(--white);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:10;}
        .tab{flex:1;padding:14px;text-align:center;font-weight:800;font-size:.88rem;cursor:pointer;border-bottom:3px solid transparent;color:var(--muted);transition:.2s;}
        .tab.active{color:var(--primary);border-bottom-color:var(--primary);}
        /* CONTENT */
        .content{display:none;max-width:700px;margin:0 auto;padding:16px;}
        .content.active{display:block;}
        .section{background:var(--white);border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.07);}
        h2{font-size:1rem;font-weight:900;color:var(--blue);margin-bottom:10px;display:flex;align-items:center;gap:6px;}
        h3{font-size:.88rem;font-weight:800;color:var(--text);margin:12px 0 6px;}
        p,li{font-size:.88rem;line-height:1.7;color:#333;}
        ul{padding-left:18px;}
        li{margin-bottom:4px;}
        
        
        .badge-danger{background:#f8d7da;border-left:4px solid #dc3545;border-radius:8px;padding:12px;margin:10px 0;font-size:.85rem;}
        .badge-blue{background:#e7f3ff;border-left:4px solid var(--blue);border-radius:8px;padding:12px;margin:10px 0;font-size:.85rem;}
        .contact-box{background:linear-gradient(135deg,#e7f3ff,#d1f0e1);border-radius:14px;padding:16px;text-align:center;margin:12px 0;}
        .contact-box a{color:var(--blue);font-weight:700;text-decoration:none;}
        /* ACCEPT FOOTER */
        .accept-footer{position:fixed;bottom:0;left:0;right:0;background:var(--white);padding:12px 16px 20px;border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(0,0,0,.1);}
        .accept-btn{width:100%;max-width:500px;display:block;margin:0 auto;padding:14px;border:none;border-radius:14px;background:linear-gradient(135deg,#25d366,#1a9e50);color:#fff;font-weight:900;font-size:1rem;cursor:pointer;font-family:'Nunito',sans-serif;}
        .accept-btn:disabled{background:#ccc;cursor:not-allowed;}
        .accepted-msg{display:none;text-align:center;color:var(--primary);font-weight:800;padding:12px;}
        .date-lbl{font-size:.72rem;color:var(--muted);text-align:center;margin-top:4px;}
        .back-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1.5px solid var(--border);padding:8px 16px;border-radius:20px;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--text);text-decoration:none;margin-bottom:12px;}
        /* Scrolling buffer for fixed footer */
        .scroll-buf{height:80px;}
        @media(max-width:600px){.hdr h1{font-size:1.5rem;}}

/* ══ EXPLORE / TRENDING ══ */
.explore-pg{padding-bottom:70px;}
.trending-card{background:var(--white);border-radius:14px;margin:8px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s;}
.trending-card:active{transform:scale(.98);}
.trend-rank{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;flex-shrink:0;}
.trend-rank.gold{background:#f5c518;color:#000;}
.trend-rank.silver{background:#c0c0c0;color:#000;}
.trend-rank.bronze{background:#cd7f32;color:#fff;}
.trend-rank.other{background:var(--bg);color:var(--muted);}

/* ══ PREMIUM / SUBSCRIPTION ══ */
.watch-ad-btn{width:100%;padding:16px;border:none;border-radius:16px;background:linear-gradient(135deg,#ff6b6b,#ee5a24);color:#fff;font-weight:900;font-size:1rem;cursor:pointer;font-family:'Nunito',sans-serif;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 16px rgba(238,90,36,.35);}

/* ══ FULL POST VIEW ══ */
.post-full-view{display:none;position:fixed;inset:0;z-index:4000;background:var(--white);overflow-y:auto;flex-direction:column;}
.post-full-view.open{display:flex;}

/* ══ APP ICON BLUE ══ */
/* Already handled by manifest theme_color */

@keyframes ldBar{0%{width:0%}100%{width:100%}}
@keyframes splashOut{0%{opacity:1}100%{opacity:0;visibility:hidden}}
/* ══ KYC MODAL ══ */
/* Camera capture boxes */
/* ══ DARK MODE OVERRIDES ══ */
.dark .auth-card{background:var(--white);color:var(--text);}
.dark .welcome-box{background:var(--white);color:var(--text);}
.dark .pvpg{background:var(--bg);}
.dark .cw-inp{background:var(--white);color:var(--text);}
.dark input,.dark select,.dark textarea{background:var(--white)!important;color:var(--text)!important;border-color:var(--border)!important;}
.dark .modal-box{background:var(--white);}
.dark .card{background:var(--white);}
.dark .otp-box{background:var(--white);color:var(--text);}
.dark .sell-input{background:var(--white);color:var(--text);}
.dark .pin-key{background:var(--white);color:var(--text);}
/* ══ REELS V2 ══ */

/* ── Container — full screen snap scroll ── */
.reels-container {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #000;
    z-index: 5;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    /* Prevent browser from re-anchoring scroll when video starts playing */
    overflow-anchor: none;
}
.reels-container::-webkit-scrollbar { display: none; }

/* ── Single Reel Card ── */
.rv-card {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    /* contain: layout prevents video load from triggering snap re-evaluation */
    contain: layout style;
}

/* ── Video ── */
.rv-vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ── Gradient overlay ── */
.rv-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.85) 0%,
        rgba(0,0,0,.20) 40%,
        transparent 65%,
        rgba(0,0,0,.15) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* ── Progress bar ── */
.rv-prog-wrap {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.20);
    z-index: 20;
}
.rv-prog-bar {
    height: 100%;
    background: #fff;
    width: 0%;
    transition: width 0.12s linear;
    border-radius: 0 2px 2px 0;
}

/* ── Sound indicator (center flash) ── */
.rv-sound-ind {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.4rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 25;
    background: rgba(0,0,0,.50);
    border-radius: 50%;
    width: 68px; height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.rv-sound-ind.flash {
    opacity: 1;
    animation: rv-fadeout 0.75s ease forwards;
}
@keyframes rv-fadeout {
    0%   { opacity: 1; }
    55%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Hide bnav on reels page */
.reels-mode .bnav { display: none !important; }
.reels-mode #mainHeader { display: none !important; }
.reels-mode .sell-btn-float { display: none !important; }
.reels-mode #reelsPg { background: #000 !important; }

/* ── Double-tap heart ── */
.rv-dtheart {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 5.5rem;
    opacity: 0;
    pointer-events: none;
    z-index: 30;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,.65));
    transition: none;
}
.rv-dtheart.show {
    animation: rv-heartpop 0.85s cubic-bezier(.36,.07,.19,.97) forwards;
}
@keyframes rv-heartpop {
    0%   { transform: translate(-50%,-50%) scale(0);    opacity: 1; }
    30%  { transform: translate(-50%,-50%) scale(1.4);  opacity: 1; }
    60%  { transform: translate(-50%,-50%) scale(.95);  opacity: 1; }
    80%  { transform: translate(-50%,-50%) scale(1.1);  opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.1);  opacity: 0; }
}

/* ── Bottom info (left side) ── */
.rv-info {
    position: absolute;
    bottom: 24px;
    left: 14px;
    right: 96px;
    z-index: 10;
    color: #fff;
}
.rv-uname {
    font-weight: 900;
    font-size: .95rem;
    cursor: pointer;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.rv-cap {
    font-size: .83rem;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .92;
}
.rv-more {
    color: rgba(255,255,255,.65);
    cursor: pointer;
    font-size: .78rem;
}
.rv-views {
    font-size: .73rem;
    margin-top: 6px;
    opacity: .7;
    font-weight: 600;
}

/* ── Right sidebar actions ── */
.rv-acts {
    position: absolute;
    right: 8px;
    bottom: 24px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Avatar */
.rv-av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    overflow: hidden;
    cursor: pointer;
    background: var(--primary);
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* Follow dot */
.rv-follow-dot {
    width: 22px; height: 22px;
    background: #e53e3e;
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    font-size: .85rem;
    margin-top: -12px;
    cursor: pointer;
    border: 2px solid #fff;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    z-index: 2;
}
.rv-follow-dot.fol {
    background: #38a169;
}
.rv-follow-dot:active { transform: scale(0.9); }

/* Action button */
.rv-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 7px 5px;
    border-radius: 12px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.rv-btn:active { background: rgba(255,255,255,.12); }

.rv-icon {
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
    transition: transform 0.2s;
}
.rv-like-icon.liked {
    animation: rv-likebounce 0.3s ease;
}
@keyframes rv-likebounce {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}

.rv-label {
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* ── Empty state ── */
.rv-empty {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55);
    text-align: center;
    padding: 20px;
}

/* ── Upload CTA button ── */
.rv-upload-cta {
    margin-top: 16px;
    padding: 11px 28px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-weight: 800;
    font-size: .92rem;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
    transition: transform 0.15s, box-shadow 0.15s;
}
.rv-upload-cta:active { transform: scale(0.96); }

/* ── Spinner animation ── */
@keyframes rv-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Comment Sheet ── */
.rv-cmt-sheet {
    position: relative;
    background: var(--white);
    width: 100%;
    max-width: 600px;
    border-radius: 20px 20px 0 0;
    padding: 16px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    animation: rv-slideup 0.28s ease;
}
@keyframes rv-slideup {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.rv-cmt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: .95rem;
}
.rv-cmt-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 12px;
    max-height: 50vh;
}
.rv-cmt-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.rv-cmt-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rv-cmt-user {
    font-weight: 800;
    font-size: .78rem;
    margin-bottom: 2px;
}
.rv-cmt-text { font-size: .87rem; line-height: 1.4; }
.rv-cmt-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.rv-cmt-inp {
    flex: 1;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 22px;
    font-family: 'Nunito', sans-serif;
    font-size: .88rem;
    background: var(--bg);
    color: var(--text);
    outline: none;
}
.rv-cmt-inp:focus { border-color: var(--primary); }
.rv-cmt-send {
    padding: 10px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 22px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: .85rem;
    transition: opacity 0.15s;
}
.rv-cmt-send:active { opacity: .8; }

/* ── More Options Sheet ── */
.rv-more-sheet {
    position: relative;
    background: var(--white);
    width: 100%;
    max-width: 600px;
    border-radius: 20px 20px 0 0;
    padding: 16px;
    animation: rv-slideup 0.25s ease;
}
.rv-more-btn {
    width: 100%;
    padding: 14px;
    background: var(--bg);
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    margin-bottom: 8px;
    color: var(--text);
    text-align: center;
    transition: background 0.15s;
}
.rv-more-btn:active { background: var(--border); }
.rv-more-btn.danger { background: #fff0f0; color: #e53e3e; }


/* ── Pause/Play indicator (center flash on tap) ── */
.rv-pause-ind {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) scale(0.7);
    font-size: 3.2rem;
    opacity: 0;
    pointer-events: none;
    z-index: 26;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50%;
    width: 80px; height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}
.rv-pause-ind.show {
    animation: rv-pausepop 0.6s ease forwards;
}
@keyframes rv-pausepop {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.7); }
    20%  { opacity: 1; transform: translate(-50%,-50%) scale(1.1); }
    40%  { transform: translate(-50%,-50%) scale(1.0); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.0); }
}
.rv-more-btn.muted  { color: var(--muted); }
/* ══════════════════════════════════════════════════════════════
   M-KING — FOLLOW SYSTEM + CREATOR RANKINGS CSS
   Kara wannan a karshen style.css
══════════════════════════════════════════════════════════════ */

/* ══ FOLLOW BUTTON on User Profile ══ */
.fs-follow-btn {
    padding: 9px 22px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-weight: 800;
    font-size: .88rem;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    transition: background 0.2s, transform 0.15s;
    box-shadow: 0 3px 12px rgba(24, 119, 242, 0.3);
}
.fs-follow-btn:active { transform: scale(0.95); }
.fs-follow-btn.fs-following {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    box-shadow: none;
}

/* ══ Creator Badge on Profile ══ */
.fs-creator-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f5c518, #ff8c00);
    color: #fff;
    box-shadow: 0 2px 8px rgba(245, 197, 24, 0.4);
}

/* ══ My Profile Stats Bar (Followers/Following) ══ */
.fs-my-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px 8px;
    margin: 10px 16px;
}
.fs-my-stat-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 10px;
    transition: background 0.15s;
}
.fs-my-stat-item:active { background: var(--border); }
.fs-my-stat-num {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1.2;
}
.fs-my-stat-label {
    font-size: .65rem;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 2px;
}
.fs-my-stat-div {
    width: 1px;
    height: 32px;
    background: var(--border);
    flex-shrink: 0;
}

/* ══ User List Sheet (Followers / Following) ══ */
.fs-sheet {
    position: relative;
    background: var(--white);
    width: 100%;
    max-width: 600px;
    border-radius: 20px 20px 0 0;
    padding: 16px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    animation: fs-slideup 0.25s ease;
}
@keyframes fs-slideup {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.fs-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: .95rem;
}
.fs-list-content {
    overflow-y: auto;
    flex: 1;
}

/* ── User Row in sheet ── */
.fs-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 8px;
}
.fs-user-row:active { background: var(--bg); }
.fs-user-av {
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.fs-user-info { flex: 1; min-width: 0; }
.fs-user-name {
    font-weight: 800;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 3px;
}
.fs-user-sub {
    font-size: .73rem;
    color: var(--muted);
    margin-top: 2px;
}

/* ── Mini follow button ── */
.fs-mini-btn {
    padding: 7px 14px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-weight: 700;
    font-size: .78rem;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}
.fs-mini-btn.fs-following {
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
}
.fs-mini-btn:active { opacity: .8; }

/* ══ CREATOR RANKINGS PAGE ══ */
.fs-rankings-page {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: var(--white);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-overflow-scrolling: touch;
}
.fs-rankings-page.open {
    transform: translateX(0);
}

/* Header */
.fs-rank-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--primary);
    color: #fff;
}
.fs-rank-back {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.fs-rank-title {
    font-weight: 900;
    font-size: 1.05rem;
}

/* Week badge */
.fs-rank-week {
    background: linear-gradient(135deg, #f5c518 0%, #ff8c00 100%);
    color: #fff;
    text-align: center;
    padding: 6px 16px;
    font-weight: 700;
    font-size: .78rem;
}

/* Tab bar */
.fs-rank-tabs {
    display: flex;
    padding: 10px 12px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.fs-rank-tabs::-webkit-scrollbar { display: none; }
.fs-rank-tab {
    padding: 7px 16px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--muted);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}
.fs-rank-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 3px 10px rgba(24, 119, 242, 0.3);
}

/* Content area */
.fs-rank-content {
    padding: 16px;
    min-height: 60vh;
}
.fs-rank-loading {
    text-align: center;
    padding: 40px;
    color: var(--muted);
    font-size: .9rem;
}

/* My rank banner */
.fs-my-rank-banner {
    background: linear-gradient(135deg, rgba(24,119,242,.1), rgba(24,119,242,.05));
    border: 1.5px solid rgba(24, 119, 242, .25);
    border-radius: 12px;
    padding: 10px 14px;
    text-align: center;
    font-weight: 800;
    font-size: .85rem;
    color: var(--primary);
    margin-bottom: 16px;
}

/* ══ PODIUM (Top 3) ══ */
.fs-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
    padding: 0 8px;
}
.fs-podium-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    min-width: 0;
    transition: transform 0.15s;
}
.fs-podium-card:active { transform: scale(0.97); }
.fs-podium-card.is-me {
    filter: drop-shadow(0 0 12px rgba(24, 119, 242, 0.5));
}
.fs-podium-rank {
    font-size: 1.8rem;
    margin-bottom: 4px;
    line-height: 1;
}
.fs-podium-av {
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 3px solid #fff;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    margin-bottom: 5px;
}
.fs-podium-name {
    font-weight: 900;
    font-size: .78rem;
    text-align: center;
    color: var(--text);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    padding: 0 4px;
}
.fs-podium-stat {
    font-size: .68rem;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 5px;
    text-align: center;
}
.fs-podium-base {
    width: 100%;
    border-radius: 12px 12px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* ══ Rank list rows (#4+) ══ */
.fs-rank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fs-rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: 14px;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: background 0.15s;
}
.fs-rank-row:active { background: var(--border); }
.fs-rank-row.is-me {
    border-color: var(--primary);
    background: rgba(24, 119, 242, .05);
}
.fs-rank-num {
    font-weight: 900;
    font-size: .85rem;
    color: var(--muted);
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.fs-rank-av {
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.fs-rank-info { flex: 1; min-width: 0; }
.fs-rank-uname {
    font-weight: 800;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 3px;
}
.fs-rank-stat {
    font-size: .73rem;
    color: var(--muted);
    margin-top: 2px;
    font-weight: 600;
}
.fs-you-badge {
    font-size: .72rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(24,119,242,.1);
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════
   M-KING — COMMUNITIES CSS
   Kara a karshen style.css
══════════════════════════════════════════════════════════════ */

/* ══ BASE PAGE ══ */
.comm-page {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: var(--white);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.comm-page.open { transform: translateX(0); }

/* ══ HEADER ══ */
.comm-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--primary);
    color: #fff;
}
.comm-header-title {
    font-weight: 900;
    font-size: 1.05rem;
}
.comm-back {
    background: rgba(255,255,255,.2);
    border: none;
    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;
}
.comm-create-btn {
    background: rgba(255,255,255,.2);
    border: none;
    color: #fff;
    padding: 7px 14px;
    border-radius: 20px;
    font-weight: 800;
    font-size: .82rem;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    transition: background 0.15s;
}
.comm-create-btn:active { background: rgba(255,255,255,.35); }

/* ══ SEARCH BAR ══ */
.comm-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 22px;
    padding: 9px 14px;
    margin: 12px 16px 6px;
}
.comm-search-bar input {
    flex: 1; border: none; background: none;
    outline: none; font-size: .9rem;
    color: var(--text); font-family: 'Nunito', sans-serif;
}

/* ══ CATEGORY SCROLL ══ */
.comm-cat-scroll {
    display: flex;
    gap: 8px;
    padding: 6px 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.comm-cat-scroll::-webkit-scrollbar { display: none; }
.comm-cat-pill {
    padding: 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--muted);
    font-weight: 700;
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Nunito', sans-serif;
    transition: all 0.2s;
    flex-shrink: 0;
}
.comm-cat-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ══ SECTION LABEL ══ */
.comm-section-label {
    font-weight: 900;
    font-size: .82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 10px 16px 6px;
}

/* ══ MY GROUPS (horizontal scroll cards) ══ */
.comm-my-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px 8px;
}
.comm-my-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    background: var(--bg);
    border: 1px solid var(--border);
    transition: background 0.12s;
    margin-bottom: 4px;
}
.comm-my-card:active { background: var(--border); }
.comm-my-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.comm-my-info { flex: 1; min-width: 0; }
.comm-my-name {
    font-weight: 800;
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.comm-my-sub { font-size: .73rem; color: var(--muted); margin-top: 2px; }
.comm-unread-dot {
    min-width: 20px; height: 20px;
    background: #e3242b;
    color: #fff;
    border-radius: 10px;
    font-size: .65rem;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

/* ══ DISCOVER LIST ══ */
.comm-discover-list { padding: 4px 12px 80px; }
.comm-disc-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg);
    margin-bottom: 8px;
}
.comm-disc-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.comm-disc-info { flex: 1; min-width: 0; }
.comm-disc-name { font-weight: 900; font-size: .92rem; margin-bottom: 3px; }
.comm-disc-sub { font-size: .72rem; color: var(--muted); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.comm-disc-desc { font-size: .8rem; color: var(--muted); line-height: 1.4; }
.comm-cat-tag {
    background: var(--border);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .68rem;
    font-weight: 700;
}
.comm-join-btn {
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-weight: 800;
    font-size: .8rem;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
    transition: opacity 0.15s;
}
.comm-join-btn.joined {
    background: var(--bg);
    color: var(--primary);
    border: 1.5px solid var(--primary);
}
.comm-join-btn:active { opacity: .8; }

/* ══ GROUP PAGE ══ */
.comm-group-page { display: flex; flex-direction: column; }
.comm-g-header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: var(--primary);
}
.comm-g-title { font-weight: 900; font-size: 1rem; color: #fff; flex: 1; text-align: center; }
.comm-g-more {
    background: rgba(255,255,255,.2); border: none; color: #fff;
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
}

/* Group cover */
.comm-g-cover {
    padding: 20px 16px;
    display: flex; align-items: center; gap: 14px;
    flex-shrink: 0;
}
.comm-g-cover-icon {
    font-size: 2.8rem;
    background: rgba(255,255,255,.2);
    width: 64px; height: 64px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.comm-g-cover-name { font-weight: 900; font-size: 1.15rem; color: #fff; }
.comm-g-cover-meta { font-size: .78rem; color: rgba(255,255,255,.8); margin-top: 3px; }

/* Tabs */
.comm-g-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    background: var(--white);
    position: sticky; top: 60px; z-index: 10;
}
.comm-g-tabs::-webkit-scrollbar { display: none; }
.comm-g-tab {
    flex: 1;
    padding: 11px 8px;
    border: none;
    background: none;
    font-weight: 700;
    font-size: .78rem;
    color: var(--muted);
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    white-space: nowrap;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.comm-g-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Content + input */
.comm-g-content { flex: 1; overflow-y: auto; padding-bottom: 80px; }
.comm-g-input-bar {
    position: fixed; bottom: 58px; left: 0; right: 0;
    max-width: 600px; margin: 0 auto;
    background: var(--white);
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    z-index: 15;
}
.comm-post-trigger {
    width: 100%;
    padding: 11px 16px;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 22px;
    text-align: left;
    color: var(--muted);
    font-family: 'Nunito', sans-serif;
    font-size: .88rem;
    cursor: pointer;
    font-weight: 600;
    transition: border-color 0.15s;
}
.comm-post-trigger:focus { border-color: var(--primary); outline: none; }
.comm-chat-input-wrap {
    display: flex; gap: 8px; align-items: center; width: 100%;
}
.comm-chat-inp {
    flex: 1; padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 22px;
    font-family: 'Nunito', sans-serif;
    font-size: .88rem;
    background: var(--bg); color: var(--text);
    outline: none;
}
.comm-chat-inp:focus { border-color: var(--primary); }
.comm-chat-send {
    width: 40px; height: 40px;
    background: var(--primary); color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.comm-chat-send:active { transform: scale(0.9); }

/* ══ FEED ══ */
.comm-feed { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.comm-post {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.comm-post.pinned { border-color: #f5c518; background: rgba(245,197,24,.04); }
.comm-pin-label {
    background: linear-gradient(90deg, #f5c518, #ff8c00);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    padding: 5px 12px;
}
.comm-post-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 12px 8px;
}
.comm-post-av {
    width: 38px; height: 38px;
    border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.comm-post-meta { flex: 1; }
.comm-post-uname { font-weight: 800; font-size: .88rem; }
.comm-post-time { font-size: .7rem; color: var(--muted); margin-top: 1px; }
.comm-post-more {
    background: none; border: none; cursor: pointer;
    font-size: 1.3rem; color: var(--muted); padding: 4px 8px;
}
.comm-post-body {
    padding: 0 12px 10px;
    font-size: .9rem;
    line-height: 1.5;
}
.comm-post-img {
    width: 100%; max-height: 320px;
    object-fit: cover; display: block; cursor: zoom-in;
}
.comm-post-vid {
    width: 100%; max-height: 260px; background: #000; display: block;
}
.comm-post-actions {
    display: flex; gap: 4px;
    padding: 8px 10px;
    border-top: 1px solid var(--border);
}
.comm-act-btn {
    flex: 1; padding: 8px 6px;
    background: none; border: none;
    border-radius: 10px;
    font-size: .82rem; font-weight: 700;
    cursor: pointer; color: var(--muted);
    font-family: 'Nunito', sans-serif;
    transition: background 0.12s, color 0.12s;
}
.comm-act-btn:hover { background: var(--bg); }
.comm-act-btn.liked { color: #e53e3e; }

/* ══ CHAT ══ */
.comm-chat-msgs {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 70vh;
    overflow-y: auto;
}
.comm-msg { display: flex; gap: 8px; align-items: flex-start; }
.comm-msg.mine { flex-direction: row-reverse; }
.comm-msg-av {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .82rem;
    flex-shrink: 0;
}
.comm-msg-body { max-width: 75%; }
.comm-msg-name { font-size: .68rem; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.comm-msg-bubble {
    background: var(--bg);
    border-radius: 0 14px 14px 14px;
    padding: 9px 12px;
    font-size: .87rem;
    line-height: 1.45;
    border: 1px solid var(--border);
}
.comm-msg.mine .comm-msg-bubble {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
    border-radius: 14px 0 14px 14px;
}
.comm-msg-time { font-size: .65rem; color: var(--muted); margin-top: 3px; }

/* ══ MEMBERS ══ */
.comm-members-list { padding: 12px; }
.comm-members-count {
    font-size: .75rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .4px;
    padding: 4px 0 10px;
}
.comm-member-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}
.comm-member-row:active { background: var(--bg); }
.comm-member-av {
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    position: relative;
}
.comm-online-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--white);
}
.comm-member-info { flex: 1; }
.comm-member-name {
    font-weight: 800; font-size: .88rem;
    display: flex; align-items: center; gap: 4px;
}
.comm-admin-tag {
    background: linear-gradient(135deg, #f5c518, #ff8c00);
    color: #fff; font-size: .65rem; font-weight: 800;
    padding: 2px 7px; border-radius: 8px;
}
.comm-member-sub { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.comm-kick-btn {
    padding: 6px 12px; background: #fff0f0; color: #e53e3e;
    border: 1px solid #fecaca; border-radius: 20px;
    font-size: .75rem; font-weight: 700;
    cursor: pointer; font-family: 'Nunito', sans-serif;
}

/* ══ CHALLENGES ══ */
.comm-challenge-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    margin: 8px 12px;
}
.comm-challenge-card.expired { opacity: .6; }
.comm-ch-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.comm-ch-icon { font-size: 2rem; flex-shrink: 0; }
.comm-ch-title { font-weight: 900; font-size: .95rem; }
.comm-ch-sub { font-size: .75rem; color: var(--muted); margin-top: 3px; }
.comm-ch-desc { font-size: .83rem; line-height: 1.5; color: var(--text); margin-bottom: 12px; }
.comm-ch-footer { display: flex; align-items: center; justify-content: space-between; }
.comm-ch-participants { font-size: .75rem; color: var(--muted); font-weight: 600; }
.comm-ch-btn {
    padding: 8px 18px;
    background: linear-gradient(135deg, #f5c518, #ff8c00);
    color: #fff; border: none; border-radius: 20px;
    font-weight: 800; font-size: .8rem;
    cursor: pointer; font-family: 'Nunito', sans-serif;
    transition: opacity 0.15s;
}
.comm-ch-btn.joined { background: var(--bg); color: #25d366; border: 1.5px solid #25d366; }
.comm-ch-btn:active { opacity: .8; }
.comm-ch-ended { font-size: .75rem; color: var(--muted); font-style: italic; }

/* ══ CREATE GROUP form elements ══ */
.comm-cat-sel-btn {
    padding: 6px 12px;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    background: var(--bg);
    color: var(--muted);
    font-size: .78rem; font-weight: 700;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    transition: all 0.15s;
}
.comm-cat-sel-btn.active {
    background: var(--primary); color: #fff; border-color: var(--primary);
}
.comm-icon-sel-btn {
    width: 40px; height: 40px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s, transform 0.1s;
}
.comm-icon-sel-btn.active { border-color: var(--primary); transform: scale(1.12); }
.comm-color-sel-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.comm-color-sel-btn.active { border-color: var(--text); transform: scale(1.18); }

/* ══ COMMENT SHEET ══ */
.comm-cmt-sheet {
    position: relative;
    background: var(--white);
    width: 100%; max-width: 600px;
    border-radius: 20px 20px 0 0;
    padding: 16px;
    max-height: 75vh;
    display: flex; flex-direction: column;
    animation: comm-slideup 0.25s ease;
}
@keyframes comm-slideup {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.comm-cmt-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.comm-cmt-list { flex: 1; overflow-y: auto; max-height: 50vh; margin-bottom: 12px; }
.comm-cmt-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.comm-cmt-av {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .82rem; flex-shrink: 0;
}
.comm-cmt-input-row {
    display: flex; gap: 8px; align-items: center;
    border-top: 1px solid var(--border); padding-top: 8px;
}
.comm-cmt-inp {
    flex: 1; padding: 10px 14px;
    border: 1.5px solid var(--border); border-radius: 22px;
    font-family: 'Nunito', sans-serif; font-size: .88rem;
    background: var(--bg); color: var(--text); outline: none;
}
.comm-cmt-inp:focus { border-color: var(--primary); }
.comm-cmt-send {
    padding: 10px 16px; background: var(--primary);
    color: #fff; border: none; border-radius: 22px;
    font-weight: 800; cursor: pointer;
    font-family: 'Nunito', sans-serif; font-size: .85rem;
}

/* ══ MORE SHEET ══ */
.comm-more-sheet {
    position: relative;
    background: var(--white); width: 100%; max-width: 600px;
    border-radius: 20px 20px 0 0;
    padding: 16px;
    animation: comm-slideup 0.22s ease;
}
.comm-more-btn {
    width: 100%; padding: 14px;
    background: var(--bg); border: none; border-radius: 12px;
    font-weight: 700; font-size: .92rem;
    cursor: pointer; font-family: 'Nunito', sans-serif;
    margin-bottom: 8px; color: var(--text);
    transition: background 0.12s;
}
.comm-more-btn:active { background: var(--border); }
.comm-more-btn.danger { background: #fff0f0; color: #e53e3e; }
.comm-more-btn.muted  { color: var(--muted); }

/* ══ SHARED UTILS ══ */
.comm-loading {
    text-align: center; padding: 32px;
    color: var(--muted); font-size: .88rem;
}
.comm-empty {
    text-align: center; padding: 36px 20px;
    color: var(--muted);
}
.comm-empty-sm {
    text-align: center; padding: 14px;
    color: var(--muted); font-size: .82rem;
}
.comm-cta-btn {
    display: block; width: calc(100% - 32px);
    margin: 0 16px;
    padding: 12px;
    background: var(--primary); color: #fff;
    border: none; border-radius: 12px;
    font-weight: 800; font-size: .92rem;
    cursor: pointer; font-family: 'Nunito', sans-serif;
    text-align: center;
    box-shadow: 0 4px 14px rgba(24,119,242,.25);
    transition: opacity 0.15s;
}
.comm-cta-btn:active { opacity: .85; }
/* ══════════════════════════════════════════════════════════════
   M-KING — LIVE STREAMING + GIFTS CSS
   Kara a karshen style.css
══════════════════════════════════════════════════════════════ */

/* ══ BASE PAGES ══ */
.live-page {
    position: fixed; inset: 0; z-index: 5500;
    background: #111;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.live-page.open { transform: translateX(0); }

.live-full-page {
    position: fixed; inset: 0; z-index: 5500;
    background: #000;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
.live-full-page.open { transform: translateY(0); }

/* ══ DISCOVER PAGE ══ */
.live-disc-header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: #e53e3e;
}
.live-disc-title { font-weight: 900; font-size: 1.05rem; color: #fff; }
.live-back {
    background: rgba(255,255,255,.2); border: none; color: #fff;
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.live-golive-btn {
    background: rgba(255,255,255,.2); border: none; color: #fff;
    padding: 7px 14px; border-radius: 20px;
    font-weight: 800; font-size: .82rem;
    cursor: pointer; font-family: 'Nunito', sans-serif;
    transition: background 0.15s;
}
.live-golive-btn:active { background: rgba(255,255,255,.35); }

.live-disc-list { padding: 12px; }
.live-disc-loading {
    text-align: center; padding: 40px;
    color: rgba(255,255,255,.5); font-size: .9rem;
}
.live-disc-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 60vh; color: rgba(255,255,255,.6);
    text-align: center; padding: 20px;
}
.live-cta-btn {
    margin-top: 20px; padding: 12px 28px;
    background: #e53e3e; color: #fff;
    border: none; border-radius: 24px;
    font-weight: 800; font-size: .92rem;
    cursor: pointer; font-family: 'Nunito', sans-serif;
    box-shadow: 0 4px 16px rgba(229,62,62,.4);
    transition: transform 0.15s;
}
.live-cta-btn:active { transform: scale(0.96); }

/* Discover Card */
.live-disc-card {
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 12px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.08);
    transition: transform 0.15s;
}
.live-disc-card:active { transform: scale(0.98); }
.live-disc-thumb {
    position: relative;
    height: 200px;
    background: #222;
    overflow: hidden;
}
.live-disc-info {
    padding: 12px;
}
.live-disc-name { font-weight: 900; font-size: .92rem; color: #fff; margin-bottom: 3px; }
.live-disc-title-text { font-size: .82rem; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.live-disc-meta { font-size: .72rem; color: rgba(255,255,255,.45); }

/* LIVE badge */
.live-badge {
    display: inline-flex; align-items: center;
    background: #e53e3e; color: #fff;
    padding: 3px 9px; border-radius: 6px;
    font-weight: 900; font-size: .7rem;
    letter-spacing: .5px;
}
.live-badge-lg {
    background: #e53e3e; color: #fff;
    padding: 5px 12px; border-radius: 8px;
    font-weight: 900; font-size: .78rem;
    letter-spacing: .5px;
}
.live-viewer-badge {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0,0,0,.6); color: #fff;
    padding: 3px 10px; border-radius: 12px;
    font-size: .75rem; font-weight: 700;
    backdrop-filter: blur(4px);
}

/* ══ LIVE VIDEO WRAP ══ */
.live-video-wrap {
    position: absolute; inset: 0;
    background: #000;
}
.live-main-video {
    width: 100%; height: 100%;
    object-fit: cover;
}
.live-video-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
}
.live-streamer-av-big {
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.3);
    overflow: hidden;
}

/* ══ OVERLAY ELEMENTS ══ */
.live-overlay-top {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
    z-index: 10;
}
.live-viewer-cnt {
    background: rgba(0,0,0,.45);
    color: #fff;
    padding: 4px 10px; border-radius: 12px;
    font-size: .75rem; font-weight: 700;
    backdrop-filter: blur(4px);
}
.live-duration {
    margin-left: auto;
    background: rgba(0,0,0,.45); color: #fff;
    padding: 4px 10px; border-radius: 12px;
    font-size: .75rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(4px);
}
.live-gift-coins-bar {
    position: absolute; top: 56px; left: 14px;
    background: linear-gradient(90deg, rgba(245,197,24,.9), rgba(255,140,0,.9));
    color: #fff; font-weight: 800; font-size: .78rem;
    padding: 4px 12px; border-radius: 12px;
    z-index: 10;
    backdrop-filter: blur(4px);
}

/* ══ VIEWER TOPBAR ══ */
.live-viewer-topbar {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
    z-index: 10;
}
.live-viewer-info { display: flex; align-items: center; gap: 8px; flex: 1; }
.live-viewer-av {
    width: 36px; height: 36px;
    border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255,255,255,.4);
    flex-shrink: 0;
}
.live-follow-btn {
    padding: 6px 14px;
    background: #e53e3e; color: #fff;
    border: none; border-radius: 18px;
    font-weight: 800; font-size: .78rem;
    cursor: pointer; font-family: 'Nunito', sans-serif;
    white-space: nowrap;
    transition: background 0.2s;
}
.live-follow-btn.following {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
}

/* ══ GIFT ANIMATION LAYER ══ */
.live-gift-layer {
    position: absolute;
    bottom: 100px; left: 0; right: 0;
    z-index: 25;
    pointer-events: none;
    display: flex; flex-direction: column;
    align-items: flex-start;
    padding: 0 12px;
    gap: 8px;
}
.live-gift-anim {
    display: flex; align-items: center; gap: 10px;
    background: rgba(0,0,0,.65);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 8px 16px 8px 10px;
    opacity: 0;
    transform: translateX(-30px) scale(0.85);
    transition: opacity 0.35s, transform 0.35s;
}
.live-gift-anim.show {
    opacity: 1;
    transform: translateX(0) scale(1);
}
.live-gift-anim.fadeout {
    opacity: 0;
    transform: translateX(10px) scale(0.9);
    transition: opacity 0.5s, transform 0.5s;
}
.live-gift-anim-emoji {
    font-size: 2rem;
    animation: live-gift-bounce 0.5s ease infinite alternate;
}
@keyframes live-gift-bounce {
    from { transform: scale(1) rotate(-8deg); }
    to   { transform: scale(1.2) rotate(8deg); }
}
.live-gift-anim-label { display: flex; flex-direction: column; }

/* ══ LIVE CHAT ══ */
.live-chat-wrap {
    position: absolute;
    bottom: 68px; left: 0; right: 80px;
    max-height: 220px;
    overflow: hidden;
    z-index: 15;
    mask-image: linear-gradient(to top, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
}
.live-chat-msgs {
    display: flex; flex-direction: column;
    gap: 5px; padding: 8px 12px;
    overflow-y: auto;
    max-height: 220px;
    scrollbar-width: none;
}
.live-chat-msgs::-webkit-scrollbar { display: none; }
.live-chat-msg {
    display: inline-flex; align-items: baseline;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 5px 10px;
    max-width: 90%;
    align-self: flex-start;
    line-height: 1.4;
    animation: live-msg-in 0.2s ease;
}
@keyframes live-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.live-chat-msg.gift-msg {
    background: linear-gradient(90deg, rgba(245,197,24,.35), rgba(255,140,0,.25));
    border: 1px solid rgba(245,197,24,.3);
}
.live-chat-uname { font-weight: 800; font-size: .78rem; margin-right: 4px; }
.live-chat-text  { font-size: .82rem; color: rgba(255,255,255,.9); }
.live-gift-msg-icon { font-size: 1.1rem; margin-right: 5px; }
.live-gift-msg-text { font-size: .8rem; color: #ffd93d; }

/* ══ CONTROLS ══ */
.live-controls {
    position: absolute;
    right: 12px;
    bottom: 80px;
    display: flex; flex-direction: column;
    gap: 10px;
    z-index: 20;
}
.live-ctrl-btn {
    width: 48px; height: 48px;
    background: rgba(0,0,0,.55);
    border: 1.5px solid rgba(255,255,255,.2);
    border-radius: 50%;
    color: #fff; font-size: 1.3rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    transition: background 0.15s;
}
.live-ctrl-btn:active { background: rgba(255,255,255,.2); }
.live-end-btn { background: rgba(229,62,62,.6) !important; border-color: rgba(229,62,62,.4) !important; }

/* ══ INPUT ROW ══ */
.live-input-row {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
    z-index: 20;
}
.live-chat-inp {
    flex: 1; padding: 10px 14px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 22px;
    color: #fff; font-family: 'Nunito', sans-serif;
    font-size: .88rem; outline: none;
    backdrop-filter: blur(8px);
}
.live-chat-inp::placeholder { color: rgba(255,255,255,.5); }
.live-chat-inp:focus { border-color: rgba(255,255,255,.4); }
.live-send-btn {
    width: 38px; height: 38px;
    background: var(--primary); color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.live-gift-sheet-btn {
    width: 44px; height: 38px;
    background: linear-gradient(135deg, #f5c518, #ff8c00);
    color: #fff; border: none; border-radius: 20px;
    font-size: 1.2rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(245,197,24,.4);
}

/* ══ GIFT SHEET ══ */
.live-gift-sheet {
    position: relative;
    background: var(--white);
    width: 100%; max-width: 600px;
    border-radius: 20px 20px 0 0;
    padding: 16px;
    animation: live-slideup 0.28s ease;
    z-index: 1;
}
@keyframes live-slideup {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.live-gift-sheet-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.live-gift-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-bottom: 8px;
}
.live-gift-item {
    display: flex; flex-direction: column;
    align-items: center;
    padding: 12px 6px;
    background: var(--bg);
    border-radius: 14px;
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.live-gift-item:active {
    transform: scale(0.93);
    border-color: #f5c518;
    background: rgba(245,197,24,.08);
}
.live-gift-emoji { font-size: 2.2rem; line-height: 1; margin-bottom: 5px; }
.live-gift-name {
    font-weight: 800; font-size: .72rem;
    color: var(--text); margin-bottom: 3px;
}
.live-gift-cost {
    font-size: .68rem; font-weight: 700;
    color: var(--muted);
    background: var(--border);
    padding: 2px 8px; border-radius: 8px;
}
/* ══════════════════════════════════════════════════════════════
   M-KING — SUPER CHAT CSS
   Kara a karshen style.css
══════════════════════════════════════════════════════════════ */

/* ══ CHAT INPUT EXTRAS ══ */
.sc-sticker-trigger,
.sc-game-trigger {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg);
    border: 1.5px solid var(--border);
    font-size: 1.1rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, transform 0.12s;
}
.sc-sticker-trigger:active,
.sc-game-trigger:active { transform: scale(0.9); }

/* ══ STICKER PANEL ══ */
.sc-sticker-panel {
    position: absolute;
    bottom: 58px; left: 0; right: 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.1);
    z-index: 100;
    max-height: 260px;
    overflow: hidden;
    animation: sc-slideup 0.22s ease;
}
@keyframes sc-slideup {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Pack tabs */
.sc-pack-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
}
.sc-pack-tabs::-webkit-scrollbar { display: none; }
.sc-pack-tab {
    padding: 5px 12px;
    border: 1.5px solid var(--border);
    border-radius: 16px;
    background: var(--bg);
    color: var(--muted);
    font-weight: 700;
    font-size: .75rem;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Nunito', sans-serif;
    transition: all 0.15s;
    flex-shrink: 0;
}
.sc-pack-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Sticker grid */
.sc-sticker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    max-height: 180px;
}
.sc-sticker-btn {
    font-size: 1.65rem;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 4px;
    line-height: 1;
    transition: background 0.1s, transform 0.1s;
}
.sc-sticker-btn:active {
    background: var(--bg);
    transform: scale(1.25);
}

/* Locked pack */
.sc-locked-pack {
    display: flex; flex-direction: column;
    align-items: center; padding: 20px;
    text-align: center;
}
.sc-unlock-btn {
    margin-top: 10px;
    padding: 9px 20px;
    background: linear-gradient(135deg, #f5c518, #ff8c00);
    color: #fff;
    border: none; border-radius: 20px;
    font-weight: 800; font-size: .85rem;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    box-shadow: 0 3px 10px rgba(245,197,24,.35);
}

/* ══ STICKER BUBBLE ══ */
.sc-sticker-bubble {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 3.5rem !important;
    line-height: 1.1;
}
.sc-sticker-bubble .wtime {
    display: block;
    font-size: .62rem;
    color: var(--muted);
    margin-top: 2px;
}

/* ══ REACTION SYSTEM ══ */
.sc-reaction-picker {
    position: fixed;
    z-index: 9999;
    background: var(--white);
    border-radius: 30px;
    padding: 6px 8px;
    display: flex;
    gap: 4px;
    align-items: center;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
    border: 1px solid var(--border);
    opacity: 0;
    transform: scale(0.7) translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
}
.sc-reaction-picker.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.sc-react-btn {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, background 0.12s;
}
.sc-react-btn:hover { background: var(--bg); transform: scale(1.3); }
.sc-react-btn:active { transform: scale(1.1); }
.sc-react-reply {
    font-size: .72rem !important;
    font-weight: 800;
    color: var(--primary);
    width: auto !important;
    padding: 0 10px !important;
    border-left: 1px solid var(--border) !important;
    border-radius: 0 !important;
    font-family: 'Nunito', sans-serif;
}

/* Reaction bar on bubble */
.sc-react-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}
.sc-react-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px 7px;
    font-size: .88rem;
    cursor: pointer;
    transition: background 0.12s;
}
.sc-react-pill:active { background: var(--border); }
.sc-react-count {
    font-size: .65rem;
    font-weight: 800;
    color: var(--muted);
}

/* ══ REPLY BAR ══ */
.sc-reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    animation: sc-slideup 0.18s ease;
}
.sc-reply-preview { flex: 1; overflow: hidden; }
.sc-reply-label {
    font-size: .72rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 1px;
}
.sc-reply-text {
    font-size: .78rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-reply-close {
    background: none; border: none;
    color: var(--muted); font-size: 1rem;
    cursor: pointer; padding: 4px 8px;
    border-radius: 50%;
    transition: background 0.12s;
}
.sc-reply-close:hover { background: var(--border); }

/* ══ MINI GAMES ══ */
.sc-game-sheet {
    position: relative;
    background: var(--white);
    width: 100%; max-width: 600px;
    border-radius: 20px 20px 0 0;
    padding: 16px;
    animation: sc-slideup 0.25s ease;
    z-index: 1;
}
.sc-game-sheet-title {
    font-weight: 900;
    font-size: 1rem;
    margin-bottom: 14px;
    text-align: center;
}
.sc-game-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding-bottom: 8px;
}
.sc-game-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}
.sc-game-card:active {
    transform: scale(0.94);
    border-color: var(--primary);
}
.sc-game-icon { font-size: 2rem; margin-bottom: 5px; }
.sc-game-name { font-weight: 900; font-size: .82rem; margin-bottom: 4px; }
.sc-game-desc { font-size: .68rem; color: var(--muted); line-height: 1.4; }

/* Game challenge in chat */
.sc-game-accept {
    display: flex; gap: 6px;
    margin-top: 8px;
}
.sc-accept-btn {
    flex: 1; padding: 8px;
    background: #25d366; color: #fff;
    border: none; border-radius: 10px;
    font-weight: 800; font-size: .8rem;
    cursor: pointer; font-family: 'Nunito', sans-serif;
}
.sc-decline-btn {
    flex: 1; padding: 8px;
    background: var(--bg); color: var(--muted);
    border: 1px solid var(--border); border-radius: 10px;
    font-weight: 700; font-size: .8rem;
    cursor: pointer; font-family: 'Nunito', sans-serif;
}

/* Game result bubble */
.sc-game-result-bubble {
    background: linear-gradient(135deg, rgba(245,197,24,.15), rgba(255,140,0,.1)) !important;
    border: 1.5px solid rgba(245,197,24,.3) !important;
    font-weight: 700;
}

/* ══ WHISPER ══ */

/* Whisper nav button pulse when new whispers */
@keyframes whisperPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(124,58,237,.55); }
  50%       { box-shadow: 0 4px 28px rgba(124,58,237,.85), 0 0 0 6px rgba(124,58,237,.15); }
}
#bn-whisper { animation: whisperPulse 2.5s ease-in-out infinite; }
#bn-whisper.active { animation: none; box-shadow: 0 4px 18px rgba(124,58,237,.9); }

/* Whisper compose overlay */
#whisperComposeOvl { display: none; }

/* Interest picker tags */
.int-tag { transition: background .15s, border-color .15s, color .15s; }
.int-tag:active { opacity: .8; }

/* Guest banner */
#guestBanner { position: sticky; top: 0; z-index: 50; }

/* ── Back Navigation: .screen is an alias for .pg ── */
.screen { display: none; }
.screen.active { display: block; animation: fadeIn 0.2s ease; }

/* ── Settings Page ── */
.sett-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;}
.sett-row:last-child{border-bottom:none;}
.sett-row:active{background:var(--bg);}
.sett-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.sett-lbl{flex:1;min-width:0;}
.sett-title{font-weight:800;font-size:.9rem;color:var(--text);}
.sett-sub{font-size:.73rem;color:var(--muted);margin-top:1px;}
.sett-arr{color:var(--muted);font-size:1.1rem;font-weight:700;}

/* ── Theme Color Buttons ── */
.theme-color-btn{width:100%;aspect-ratio:1;border-radius:50%;cursor:pointer;transition:transform .2s,outline .2s;outline:3px solid transparent;outline-offset:2px;}
.theme-color-btn:active{transform:scale(.9);}

/* ── Font Size Buttons ── */
.fs-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg);cursor:pointer;font-family:'Nunito',sans-serif;color:var(--text);transition:border-color .2s,background .2s;}
.fs-btn-active{border-color:var(--primary)!important;background:rgba(26,86,219,.08)!important;}

/* ── Offline Banner Animation ── */
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ── Message Delete Modal (WhatsApp style) ── */
@keyframes mdFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mdSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
#msgDelOverlay *{-webkit-tap-highlight-color:transparent;}
#msgDelOverlay [id^="_md"]:active{opacity:.7;}


/* ══ MK UTILITY CLASSES ══ */
.mk-body-text{font-size:.88rem;line-height:1.7;}
.mk-muted-sm{font-size:.75rem;color:var(--muted);}
.mk-row{display:flex;align-items:center;gap:10px;font-size:.88rem;}

img{decoding:async;}

/* Post expiry visual hint */
.post-expiring{border-left:3px solid #e53935!important;opacity:.92;}
.post-boosted{border-left:3px solid #e6a800!important;}

/* Pause indicator on reel tap */