/* --- Variables and Global Styles --- */
        :root {
            --primary-color: #00FF00; /* Light Green - Default */
            --secondary-color: #1a1a1a; /* Dark element background */
            --background-color: #000000; /* Pure Black background */
            --text-color: #ffffff;
            --text-secondary: #999999;
            --pink-back-btn: #ff69b4; /* Pink for back button */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background: var(--background-color);
            min-height: 100vh;
            padding-top: 110px; /* Header (60px) + Main Nav (50px) ke liye space */
            overflow-x: hidden;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 1rem;
        }

        /* --- Header/Navigation Bar (Light Green Patti) --- */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: var(--primary-color);
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px;
            padding: 0 1rem;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--background-color);
        }

        .logo-text {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--background-color);
        }

        /* --- Main Navigation (5 Options) --- */
        .main-nav {
            position: fixed;
            top: 60px;
            left: 0;
            width: 100%;
            background: var(--background-color);
            border-bottom: 1px solid var(--secondary-color);
            z-index: 90;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 50px;
            padding: 0 5px;
        }

        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.9rem;
            cursor: pointer;
            padding: 10px 5px;
            transition: color 0.3s, border-bottom 0.3s;
            flex-grow: 1;
            text-align: center;
            font-weight: 600;
        }

        .nav-btn.active {
            color: var(--primary-color);
            border-bottom: 3px solid var(--primary-color);
        }

        /* --- Page Content Sections --- */
        .page {
            display: none;
            min-height: calc(100vh - 110px);
        }

        .page.active {
            display: block;
        }

        /* --- Home/Dashboard Page Styles --- */
     .profile-section {
    background: var(--secondary-color);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;                    /* ← flex row (horizontal) */
    align-items: center;              /* ← center vertically */
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    flex-wrap: wrap;                  /* ← mobile pe wrap ho sake */
}

        .profile-pic-container {
            position: relative;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        /* Rainbow Border Effect */
        @keyframes rotate {
            to { transform: rotate(360deg); }
        }

        .profile-pic-container::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border-radius: 50%;
            padding: 5px;
            background: conic-gradient(
                #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000
            );
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #fff 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #fff 0);
            animation: rotate 5s linear infinite;
            z-index: -1;
        }

        .profile-pic {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: var(--secondary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--text-secondary);
            overflow: hidden;
        }

        .username-text {
            font-size: 1.1rem;
            font-weight: 700;
            /* Multi-color text effect */
            background: linear-gradient(to right, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 5px;
        }

        .three-dot-menu {
    position: absolute;
    top: 100%;
    right: 10px;
    background: rgba(20, 20, 20, 0.98);          /* Dark matte glass */
    backdrop-filter: blur(12px);                 /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid var(--primary-color);
    border-radius: 14px;
    box-shadow: 
        0 8px 32px rgba(0, 255, 0, 0.3),
        0 0 20px rgba(0, 255, 0, 0.2);
    z-index: 1000;
    display: none;
    flex-direction: column;
    width: 210px;
    margin-top: 10px;
    overflow: hidden;
    animation: slideDown 0.25s ease-out;
}

.three-dot-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 12px;
    width: 16px;
    height: 16px;
    background: rgba(20, 20, 20, 0.98);
    border-top: 1.5px solid var(--primary-color);
    border-left: 1.5px solid var(--primary-color);
    transform: rotate(45deg);
    z-index: -1;
}

.three-dot-menu.show {
    display: flex !important;
}

.three-dot-menu-btn-item {
    padding: 14px 16px;
    background: transparent;
    color: var(--text-color);
    border: none;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border-bottom: 1px solid rgba(0, 255, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
}

.three-dot-menu-btn-item:last-child {
    border-bottom: none;
}

.three-dot-menu-btn-item:hover {
    background: rgba(0, 255, 0, 0.15);
    color: var(--primary-color);
    padding-left: 22px;
    box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.1);
}

.three-dot-menu-btn-item i {
    font-size: 1.1rem;
    width: 20px;
}

/* Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
        
        .three-dot-menu-btn {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1.5px solid var(--primary-color);
    color: var(--primary-color);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.35rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 18px rgba(0, 255, 0, 0.4),
        inset 0 0 12px rgba(0, 255, 0, 0.15);
    transition: all 0.3s ease;
    animation: pulse 4s infinite;
}

.three-dot-menu-btn:hover {
    transform: rotate(90deg);
    box-shadow: 0 0 25px rgba(0, 255, 0, 0.7);
    background: rgba(0, 255, 0, 0.15);
}

.three-dot-menu-btn i {
    filter: drop-shadow(0 0 8px var(--primary-color));
}

/* Slow pulse animation */
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(0, 255, 0, 0.4); }
    50% { box-shadow: 0 0 28px rgba(0, 255, 0, 0.7); }
}

        

        /* --- Empty Page Styles --- */
        .empty-page {
            text-align: center;
            padding: 5rem 1rem;
            color: var(--text-secondary);
        }

        .empty-page h3 {
            color: var(--primary-color);
            margin-bottom: 10px;
        }

        /* --- Menu Page Styles --- */
        .menu-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .menu-item {
            background: var(--secondary-color);
            border-radius: 5px;
            padding: 15px;
            cursor: pointer;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* --- Sub-Page Styles (Full Screen Overlay) --- */
        .sub-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--background-color);
            z-index: 200;
            display: none; /* Initially hidden */
            flex-direction: column;
            overflow-y: auto;
        }

        .sub-page-header {
            background: var(--primary-color);
            color: var(--background-color);
            padding: 15px;
            font-size: 1.2rem;
            font-weight: 700;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 201;
        }

        .sub-page-content {
            padding: 1rem;
            max-width: 600px;
            margin: 0 auto;
            flex-grow: 1;
        }

        /* Package Card Styles */
        .package-card {
            background: var(--secondary-color);
            border: 2px solid var(--primary-color);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
        }

        .subscribe-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            background: var(--primary-color);
            color: var(--background-color);
        }

        .unsubscribe-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            background: #ff4444;
            color: var(--text-color);
        }


        /* Public Transaction DP */
        .public-dp-container::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border-radius: 50%;
            padding: 3px;
            background: conic-gradient(
                #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff
            );
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #fff 0);
            animation: rotate 5s linear infinite;
            z-index: -1;
        }
        
        /* Back Button (Pink, Professional) */
        .back-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: var(--pink-back-btn);
            color: var(--text-color);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
            box-shadow: 0 5px 15px rgba(255, 105, 180, 0.5);
            cursor: pointer;
            z-index: 300;
            display: none; /* Initially hidden */
        }

        /* Modals/Popups */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
            z-index: 500;
            display: none;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: var(--secondary-color);
            border: 2px solid var(--primary-color);
            border-radius: 10px;
            padding: 2rem;
            max-width: 350px;
            width: 90%;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 255, 136, 0.3);
        }
        
