/* ╔══════════════════════════════════════════════════════════════╗
   ║  TNT Studio — Ultra Premium UI v3                          ║
   ║  Instagram/Facebook-tier visual overhaul                   ║
   ║  Every component, every page, every interaction            ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════
   FOUNDATIONS
   ═══════════════════════════════════════════════════════════ */
:root {
    --pro-bg: #04040b;
    --pro-surface: rgba(12,12,20,0.95);
    --pro-card: rgba(16,16,26,0.92);
    --pro-card-hover: rgba(20,20,32,0.95);
    --pro-border: rgba(255,255,255,0.035);
    --pro-border-hover: rgba(255,107,26,0.12);
    --pro-accent: #ff6b1a;
    --pro-accent-soft: rgba(255,107,26,0.08);
    --pro-accent-glow: rgba(255,107,26,0.15);
    --pro-text: #f2f2f7;
    --pro-text-2: rgba(255,255,255,0.65);
    --pro-text-3: rgba(255,255,255,0.38);
    --pro-radius: 16px;
    --pro-radius-sm: 10px;
    --pro-radius-xs: 6px;
    --pro-ease: cubic-bezier(0.22,1,0.36,1);
    --pro-spring: cubic-bezier(0.34,1.56,0.64,1);
}

html{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important}
*{box-sizing:border-box}
::selection{background:rgba(255,107,26,0.25)!important;color:#fff!important}
::-webkit-scrollbar{width:5px!important;height:5px!important}
::-webkit-scrollbar-track{background:transparent!important}
::-webkit-scrollbar-thumb{background:rgba(255,107,26,0.15)!important;border-radius:10px!important}
::-webkit-scrollbar-thumb:hover{background:rgba(255,107,26,0.3)!important}

/* ═══════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════ */
.topbar,.app-bar{
    background:rgba(4,4,11,0.88)!important;
    backdrop-filter:blur(30px) saturate(200%)!important;
    -webkit-backdrop-filter:blur(30px) saturate(200%)!important;
    border-bottom:none!important;
    box-shadow:0 1px 0 rgba(255,107,26,0.06),0 8px 32px rgba(0,0,0,0.4)!important;
    position:sticky!important;
    z-index:100!important;
}
.topbar::after,.app-bar::after{
    content:''!important;position:absolute!important;bottom:-1px!important;left:5%!important;right:5%!important;
    height:1px!important;background:linear-gradient(90deg,transparent,rgba(255,107,26,0.35),transparent)!important;
}
.topbar h1,.app-bar h1,.app-bar .brand{
    font-weight:900!important;font-size:14px!important;letter-spacing:0.1em!important;
    background:linear-gradient(135deg,#ff6b1a,#ff9a56)!important;
    -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
    background-clip:text!important;text-transform:uppercase!important;
}
.topbar-search input,[class*="search-input"]{
    background:rgba(255,255,255,0.03)!important;border:1px solid rgba(255,255,255,0.05)!important;
    border-radius:12px!important;color:#f2f2f7!important;font-size:13px!important;
    transition:all 0.3s var(--pro-ease)!important;padding:10px 16px 10px 36px!important;
}
.topbar-search input:focus,[class*="search-input"]:focus{
    border-color:rgba(255,107,26,0.25)!important;background:rgba(255,107,26,0.03)!important;
    box-shadow:0 0 0 3px rgba(255,107,26,0.05),0 8px 24px rgba(0,0,0,0.3)!important;
}

/* ═══════════════════════════════════════════════════════════
   BOTTOM TAB BAR — Compact, centered, premium
   ═══════════════════════════════════════════════════════════ */
.tabbar,.app-tabs,.bottom-nav,.tab-bar{
    background:rgba(6,6,12,0.94)!important;
    backdrop-filter:blur(30px) saturate(200%)!important;-webkit-backdrop-filter:blur(30px) saturate(200%)!important;
    border:1px solid rgba(255,255,255,0.03)!important;border-radius:20px!important;
    box-shadow:0 -4px 24px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.02)!important;
    justify-content:center!important;gap:0!important;padding:6px 12px!important;
    margin:0 auto!important;
}
.tab{
    flex:0 1 auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;padding:8px 14px!important;border-radius:12px!important;
    color:rgba(255,255,255,0.35)!important;font-size:9.5px!important;font-weight:700!important;
    letter-spacing:0.03em!important;transition:all 0.2s var(--pro-ease)!important;
    position:relative!important;gap:3px!important;cursor:pointer!important;
    border:none!important;background:transparent!important;
}
.tab svg{width:22px!important;height:22px!important;transition:all 0.25s var(--pro-spring)!important}
.tab.active{color:#ff6b1a!important;background:rgba(255,107,26,0.06)!important}
.tab.active svg{transform:scale(1.1)!important;filter:drop-shadow(0 0 6px rgba(255,107,26,0.5))!important}
.tab.active::after{
    content:''!important;position:absolute!important;bottom:3px!important;left:50%!important;
    transform:translateX(-50%)!important;width:14px!important;height:2.5px!important;
    border-radius:2px!important;background:#ff6b1a!important;box-shadow:0 0 6px rgba(255,107,26,0.6)!important;
}
.tab:active{transform:scale(0.88)!important;transition-duration:0.08s!important}
.tab[data-tab="live"],.tab[data-tab="squads"]{display:none!important;position:absolute!important;visibility:hidden!important}
#view-live,#view-squads{display:none!important}

/* ═══════════════════════════════════════════════════════════
   VIEWS — Remove gaps, smooth transitions
   ═══════════════════════════════════════════════════════════ */
.view{padding-top:0!important;animation:viewIn 0.25s var(--pro-ease)!important}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════
   FEED — Stories, Composer, Posts
   ═══════════════════════════════════════════════════════════ */
.stories,.story-rail{padding:12px 14px 8px!important;margin-bottom:0!important;gap:12px!important;border-bottom:1px solid var(--pro-border)!important}
.story{transition:transform 0.2s var(--pro-spring)!important}
.story:active{transform:scale(0.88)!important}
.story-ring{border:2.5px solid #ff6b1a!important;padding:2px!important;border-radius:50%!important;box-shadow:0 0 10px rgba(255,107,26,0.2)!important}
.story-label,.story-name{font-size:10px!important;font-weight:600!important;color:var(--pro-text-3)!important;margin-top:4px!important}

.composer-hero,.cmp-container,[class*="composer-wrap"]{
    background:var(--pro-card)!important;border:1px solid var(--pro-border)!important;
    border-radius:var(--pro-radius)!important;margin:8px 14px!important;padding:12px 14px!important;
    transition:border-color 0.3s!important;
}
.composer-hero:hover,.cmp-container:hover{border-color:var(--pro-border-hover)!important}
#feed-composer.composer{margin-top:6px!important}

.feed-list{padding:0!important;gap:8px!important}

/* POST CARD */
.post{
    background:var(--pro-card)!important;border:1px solid var(--pro-border)!important;
    border-radius:var(--pro-radius)!important;margin:0 14px 8px!important;padding:0!important;
    overflow:hidden!important;transition:all 0.3s var(--pro-ease)!important;
    box-shadow:0 2px 8px rgba(0,0,0,0.2)!important;
}
.post:hover{border-color:var(--pro-border-hover)!important;box-shadow:0 4px 16px rgba(0,0,0,0.3)!important}

.post-header,.post-head{display:flex!important;align-items:center!important;padding:12px 14px 8px!important;gap:10px!important}
.post-header .avatar,.post-head .avatar,.post-av,.post-header img[class*="avatar"]{
    width:38px!important;height:38px!important;border-radius:50%!important;
    border:2px solid rgba(255,107,26,0.12)!important;object-fit:cover!important;
}
.post-user,.post-name{font-weight:800!important;font-size:13.5px!important;color:var(--pro-text)!important;letter-spacing:0.01em!important}
.post-time,.post-meta{font-size:11px!important;color:var(--pro-text-3)!important}
.post-lvl,.user-level,[class*="level-badge"]{
    background:rgba(255,107,26,0.1)!important;color:#ff6b1a!important;
    font-size:10px!important;font-weight:900!important;padding:1px 6px!important;
    border-radius:6px!important;border:1px solid rgba(255,107,26,0.15)!important;
}

/* 3-DOT MENU — FIXED */
.post-menu{
    width:34px!important;height:34px!important;display:grid!important;place-items:center!important;
    border-radius:50%!important;background:rgba(255,255,255,0.03)!important;
    border:1px solid rgba(255,255,255,0.05)!important;color:var(--pro-text-2)!important;
    font-size:18px!important;line-height:1!important;cursor:pointer!important;
    transition:all 0.2s!important;margin-left:auto!important;
}
.post-menu:hover{background:var(--pro-accent-soft)!important;border-color:var(--pro-border-hover)!important;color:#ff6b1a!important}
.post-menu:active{transform:scale(0.85)!important}

.post-media{margin:0 12px 8px!important;border-radius:12px!important;overflow:hidden!important;box-shadow:0 2px 12px rgba(0,0,0,0.3)!important}
.post-media img,.post-media video{width:100%!important;display:block!important;border-radius:12px!important}

.post-body,.post-text,.post-content{padding:8px 14px!important;font-size:14px!important;line-height:1.55!important;color:rgba(255,255,255,0.85)!important}

.post-actions,.post-footer{
    display:flex!important;align-items:center!important;padding:6px 10px 10px!important;gap:2px!important;
    border-top:1px solid var(--pro-border)!important;
}
.post-action{
    display:inline-flex!important;align-items:center!important;gap:5px!important;
    padding:7px 12px!important;border-radius:8px!important;font-size:11px!important;
    font-weight:700!important;color:var(--pro-text-3)!important;cursor:pointer!important;
    transition:all 0.15s!important;text-transform:uppercase!important;letter-spacing:0.03em!important;
    border:none!important;background:transparent!important;
}
.post-action:hover{color:var(--pro-text-2)!important;background:rgba(255,255,255,0.03)!important}
.post-action:active{transform:scale(0.9)!important}
.post-action.liked{color:#ff4d8e!important;background:rgba(255,77,142,0.06)!important}
.post-action.bookmarked{color:#ff6b1a!important;background:var(--pro-accent-soft)!important}

/* Post dropdown / context menu */
.post-dropdown,.context-menu,[class*="post-options"]{
    background:rgba(12,12,20,0.97)!important;backdrop-filter:blur(24px)!important;
    border:1px solid rgba(255,255,255,0.06)!important;border-radius:14px!important;
    box-shadow:0 12px 48px rgba(0,0,0,0.7)!important;padding:6px!important;overflow:hidden!important;
}
.post-dropdown button,.context-menu button{
    display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;
    padding:11px 14px!important;border-radius:10px!important;border:none!important;
    background:transparent!important;color:var(--pro-text-2)!important;font-size:13px!important;
    font-weight:600!important;cursor:pointer!important;transition:background 0.15s!important;text-align:left!important;
}
.post-dropdown button:hover,.context-menu button:hover{background:rgba(255,107,26,0.05)!important;color:var(--pro-text)!important}

/* ═══════════════════════════════════════════════════════════
   PROFILE PAGE — Instagram-level
   ═══════════════════════════════════════════════════════════ */
.fp-hero,.pv2-hero,[class*="profile-hero"]{
    background:linear-gradient(180deg,rgba(255,107,26,0.04) 0%,transparent 60%)!important;
    padding:20px 16px!important;text-align:center!important;position:relative!important;
}
.fp-banner,.fp-banner-img{
    border-radius:var(--pro-radius)!important;overflow:hidden!important;
    box-shadow:0 4px 20px rgba(0,0,0,0.4)!important;
}
.fp-avatar,.pv2-avatar,[class*="profile-avatar"]{
    width:88px!important;height:88px!important;border-radius:50%!important;
    border:3px solid rgba(255,107,26,0.2)!important;
    box-shadow:0 0 0 4px rgba(4,4,11,1),0 0 20px rgba(255,107,26,0.15)!important;
    transition:all 0.3s var(--pro-ease)!important;object-fit:cover!important;
}
.fp-avatar:hover,.pv2-avatar:hover{
    border-color:rgba(255,107,26,0.4)!important;transform:scale(1.03)!important;
    box-shadow:0 0 0 4px rgba(4,4,11,1),0 0 28px rgba(255,107,26,0.25)!important;
}
.fp-avatar-ring{
    border:3px solid #ff6b1a!important;border-radius:50%!important;padding:3px!important;
    box-shadow:0 0 14px rgba(255,107,26,0.25)!important;
}
.fp-name{font-weight:900!important;font-size:20px!important;letter-spacing:-0.01em!important;color:var(--pro-text)!important;margin-top:10px!important}
.fp-username{font-size:13px!important;color:var(--pro-text-3)!important;font-weight:500!important;margin-top:2px!important}
.fp-bio{font-size:13.5px!important;color:var(--pro-text-2)!important;line-height:1.5!important;margin-top:8px!important;max-width:360px!important;margin-left:auto!important;margin-right:auto!important}
.fp-verified{color:#ff6b1a!important;filter:drop-shadow(0 0 4px rgba(255,107,26,0.4))!important}

/* Profile stats grid */
.fp-stats-grid,.fp-stat-panel{
    display:flex!important;justify-content:center!important;gap:24px!important;
    margin:16px auto!important;padding:14px 20px!important;
    background:rgba(255,255,255,0.02)!important;border:1px solid var(--pro-border)!important;
    border-radius:14px!important;max-width:380px!important;
}
.fp-stat-val{font-weight:900!important;font-size:18px!important;color:var(--pro-text)!important}
.fp-stat-lbl{font-size:10.5px!important;color:var(--pro-text-3)!important;text-transform:uppercase!important;letter-spacing:0.06em!important;font-weight:600!important}

/* Profile action buttons */
.fp-actions,.fp-actions-row{display:flex!important;gap:8px!important;justify-content:center!important;margin:12px 0!important}
.fp-btn,.fp-btn-primary,.fp-btn-ghost,.fp-btn-secondary{
    border-radius:10px!important;padding:9px 20px!important;font-size:12.5px!important;
    font-weight:700!important;transition:all 0.2s var(--pro-ease)!important;cursor:pointer!important;
}
.fp-btn-primary{
    background:linear-gradient(135deg,#ff6b1a,#e85d10)!important;color:#fff!important;border:none!important;
    box-shadow:0 3px 12px rgba(255,107,26,0.25)!important;
}
.fp-btn-primary:hover{box-shadow:0 5px 18px rgba(255,107,26,0.35)!important;transform:translateY(-1px)!important}
.fp-btn-ghost,.fp-btn-secondary{
    background:transparent!important;border:1px solid rgba(255,255,255,0.08)!important;color:var(--pro-text-2)!important;
}
.fp-btn-ghost:hover,.fp-btn-secondary:hover{border-color:var(--pro-border-hover)!important;color:#ff6b1a!important}

/* Profile content tabs (Posts/Reels/Saved/Reposted) */
.fp-content-tabs,[class*="profile-tabs"]{
    display:flex!important;border-bottom:1px solid var(--pro-border)!important;
    margin-top:12px!important;
}
.fp-content-tabs button,.fp-content-tabs .tab-btn,[class*="profile-tabs"] button{
    flex:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;
    gap:4px!important;padding:12px 8px!important;border:none!important;background:transparent!important;
    color:var(--pro-text-3)!important;font-size:10px!important;font-weight:700!important;
    text-transform:uppercase!important;letter-spacing:0.08em!important;cursor:pointer!important;
    transition:color 0.2s!important;position:relative!important;
}
.fp-content-tabs button.active,.fp-content-tabs .tab-btn.active,[class*="profile-tabs"] button.active{
    color:#ff6b1a!important;
}
.fp-content-tabs button.active::after,.fp-content-tabs .tab-btn.active::after{
    content:''!important;position:absolute!important;bottom:0!important;left:20%!important;right:20%!important;
    height:2px!important;background:#ff6b1a!important;border-radius:2px!important;
}

/* Profile post grid */
.fp-grid,.post-grid,[class*="profile-grid"]{
    display:grid!important;grid-template-columns:repeat(3,1fr)!important;
    gap:3px!important;padding:3px!important;
}
.fp-grid-item,.post-grid-item,[class*="grid-item"]{
    aspect-ratio:1!important;overflow:hidden!important;border-radius:4px!important;
    position:relative!important;cursor:pointer!important;
    transition:opacity 0.2s!important;
}
.fp-grid-item:hover,.post-grid-item:hover{opacity:0.85!important}
.fp-grid-item img,.post-grid-item img{width:100%!important;height:100%!important;object-fit:cover!important}

/* Match history rows */
.pmg-match-row{
    background:var(--pro-card)!important;border:1px solid var(--pro-border)!important;
    border-radius:12px!important;padding:12px 14px!important;margin:6px 0!important;
    display:flex!important;align-items:center!important;transition:border-color 0.2s!important;
}
.pmg-match-row:hover{border-color:var(--pro-border-hover)!important}
.pmg-match-result{
    font-weight:900!important;font-size:11px!important;text-transform:uppercase!important;
    letter-spacing:0.05em!important;padding:4px 10px!important;border-radius:6px!important;
}
.pmg-mr--xp{color:#22c55e!important;background:rgba(34,197,94,0.08)!important;border:1px solid rgba(34,197,94,0.15)!important;font-weight:800!important;font-size:11px!important;padding:3px 8px!important;border-radius:6px!important}

/* ═══════════════════════════════════════════════════════════
   MESSAGES — WhatsApp/iMessage tier
   ═══════════════════════════════════════════════════════════ */
.msg-row,[class*="msg-item"]{
    border-radius:14px!important;margin:3px 8px!important;padding:12px 14px!important;
    transition:all 0.2s var(--pro-ease)!important;border:1px solid transparent!important;
    display:flex!important;align-items:center!important;gap:12px!important;cursor:pointer!important;
}
.msg-row:hover{background:rgba(255,107,26,0.02)!important;border-color:rgba(255,107,26,0.05)!important}
.msg-row:active{transform:scale(0.985)!important}
.msg-row.unread,.msg-row.is-unread{
    background:rgba(255,107,26,0.03)!important;border-color:rgba(255,107,26,0.08)!important;
}
.msg-row .avatar,.msg-row img[class*="avatar"],.msg-avatar .avatar,.msg-avatar img{
    width:48px!important;height:48px!important;border-radius:50%!important;
    border:2px solid rgba(255,107,26,0.08)!important;object-fit:cover!important;
}
.msg-active-strip{
    background:var(--pro-card)!important;border-bottom:1px solid var(--pro-border)!important;
    padding:12px!important;
}

/* Chat bubbles */
.bubble{
    border-radius:18px!important;padding:10px 14px!important;font-size:14px!important;
    line-height:1.45!important;max-width:72%!important;word-break:break-word!important;
    box-shadow:0 1px 4px rgba(0,0,0,0.15)!important;
}
.bubble.out,.bubble.mine,.bubble[class*="sent"]{
    background:linear-gradient(135deg,#ff6b1a,#e85a0c)!important;color:#fff!important;
    border-bottom-right-radius:4px!important;margin-left:auto!important;
}
.bubble.in,.bubble.theirs,.bubble[class*="received"]{
    background:rgba(255,255,255,0.05)!important;color:var(--pro-text)!important;
    border:1px solid var(--pro-border)!important;border-bottom-left-radius:4px!important;
}
.bubble-time{font-size:10px!important;color:var(--pro-text-3)!important;margin-top:3px!important}

.chat-compose{
    background:rgba(8,8,14,0.95)!important;border-top:1px solid var(--pro-border)!important;
    padding:10px 14px!important;backdrop-filter:blur(20px)!important;
}
.chat-compose input,.chat-compose textarea{
    background:rgba(255,255,255,0.04)!important;border:1px solid rgba(255,255,255,0.06)!important;
    border-radius:20px!important;padding:10px 16px!important;color:var(--pro-text)!important;
    font-size:14px!important;transition:border-color 0.2s!important;
}
.chat-compose input:focus,.chat-compose textarea:focus{border-color:rgba(255,107,26,0.3)!important}
.chat-send{
    background:linear-gradient(135deg,#ff6b1a,#e85a0c)!important;border:none!important;
    border-radius:50%!important;width:38px!important;height:38px!important;
    color:#fff!important;cursor:pointer!important;box-shadow:0 2px 8px rgba(255,107,26,0.3)!important;
    transition:transform 0.15s!important;
}
.chat-send:active{transform:scale(0.88)!important}

/* ═══════════════════════════════════════════════════════════
   FRIENDS
   ═══════════════════════════════════════════════════════════ */
.fv3-card,[class*="friend-card"],[class*="friend-item"]{
    background:var(--pro-card)!important;border:1px solid var(--pro-border)!important;
    border-radius:14px!important;padding:12px 14px!important;
    transition:all 0.2s var(--pro-ease)!important;
}
.fv3-card:hover,[class*="friend-card"]:hover{
    border-color:var(--pro-border-hover)!important;transform:translateY(-1px)!important;
    box-shadow:0 4px 16px rgba(0,0,0,0.25)!important;
}
.friend-avatar .avatar,.fv3-avatar{border-radius:50%!important;border:2px solid rgba(255,107,26,0.08)!important}
.fp-online-dot,.presence-dot,[class*="online-dot"]{
    width:10px!important;height:10px!important;background:#22c55e!important;
    border-radius:50%!important;border:2px solid var(--pro-bg)!important;
    box-shadow:0 0 6px rgba(34,197,94,0.6)!important;
}
.friend-actions{display:flex!important;gap:6px!important}
.friend-actions .btn-primary,.friend-actions .btn-ghost{
    padding:6px 12px!important;font-size:11px!important;border-radius:8px!important;
}

/* ═══════════════════════════════════════════════════════════
   WALLET — Premium glass card
   ═══════════════════════════════════════════════════════════ */
.wallet-card,[class*="wallet-card"]{
    background:linear-gradient(145deg,rgba(255,107,26,0.05),rgba(10,10,18,0.95))!important;
    border:1px solid rgba(255,107,26,0.1)!important;border-radius:20px!important;
    box-shadow:0 8px 32px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.03)!important;
    transition:all 0.3s var(--pro-ease)!important;overflow:hidden!important;
    position:relative!important;
}
.wallet-card::before,[class*="wallet-card"]::before{
    content:''!important;position:absolute!important;inset:0!important;
    background:radial-gradient(ellipse at 30% 20%,rgba(255,107,26,0.06),transparent 60%)!important;
    pointer-events:none!important;
}
.wallet-card:hover,[class*="wallet-card"]:hover{
    border-color:rgba(255,107,26,0.18)!important;
    box-shadow:0 12px 40px rgba(0,0,0,0.5),0 0 20px rgba(255,107,26,0.04)!important;
}
.wallet-balance,[class*="wallet"] .stat-value,.balance-amount{
    background:linear-gradient(135deg,#fff,#ffb088)!important;
    -webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;
    background-clip:text!important;font-weight:900!important;
    filter:drop-shadow(0 2px 6px rgba(255,107,26,0.2))!important;
}

/* ═══════════════════════════════════════════════════════════
   REELS — TikTok-style
   ═══════════════════════════════════════════════════════════ */
.reel-card,[class*="reel-item"]{
    border-radius:var(--pro-radius)!important;overflow:hidden!important;
    border:1px solid var(--pro-border)!important;transition:all 0.3s var(--pro-ease)!important;
    box-shadow:0 4px 16px rgba(0,0,0,0.3)!important;position:relative!important;
}
.reel-card:hover,[class*="reel-item"]:hover{
    border-color:var(--pro-border-hover)!important;transform:scale(1.01)!important;
}
.reel-card video,[class*="reel-item"] video{width:100%!important;height:100%!important;object-fit:cover!important}

/* ═══════════════════════════════════════════════════════════
   ALERTS / NOTIFICATIONS
   ═══════════════════════════════════════════════════════════ */
.notif-item,[class*="alert-item"],[class*="notif-row"],.alert-row{
    border-radius:14px!important;margin:3px 8px!important;padding:12px 14px!important;
    transition:all 0.2s!important;border:1px solid transparent!important;
    display:flex!important;align-items:center!important;gap:12px!important;
}
.notif-item:hover,.alert-row:hover{background:rgba(255,107,26,0.02)!important;border-color:rgba(255,107,26,0.06)!important}
.alert-icon,.notif-icon{
    width:42px!important;height:42px!important;border-radius:50%!important;
    display:grid!important;place-items:center!important;
    background:var(--pro-accent-soft)!important;flex-shrink:0!important;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS — Unified across app
   ═══════════════════════════════════════════════════════════ */
.btn-primary,button.btn-primary,a.btn-primary{
    background:linear-gradient(135deg,#ff6b1a,#e85d10)!important;color:#fff!important;
    font-weight:800!important;font-size:12.5px!important;letter-spacing:0.04em!important;
    border-radius:10px!important;border:none!important;padding:10px 20px!important;
    box-shadow:0 3px 12px rgba(255,107,26,0.25)!important;
    transition:all 0.2s var(--pro-spring)!important;text-transform:uppercase!important;cursor:pointer!important;
}
.btn-primary:hover{box-shadow:0 5px 18px rgba(255,107,26,0.35)!important;transform:translateY(-1px)!important;filter:brightness(1.08)!important}
.btn-primary:active{transform:scale(0.95)!important;box-shadow:0 2px 6px rgba(255,107,26,0.2)!important}

.btn-ghost,button.btn-ghost{
    background:transparent!important;border:1px solid rgba(255,255,255,0.08)!important;
    color:var(--pro-text-2)!important;border-radius:10px!important;padding:9px 18px!important;
    font-weight:700!important;font-size:12.5px!important;transition:all 0.2s!important;cursor:pointer!important;
}
.btn-ghost:hover{border-color:var(--pro-border-hover)!important;color:#ff6b1a!important;background:var(--pro-accent-soft)!important}

/* ═══════════════════════════════════════════════════════════
   MODALS & SHEETS
   ═══════════════════════════════════════════════════════════ */
/* removed broad sheet rule */

.modal-grip,.sheet-grip{display:none!important}

/* ═══════════════════════════════════════════════════════════
   FAB
   ═══════════════════════════════════════════════════════════ */
.fab,.fab-compose,#fab{
    background:linear-gradient(135deg,#ff6b1a,#e85a0c)!important;border:none!important;
    border-radius:14px!important;width:50px!important;height:50px!important;
    box-shadow:0 4px 16px rgba(255,107,26,0.35),0 0 0 2px rgba(255,107,26,0.12)!important;
    transition:all 0.2s var(--pro-spring)!important;color:#fff!important;cursor:pointer!important;
}
.fab:hover,#fab:hover{transform:translateY(-2px) scale(1.05)!important;box-shadow:0 6px 24px rgba(255,107,26,0.45)!important}
.fab:active,#fab:active{transform:scale(0.9)!important}

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.tab-badge,[class*="badge-count"],.badge:not(.fp-badge){
    background:linear-gradient(135deg,#ff2d00,#ff6b1a)!important;color:#fff!important;
    border-radius:9px!important;min-width:16px!important;height:16px!important;
    font-size:9px!important;font-weight:900!important;padding:0 4px!important;
    box-shadow:0 2px 6px rgba(255,45,0,0.4)!important;display:inline-flex!important;
    align-items:center!important;justify-content:center!important;
}

/* ═══════════════════════════════════════════════════════════
   FLOATING MESSAGE WIDGET
   ═══════════════════════════════════════════════════════════ */
[class*="msg-float"],.msg-widget,.floating-messages{
    border-radius:16px!important;background:rgba(10,10,18,0.94)!important;
    border:1px solid rgba(255,107,26,0.06)!important;backdrop-filter:blur(20px)!important;
    box-shadow:0 8px 32px rgba(0,0,0,0.5)!important;
}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
.toast-item{
    background:rgba(10,10,18,0.96)!important;backdrop-filter:blur(20px)!important;
    border:1px solid rgba(255,107,26,0.1)!important;border-radius:12px!important;
    padding:11px 18px!important;font-weight:600!important;font-size:13px!important;
    box-shadow:0 8px 28px rgba(0,0,0,0.6)!important;
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS / SECTIONS
   ═══════════════════════════════════════════════════════════ */
.settings-section,.set-section,[class*="settings-group"]{
    background:var(--pro-card)!important;border:1px solid var(--pro-border)!important;
    border-radius:var(--pro-radius)!important;margin:8px 14px!important;overflow:hidden!important;
}
.settings-section button,.set-nav{
    padding:13px 16px!important;border-bottom:1px solid var(--pro-border)!important;
    transition:background 0.15s!important;
}
.settings-section button:hover,.set-nav:hover{background:rgba(255,107,26,0.03)!important}
.settings-section button:last-child,.set-nav:last-child{border-bottom:none!important}

/* ═══════════════════════════════════════════════════════════
   RANK / GAME UI
   ═══════════════════════════════════════════════════════════ */
.pmg-rank-card{
    background:linear-gradient(145deg,rgba(255,107,26,0.04),var(--pro-card))!important;
    border:1px solid rgba(255,107,26,0.08)!important;border-radius:var(--pro-radius)!important;
    padding:20px!important;text-align:center!important;
}
.pmg-rank-img-wrap{
    width:80px!important;height:80px!important;margin:0 auto 10px!important;
    filter:drop-shadow(0 0 12px rgba(255,107,26,0.3))!important;
}
.pmg-section{
    background:var(--pro-card)!important;border:1px solid var(--pro-border)!important;
    border-radius:var(--pro-radius)!important;padding:16px!important;margin:8px 0!important;
}
.pmg-section-title{
    font-weight:800!important;font-size:14px!important;text-transform:uppercase!important;
    letter-spacing:0.06em!important;color:var(--pro-text)!important;margin-bottom:12px!important;
}

/* ═══════════════════════════════════════════════════════════
   MISSIONS
   ═══════════════════════════════════════════════════════════ */
[class*="mission-card"],[class*="quest-card"]{
    background:var(--pro-card)!important;border:1px solid var(--pro-border)!important;
    border-radius:14px!important;padding:14px 16px!important;transition:all 0.2s!important;
}
[class*="mission-card"]:hover,[class*="quest-card"]:hover{border-color:var(--pro-border-hover)!important}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
    .post{margin:0 8px 6px!important;border-radius:14px!important}
    .post-media{margin:0 8px!important;border-radius:10px!important}
    .msg-row{margin:2px 6px!important;padding:10px 12px!important}
    .tab{padding:6px 11px!important;font-size:9px!important}
    .fp-avatar,.pv2-avatar{width:72px!important;height:72px!important}
    .fp-name{font-size:18px!important}
    .stories,.story-rail{padding:10px 10px 6px!important;gap:10px!important}
}
@media(max-width:380px){
    .post{margin:0 4px 4px!important;border-radius:12px!important}
    .post-action{padding:5px 8px!important;font-size:10px!important}
    .tab{padding:5px 9px!important}
    .fp-stats-grid{gap:14px!important;padding:10px 14px!important}
}

/* ═══════════════════════════════════════════════════════════
   MAX-WIDTH CONSTRAINT ON DESKTOP (like Instagram)
   ═══════════════════════════════════════════════════════════ */
@media(min-width:769px){
    .feed-list,.stories,.story-rail,.composer-hero,.cmp-container,[class*="composer-wrap"]{
        max-width:620px!important;margin-left:auto!important;margin-right:auto!important;
    }
    .post{max-width:620px!important;margin-left:auto!important;margin-right:auto!important;margin-bottom:10px!important}
    .msg-row{max-width:700px!important}
    .fp-hero,.pv2-hero{max-width:680px!important;margin-left:auto!important;margin-right:auto!important}
}






/* Also hide badges that pro-ui-overhaul hides */
.tabbar .tab-badge {
    display: inline-flex !important;
    visibility: visible !important;
}


/* Wallet Transactions */
.tx-item, .transaction-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid var(--pro-border, rgba(255,255,255,0.035)) !important;
    background: rgba(16,16,26,0.7) !important;
    margin-bottom: 6px !important;
    transition: border-color 0.2s !important;
}
.tx-item:hover, .transaction-item:hover {
    border-color: rgba(255,107,26,0.1) !important;
}
.tx-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,107,26,0.08) !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}
.tx-amount, .tx-amount-pos { color: #22c55e !important; font-weight: 800 !important; }
.tx-amount-neg { color: #ef4444 !important; font-weight: 800 !important; }
.tx-title { font-weight: 700 !important; font-size: 13px !important; color: rgba(255,255,255,0.9) !important; }
.tx-time, .tx-main small { font-size: 11px !important; color: rgba(255,255,255,0.35) !important; }

/* Mission cards */
.msn-card, .mission-card {
    background: rgba(16,16,26,0.9) !important;
    border: 1px solid rgba(255,255,255,0.035) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    transition: border-color 0.2s !important;
}
.msn-card:hover, .mission-card:hover {
    border-color: rgba(255,107,26,0.1) !important;
}
.msn-card--done { opacity: 0.6 !important; }
.msn-bar { height: 4px !important; background: rgba(255,255,255,0.06) !important; border-radius: 2px !important; overflow: hidden !important; }
.msn-bar-fill { height: 100% !important; background: linear-gradient(90deg, #ff6b1a, #ff9a56) !important; border-radius: 2px !important; transition: width 0.4s !important; }
.msn-bar-fill--done { background: #22c55e !important; }
.msn-claim-btn {
    background: linear-gradient(135deg, #ff6b1a, #e85d10) !important;
    color: #fff !important; border: none !important; border-radius: 8px !important;
    padding: 6px 14px !important; font-size: 11px !important; font-weight: 800 !important;
    cursor: pointer !important; text-transform: uppercase !important;
}
.msn-reward { color: #ff6b1a !important; font-weight: 800 !important; font-size: 12px !important; }
.msn-streak-num { color: #ff6b1a !important; font-weight: 900 !important; font-size: 22px !important; }

/* Coin pack cards (wallet deposit) */
.coin-pack-card {
    background: rgba(16,16,26,0.9) !important;
    border: 1px solid rgba(255,107,26,0.08) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    text-align: center !important;
    transition: all 0.25s !important;
    cursor: pointer !important;
}
.coin-pack-card:hover {
    border-color: rgba(255,107,26,0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
.coin-pack-card.popular {
    border-color: rgba(255,107,26,0.3) !important;
    box-shadow: 0 0 16px rgba(255,107,26,0.08) !important;
}

/* Empty state */
.empty-state {
    text-align: center !important;
    padding: 40px 20px !important;
    color: rgba(255,255,255,0.35) !important;
}

/* Filter buttons / chips */
.filter-btn, .chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.03) !important;
    color: rgba(255,255,255,0.6) !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}
.filter-btn.active, .filter-btn:hover, .chip.active, .chip-accent {
    background: rgba(255,107,26,0.08) !important;
    border-color: rgba(255,107,26,0.2) !important;
    color: #ff6b1a !important;
}

/* Section titles */
.section-title {
    font-weight: 900 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: rgba(255,255,255,0.9) !important;
    padding: 14px 16px 8px !important;
}

/* Spinner / loading */
.spinner, .boot-spinner, .loading {
    border: 3px solid rgba(255,107,26,0.1) !important;
    border-top-color: #ff6b1a !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Toggle switch */
.toggle {
    width: 44px !important;
    height: 24px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.1) !important;
    transition: background 0.2s !important;
    cursor: pointer !important;
    position: relative !important;
}
.toggle.on, .toggle.active {
    background: linear-gradient(135deg, #ff6b1a, #e85d10) !important;
}





/* ═══════ FIX: Post card overflow — allow dropdown to escape ═══════ */
.post {
    overflow: visible !important;
}
.post-header, .post-head {
    overflow: visible !important;
    position: relative !important;
}

/* ═══════ FIX: 3-dot dropdown menu positioning ═══════ */
.post-menu {
    position: relative !important;
    overflow: visible !important;
    z-index: 10 !important;
}
.post-dropdown, .context-menu, [class*="post-options"], .menu-popup {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 9999 !important;
    min-width: 160px !important;
    background: rgba(12,12,20,0.97) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03) !important;
    padding: 6px !important;
    overflow: visible !important;
    display: none;
}
.post-dropdown.show, .post-dropdown.open, .post-dropdown.active,
.context-menu.show, .menu-popup.show, .menu-popup.open,
[class*="post-options"].show, [class*="post-options"].open {
    display: block !important;
}
.post-dropdown button, .context-menu button, .menu-popup button {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    border: none !important;
    background: transparent !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    text-align: left !important;
}
.post-dropdown button:hover, .context-menu button:hover, .menu-popup button:hover {
    background: rgba(255,107,26,0.06) !important;
    color: rgba(255,255,255,0.95) !important;
}


/* ═══════ FIX: Sheet/Modal — Don't break with broad selectors ═══════ */
/* Override the previous too-aggressive rule */
/* removed broad sheet rule */

/* Now properly style only what we need */
.sheet-root {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 110 !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.sheet-root.hidden {
    display: none !important;
}

.sheet {
    width: 90% !important;
    max-width: 480px !important;
    background: rgba(12,12,20,0.98) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 20px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    padding: 20px !important;
    position: relative !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8) !important;
    animation: modalPopIn 0.25s cubic-bezier(0.22,1,0.36,1) !important;
}
@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.sheet-grip{display:none!important}

.sheet-title {
    font-weight: 900 !important;
    font-size: 17px !important;
    padding: 4px 4px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    margin-bottom: 12px !important;
    color: rgba(255,255,255,0.95) !important;
}

/* Menu sheet options (3-dot menu items) */
.menu-sheet {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 4px 0 !important;
}
.menu-sheet .menu-option,
.menu-sheet .btn-ghost,
.sheet-actions .btn-ghost {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    background: rgba(255,255,255,0.02) !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s !important;
    text-align: left !important;
}
.menu-sheet .menu-option:hover,
.menu-sheet .btn-ghost:hover,
.sheet-actions .btn-ghost:hover {
    background: rgba(255,107,26,0.05) !important;
    border-color: rgba(255,107,26,0.1) !important;
    color: rgba(255,255,255,0.95) !important;
}
.menu-option--danger {
    color: #ef4444 !important;
}
.menu-option--danger:hover {
    background: rgba(239,68,68,0.06) !important;
    border-color: rgba(239,68,68,0.12) !important;
}

/* Modal root */
#modal-root {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100 !important;
    background: rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(3px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#modal-root.hidden {
    display: none !important;
}
.modal {
    background: rgba(12,12,20,0.97) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    border-radius: 20px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    width: 90% !important;
    max-width: 480px !important;
    box-shadow: 0 16px 64px rgba(0,0,0,0.7) !important;
    animation: modalIn 0.25s cubic-bezier(0.22,1,0.36,1) !important;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* TABBAR — Centered floating pill */
.tabbar{position:fixed!important;left:50%!important;right:auto!important;bottom:12px!important;transform:translateX(-50%)!important;width:auto!important;max-width:420px!important;min-width:320px!important;height:58px!important;border-radius:20px!important;background:rgba(6,6,12,0.94)!important;backdrop-filter:blur(28px) saturate(200%)!important;-webkit-backdrop-filter:blur(28px) saturate(200%)!important;border:1px solid rgba(255,255,255,0.04)!important;box-shadow:0 4px 24px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.02)!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;padding:0 10px!important;z-index:100!important}
.tabbar .tab,.tab{flex:0 1 auto!important;padding:8px 12px!important;font-size:9.5px!important;min-width:auto!important}

/* Force modal centered, not bottom-aligned */
.modal-root,#modal-root,.modal-root.modal-in{align-items:center!important;justify-content:center!important}
.modal{margin:auto!important;border-radius:20px!important;max-width:400px!important;width:90%!important}
.confirm-msg{font-size:14px!important;color:rgba(255,255,255,0.7)!important;line-height:1.5!important;padding:8px 0 16px!important}
.confirm-actions{display:flex!important;gap:10px!important;justify-content:flex-end!important;padding-top:8px!important}
.confirm-actions .btn-primary{background:linear-gradient(135deg,#ff6b1a,#e85d10)!important;border:none!important;border-radius:10px!important;padding:10px 20px!important;font-weight:700!important;color:#fff!important;cursor:pointer!important}
.confirm-actions .btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626)!important}
.confirm-actions .btn-ghost{border:1px solid rgba(255,255,255,0.08)!important;border-radius:10px!important;padding:10px 20px!important;background:transparent!important;color:rgba(255,255,255,0.7)!important;cursor:pointer!important}


/* ═══ MODAL — Force center screen (not bottom sheet) ═══ */
.modal-root,
#modal-root,
.modal-root.modal-in {
    align-items: center !important;
    justify-content: center !important;
}

.modal:not(.modal-full) {
    border-radius: 20px !important;
    max-width: 420px !important;
    width: 90% !important;
    margin: auto !important;
    padding: 20px !important;
    animation: modalPopIn 0.25s cubic-bezier(0.22,1,0.36,1) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.8) !important;
}

.modal:not(.modal-full)::before {
    display: none !important;
}

@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.modal .modal-grip {
    display: none !important;
}

.modal .modal-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 14px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

.modal .modal-title {
    font-weight: 900 !important;
    font-size: 17px !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

.modal .modal-close {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 18px !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
}

.confirm-msg {
    font-size: 14px !important;
    color: rgba(255,255,255,0.65) !important;
    line-height: 1.5 !important;
    padding: 8px 0 20px !important;
}

.confirm-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
}

.confirm-actions .btn-primary {
    background: linear-gradient(135deg, #ff6b1a, #e85d10) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #fff !important;
    cursor: pointer !important;
}

.confirm-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

.confirm-actions .btn-ghost {
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    background: transparent !important;
    color: rgba(255,255,255,0.65) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
}
.confirm-actions .btn-ghost:hover {
    background: rgba(255,255,255,0.04) !important;
    color: rgba(255,255,255,0.9) !important;
}