.referral-text {
    font-size: 1.05rem;
    font-weight: 800;
    background: linear-gradient(to right, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0080ff, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
    letter-spacing: 1px;
}



.profit-text {
    font-size: 1.05rem;
    font-weight: 800;
    background: linear-gradient(to right, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0080ff, #ff00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 50px rgba(0, 255, 0, 0.6);
    letter-spacing: 1px;
}




/* Poore page par text copy aur selection block karne ke liye */
html, body {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    
    /* ✅ Allow scrolling */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Agar aap chahte hain ke Search Input mein typing ho sake (Isay lazmi rakhein) */
input, textarea {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}






/* Page & Tab Styling */
.community-tabs {
    display: flex;
    justify-content: space-around;
    background: #0a0a0a;
    padding: 15px 0;
    border-bottom: 1px solid #222;
    position: sticky;
    top: 60px;
    z-index: 10;
}
.tab-btn {
    background: none;
    border: none;
    color: #666;
    font-weight: bold;
    font-size: 0.95rem;
    transition: 0.3s;
    cursor: pointer;
    padding-bottom: 5px;
}
.tab-btn.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}
.tab-pane { display: none; padding: 20px; }
.tab-pane.active { display: block; }

/* Glowing Cards */
.glow-card {
    position: relative;
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
    background-size: 200%;
    padding: 2px;
    border-radius: 15px;
    margin-bottom: 15px;
    animation: borderGlow 3s linear infinite;
}
@keyframes borderGlow { 0% { background-position: 0%; } 100% { background-position: 200%; } }

.card-inner {
    background: #111;
    border-radius: 13px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-label { color: #888; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.card-value { color: #fff; font-size: 2rem; font-weight: 800; margin-top: 5px; }

/* Search Bar with Animation */
.search-box-container {
    position: relative;
    margin: 25px 0;
    padding: 2px;
    border-radius: 30px;
    background: linear-gradient(90deg, #00FF00, #000, #00FF00);
    background-size: 200%;
    animation: borderGlow 4s linear infinite;
}
.search-inner {
    background: #000;
    border-radius: 28px;
    display: flex;
    overflow: hidden;
}
.search-inner input {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 20px;
    color: #fff;
    outline: none;
}
.search-inner button {
    background: var(--primary-color);
    border: none;
    padding: 0 25px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}

/* Transaction Items */
.section-title { color: #fff; font-size: 1.1rem; margin: 20px 0 10px; border-left: 4px solid var(--primary-color); padding-left: 10px; }
.tr-item {
    background: #151515;
    padding: 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.tr-dp { width: 45px; height: 45px; border-radius: 50%; margin-right: 12px; border: 1px solid #333; }
.tr-info { flex: 1; }
.tr-name { color: #fff; font-weight: 600; font-size: 0.9rem; display: block; }
.tr-ids { font-size: 0.75rem; color: #888; margin-top: 3px; }
.upline { margin-left: 10px; color: var(--primary-color); }
.tr-amount { color: #00FF00; font-weight: bold; font-size: 1rem; }

/* Leader Cards Scroll */
.leader-scroll-box {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}
.leader-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
}
.leader-main { display: flex; align-items: center; margin-bottom: 10px; }
.leader-meta { flex: 1; margin-left: 10px; }
.l-name { color: #fff; font-weight: bold; display: block; }
.l-id { color:green; font-size: 0.8rem; }
.l-working-badge { background: #333; color: #00ffff; font-size: 0.7rem; padding: 4px 8px; border-radius: 5px; }
.leader-stats { display: flex; justify-content: space-around; background: #000; padding: 10px; border-radius: 8px; }
.stat-mini { text-align: center; font-size: 0.8rem; color: #fff; font-weight: bold; }
.stat-mini span { color: #666; font-size: 0.7rem; }
.l-date { font-size: 0.7rem; color: #555; margin-top: 10px; text-align: right; }



/* Animated Border Patti Logic */
.glow-border-box {
    position: relative;
    padding: 2px; /* Border thickness */
    background: linear-gradient(90deg, #ff00ff, #00ffff, #00ff00, #ffff00, #ff00ff);
    background-size: 300% 300%;
    border-radius: 15px;
    animation: pattiRotate 5s linear infinite;
    margin-bottom: 20px;
}
@keyframes pattiRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.box-inner-content {
    background: #000;
    border-radius: 13px;
    padding: 25px 15px;
    text-align: center;
}

/* Balance & Buttons */
.balance-main { font-size: 3rem; font-weight: 900; color: #fff; text-shadow: 0 0 15px rgba(255,255,255,0.3); }
.premium-withdraw-btn {
    background: var(--primary-color);
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 800;
    color: #000;
    margin-top: 15px;
    cursor: pointer;
    box-shadow: 0 0 15px var(--primary-color);
}

/* Stats Vertical */
.stats-vertical { display: flex; flex-direction: column; gap: 10px; }
.glow-border-box.mini { margin-bottom: 0; }
.stats-flex { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 15px 20px; }
.stat-title { color: #888; font-size: 0.8rem; text-transform: uppercase; }
.stat-count { font-size: 1.5rem; font-weight: 800; }

/* Profit Badge Arrow */
.profit-badge {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
    padding: 5px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.profit-arrow { color: #00FF00; font-size: 1.2rem; }
.profit-text { font-size: 0.6rem; color: #00FF00; font-weight: 800; line-height: 1; }
.profit-text span { font-size: 0.9rem; }

/* Salary List */
.section-heading { color: var(--primary-color); margin: 25px 0 15px; font-size: 1.2rem; text-align: center; }
.salary-list { background: #111; border-radius: 10px; overflow: hidden; }
.salary-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #222;
    font-size: 0.85rem;
    color: #ccc;
}
.salary-item.header { background: #1a1a1a; font-weight: bold; color: var(--primary-color); }
.salary-item.special { background: rgba(0, 255, 0, 0.05); color: #fff; font-weight: 700; }

/* Transaction History */
.tr-row { display: flex; justify-content: space-between; background: #111; padding: 12px; margin-bottom: 8px; border-radius: 8px; }
.tr-left { display: flex; align-items: center; gap: 10px; }
.tr-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.tr-icon.in { background: rgba(0, 255, 0, 0.1); color: #00FF00; }
.tr-icon.out { background: rgba(255, 0, 0, 0.1); color: #ff4444; }
.tr-txt { font-size: 0.85rem; color: #fff; line-height: 1.2; }
.tr-txt small { color: #666; }
.tr-amt { font-weight: bold; color: #00FF00; }

/* Modal / Popup */
.modal-overlay {
    position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9);
    display: none; justify-content: center; align-items: center; z-index: 10000;
}
.modal-box { background: #111; border: 1px solid #333; width: 90%; max-width: 400px; border-radius: 20px; overflow: hidden; }
.modal-header { padding: 15px; background: #1a1a1a; display: flex; justify-content: space-between; font-weight: bold; }
.modal-body { padding: 30px 20px; text-align: center; }
.balance-display { font-size: 2.5rem; font-weight: 900; margin: 15px 0; color: #fff; }
.info-tag { background: rgba(0,255,0,0.1); color: #00FF00; font-size: 0.75rem; padding: 10px; border-radius: 10px; margin-bottom: 20px; }
.confirm-btn { width: 100%; background: #00FF00; border: none; padding: 15px; border-radius: 10px; font-weight: 800; cursor: pointer; }
.close-btn { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.rules-box { background: rgba(255, 255, 255, 0.05); padding: 10px; border-radius: 8px; margin: 15px 0; font-size: 0.75rem; color: #bbb; }



/* Dashboard ke Main Earning Bar ko naye design ke mutabiq set karne ke liye */
.referral-bar {
    background: #111 !important; /* Dark background */
    border: 1px solid var(--primary-color) !important;
    border-radius: 25px !important;
    padding: 12px 20px !important;
    margin: 15px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.2) !important;
    width: 90% !important;
}

.profit-text {
    color: #fff !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

#userProfit {
    color: var(--primary-color) !important; /* Green color for amount */
    text-shadow: 0 0 50px var(--primary-color);
}




/* Dashboard Followers Layout */
.dashboard-followers-container {
    display: flex;
    flex-direction: column; /* Ek ke niche ek box */
    gap: 15px;
    padding: 10px 20px;
    margin-top: 10px;
}

/* Glowing Card Style */
.dash-glow-card {
    position: relative;
    padding: 2px;
    background: #333; /* Default border color */
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Active Box ke liye special Green Glow */
.dash-glow-card.active-border {
    background: linear-gradient(90deg, #00ff00, #004400, #00ff00);
    background-size: 200% 200%;
    animation: dashGlowMove 3s linear infinite;
    border: none;
}

@keyframes dashGlowMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.dash-card-inner {
    background: #111; /* Dark professional background */
    border-radius: 13px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Labels and Counts */
.dash-label {
    color: #888;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: 600;
}

.dash-count {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 900;
    font-family: 'Arial', sans-serif;
}

.dash-count.active-text {
    color: #00ff00; /* Active Followers Green */
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}



/* Create Post Main Card */
.premium-post-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 20px;
    padding: 20px;
    margin: 20px auto;
    width: 95%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
}

/* Textarea Styling */
.premium-post-input {
    width: 100%;
    height: 100px;
    background: #050505;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    color: #fff;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: 0.3s;
}

.premium-post-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);
}

/* Media Buttons Grid */
.media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 15px 0;
}

.media-option {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.2s;
    color: #ccc;
}

.media-option:active { transform: scale(0.95); }
.media-option i { font-size: 1.2rem; color: var(--primary-color); }
.media-option span { font-size: 0.8rem; font-weight: 600; line-height: 1.2; }
.media-option small { color: #666; font-weight: 400; }

/* Upload Button */
.premium-upload-btn {
    width: 100%;
    background: linear-gradient(45deg, var(--primary-color), #00cc00);
    border: none;
    padding: 14px;
    border-radius: 12px;
    color: #000;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(0, 255, 0, 0.2);
    transition: 0.3s;
}

.premium-upload-btn:hover {
    box-shadow: 0 5px 20px rgba(0, 255, 0, 0.4);
    filter: brightness(1.1);
}

/* Footer Message */
.post-footer-msg {
    text-align: center;
    color: #555;
    margin: 20px 0;
    font-size: 0.85rem;
}
.post-footer-msg i { display: block; font-size: 1.5rem; margin-bottom: 5px; opacity: 0.3; }




.energy-container {
    background: linear-gradient(145deg, #0f0f0f, #1a1a1a);
    border: 1px solid #333;
    border-radius: 20px;
    padding: 20px;
    margin: 20px auto;
    width: 95%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}

.energy-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-weight: 800;
}

.task-text { color: #888; font-size: 0.8rem; text-transform: uppercase; }
.click-count { color: var(--primary-color); font-size: 1rem; text-shadow: 0 0 10px var(--primary-color); }

.mining-zone {
    padding: 30px 0;
    perspective: 1000px;
}

/* The Magic Button */
.the-magic-button {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #000;
    border: none;
    cursor: pointer;
    outline: none;
    transition: transform 0.1s active;
    z-index: 10;
}

.the-magic-button:active { transform: scale(0.9); }

.btn-glow {
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #00ff00, #ffff00);
    border-radius: 50%;
    background-size: 400%;
    z-index: -1;
    filter: blur(15px);
    animation: magicRotate 8s linear infinite;
}

@keyframes magicRotate {
    0% { background-position: 0% 0%; }
    50% { background-position: 200% 0%; }
    100% { background-position: 0% 0%; }
}

.btn-content {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: 900;
}

.btn-content i { font-size: 3rem; margin-bottom: 10px; color: var(--primary-color); animation: pulse 2s infinite; }

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.energy-progress-bar {
    width: 100%;
    height: 8px;
    background: #222;
    border-radius: 10px;
    margin-top: 20px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #004400);
    transition: width 0.5s ease;
}

/* Explosive Animation Keyframes */
.shockwave {
    position: fixed;
    border: 5px solid var(--primary-color);
    border-radius: 50%;
    pointer-events: none;
    animation: wave 0.6s ease-out;
}

@keyframes wave {
    0% { width: 0; height: 0; opacity: 1; }
    100% { width: 500px; height: 500px; opacity: 0; }
}






/* ========== WITHDRAWAL DASHBOARD STYLES ========== */
.withdrawal-dashboard {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

/* Status Bars Container */
.status-bar-container {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

/* Status Box Common */
.status-box {
    flex: 1;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Loss Status Box (Left - Red) */
.loss-status {
    background: linear-gradient(135deg, rgba(255, 68, 68, 0.15), rgba(255, 0, 0, 0.1));
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-left: 4px solid #ff4444;
}

.loss-status .status-icon {
    color: #ff4444;
    font-size: 24px;
}

/* Profit Status Box (Right - Green) */
.profit-status {
    background: linear-gradient(135deg, rgba(0, 255, 0, 0.15), rgba(0, 200, 0, 0.1));
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-left: 4px solid #00FF00;
}

.profit-status .status-icon {
    color: #00FF00;
    font-size: 24px;
}

/* Status Content */
.status-content {
    flex-grow: 1;
}

.status-label {
    font-size: 12px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.status-value {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.loss-status .status-value {
    color: #ff4444;
}

.profit-status .status-value {
    color: #00FF00;
}

.status-reason {
    font-size: 11px;
    color: #888;
}

.status-timer {
    font-size: 11px;
    font-family: monospace;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
}

/* Main Balance Card */
.balance-card {
    background: rgba(13, 13, 13, 0.95);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid rgba(0, 255, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
                inset 0 0 20px rgba(0, 255, 0, 0.05);
}

.balance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.balance-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

.balance-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00FF00;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.indicator-text {
    color: #00FF00;
    font-size: 12px;
    font-weight: 600;
}

/* Balance Display */
.balance-main-display {
    text-align: center;
    margin: 30px 0;
}

.balance-amount {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.balance-subtext {
    color: #aaa;
    font-size: 14px;
}

/* Timeline Progress Bar */
.timeline-container {
    margin: 30px 0;
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.timeline-label {
    font-size: 12px;
    font-weight: 600;
}

.timeline-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    margin: 15px 0;
}

.timeline-progress {
    height: 100%;
    background: linear-gradient(90deg, #00FF00, #FFA500, #FF4444);
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s ease;
}

.timeline-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #000;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: left 0.5s ease;
}

.timeline-countdown {
    text-align: center;
    font-size: 14px;
    color: #aaa;
    margin-top: 15px;
}

#withdrawTimeLeft {
    font-family: monospace;
    font-weight: 700;
    color: #00FF00;
}

/* Pending Expiry Container */
.pending-container {
    background: rgba(255, 68, 68, 0.05);
    border: 1px solid rgba(255, 68, 68, 0.2);
    border-left: 4px solid #ff4444;
    border-radius: 12px;
    padding: 15px;
    margin: 20px 0;
    animation: pulseWarning 2s infinite;
}

@keyframes pulseWarning {
    0%, 100% { border-left-color: #ff4444; }
    50% { border-left-color: #ff8888; }
}

.pending-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffa500;
    font-size: 14px;
    margin-bottom: 10px;
}

.pending-amount {
    font-size: 24px;
    font-weight: 700;
    color: #ff4444;
    text-align: center;
    margin: 10px 0;
}

.pending-timer {
    text-align: center;
    font-size: 13px;
    color: #ffa500;
}

#expiryTimeLeft {
    font-family: monospace;
    font-weight: 700;
    color: #ff4444;
}

/* Withdrawal Button */
.premium-withdraw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #00FF00, #00cc00);
    color: #000;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 25px 0;
    box-shadow: 0 5px 20px rgba(0, 255, 0, 0.3);
}

.premium-withdraw-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 255, 0, 0.4);
    background: linear-gradient(135deg, #00ff88, #00FF00);
}

.premium-withdraw-btn:disabled {
    background: #555;
    color: #888;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Stats Summary */
.stats-summary {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-label {
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

/* ========== PROFESSIONAL ALERT BOXES ========== */
.professional-alert-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    background: #000;
    border-radius: 20px;
    z-index: 10000;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9),
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 0 20px rgba(255, 255, 255, 0.05);
    animation: alertAppear 0.3s ease-out;
}

@keyframes alertAppear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.alert-strip {
    height: 6px;
    width: 100%;
    background: linear-gradient(90deg, 
        #ff0000, #ff8800, #ffff00, #00ff00, 
        #00ffff, #0000ff, #8800ff);
}

.alert-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 25px 10px;
}

.alert-icon {
    font-size: 32px;
}

.error-icon {
    color: #ff4444;
}

.success-icon {
    color: #00FF00;
}

.confirm-icon {
    color: #00ccff;
}

.alert-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.alert-body {
    padding: 20px 25px;
}

.alert-body p {
    color: #ddd;
    line-height: 1.6;
    margin: 0;
}

.warning-text {
    background: rgba(255, 68, 68, 0.1);
    border-left: 3px solid #ff4444;
    padding: 12px;
    border-radius: 6px;
    margin-top: 15px;
    color: #ffa500;
    font-size: 14px;
}

.warning-text i {
    margin-right: 8px;
}

.withdrawal-details {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.detail-row:last-child {
    margin-bottom: 0;
}

.detail-label {
    color: #aaa;
}

.detail-value {
    color: #fff;
    font-weight: 600;
}

.alert-actions {
    padding: 15px 25px 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-ok-btn {
    background: linear-gradient(135deg, #333, #111);
    color: white;
    border: 1px solid #444;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.alert-ok-btn:hover {
    background: #444;
    border-color: #666;
}

.alert-confirm-btn {
    background: linear-gradient(135deg, #00FF00, #00cc00);
    color: #000;
    border: none;
    padding: 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.alert-confirm-btn:hover {
    background: linear-gradient(135deg, #00ff88, #00FF00);
}

.alert-cancel-btn {
    background: transparent;
    color: #888;
    border: 1px solid #444;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.3s ease;
}

.alert-cancel-btn:hover {
    color: #fff;
    border-color: #666;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid #00FF00;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #fff;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
}

.loading-subtext {
    color: #aaa;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .status-bar-container {
        flex-direction: column;
    }
    
    .withdrawal-dashboard {
        padding: 15px;
    }
    
    .professional-alert-box {
        width: 90%;
        max-width: 350px;
    }
    
    .balance-amount {
        font-size: 36px;
    }
    
    .stats-summary {
        flex-direction: column;
        gap: 15px;
    }
}

/* Sabhi 4 Packages ke liye Common Style */
.package-card {
    border: 1px solid #333;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    background: #0a0a0a;
}


/* Package Card and Battery Styling */
.package-card {
    position: relative;
    border: 1px solid #333;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    background: #0a0a0a;
}
.subscribe-btn:disabled {
    background: #222 !important;
    color: #555 !important;
    cursor: not-allowed;
    border: 1px solid #333 !important;
}
.battery-container {
    width: 100%; height: 22px; background: #111; 
    border: 2px solid #00FF00; border-radius: 6px; 
    position: relative; margin-top: 15px; overflow: hidden;
}
.battery-level {
    height: 100%; width: 0%; 
    background: linear-gradient(90deg, #00FF00, #adff2f, #00FF00);
    background-size: 200% 100%; animation: batteryMove 3s linear infinite;
    transition: width 1s linear;
}
@keyframes batteryMove { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* Battery Container - Sabhi packages mein dikhega */
.battery-container {
    width: 100%; 
    height: 22px; 
    background: #111; 
    border: 2px solid var(--primary-color);
    border-radius: 6px; 
    position: relative; 
    margin-top: 15px;
    overflow: hidden; /* Taaki bar bahar na nikle */
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2); /* Neon glow */
}

/* Battery Level - Iski movement charon par chalegi */
.battery-level {
    height: 100%; 
    width: 0%; /* JS se update hoga */
    background: linear-gradient(90deg, #00FF00, #adff2f, #00FF00);
    background-size: 200% 100%; 
    animation: batteryMove 3s linear infinite;
    transition: width 1s ease-in-out;
}

/* Moving Color Effect */
@keyframes batteryMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Timer aur Active Text ki setting */
.time-info { 
    color: var(--primary-color); 
    font-weight: 800; 
    display: flex; 
    justify-content: space-between; 
    margin-top: 8px; 
    font-size: 14px;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

.real-dates {
    font-size: 11px;
    color: #888;
    margin-top: 5px;
    text-align: center;
    border-top: 1px dashed #333;
    padding-top: 5px;
}


/* ================== PACKAGE UPGRADE CSS ================== */
.package-card {
    position: relative;
    border: 1px solid rgba(0, 255, 0, 0.3);
    padding: 25px;
    border-radius: 20px;
    margin-bottom: 25px;
    background: linear-gradient(145deg, #0a0a0a, #111);
    transition: all 0.3s ease;
    overflow: hidden;
}

.package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.6);
}

.package-card h4 {
    color: #00FF00;
    font-size: 22px;
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.package-card p {
    color: #ccc;
    font-size: 15px;
    margin: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.package-card p strong {
    color: #00FF00;
    font-size: 18px;
}

.subscribe-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, #ff0080, #00cc00);
    color: black;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.subscribe-btn:hover:not(:disabled) {
    background: linear-gradient(90deg, #00cc00, #00FF00);
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 255, 0, 0.3);
}

.subscribe-btn:disabled {
    background: #222 !important;
    color: #666 !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ========== PROFESSIONAL BATTERY DESIGN ========== */
.battery-wrapper {
    margin: 20px 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(0, 255, 0, 0.2);
}

.battery-container {
    width: 100%;
    height: 30px;
    background: rgba(17, 17, 17, 0.9);
    border: 2px solid #00FF00;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Battery cap (top part) */
.battery-container::before {
    content: '';
    position: absolute;
    top: -6px;
    right: -8px;
    width: 8px;
    height: 12px;
    background: #00FF00;
    border-radius: 2px;
    z-index: 2;
}

.battery-level {
    height: 100%;
    width: 100%; /* Will be updated by JS */
    background: linear-gradient(
        90deg,
        #00FF00 0%,
        #7CFC00 25%,
        #ADFF2F 50%,
        #7CFC00 75%,
        #00FF00 100%
    );
    background-size: 400% 100%;
    animation: batteryFlow 4s linear infinite;
    border-radius: 6px;
    position: relative;
    transition: width 1s ease-in-out;
}

/* Moving gradient effect */
@keyframes batteryFlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 400% 0%; }
}

/* Battery percentage text inside */
.battery-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-weight: 900;
    font-size: 14px;
    text-shadow: 0 0 3px rgba(0, 255, 0, 0.5);
    z-index: 1;
}

/* ========== TIMER AND DATE INFO ========== */
.time-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding: 10px 15px;
    background: rgba(0, 255, 0, 0.05);
    border-radius: 10px;
    border-left: 4px solid #00FF00;
}

.countdown {
    color: #00FF00;
    font-weight: 800;
    font-size: 16px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.status-badge {
    background: #00FF00;
    color: black;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 14px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.8; transform: scale(1); }
}

.real-dates {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #888;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.real-dates span {
    color: #ccc;
    font-weight: 600;
}

/* ========== PACKAGE COMPARISON BADGES ========== */
.package-badge {
    position: absolute;
    top: 0px;
    right: 2px;
    background: linear-gradient(45deg, #ff0080, #00cc00);
    color: black;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* ========== LOADER FOR PROCESSING ========== */
.processing-loader {
    display: none;
    text-align: center;
    padding: 20px;
    margin: 20px 0;
    background: rgba(0, 255, 0, 0.05);
    border-radius: 15px;
    border: 1px dashed rgba(0, 255, 0, 0.3);
}

.loader-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #00FF00;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ========== ERROR/Success Messages ========== */
.message-box {
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
    font-size: 14px;
    display: none;
}

.message-box.success {
    background: rgba(0, 255, 0, 0.1);
    border-left: 4px solid #00FF00;
    color: #00FF00;
}

.message-box.error {
    background: rgba(255, 68, 68, 0.1);
    border-left: 4px solid #FF4444;
    color: #FF4444;
}






.leader-scroll-box {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 5px;
    background: #111;
    border-radius: 10px;
    padding: 15px;
}

.leader-card {
    background: linear-gradient(145deg, #1a1a1a, #111);
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    position: relative;
}

.leader-card:hover {
    transform: translateY(-3px);
    border-color: #00FF00;
    box-shadow: 0 5px 15px rgba(0, 255, 0, 0.1);
}

.leader-main {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.leader-dp {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00FF00;
    margin-right: 12px;
}

.leader-meta {
    flex: 1;
    min-width: 0;
}

.l-name {
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    display: block;
    margin-bottom: 3px;
}

.l-id {
    color: #00FF00;
    font-size: 0.8rem;
    font-weight: 600;
}

.l-upline {
    color: #888;
    font-size: 0.75rem;
    margin-top: 2px;
}

.l-working-badge {
    background: #333;
    color: #00ffff;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.leader-stats {
    display: flex;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.stat-mini {
    text-align: center;
    flex: 1;
}

.stat-mini span {
    color: #888;
    font-size: 0.7rem;
    display: block;
    margin-bottom: 5px;
}

.stat-mini .value {
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
}

.stat-mini .active-value {
    color: #00FF00;
}

.l-date {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 10px;
}

/* Working Percentage Battery */
.working-battery {
    margin-top: 10px;
}

.battery-container {
    width: 100%;
    height: 8px;
    background: #222;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
    position: relative;
}

.battery-level {
    height: 100%;
    background: linear-gradient(90deg, #ff4444, #ffa500, #00FF00);
    border-radius: 4px;
    transition: width 0.5s ease;
    width: 0%; /* JavaScript will set this */
}

.battery-percent {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #888;
}

.battery-percent .current {
    color: #fff;
    font-weight: 600;
}

.battery-percent .target {
    color: #00FF00;
}

/* Benefits Section */
.leader-benefits {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    font-size: 0.75rem;
}

.benefit-title {
    color: #ff4444;
    font-weight: 600;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.benefit-amount {
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem;
}

.benefit-desc {
    color: #aaa;
    font-size: 0.7rem;
}

/* Loading State */
.loading-leaders {
    text-align: center;
    padding: 40px 20px;
    color: #888;
}

.loading-spinner {
    border: 3px solid #333;
    border-top: 3px solid #00FF00;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Scrollbar Styling */
.leader-scroll-box::-webkit-scrollbar {
    width: 6px;
}

.leader-scroll-box::-webkit-scrollbar-track {
    background: #111;
    border-radius: 3px;
}

.leader-scroll-box::-webkit-scrollbar-thumb {
    background: #00FF00;
    border-radius: 3px;
}

/* Rank Badge */
.rank-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(45deg, #FFD700, #FFA500);
    color: #000;
    font-weight: 800;
    font-size: 0.7rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* No Active Followers Warning */
.no-active-warning {
    text-align: center;
    padding: 30px 20px;
    color: #ff4444;
    background: rgba(255, 68, 68, 0.1);
    border-radius: 10px;
    margin: 20px 0;
}

.no-active-warning i {
    font-size: 2rem;
    margin-bottom: 10px;
}


      
/* ========== SALARY SYSTEM PROFESSIONAL STYLING ========== */
.salary-system-container {
    background: linear-gradient(145deg, #0a0a0a, #111111);
    border-radius: 20px;
    border: 2px solid rgba(0, 255, 0, 0.2);
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8),
                inset 0 0 30px rgba(0, 255, 0, 0.05);
    position: relative;
    overflow: hidden;
}

/* Glowing Top Border */
.salary-system-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        #ff0000, #ff8000, #ffff00, #00ff00, 
        #00ffff, #0080ff, #8000ff, #ff00ff);
    background-size: 400% 400%;
    animation: gradientBorder 8s ease infinite;
}

@keyframes gradientBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Description Box */
.salary-description-box {
    background: rgba(0, 30, 0, 0.3);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-left: 4px solid #00FF00;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 255, 0, 0.1);
}

.salary-description-box h3 {
    color: #00FF00;
    margin-bottom: 10px;
    font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.salary-description-box p {
    color: #e0e0e0;
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.motivation-hand {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 2.5rem;
    opacity: 0.7;
    animation: floatHand 3s ease-in-out infinite;
}

@keyframes floatHand {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(10deg); }
}

/* Salary Grid Layout */
.salary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.salary-card {
    background: linear-gradient(145deg, #1a1a1a, #0f0f0f);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.salary-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 10px 25px rgba(0, 255, 0, 0.2);
}

.salary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff0080, #00cc00);
}

/* Card Colors - Different for each level */
.salary-card.beginner {
    border-left: 4px solid #00FF00;
}

.salary-card.intermediate {
    border-left: 4px solid #FFA500;
}

.salary-card.advanced {
    border-left: 4px solid #0088FF;
}

.salary-card.professional {
    border-left: 4px solid #FF00FF;
}

.salary-card.elite {
    border-left: 4px solid #FFD700;
    background: linear-gradient(145deg, #1a0f1a, #0f0a0f);
}

.salary-card.legendary {
    border-left: 4px solid #FF4444;
    background: linear-gradient(145deg, #1a0a0a, #0f0505);
}

.salary-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.follower-count {
    color: #00FF00;
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.follower-count i {
    font-size: 1.1rem;
    animation: pulseIcon 2s infinite;
}

@keyframes pulseIcon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.level-badge {
    background: rgba(0, 255, 0, 0.1);
    color: #00FF00;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.salary-amount {
    font-size: 1.8rem;
    font-weight: 900;
    margin: 10px 0;
    background: linear-gradient(45deg, #fff, #00FF00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.salary-details {
    font-size: 0.9rem;
    color: #aaa;
    margin-top: 10px;
}

.reward-bonus {
    display: inline-block;
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-top: 8px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.total-salary {
    color: #fff;
    font-weight: 700;
    margin-top: 5px;
    font-size: 1.1rem;
}

/* Mega Earnings Section */
.mega-earnings {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px dashed rgba(255, 255, 255, 0.1);
}

.mega-title {
    text-align: center;
    color: #FFD700;
    font-size: 2rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    position: relative;
}

.mega-title::before,
.mega-title::after {
    content: '⚡';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    opacity: 0.8;
}

.mega-title::before {
    left: 20%;
}

.mega-title::after {
    right: 20%;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.mega-card {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.1), rgba(255, 100, 0, 0.05));
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    animation: megaPulse 4s infinite;
}

@keyframes megaPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.4); }
}

.mega-followers {
    font-size: 2.5rem;
    color: #FFD700;
    font-weight: 900;
    margin-bottom: 15px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.mega-salary {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(45deg, #FFD700, #FFA500, #FF4500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 15px 0;
}

.mega-emoji {
    font-size: 2rem;
    margin: 15px 0;
    animation: bounceEmoji 2s infinite;
}

@keyframes bounceEmoji {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Live System Message */
.live-system-message {
    background: rgba(0, 50, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 15px;
    padding: 25px;
    margin-top: 40px;
    text-align: center;
    position: relative;
}

.live-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #ff0000, #ff8800);
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.live-system-message h4 {
    color: #00FF00;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.life-time-benefit {
    font-size: 1.1rem;
    color: #e0e0e0;
    line-height: 1.6;
    margin-bottom: 10px;
}

.blockchain-badge {
    display: inline-block;
    background: rgba(0, 100, 255, 0.1);
    color: #0088FF;
    padding: 8px 15px;
    border-radius: 25px;
    margin-top: 15px;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 100, 255, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .salary-grid {
        grid-template-columns: 1fr;
    }
    
    .mega-grid {
        grid-template-columns: 1fr;
    }
    
    .mega-salary {
        font-size: 2.5rem;
    }
    
    .salary-amount {
        font-size: 1.5rem;
    }
}


/* ========== POLICY PAGE PROFESSIONAL DESIGN ========== */
.policy-hero-section {
    background: linear-gradient(145deg, #0a0a0a, #000000);
    border-radius: 20px;
    padding: 40px 30px;
    margin-bottom: 30px;
    border: 2px solid rgba(0, 255, 0, 0.2);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.policy-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        #ff0000, #ff8000, #ffff00, #00ff00, 
        #00ffff, #0080ff, #8000ff, #ff00ff);
    background-size: 400% 400%;
    animation: gradientMove 8s linear infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}

.hero-title {
    font-size: 2.5rem;
    color: #00FF00;
    margin-bottom: 20px;
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}

.hero-subtitle {
    color: #ccc;
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}



/* Platform Comparison Section */
.platform-comparison {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}

.platform-bad {
    background: rgba(255, 0, 0, 0.1);
    border: 2px solid rgba(255, 0, 0, 0.3);
    border-radius: 15px;
    padding: 25px;
    position: relative;
}

.platform-bad h3 {
    color: #ff4444;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.platform-logos {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.logo-with-cross {
    position: relative;
    text-align: center;
}

.platform-logo {
    width: 80px;
    height: 80px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 10px;
}

.facebook-logo { background: #1877F2; }
.tiktok-logo { background: #000000; }
.youtube-logo { background: #FF0000; }

/* YE LINE CHANGE HOGI: */
.cross-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #ff0000;
    font-weight: bold;
    border-radius: 15px;
    z-index: 10;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
}

.logo-with-cross > div:last-child {
    color: #aaa;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Our System Benefits */
.our-system-benefits {
    background: rgba(0, 255, 0, 0.05);
    border: 2px solid rgba(0, 255, 0, 0.2);
    border-radius: 15px;
    padding: 30px;
    margin: 40px 0;
}

.benefits-header {
    color: #00FF00;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.benefit-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 0, 0.3);
    box-shadow: 0 10px 20px rgba(0, 255, 0, 0.1);
}

.benefit-icon {
    font-size: 2rem;
    color: #00FF00;
    margin-bottom: 15px;
}

/* Earning System Showcase */
.earning-showcase {
    background: linear-gradient(145deg, #001100, #000000);
    border-radius: 20px;
    padding: 40px 30px;
    margin: 40px 0;
    border: 2px solid rgba(0, 255, 0, 0.3);
    text-align: center;
}

.showcase-title {
    color: #00FF00;
    font-size: 2rem;
    margin-bottom: 30px;
}

.salary-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.salary-highlight {
    background: rgba(0, 255, 0, 0.05);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.highlight-amount {
    font-size: 2rem;
    font-weight: 900;
    color: #00FF00;
    margin: 10px 0;
}

/* Package Benefits */
.package-benefits {
    margin: 40px 0;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.package-card-benefit {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.unlimited-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(45deg, #ff0080, #00cc00);
    color: black;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
}

/* Lifetime System */
.lifetime-system {
    background: linear-gradient(145deg, rgba(0, 50, 0, 0.3), rgba(0, 0, 0, 0.8));
    border-radius: 20px;
    padding: 40px;
    margin: 40px 0;
    text-align: center;
    border: 2px solid rgba(0, 255, 0, 0.2);
}

.lifetime-badge {
    display: inline-block;
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00);
    color: black;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Warning Section */
.system-warning {
    background: rgba(255, 68, 68, 0.1);
    border: 2px solid rgba(255, 68, 68, 0.3);
    border-left: 6px solid #ff4444;
    border-radius: 12px;
    padding: 25px;
    margin: 40px 0;
    animation: warningPulse 2s infinite;
}

@keyframes warningPulse {
    0%, 100% { border-color: rgba(255, 68, 68, 0.3); }
    50% { border-color: rgba(255, 68, 68, 0.6); }
}

/* Time Commitment */
.time-commitment {
    background: rgba(0, 100, 255, 0.1);
    border: 2px solid rgba(0, 100, 255, 0.3);
    border-radius: 15px;
    padding: 25px;
    margin: 40px 0;
    text-align: center;
}

/* Final CTA */
.final-cta {
    text-align: center;
    padding: 40px;
    background: linear-gradient(145deg, #000000, #001a00);
    border-radius: 20px;
    margin-top: 40px;
    border: 2px dashed rgba(0, 255, 0, 0.3);
}

.cta-title {
    color: #00FF00;
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .platform-logos {
        gap: 15px;
    }
    
    .platform-logo {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .benefits-grid,
    .salary-highlights,
    .package-grid {
        grid-template-columns: 1fr;
    }
    
    .policy-hero-section,
    .earning-showcase,
    .lifetime-system {
        padding: 25px 20px;
    }
}

/* List Styling */
.benefit-list {
    list-style: none;
    padding: 0;
}

.benefit-list li {
    padding: 10px 0;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefit-list li:last-child {
    border-bottom: none;
}

.benefit-list li::before {
    content: '✅';
    color: #00FF00;
}

.highlight {
    color: #00FF00;
    font-weight: 700;
}





/* ========== UPDATED MENU STYLING ========== */
.menu-container {
    padding: 20px;
}

.menu-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
}

.menu-header h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.menu-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    opacity: 0.8;
}

.menu-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.menu-item {
    background: linear-gradient(145deg, #1a1a1a, #111111);
    border-radius: 15px;
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-color);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.menu-item:hover {
    transform: translateX(10px);
    border-color: rgba(0, 255, 0, 0.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.menu-item:hover::before {
    transform: scaleY(1);
}

.menu-item:hover .menu-icon {
    transform: scale(1.2);
}

.menu-content {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-grow: 1;
}

.menu-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background: rgba(0, 255, 0, 0.1);
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.menu-text {
    flex-grow: 1;
}

.menu-title {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.menu-description {
    color: var(--text-secondary);
    font-size: 0.8rem;
    opacity: 0.8;
}

.menu-arrow {
    color: var(--primary-color);
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.menu-item:hover .menu-arrow {
    transform: translateX(5px);
}

/* Category Badges */
.category-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 5px;
}

.badge-system { background: rgba(0, 255, 0, 0.15); color: #00FF00; }
.badge-earning { background: rgba(255, 193, 7, 0.15); color: #FFC107; }
.badge-transaction { background: rgba(33, 150, 243, 0.15); color: #2196F3; }
.badge-info { background: rgba(156, 39, 176, 0.15); color: #9C27B0; }
.badge-admin { background: rgba(244, 67, 54, 0.15); color: #F44336; }
.badge-community { background: rgba(76, 175, 80, 0.15); color: #4CAF50; }
.badge-chat { background: rgba(255, 87, 34, 0.15); color: #FF5722; }

/* Menu Categories */
.menu-category {
    margin: 25px 0 15px;
    padding-left: 10px;
    border-left: 3px solid var(--primary-color);
}

.category-title {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Special Menu Items */
.menu-item.special {
    background: linear-gradient(145deg, rgba(0, 255, 0, 0.1), rgba(0, 100, 0, 0.05));
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.menu-item.special .menu-icon {
    background: rgba(0, 255, 0, 0.2);
    animation: pulseSpecial 2s infinite;
}

@keyframes pulseSpecial {
    0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(0, 255, 0, 0.5); }
}

.menu-item.important {
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.05));
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.menu-item.important .menu-icon {
    background: rgba(255, 193, 7, 0.2);
}

/* New Chat Page Styles */
.chat-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--background-color);
    z-index: 200;
    display: none;
    flex-direction: column;
}

.chat-header {
    background: var(--primary-color);
    color: var(--background-color);
    padding: 15px;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 201;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-back-btn {
    background: none;
    border: none;
    color: var(--background-color);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
}

.chat-content {
    flex-grow: 1;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.chat-welcome {
    text-align: center;
    padding: 40px 20px;
    background: rgba(0, 255, 0, 0.05);
    border-radius: 15px;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 255, 0, 0.2);
}

.chat-welcome h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.chat-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.chat-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.chat-feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.chat-feature-card i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.chat-feature-card h4 {
    color: #fff;
    margin-bottom: 10px;
}

.chat-feature-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.chat-coming-soon {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu-item {
        padding: 15px;
    }
    
    .menu-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .chat-features {
        grid-template-columns: 1fr;
    }
}






 
/* CSS Styles for the Group Chat System */  
.groups-container {  
    padding: 20px;  
    max-width: 800px;  
    margin: 0 auto;  
}  
  
.group-card {  
    display: flex;  
    align-items: center;  
    padding: 15px;  
    background: #00FF00;  
    border-radius: 12px;  
    margin-bottom: 15px;  
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);  
    cursor: pointer;  
    transition: transform 0.2s, box-shadow 0.2s;  
    border-left: 5px solid #00FF00;  /* Green color changed */
}  
  
.group-card:hover {  
    transform: translateY(-2px);  
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);  
}  
  
.group-logo {  
    width: 60px;  
    height: 60px;  
    border-radius: 50%;  
    overflow: hidden;  
    margin-right: 15px;  
    border: 3px solid #00FF00;  /* Green color changed */
}  
  
.group-logo img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  
  
.group-info {  
    flex: 1;  
}  
  
.group-info h3 {  
    color: #333;  
    font-size: 1.1rem;  /* Reduced from 1.2rem */
    margin-bottom: 5px;  
    font-weight: 600;  
    line-height: 1.3;  /* Added for better line spacing */
}  
  
.group-meta {  
    color: #666;  
    font-size: 0.85rem;  /* Reduced from 0.9rem */
    margin-bottom: 2px;  /* Reduced from 3px */
}  
  
.group-time {  
    color: #00FF00;  /* Green color changed */
    font-size: 0.8rem;  /* Reduced from 0.85rem */
    font-weight: 500;  
}  
  
.unread-count {  
    background: #FF0000 !important; /* Red Background */
    color: #FFFFFF !important;  
    min-width: 22px;  
    height: 22px;  
    padding: 0 6px;
    border-radius: 12px;  
    display: none; /* Shuru mein chhupa rahega */
    align-items: center;  
    justify-content: center;  
    font-size: 0.75rem;  
    font-weight: bold;  
    border: 2px solid #000;
    box-shadow: 0 0 10px rgba(255,0,0,0.5);
}
  
/* Chat Interface Styles */  
.chat-container {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: #000000;  /* Black background */
    z-index: 1000;  
    display: flex;  
    flex-direction: column;  
}  
  
.chat-header {  
    background: #00FF00;  /* Green color changed */
    color: black;  /* Changed from white to black */
    padding: 10px 15px;  /* Reduced padding */
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
    height: 60px;  /* Fixed height */
}  
  
.back-btn {  
    background: none;  
    border: none;  
    color: black;  /* Changed from white to black */
    font-size: 1.3rem;  
    cursor: pointer;  
    padding: 8px;  /* Reduced padding */
}  
  
.chat-header-info {  
    display: flex;  
    align-items: center;  
    flex: 1;  
    margin-left: 10px;  /* Reduced from 15px */
}  
  
.chat-logo {  
    width: 40px;  /* Reduced from 45px */
    height: 40px;  /* Reduced from 45px */
    border-radius: 50%;  
    overflow: hidden;  
    margin-right: 10px;  /* Reduced from 12px */
    border: 2px solid black;  /* Changed from white to black */
}  
  
.chat-logo img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  
  
.chat-title {  
    flex: 1;  
    min-width: 0;  /* Added for text truncation */
}  
  
.chat-title h3 {  
    font-size: 0.95rem;  /* Reduced from 1.1rem */
    font-weight: 600;  
    margin-bottom: 0;  /* Removed margin */
    white-space: nowrap;  /* Added */
    overflow: hidden;  /* Added */
    text-overflow: ellipsis;  /* Added */
    line-height: 1.2;  /* Added */
    color: black;  /* Black text for green background */
}  
  
/* Removed update option and made online status single line */
.online-status {  
    font-size: 0.75rem;  /* Reduced from 0.85rem */
    opacity: 0.9;  
    color: #4169E1;  /* Changed to Royal Blue */
    margin-top: 2px;  
}  
  
.info-btn {  
    background: none;  
    border: none;  
    color: black;  /* Changed from white to black */
    font-size: 1.3rem;  
    cursor: pointer;  
    padding: 8px;  /* Reduced padding */
}  
  
/* Messages Area - Black Background */  
.messages-area {  
    flex: 1;  
    padding: 15px;  /* Reduced from 20px */
    overflow-y: auto;  
    background: #000000;  /* Black background */
}  
  
.message-date {  
    text-align: center;  
    color: #00FF00;  /* Changed to Royal Blue */
    font-size: 0.8rem;  /* Reduced from 0.85rem */
    margin: 15px 0;  /* Reduced from 20px */
    padding: 5px 12px;  /* Reduced padding */
    background: rgba(65, 105, 225, 0.1);  /* Blue tint */
    border-radius: 15px;  
    display: inline-block;  
    margin-left: 50%;  
    transform: translateX(-50%);  
}  
  
.message {  
    margin-bottom: 12px;  /* Reduced from 15px */
    max-width: 75%;  /* Increased from 70% */
    clear: both;  
}  
  
.system-message {  
    margin: 15px auto;  /* Reduced from 20px */
    text-align: center;  
    max-width: 90%;  
}  
  
.system-message .message-content {  
    background: rgba(65, 105, 225, 0.1);  /* Blue tint */
    padding: 8px 16px;  /* Reduced padding */
    border-radius: 20px;  
    display: inline-block;  
    border: 1px solid #00FF00(65, 105, 225, 0.3);  /* Blue border */
    color: #00FF00;  /* Blue text */
}  
  
.user-message {  
    float: right;  
}  
  
.user-message .message-content {  
    background: #00FF00;  /* Green color changed */
    color: #000;  
    padding: 10px 14px;  /* Reduced padding */
    border-radius: 18px 18px 5px 18px;  
    position: relative;  
}  
  

  .voice-message {  
    float: right;  
    width: 250px;  
    position: relative;  
    margin-left: auto;  /* NEW */
    margin-right: 0;    /* NEW */
}  
  
.voice-container {  
    background: #00FF00;  
    border-radius: 20px;  
    padding: 10px 16px;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    margin-bottom: 3px;  
    width: 100%;    /* NEW */
    min-width: 100%; /* NEW */
}
.play-btn {  
    background: #000000;  
    border: none;  
    width: 28px;  
    height: 28px;  
    border-radius: 50%;  
    color: #00FF00;  
    cursor: pointer;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 0.9rem;  
}  
  
.voice-wave {  
    display: flex;  
    align-items: center;  
    gap: 3px;  
    flex: 1;  
    margin: 0 12px;  
    height: 25px;  
    align-items: flex-end;  
}  
  
.wave-bar {  
    width: 3px;  
    background: #000;  
    border-radius: 2px;  
    animation: wave 1s infinite ease-in-out;  
}  
  
.wave-bar:nth-child(1) { height: 8px; animation-delay: 0s; }  
.wave-bar:nth-child(2) { height: 12px; animation-delay: 0.1s; }  
.wave-bar:nth-child(3) { height: 16px; animation-delay: 0.2s; }  
.wave-bar:nth-child(4) { height: 12px; animation-delay: 0.3s; }  
.wave-bar:nth-child(5) { height: 8px; animation-delay: 0.4s; }  
  
@keyframes wave {  
    0%, 100% { height: 8px; }  
    50% { height: 16px; }  
}  
  
.voice-duration {  
    color: #000;  
    font-size: 0.85rem;  
    font-weight: 500;  
}  

/* Voice message time - NEW */
.voice-message .message-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 0.7rem;
    color: #000;
    margin-top: 2px;
    text-align: right;
    padding-right: 5px;
}

/* Voice message double tick - NEW */
.voice-message .message-delivered {
    margin-left: 5px;
}

.voice-message .message-delivered i {
    color: #000;
    font-size: 0.75rem;
}
  
/* Video message - CLEAN */
.video-message {  
    float: right;  
    width: 280px;  
    position: relative;  
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 15px;
}  

.video-message video {
    width: 100%;
    height: auto;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid #00FF00;
    background: #000;
    cursor: pointer;
    display: block;
}

/* COMPLETELY HIDE ALL BROWSER CONTROLS */
.video-message video::-webkit-media-controls {
    display: none !important;
}

.video-message video::-webkit-media-controls-panel {
    display: none !important;
}

.video-message video::-webkit-media-controls-play-button {
    display: none !important;
}

.video-message video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

/* Firefox */
.video-message video::-moz-media-controls {
    display: none !important;
}


/* Video message time - NEW */
.video-message .message-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 0.7rem;
    color: #000;
    margin-top: 2px;
    text-align: right;
    padding-right: 5px;
}

/* Video message double tick - NEW */
.video-message .message-delivered {
    margin-left: 5px;
}

.video-message .message-delivered i {
    color: #000;
    font-size: 0.75rem;
}
  
.image-message {  
    float: right;  
    width: 230px;  
    position: relative;  /* 👈 Added for time positioning */
}

.image-preview {  
    width: 100%;  
    height: 180px;  
    background: #222;  
    border-radius: 10px;  
    overflow: hidden;  
    border: 3px solid #00FF00;  /* 👈 Changed: 2px to 3px */
    margin-bottom: 3px;  /* 👈 Added for time spacing */
}  
  
.image-preview img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  

/* Image message time - NEW */
.image-message .message-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 0.7rem;
    color: #000;
    margin-top: 2px;
    text-align: right;
    padding-right: 5px;
}

/* Image message double tick - NEW */
.image-message .message-delivered {
    margin-left: 5px;
}

.image-message .message-delivered i {
    color: #000;
    font-size: 0.75rem;
}
  
.message-time {  
    display: block;  
    font-size: 0.7rem;  
    color: #000;  
    margin-top: 4px;  
    text-align: right;  
}  
  
/* Message Input - Type box compact karna */
.message-input-area {  
    padding: 10px 12px 10px 8px;  
    background: #000000;  
    border-top: 1px solid #333;  
    display: flex;  
    align-items: center;  
    gap: 6px;  
}  

.attach-btn, .emoji-btn, .voice-btn, .send-btn {  
    background: none;  
    border: none;  
    font-size: 1.1rem;  
    color: #00FF00;  
    cursor: pointer;  
    padding: 8px;  
    border-radius: 50%;  
    transition: background 0.2s;  
    flex-shrink: 0;  
}  

.attach-btn:hover, .emoji-btn:hover, .voice-btn:hover, .send-btn:hover {  
    background: rgba(0, 255, 0, 0.1);  
}  

/* 👇👇👇 YAHI MAIN CHANGE HAI - TYPE BOX COMPACT 👇👇👇 */
.input-wrapper {  
    flex: 1;  
    display: flex;  
    align-items: center;  
    background: #222;  
    border-radius: 18px;  /* Thoda chhota radius */
    padding: 4px 10px 4px 8px;  /* 👈 Top:5→4, Right:10→10, Bottom:5→4, Left:10→8 */
    margin-left: -5px;  
    max-width: 75%;  /* 👈 ADDED: Maximum width 75% tak */
    margin-right: 5px;  /* 👈 ADDED: Right side se 5px gap */
}  

#messageInput {  
    flex: 1;  
    border: none;  
    background: none;  
    padding: 7px 4px;  /* 👈 Vertical:8→7, Horizontal:5→4 */
    font-size: 0.88rem;  /* 👈 0.9 se 0.88 */
    outline: none;  
    color: #4169E1;  
    width: 100%;  
}  

#messageInput::placeholder {  
    color: #666;  
}  

.send-btn {  
    background: #00FF00;  
    color: #000;  
    width: 36px;  /* 👈 38px se 36px */
    height: 36px;  
    margin-left: -6px;  /* 👈 -5px se -6px */
}  
/* 👆👆👆 TYPE BOX COMPACT CODE END 👆👆👆 */
  
/* Attachment Menu */  
.attachment-menu {  
    position: absolute;  
    bottom: 65px;  /* Reduced from 70px */
    left: 10px;  /* Reduced from 15px */
    background: #222;  /* Dark background */
    border-radius: 15px;  
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);  
    padding: 10px;  /* Reduced from 12px */
    display: grid;  
    grid-template-columns: repeat(3, 1fr);  
    gap: 10px;  /* Reduced from 12px */
    z-index: 1001;  
    border: 1px solid #00FF00;  /* Green border */
}  
  
.attachment-option {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    padding: 10px;  /* Reduced from 12px */
    border-radius: 10px;  
    cursor: pointer;  
    transition: background 0.2s;  
}  
  
.attachment-option:hover {  
    background: rgba(0, 255, 0, 0.1);  /* Green tint */
}  
  
.attachment-option i {  
    font-size: 1.5rem;  /* Reduced from 1.6rem */
    color: #00FF00;  /* Green color changed */
    margin-bottom: 5px;  /* Reduced from 6px */
}  
  
.attachment-option span {  
    font-size: 0.75rem;  /* Reduced from 0.8rem */
    color: #000;  /* Changed to Royal Blue */
}  
  

/* Group Info Modal - Center align with adjustments */
.group-info-modal {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background: rgba(0, 0, 0, 0.9);  /* Semi-transparent black */
    z-index: 1002;  
    overflow-y: auto;  
    display: flex;  /* 👈 ADDED: Flex for centering */
    justify-content: center;  /* 👈 ADDED: Horizontal center */
    align-items: flex-start;  /* 👈 ADDED: Start from top */
    padding-top: 0px;  /* 👈 ADDED: Top padding */
    padding-bottom: 40px;  /* 👈 ADDED: Bottom padding */
}  

.modal-header {  
    background: #00FF00;  
    color: black;  
    padding: 12px 20px;  /* Reduced vertical padding */
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    position: sticky;  
    top: 0;  
    z-index: 1;  
    height: 55px;  /* 👈 Reduced from 60px */
    border-radius: 10px 10px 0 0;  /* 👈 ADDED: Rounded top corners */
}  

.close-btn {  
    background: none;  
    border: none;  
    color: black;  
    font-size: 1.2rem;  
    cursor: pointer;  
    padding: 8px;  
}  

.modal-content {  
    padding: 0;  /* 👈 Changed from 20px */
    background: #000000;  
    border-radius: 15px;  /* 👈 ADDED: Rounded corners */
    width: 90%;  /* 👈 ADDED: Width control */
    max-width: 450px;  /* 👈 ADDED: Maximum width */
    box-shadow: 0 10px 30px rgba(0, 255, 0, 0.2);  /* 👈 ADDED: Green shadow */
    border: 1px solid #00FF00;  /* 👈 ADDED: Green border */
    margin: 0 auto;  /* 👈 ADDED: Center horizontally */
    position: relative;  
    top: 20px;  /* 👈 ADDED: Move down from top */
    transform: translateX(0px);  /* 👈 ADDED: Move right by 15px */
}  

.group-logo-large {  
    width: 100px;  
    height: 100px;  
    border-radius: 50%;  
    overflow: hidden;  
    margin: 25px auto 20px;  /* 👈 Increased top margin: 0→25px */
    border: 4px solid #00FF00;  
}  

.group-logo-large img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  

.group-details {  
    text-align: center;  
    margin-bottom: 25px;  
    padding: 0 20px;  /* 👈 ADDED: Side padding */
}  

.group-details h2 {  
    color: #00FF00;  
    margin-bottom: 8px;  
    font-size: 1.5rem;  
}  

.group-date {  
    color: #888;  
    margin-bottom: 15px;  
    font-size: 0.9rem;  
}  

.group-description {  
    color: #00FF00;  
    line-height: 1.6;  
    padding: 15px;  
    background: rgba(255, 255, 255, 0.05);  
    border-radius: 10px;  
    text-align: left;  
    border: 1px solid rgba(65, 105, 225, 0.3);  
    margin: 0 20px 25px 20px;  /* 👈 ADDED: Side margins */
}  

.search-section {  
    margin: 25px 0;  
    padding: 0 20px;  /* 👈 ADDED: Side padding */
}  

.search-box {  
    display: flex;  
    align-items: center;  
    background: #222;  
    border-radius: 25px;  
    padding: 8px 15px;  
    margin-bottom: 15px;  
    border: 1px solid #00FF00;  
}  

.search-box i {  
    color: #00FF00;  
    margin-right: 8px;  
}  

#contactSearch {  
    flex: 1;  
    border: none;  
    background: none;  
    font-size: 0.95rem;  
    outline: none;  
    color: #00FF00;  
}  

#contactSearch::placeholder {  
    color: #666;  
}  

.search-results {  
    background: #222;  
    border-radius: 10px;  
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);  
    max-height: 250px;  
    overflow-y: auto;  
    padding: 10px;  
    border: 1px solid #00FF00;  
    margin: 0 20px;  /* 👈 ADDED: Side margins */
}  

.group-stats {  
    display: flex;  
    justify-content: space-around;  
    margin: 30px 0 25px 0;  /* 👈 Adjusted margins */
    padding: 20px 20px 25px 20px;  /* 👈 Added padding */
    border-top: 1px solid #333;  
    width: 100%;  
}  

.stat-item {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
}  

.stat-number {  
    font-size: 1.5rem;  
    font-weight: bold;  
    color: #4169E1;  
    margin-bottom: 4px;  
}  

.stat-label {  
    color: #888;  
    font-size: 0.85rem;  
}    
  
/* Animation for message */  
@keyframes fadeIn {  
    from { opacity: 0; transform: translateY(10px); }  
    to { opacity: 1; transform: translateY(0); }  
}  
  
.message {  
    animation: fadeIn 0.3s ease-out;  
}  

/* Scrollbar styling for black background */
.messages-area::-webkit-scrollbar {
    width: 6px;
}

.messages-area::-webkit-scrollbar-track {
    background: #000000;
}

.messages-area::-webkit-scrollbar-thumb {
    background: #000;  /* Changed to Royal Blue */
    border-radius: 3px;
}

.messages-area::-webkit-scrollbar-thumb:hover {
    background: #000;
}

/* Emoji button color fix */
.emoji-btn {
    color: #00FF00 !important;  /* Changed to Royal Blue */
}

/* Change all white colors to blue */
.system-message .message-content,
.message-date,
.message-time,
.online-status,
.attachment-option span,
.group-details h2,
.group-description,
.search-box i,
#contactSearch,
.stat-number,
.emoji-btn {
    color: #00FF00 !important;  /* Royal Blue */
}

/* Make sure text in group info is blue */
.group-details h2,
.group-description {
    color: #00FF00 !important;
}

/* Adjust input text color */
#messageInput,
#contactSearch {
    color: #00FF00 !important;
}

/* Blue hover effects */
.attachment-option:hover {
    background: rgba(65, 105, 225, 0.1) !important;  /* Blue tint */
}

/* Message time in blue */
.message-time {
    color: #000 !important;
}

/* System message border in blue */
.system-message .message-content {
    border: 1px solid rgba(65, 105, 225, 0.3) !important;
}

/* ===== NEW CSS FOR ADVANCED FEATURES ===== */

/* Admin controls - NEW */
.admin-badge {
    background: #00FF00;
    color: #000;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    margin-left: 5px;
}

.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #333;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-dp {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #00FF00;
    object-fit: cover;
}

.user-dp-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00FF00;
    font-weight: bold;
}

.admin-action-btn {
    background: #00FF00;
    color: #000;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s;
}

.admin-action-btn:hover {
    background: #00cc00;
    transform: scale(1.05);
}

.show-more-btn {
    width: 100%;
    background: #333;
    color: #00FF00;
    border: none;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}

.show-more-btn:hover {
    background: #444;
}

/* Message reactions - NEW */
.message-reactions {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.reaction-item {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid #00FF00;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s;
}

.reaction-item:hover {
    background: rgba(0, 255, 0, 0.2);
    transform: scale(1.1);
}

/* Reaction menu - NEW */
.reaction-menu {
    position: fixed !important;
    z-index: 10000 !important;
    background: #000 !important;
    border: 1px solid #00FF00 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 5px !important;
    max-width: 300px !important;
    max-height: 200px !important;
    overflow: auto !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3) !important;
}


/* ===== VOICE & MEDIA PREVIEW STYLING ===== */

/* Voice button recording state */
#voiceBtn.recording {
    background: #FF0000 !important;
    color: white !important;
    animation: pulse 1s infinite;
}

/* Pulse animation for recording */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Recording dot animation */
.recording-dot {
    animation: recordingPulse 1s infinite;
}

@keyframes recordingPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Media preview container animation */
#mediaPreviewContainer {
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 5px 20px rgba(0, 255, 0, 0.3);
}

@keyframes slideUp {
    from { 
        transform: translateY(100px); 
        opacity: 0; 
    }
    to { 
        transform: translateY(0); 
        opacity: 1; 
    }
}

/* Preview content styling */
#previewContent img,
#previewContent video,
#previewContent audio {
    max-width: 100%;
    border-radius: 10px;
}

/* Caption input focus */
#captionInput:focus {
    outline: none;
    border-color: #00FF00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

/* Send button loading spinner */
#sendMediaBtn .fa-spinner {
    margin: 0;
}



/* ===== MEDIA PREVIEW IMPROVEMENTS ===== */

#mediaPreviewContainer {
    animation: slideUp 0.3s ease-out;
    box-shadow: 0 5px 30px rgba(0, 255, 0, 0.5);
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.95);
}

/* Preview content */
#previewContent {
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    padding: 10px;
}

/* Caption textarea - auto expanding */
#captionInput {
    transition: all 0.3s ease;
    font-family: inherit;
    line-height: 1.4;
}

#captionInput:focus {
    border-color: #00FF00;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
    background: #1a1a1a;
}

/* Button styling */
#cancelMediaBtn, #sendMediaBtn {
    transition: all 0.3s ease;
    font-size: 0.9rem;
    border: 2px solid transparent;
}

#cancelMediaBtn:hover {
    background: #cc0000 !important;
    transform: translateY(-2px);
    border-color: #FF0000;
}

#sendMediaBtn:hover {
    background: #00cc00 !important;
    transform: translateY(-2px);
    border-color: #00FF00;
}

#sendMediaBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Close button */
#closePreviewBtn:hover {
    color: #FF0000 !important;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

/* Preview file name */
#previewContent div {
    word-break: break-all;
    padding: 5px;
    background: rgba(0, 255, 0, 0.1);
    border-radius: 5px;
    margin-top: 5px;
}



/* Caption styling for media messages */
.caption-box {
    margin-bottom: 10px;
    padding: 10px 15px;
    background: rgba(0, 255, 0, 0.1);
    border-radius: 12px;
    border-left: 4px solid #00FF00;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.caption-text {
    color: #00FF00;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Media with caption spacing */
.media-with-caption {
    margin-top: 8px;
}


/* Back to notification button */
.back-to-notification-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #00FF00;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-right: 5px;
}

.back-to-notification-btn:hover {
    background: rgba(0, 255, 0, 0.1);
    transform: scale(1.1);
}

.back-to-notification-btn i {
    font-size: 1rem;
}

#adminUpdatesBtn, #adminControlBtn {
    display: none !important;
}




/* Back to Notification Button (Chat - Bottom Right) */
.back-to-notification-btn {
    position: fixed;
    bottom: 60px;              /* thoda upar */
    right: 2px;               /* right corner */
    
    width: 44px;
    height: 44px;
    border-radius: 50%;
    
    background: linear-gradient(135deg, #00FF00, #00FF00); /* green */
    color: #000;
    
    border: none;
    outline: none;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 18px;
    cursor: pointer;
    
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    
    transition: all 0.25s ease;
}

/* Hover effect */
.back-to-notification-btn:hover {
    transform: translateY(-3px) scale(1.05);
    background: linear-gradient(135deg, #00FF00, #00FF00);
}

/* Mobile safe touch */
.back-to-notification-btn:active {
    transform: scale(0.95);
}




/* User Posts Container */
.user-posts-container {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    padding: 20px;
    margin-top: 25px;
    border: 1px solid rgba(0, 255, 0, 0.3);
    box-shadow: 0 5px 20px rgba(0, 255, 0, 0.1);
}

.user-post-item {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 4px solid #00FF00;
    transition: all 0.3s ease;
}

.user-post-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 255, 0, 0.2);
}

.post-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-left: 10px;
}

.status-pending { background: #FFA500; color: #000; }
.status-approved { background: #00FF00; color: #000; }
.status-rejected { background: #FF4444; color: #FFF; }






    /* --- POSTING SYSTEM STYLES (PLAN COMPLIANT) --- */
    :root {
        --primary-green: #00FF00;
        --dark-bg: #000000;
        --card-bg: #1a1a1a;
        --text-black: #000000;
        --text-white: #ffffff;
    }

    .post-card {
        background: var(--card-bg);
        border-radius: 15px;
        margin-bottom: 25px;
        overflow: hidden;
        border: 2px solid var(--primary-green);
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.4);
        position: relative;
    }

    .post-header-info {
        padding: 12px 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--primary-green);
        color: var(--text-black);
    }

    .post-user-dp {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 2px solid var(--text-black);
        object-fit: cover;
    }
    
    .post-user-name {
        font-weight: 900;
        font-size: 1rem;
        text-transform: uppercase;
    }

    .post-status-badge {
        margin-left: auto;
        background: var(--text-black);
        color: var(--primary-green);
        padding: 4px 12px;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 900;
    }

    .post-content-area {
    min-height: auto;     /* 👈 extra vertical space khatam */
}

    .post-media {
        width: 100%;
        display: block;
        max-height: 600px;
        object-fit: contain;
    }

    /* Description: Green Background, Black Bold Text */
    .post-description-box {
    background: var(--primary-green);
    color: var(--text-black);

    padding: 6px 10px;     /* 👈 tight height */
    margin: 0;

    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;     /* 👈 line gap kam */
}


   .post-description-text {
    width: 100%;
    white-space: normal;      /* 👈 extra line breaks band */
    word-break: break-word;

    display: block;
    margin: 0;
    padding: 0;

    text-align: left;
    direction: ltr;
}

.post-description-text {
    position: relative;
    cursor: pointer;
}

/* 3-line clamp */
.post-description-text.clamped .desc-inner {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.more-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 30px;
    font-weight: 900;
    font-size: 0.85rem;
    background: linear-gradient(to right, rgba(0,255,0,0), #00ff00 70%);
    color: #000;
    display: none;   /* 👈 default hide */
}



/* Tags thode professional gap ke sath */
.inline-tags {
    margin-left: 8px;
    font-weight: 800;
}


.post-description-text:lang(ur),
.post-description-text:lang(ar) {
    direction: rtl;
    text-align: right;
}

    .read-more-btn {
        color: var(--text-black);
        font-weight: 900;
        cursor: pointer;
        text-decoration: underline;
        display: block;
        margin-top: 10px;
        font-size: 0.85rem;
    }

    /* Interactions Bar */
   .post-interactions {
    display: flex;
    justify-content: space-between; /* 👈 left-right khula */
    align-items: center;
    padding: 12px 18px; /* 👈 sides se thoda space */
    background: var(--card-bg);
} 
    

    .interaction-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

    /* Emoji Menu */
    .emoji-menu {
        position: absolute;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--card-bg);
        border: 3px solid var(--primary-green);
        border-radius: 35px;
        padding: 12px 25px;
        display: none;
        gap: 15px;
        z-index: 100;
        box-shadow: 0 0 30px rgba(0, 255, 0, 0.6);
    }

    .emoji-item { font-size: 2rem; cursor: pointer; transition: transform 0.2s; }
    .emoji-item:hover { transform: scale(1.4); }

    /* Comment Overlay */
    .comment-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.98);
        z-index: 10000;
        display: none;
        flex-direction: column;
    }

    .comment-header {
        padding: 15px;
        background: var(--primary-green);
        color: var(--text-black);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 900;
        font-size: 1.3rem;
    }

    .comment-list { flex-grow: 1; overflow-y: auto; padding: 20px; }
    .comment-item { display: flex; gap: 15px; margin-bottom: 20px; }
    .comment-bubble {
        background: var(--primary-green);
        color: var(--text-black);
        padding: 12px 20px;
        border-radius: 20px;
        font-weight: 800;
        max-width: 85%;
        box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    }

    .comment-input-area {
        padding: 20px;
        background: var(--card-bg);
        display: flex;
        gap: 15px;
        align-items: center;
        border-top: 3px solid var(--primary-green);
    }

    .comment-input {
        flex-grow: 1;
        background: #111;
        border: 2px solid var(--primary-green);
        border-radius: 30px;
        padding: 15px 25px;
        color: white;
        font-weight: 700;
    }

    .comment-close-btn {
        background: var(--text-black);
       
        border: none;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        font-weight: 900;
        cursor: pointer;
        font-size: 1.2rem;
    }

    /* Admin & User Buttons */
    .admin-actions { display: flex; padding: 12px; gap: 12px; background: #000; }
    .approve-btn { background: var(--primary-green); color: black; flex: 1; padding: 15px; border: none; border-radius: 10px; font-weight: 900; cursor: pointer; text-transform: uppercase; }
    .reject-btn { background: #FF0000; color: white; flex: 1; padding: 15px; border: none; border-radius: 10px; font-weight: 900; cursor: pointer; text-transform: uppercase; }
    
    .delete-post-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(255, 0, 0, 0.9);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 8px 15px;
        font-weight: 900;
        cursor: pointer;
        z-index: 10;
    }

    /* Progress Bar */
    .upload-progress-container {
        display: none;
        margin-top: 20px;
        background: #111;
        padding: 15px;
        border-radius: 12px;
        border: 1px solid var(--primary-green);
    }
    .upload-progress-bar { height: 10px; background: #333; border-radius: 5px; overflow: hidden; }
    .upload-progress { height: 100%; background: var(--primary-green); width: 0%; transition: width 0.4s; }
    .upload-status-text { color: var(--primary-green); font-weight: 800; margin-bottom: 8px; text-align: center; }
    
    
    /* Hashtags Styling */
.hashtags-container {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px dashed rgba(0, 255, 0, 0.5);
}

.hashtag {
    background: #00FF00;
    color: #000;
    padding: 4px 12px;
    border-radius: 20px;
    margin: 5px 8px 5px 0;
    font-size: 0.85rem;
    font-weight: 900;
    display: inline-block;
    border: 2px solid #000;
}

.hashtag-in-text {
    background: #00FF00;
    color: #000;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 900;
    margin: 0 3px;
}

/* Video Element Styling */
.post-media {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    border-radius: 10px;
    transition: border 0.3s ease;
}

/* Audio indicator */
.video-audio-on {
    border: 3px solid #00FF00 !important;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

/* Custom controls styling */
video::-webkit-media-controls-panel {
    background: rgba(0, 0, 0, 0.7);
}

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button {
    filter: invert(1);
}


/* Three Dot Menu - User Videos */
.three-dot-menu {
    position: relative;
    margin-left: auto;
    z-index: 100;
}

.three-dot-btn {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #00FF00;
    color: #00FF00;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s;
    margin-left: 10px;
}

.three-dot-btn:hover {
    background: #00FF00;
    color: #000;
    transform: scale(1.1);
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 40px;
    background: #1a1a1a;
    border: 2px solid #00FF00;
    border-radius: 10px;
    min-width: 180px;
    z-index: 1000;
    box-shadow: 0 5px 20px rgba(0, 255, 0, 0.3);
    overflow: hidden;
}

.dropdown-menu a {
    display: block;
    padding: 12px 15px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #333;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.dropdown-menu a:hover {
    background: #00FF00;
    color: #000;
}

.dropdown-menu a i {
    margin-right: 10px;
    width: 18px;
    text-align: center;
}

.delete-option {
    color: #FF3333 !important;
}

.delete-option:hover {
    background: #FF3333 !important;
    color: white !important;
}

.post-description-text strong,
.post-description-text em {
    font-weight: inherit;
    font-style: normal;
}



.foru-loader-ring {
    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.foru-loader-ring::before {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    background:conic-gradient(
        red, orange, yellow, lime, cyan, blue, magenta, red
    );
    animation: spin 1.2s linear infinite;
    filter: blur(1px);
}

.foru-loader-ring::after {
    content:'';
    position:absolute;
    width:78px;
    height:78px;
    background:#000;
    border-radius:50%;
    z-index:1;
}

@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}


@keyframes pulseText {
    0% { opacity:0.4; }
    50% { opacity:1; }
    100% { opacity:0.4; }
}



/* ===== INTERACTION SIZE FIX (ORIGINAL FEEL) ===== */

/* Like 👍 (perfect, jaisa aapko pasand) */
.emoji-like {
    font-size: 1.5rem;
}

/* Comment 💬 (thoda chhota) */
.emoji-comment {
    font-size: 1.35rem;
}

/* View 👁️ (natural, bilkul normal) */
.emoji-view {
    font-size: 1.35rem;
}

/* Download circle thoda compact */
.download-circle {
    width: 36px;
    height: 36px;
}



/* Count text (numbers) */
.interaction-count {
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: 800;
    margin-top: 2px;
    color: var(--primary-green);
}


/* ===== CENTER ITEMS BALANCE ===== */

.post-interactions .interaction-item:nth-child(2),
.post-interactions .interaction-item:nth-child(3) {
    margin: 0 10px; /* 👈 comment & view ke beech space */
}


/* ===== COMMENT CLOSE BUTTON FLOAT FIX ===== */

.comment-close-btn {
    position: fixed;
    bottom: 120px;              /* 👈 send button se thoda upar */
    right: 10px;               /* 👈 right side */
    background: var(--primary-green);
    color: #000;
    z-index: 10001;

    box-shadow: 0 0 15px rgba(0,255,0,0.6);
}

/* hover thoda zinda feel */
.comment-close-btn:hover {
    transform: scale(1.1);
}


/* ===== SIMPLE & STABLE DOWNLOAD BUTTON ===== */

.download-circle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e60000;                 /* 🔴 red */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(255,0,0,0.6);
}

/* pulse animation (idle + downloading same) */
.download-circle.downloading {
    animation: redPulse 1.2s ease-in-out infinite;
}

/* white arrow */
.download-arrow {
    position: relative;
    width: 4px;
    height: 14px;
    background: #fff;
    border-radius: 2px;
}

/* arrow head */
.download-arrow::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
}

/* green seconds (LEFT SIDE) */
.download-progress {
    position: absolute;
    left: -22px;                /* 👈 LEFT side */
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 800;
    color: #00ff00;
    display: none;
    white-space: nowrap;
}

/* show seconds while downloading */
.download-circle.downloading .download-progress {
    display: block;
}

/* pulse effect */
@keyframes redPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255,0,0,0.5);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 16px rgba(255,0,0,0.9);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255,0,0,0.5);
    }
}





.post-title { font-weight:700; font-size:1rem; margin-bottom:5px; color:#00ff00; }
.post-description-box { padding:6px 12px; font-size:0.9rem; color:#ddd; line-height:1.4; }
.post-tags { font-size:0.85rem; color:#00ff00; margin-top:4px; display:inline-block; }




/* Main Card */
.post-creation-card {
    background: linear-gradient(145deg, #0a0a0a, #111);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 22px;
    padding: 22px;
    margin: 20px auto;
    width: 95%;
    box-shadow:
        0 0 25px rgba(0, 255, 0, 0.15),
        inset 0 0 20px rgba(0, 255, 0, 0.05);
}

/* Each Field Block */
.post-field {
    margin-bottom: 18px;
}

/* Label */
.post-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary-color);
}

/* Title Input */
.post-title-input {
    width: 100%;
    background: #050505;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    outline: none;
    transition: 0.3s;
}

.post-title-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.25);
}

/* Description Textarea */
.premium-post-input {
    height: 120px;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Tags Input */
.post-tags-input {
    width: 100%;
    background: #050505;
    border: 1px dashed #333;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.85rem;
    color: #ccc;
    outline: none;
    transition: 0.3s;
}

.post-tags-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

/* Placeholder Styling */
.post-title-input::placeholder,
.premium-post-input::placeholder,
.post-tags-input::placeholder {
    color: #555;
}

/* Header Search Toggle */
.header-search-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    color: #000;
    font-weight: 700;
}

.header-search-toggle i {
    font-size: 1.3rem;
}

.header-search-toggle small {
    font-size: 0.6rem;
    margin-top: 2px;
}

/* Search Bar Hidden by default */
.header-search-bar {
    display: none;
    align-items: center;
    gap: 8px;
    width: 100%;
    animation: slideIn 0.3s ease;
}

.header-search-bar input {
    flex: 1;
    background: #000;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff;
    outline: none;
}

.search-go-btn {
    background: var(--primary-color);
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

.search-close-btn {
    background: #111;
    border: 1px solid #333;
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* Slide Animation */
@keyframes slideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}



/* Naya CSS for Search Results Overlay */
.search-results-overlay {
    position: fixed;
    top: 110px; /* Header aur Main Nav ke neeche */
    left: 0;
    width: 100%;
    height: calc(100% - 110px);
    background: rgba(0, 0, 0, 0.95); /* Thoda transparent black background */
    z-index: 95; /* Main Nav (90) se upar, Header (100) se neeche */
    display: none; /* By default hidden rahega */
    overflow-y: auto;
    padding: 10px;
}

.search-results-list {
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 0;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: var(--secondary-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-item:hover {
    background: rgba(0, 255, 0, 0.1);
}

.search-result-dp {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid var(--primary-color);
}

.search-result-name {
    font-weight: 600;
    color: var(--text-color);
}




.post-description-text {
    color: #000;
    font-weight: 500;
    line-height: 1.45;
}
.post-description-text .desc-inner {
    color: #000;
    font-weight: 500;
}

.post-user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer; /* Isse mouse ka icon badal jayega, jo batayega ki yeh clickable hai */
}





 
.nav-btn{  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  gap: 4px;  
  padding: 8px 12px;  
  background: none;  
  border: none;  
  outline: none;       /* focus outline remove */  
  cursor: pointer;  
  user-select: none;   /* accidental select prevent */  
}  
  
/* NORMAL STATE */  
.nav-btn .icon{  
  font-size: 1rem;  
  color: #000000;       /* default black */  
  display: inline-block;  
}  
  
.nav-btn .text{  
  font-size: 0.9rem;  
  font-weight: bold;  
  color: #999999;       /* default grey */  
}  
  

  
/* ACTIVE STATE */  
.nav-btn.active .icon,  
.nav-btn.active .text{  
  color: #00FF00 !important;   /* force green */  
}  
  
.nav-btn.active .line{  
  background: #00FF00;  
}  

.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: #333333;   /* light grey background */
  border-bottom: 1px solid #333333;
}

.search-input {
  flex: 1;                        /* input takes available width */
  padding: 8px 12px;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
}

.search-input:focus {
  border-color: #00FF00;          /* green focus */
}

.search-btn {
  padding: 8px 16px;
  font-size: 0.9rem;
  background-color: #00FF00;      /* green button */
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.search-btn:hover {
  background-color: #00cc00;
}

/* Grid Loader Style */
.grid-loader-container {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    color: #00FF00;
    font-weight: bold;
}







.magic-bulb-btn {
    position: relative;
    padding: 5px; /* Border thickness */
    background: transparent;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Rotating Rainbow Border */
.magic-bulb-btn::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    animation: rotateBorder 3s linear infinite;
    z-index: 1;
}

.btn-inner {
    position: relative;
    z-index: 3;
    background: #111;
    padding: 12px 25px;
    border-radius: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 800;
    width: 100%;
}

.bulb-glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    animation: bulbPulse 1.5s infinite;
}

@keyframes rotateBorder {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bulbPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.btn-inner i {
    font-size: 1.2rem;
    animation: iconColor 2s infinite;
}

@keyframes iconColor {
    0% { color: #ff0000; }
    33% { color: #00ff00; }
    66% { color: #0000ff; }
    100% { color: #ff0000; }
}


.page-wrapper {
  min-height: 100vh;
  background: #000;
  overflow-y: auto;
}

/* ================================================================= */
/* === NAYA, UPDATED LIVE ONLINE COUNTER KA STYLE === */
/* ================================================================= */

#live-online-counter {
    margin-left: auto;
    display: flex;
    /* YAHAN ASAL TABDEELI HAI: Ab cheezein upar se neeche hongi */
    flex-direction: column; 
    align-items: flex-end; /* Har cheez ko right side per align karega */
    gap: 4px; /* Text aur DPs ke darmiyan thora sa faasla */
}

#live-online-counter .counter-text {
    display: flex; /* "Online" aur ginti ko ek line mein rakhega */
    align-items: center;
    gap: 6px; /* "Online" aur ginti ke darmiyan faasla */
    font-size: 0.8em;
    color: #b0b3b8;
}

#live-online-counter .counter-text strong {
    font-size: 1.1em; /* Ginti ka size thora chota kar diya */
    font-weight: 700;
    color: #2ecc71;
    text-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
}

#live-online-counter .dp-stack {
    display: flex;
    padding-left: 12px; /* Pehli DP ke liye jagah */
}

#live-online-counter .dp-stack .stacked-dp {
    width: 28px; /* DP ka size chota kar diya */
    height: 28px; /* DP ka size chota kar diya */
    border-radius: 50%;
    border: 2px solid #1a1d21; /* Darker border */
    margin-left: -12px; /* DPs ko thora aur qareeb kar diya */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}
#live-online-counter .dp-stack .stacked-dp:hover {
    transform: translateY(-4px);
}


    
/* Chat Header ko Relative banana taake counter iske hisab se position le */
.chat-header {
    position: relative; 
}

/* Online Counter ki Main Styling */
#live-online-counter {
    position: absolute; 
    top: 100%;          
    right: 15px;        
    margin-top: 10px;   
    
    background: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 8px 12px;
    z-index: 5;
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(0, 255, 0, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    min-width: 120px;
}

#live-online-counter .counter-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

#live-online-counter .counter-text span {
    color: #00FF00;
    font-weight: bold;
}

#live-online-counter .counter-text strong {
    font-size: 1rem;
    color: #fff;
}

#live-online-counter .dp-stack {
    display: flex;
    padding-left: 10px;
}

#live-online-counter .dp-stack .stacked-dp {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid #000;
    margin-left: -10px;
    object-fit: cover;
    transition: transform 0.2s ease;
}

#live-online-counter .dp-stack .stacked-dp:hover {
    transform: translateY(-3px);
}