{"id":266,"date":"2026-06-12T04:55:37","date_gmt":"2026-06-12T04:55:37","guid":{"rendered":"https:\/\/cashchat.se\/dir\/?page_id=266"},"modified":"2026-06-13T22:27:11","modified_gmt":"2026-06-13T22:27:11","slug":"v5","status":"publish","type":"page","link":"https:\/\/cashchat.se\/dir\/","title":{"rendered":"v5"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover\">\n<title>CashChat Strip | Advertiser + Admin Dual Login | Approve Users<\/title>\n<!-- Font Awesome 6 -->\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n<!-- Google Fonts -->\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&#038;display=swap\" rel=\"stylesheet\">\n<!-- SheetJS + jsPDF -->\n<script src=\"https:\/\/cdn.sheetjs.com\/xlsx-0.20.2\/package\/dist\/xlsx.full.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf-autotable\/3.8.2\/jspdf.plugin.autotable.min.js\"><\/script>\n<style>\n    :root {\n        --primary: #6366f1;\n        --primary-dark: #4f46e5;\n        --secondary: #8b5cf6;\n        --success: #10b981;\n        --success-dark: #059669;\n        --warning: #f59e0b;\n        --danger: #ef4444;\n        --dark: #1e293b;\n        --darker: #0f172a;\n        --light: #f8fafc;\n        --gray: #94a3b8;\n        --card-bg: #ffffff;\n        --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n        --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n        --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);\n        --gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n        --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);\n        --shadow-md: 0 4px 6px rgba(0,0,0,0.07);\n        --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);\n        --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);\n        --shadow-2xl: 0 25px 50px rgba(0,0,0,0.25);\n    }\n    \n    * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n        font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;\n    }\n    \n    body {\n        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        background-attachment: fixed;\n        min-height: 100vh;\n        position: relative;\n    }\n    \n    body::before {\n        content: '';\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\n        pointer-events: none;\n        z-index: 0;\n    }\n    \n    .app-container {\n        position: relative;\n        z-index: 1;\n        max-width: 1600px;\n        margin: 0 auto;\n        padding: 20px;\n    }\n    \n    \/* Dual Login Panels *\/\n    .dual-login-container {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 30px;\n        justify-content: center;\n        align-items: stretch;\n        max-width: 1000px;\n        margin: 60px auto;\n        position: relative;\n    }\n    \n    .login-card {\n        background: rgba(255, 255, 255, 0.95);\n        backdrop-filter: blur(20px);\n        border-radius: 24px;\n        padding: 40px 32px;\n        flex: 1;\n        min-width: 300px;\n        box-shadow: var(--shadow-2xl);\n        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n        position: relative;\n        overflow: hidden;\n    }\n    \n    .login-card::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 4px;\n    }\n    \n    .login-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 30px 60px rgba(0,0,0,0.3);\n    }\n    \n    .advertiser-card::before {\n        background: var(--gradient-4);\n    }\n    \n    .admin-card::before {\n        background: var(--gradient-2);\n    }\n    \n    .login-icon {\n        width: 60px;\n        height: 60px;\n        border-radius: 20px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 24px;\n        margin-bottom: 24px;\n        color: white;\n    }\n    \n    .advertiser-card .login-icon {\n        background: var(--gradient-4);\n    }\n    \n    .admin-card .login-icon {\n        background: var(--gradient-2);\n    }\n    \n    .login-card h2 {\n        margin-bottom: 8px;\n        font-size: 1.8rem;\n        font-weight: 800;\n        color: var(--dark);\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n    \n    .login-subtitle {\n        color: var(--gray);\n        margin-bottom: 32px;\n        font-size: 0.9rem;\n        font-weight: 500;\n    }\n    \n    .form-group {\n        margin-bottom: 20px;\n        position: relative;\n    }\n    \n    .form-group label {\n        display: block;\n        margin-bottom: 8px;\n        font-weight: 600;\n        color: var(--dark);\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n    }\n    \n    .input-wrapper {\n        position: relative;\n    }\n    \n    .input-wrapper i {\n        position: absolute;\n        left: 16px;\n        top: 50%;\n        transform: translateY(-50%);\n        color: var(--gray);\n        transition: color 0.3s;\n    }\n    \n    .login-card input, .modern-input {\n        width: 100%;\n        padding: 14px 16px 14px 48px;\n        border-radius: 16px;\n        border: 2px solid #e2e8f0;\n        font-size: 0.95rem;\n        font-weight: 500;\n        transition: all 0.3s;\n        background: #f8fafc;\n    }\n    \n    .login-card input:focus, .modern-input:focus {\n        outline: none;\n        border-color: var(--primary);\n        background: white;\n        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);\n    }\n    \n    .login-card input:focus + i, .input-wrapper:focus-within i {\n        color: var(--primary);\n    }\n    \n    .btn {\n        width: 100%;\n        padding: 14px;\n        border-radius: 16px;\n        font-weight: 700;\n        font-size: 1rem;\n        cursor: pointer;\n        transition: all 0.3s;\n        border: none;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        position: relative;\n        overflow: hidden;\n    }\n    \n    .btn::after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 0;\n        height: 0;\n        border-radius: 50%;\n        background: rgba(255,255,255,0.3);\n        transform: translate(-50%, -50%);\n        transition: width 0.6s, height 0.6s;\n    }\n    \n    .btn:active::after {\n        width: 300px;\n        height: 300px;\n    }\n    \n    .btn-primary {\n        background: var(--gradient-1);\n        color: white;\n    }\n    \n    .btn-primary:hover {\n        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);\n        transform: translateY(-2px);\n    }\n    \n    .btn-success {\n        background: var(--gradient-4);\n        color: white;\n    }\n    \n    .btn-success:hover {\n        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4);\n        transform: translateY(-2px);\n    }\n    \n    .btn-danger {\n        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n        color: white;\n    }\n    \n    .btn-warning {\n        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n        color: white;\n    }\n    \n    .error-msg {\n        color: var(--danger);\n        font-size: 0.85rem;\n        margin-top: 12px;\n        text-align: center;\n        font-weight: 500;\n    }\n    \n    .success-msg {\n        color: var(--success);\n        font-size: 0.85rem;\n        margin-top: 12px;\n        text-align: center;\n        font-weight: 500;\n    }\n    \n    .divider {\n        margin: 24px 0;\n        border: none;\n        border-top: 1px solid #e2e8f0;\n        position: relative;\n    }\n    \n    .divider span {\n        position: absolute;\n        top: -12px;\n        left: 50%;\n        transform: translateX(-50%);\n        background: white;\n        padding: 0 16px;\n        color: var(--gray);\n        font-size: 0.85rem;\n        font-weight: 500;\n    }\n    \n    \/* Main App Styles *\/\n    .app {\n        display: none;\n    }\n    \n    .app-header {\n        background: rgba(255, 255, 255, 0.95);\n        backdrop-filter: blur(20px);\n        border-radius: 24px;\n        padding: 20px 24px;\n        margin-bottom: 24px;\n        box-shadow: var(--shadow-lg);\n    }\n    \n    .flex-between {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 16px;\n    }\n    \n    .tabs {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 8px;\n        background: #f1f5f9;\n        padding: 6px;\n        border-radius: 20px;\n    }\n    \n    .tab-btn {\n        background: transparent;\n        color: #64748b;\n        padding: 10px 20px;\n        border-radius: 16px;\n        font-weight: 600;\n        border: none;\n        cursor: pointer;\n        font-size: 0.9rem;\n        transition: all 0.3s;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n    \n    .tab-btn:hover {\n        background: rgba(255,255,255,0.7);\n        color: var(--dark);\n    }\n    \n    .tab-btn.active {\n        background: white;\n        color: var(--primary);\n        box-shadow: var(--shadow-md);\n    }\n    \n    .user-info {\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        background: #f8fafc;\n        padding: 8px 16px;\n        border-radius: 20px;\n    }\n    \n    .user-email {\n        font-weight: 700;\n        color: var(--dark);\n        font-size: 0.9rem;\n    }\n    \n    .user-badge {\n        background: var(--gradient-1);\n        color: white;\n        padding: 4px 12px;\n        border-radius: 12px;\n        font-size: 0.75rem;\n        font-weight: 700;\n    }\n    \n    .logout-btn {\n        background: var(--danger);\n        color: white;\n        border: none;\n        padding: 10px 20px;\n        border-radius: 16px;\n        font-weight: 600;\n        cursor: pointer;\n        transition: all 0.3s;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n    \n    .logout-btn:hover {\n        background: #dc2626;\n        transform: translateY(-2px);\n        box-shadow: 0 10px 25px rgba(239, 68, 68, 0.4);\n    }\n    \n    .panel {\n        background: rgba(255, 255, 255, 0.95);\n        backdrop-filter: blur(20px);\n        border-radius: 24px;\n        padding: 32px;\n        margin-bottom: 24px;\n        box-shadow: var(--shadow-lg);\n        transition: all 0.3s;\n    }\n    \n    .panel-title {\n        font-size: 1.5rem;\n        font-weight: 800;\n        color: var(--dark);\n        margin-bottom: 24px;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n    \n    .panel-title i {\n        background: var(--gradient-1);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n    }\n    \n    \/* Strip Styles *\/\n    .strip-container {\n        background: var(--darker);\n        border-radius: 24px;\n        padding: 24px 16px;\n        overflow-x: hidden;\n        box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);\n        position: relative;\n    }\n    \n    .strip-container::before,\n    .strip-container::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 60px;\n        z-index: 2;\n        pointer-events: none;\n    }\n    \n    .strip-container::before {\n        left: 0;\n        background: linear-gradient(to right, var(--darker), transparent);\n    }\n    \n    .strip-container::after {\n        right: 0;\n        background: linear-gradient(to left, var(--darker), transparent);\n    }\n    \n    .strip-track {\n        display: flex;\n        gap: 24px;\n        animation: scrollLeftToRight 35s linear infinite;\n        width: max-content;\n    }\n    \n    .strip-container:hover .strip-track {\n        animation-play-state: paused;\n    }\n    \n    @keyframes scrollLeftToRight {\n        0% { transform: translateX(0%); }\n        100% { transform: translateX(-50%); }\n    }\n    \n    .strip-card {\n        width: 280px;\n        background: white;\n        border-radius: 20px;\n        overflow: hidden;\n        box-shadow: var(--shadow-xl);\n        flex-shrink: 0;\n        transition: all 0.3s;\n        cursor: pointer;\n    }\n    \n    .strip-card:hover {\n        transform: translateY(-8px) scale(1.02);\n        box-shadow: var(--shadow-2xl);\n    }\n    \n    .strip-img {\n        width: 100%;\n        height: 200px;\n        object-fit: cover;\n        display: block;\n    }\n    \n    .strip-info {\n        padding: 16px;\n    }\n    \n    .sponsor-badge {\n        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n        border-radius: 12px;\n        padding: 6px 14px;\n        font-size: 0.75rem;\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        margin: 2px;\n        font-weight: 600;\n        color: #0369a1;\n        border: 1px solid #bae6fd;\n    }\n    \n    .caption-text {\n        margin-top: 8px;\n        font-weight: 600;\n        color: var(--dark);\n        font-size: 0.9rem;\n    }\n    \n    .view-badge {\n        background: var(--gradient-4);\n        color: white;\n        padding: 4px 10px;\n        border-radius: 8px;\n        font-size: 0.7rem;\n        font-weight: 700;\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        margin-top: 8px;\n    }\n    \n    \/* Dashboard Stats *\/\n    .action-buttons {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n        gap: 16px;\n        margin-bottom: 32px;\n    }\n    \n    .action-btn {\n        padding: 20px;\n        border-radius: 20px;\n        font-weight: 700;\n        font-size: 1rem;\n        cursor: pointer;\n        border: none;\n        transition: all 0.3s;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        color: white;\n        text-decoration: none;\n        position: relative;\n        overflow: hidden;\n    }\n    \n    .action-btn::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0));\n        transition: opacity 0.3s;\n    }\n    \n    .action-btn:hover {\n        transform: translateY(-4px);\n        box-shadow: var(--shadow-xl);\n    }\n    \n    .verified-btn {\n        background: var(--gradient-4);\n    }\n    \n    .monetized-btn {\n        background: var(--gradient-3);\n    }\n    \n    .action-btn i {\n        font-size: 1.5rem;\n        position: relative;\n        z-index: 1;\n    }\n    \n    .action-btn span {\n        position: relative;\n        z-index: 1;\n    }\n    \n    .dashboard-stats {\n        background: linear-gradient(135deg, #f8fafc, #e0e7ff);\n        padding: 24px;\n        border-radius: 24px;\n        margin-bottom: 32px;\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n        gap: 16px;\n        border: 1px solid #e2e8f0;\n    }\n    \n    .stat-card {\n        background: white;\n        padding: 20px;\n        border-radius: 16px;\n        box-shadow: var(--shadow-sm);\n        transition: all 0.3s;\n    }\n    \n    .stat-card:hover {\n        transform: translateY(-4px);\n        box-shadow: var(--shadow-lg);\n    }\n    \n    .stat-label {\n        font-size: 0.8rem;\n        color: var(--gray);\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        margin-bottom: 8px;\n    }\n    \n    .stat-value {\n        font-size: 1.8rem;\n        font-weight: 900;\n        background: var(--gradient-1);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n    }\n    \n    \/* Grid & Cards *\/\n    .grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n        gap: 20px;\n        margin-top: 20px;\n    }\n    \n    .post-preview-card, .user-preview-card {\n        background: white;\n        border-radius: 20px;\n        border: 1px solid #e2e8f0;\n        overflow: hidden;\n        transition: all 0.3s;\n        box-shadow: var(--shadow-sm);\n    }\n    \n    .post-preview-card:hover, .user-preview-card:hover {\n        transform: translateY(-4px);\n        box-shadow: var(--shadow-lg);\n    }\n    \n    .user-preview-card {\n        background: linear-gradient(135deg, #ffedd5, #fed7aa);\n    }\n    \n    .card-header {\n        padding: 16px;\n        background: #f8fafc;\n        border-bottom: 1px solid #e2e8f0;\n        font-weight: 700;\n        color: var(--dark);\n        display: flex;\n        align-items: center;\n        gap: 8px;\n    }\n    \n    .card-body {\n        padding: 16px;\n    }\n    \n    .card-actions {\n        padding: 16px;\n        display: flex;\n        gap: 8px;\n    }\n    \n    .card-actions button {\n        flex: 1;\n        padding: 10px;\n        border-radius: 12px;\n        font-weight: 600;\n        border: none;\n        cursor: pointer;\n        transition: all 0.3s;\n        font-size: 0.85rem;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n    }\n    \n    .btn-approve {\n        background: var(--gradient-4);\n        color: white;\n    }\n    \n    .btn-reject {\n        background: linear-gradient(135deg, #ef4444, #dc2626);\n        color: white;\n    }\n    \n    .btn-approve:hover, .btn-reject:hover {\n        transform: translateY(-2px);\n        box-shadow: var(--shadow-md);\n    }\n    \n    \/* Table Styles *\/\n    .table-container {\n        overflow-x: auto;\n        border-radius: 16px;\n        border: 1px solid #e2e8f0;\n    }\n    \n    table {\n        width: 100%;\n        border-collapse: collapse;\n        background: white;\n    }\n    \n    thead {\n        background: linear-gradient(135deg, #f8fafc, #e0e7ff);\n    }\n    \n    th {\n        padding: 16px;\n        text-align: left;\n        font-weight: 700;\n        color: var(--dark);\n        font-size: 0.85rem;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        border-bottom: 2px solid #e2e8f0;\n    }\n    \n    td {\n        padding: 16px;\n        border-bottom: 1px solid #f1f5f9;\n        font-weight: 500;\n    }\n    \n    tbody tr {\n        transition: all 0.3s;\n    }\n    \n    tbody tr:hover {\n        background: #f8fafc;\n    }\n    \n    .status-badge {\n        padding: 6px 14px;\n        border-radius: 12px;\n        font-size: 0.75rem;\n        font-weight: 700;\n    }\n    \n    .status-active {\n        background: #d1fae5;\n        color: #065f46;\n    }\n    \n    .status-pending {\n        background: #fef3c7;\n        color: #92400e;\n    }\n    \n    \/* Section Title *\/\n    .section-title {\n        margin: 32px 0 20px 0;\n        padding-bottom: 16px;\n        border-bottom: 2px solid #e2e8f0;\n        font-size: 1.2rem;\n        font-weight: 800;\n        color: var(--dark);\n        display: flex;\n        align-items: center;\n        gap: 12px;\n    }\n    \n    .section-title i {\n        background: var(--gradient-1);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        background-clip: text;\n    }\n    \n    \/* Export Buttons *\/\n    .export-buttons {\n        display: flex;\n        gap: 12px;\n    }\n    \n    .export-btn {\n        padding: 10px 20px;\n        border-radius: 12px;\n        font-weight: 600;\n        border: none;\n        cursor: pointer;\n        transition: all 0.3s;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: white;\n    }\n    \n    .export-excel {\n        background: linear-gradient(135deg, #10b981, #059669);\n    }\n    \n    .export-pdf {\n        background: linear-gradient(135deg, #ef4444, #dc2626);\n    }\n    \n    .export-btn:hover {\n        transform: translateY(-2px);\n        box-shadow: var(--shadow-lg);\n    }\n    \n    \/* Form Elements *\/\n    .modern-select, .modern-textarea {\n        width: 100%;\n        padding: 14px 16px;\n        border-radius: 16px;\n        border: 2px solid #e2e8f0;\n        font-size: 0.95rem;\n        font-weight: 500;\n        transition: all 0.3s;\n        background: #f8fafc;\n    }\n    \n    .modern-select:focus, .modern-textarea:focus {\n        outline: none;\n        border-color: var(--primary);\n        background: white;\n        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);\n    }\n    \n    .modern-textarea {\n        resize: vertical;\n        min-height: 100px;\n    }\n    \n    \/* Toast *\/\n    .toast {\n        position: fixed;\n        bottom: 24px;\n        right: 24px;\n        background: var(--dark);\n        color: white;\n        padding: 16px 24px;\n        border-radius: 16px;\n        z-index: 9999;\n        font-weight: 600;\n        box-shadow: var(--shadow-2xl);\n        animation: slideIn 0.3s ease;\n    }\n    \n    @keyframes slideIn {\n        from {\n            transform: translateX(100%);\n            opacity: 0;\n        }\n        to {\n            transform: translateX(0);\n            opacity: 1;\n        }\n    }\n    \n    \/* Modal *\/\n    .modal-overlay {\n        display: none;\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0,0,0,0.8);\n        backdrop-filter: blur(4px);\n        z-index: 2000;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .modal-content {\n        background: white;\n        max-width: 450px;\n        width: 90%;\n        border-radius: 24px;\n        padding: 32px;\n        box-shadow: var(--shadow-2xl);\n        animation: modalPop 0.3s ease;\n    }\n    \n    @keyframes modalPop {\n        from {\n            transform: scale(0.8);\n            opacity: 0;\n        }\n        to {\n            transform: scale(1);\n            opacity: 1;\n        }\n    }\n    \n    \/* Responsive *\/\n    @media (max-width: 768px) {\n        .app-container {\n            padding: 12px;\n        }\n        \n        .login-card {\n            padding: 24px 20px;\n        }\n        \n        .panel {\n            padding: 20px;\n        }\n        \n        .dashboard-stats {\n            grid-template-columns: 1fr;\n        }\n        \n        .strip-card {\n            width: 240px;\n        }\n        \n        .grid {\n            grid-template-columns: 1fr;\n        }\n    }\n<\/style>\n\n<!-- Main Container -->\n<div class=\"app-container\">\n    <!-- DUAL LOGIN PANEL -->\n    <div id=\"dualLoginContainer\" class=\"dual-login-container\">\n        <!-- Advertiser Login Card -->\n        <div class=\"login-card advertiser-card\">\n            <div class=\"login-icon\">\ud83d\udce2<\/div>\n            <h2>Advertiser Login<\/h2>\n            <p class=\"login-subtitle\">Access your campaign dashboard<\/p>\n            <div class=\"form-group\">\n                <label>Email Address<\/label>\n                <div class=\"input-wrapper\">\n                    <i class=\"fas fa-envelope\"><\/i>\n                    <input type=\"email\" id=\"advLoginEmail\" placeholder=\"Enter your email\">\n                <\/div>\n            <\/div>\n            <div class=\"form-group\">\n                <label>Password<\/label>\n                <div class=\"input-wrapper\">\n                    <i class=\"fas fa-lock\"><\/i>\n                    <input type=\"password\" id=\"advLoginPassword\" placeholder=\"Enter your password\">\n                <\/div>\n            <\/div>\n            <button id=\"advLoginBtn\" class=\"btn btn-success\">\n                <i class=\"fas fa-sign-in-alt\"><\/i> Sign In\n            <\/button>\n            <div id=\"advLoginError\" class=\"error-msg\"><\/div>\n            <div class=\"divider\"><span>or<\/span><\/div>\n            <p style=\"text-align: center; font-size: 0.9rem; color: var(--gray);\">\n                New advertiser? \n                <strong id=\"showAdvertiserSignup\" style=\"color: var(--primary); cursor: pointer; font-weight: 700;\">\n                    Create account\n                <\/strong>\n            <\/p>\n        <\/div>\n\n        <!-- Admin Login Card -->\n        <div class=\"login-card admin-card\">\n            <div class=\"login-icon\">\ud83d\udee1\ufe0f<\/div>\n            <h2>Admin Login<\/h2>\n            <p class=\"login-subtitle\">Secure administrative access<\/p>\n            <div class=\"form-group\">\n                <label>Admin Email<\/label>\n                <div class=\"input-wrapper\">\n                    <i class=\"fas fa-shield-alt\"><\/i>\n                    <input type=\"email\" id=\"adminLoginEmail\" placeholder=\"Admin email\">\n                <\/div>\n            <\/div>\n            <div class=\"form-group\">\n                <label>Password<\/label>\n                <div class=\"input-wrapper\">\n                    <i class=\"fas fa-key\"><\/i>\n                    <input type=\"password\" id=\"adminLoginPassword\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\n                <\/div>\n            <\/div>\n            <button id=\"adminLoginBtn\" class=\"btn btn-primary\">\n                <i class=\"fas fa-lock\"><\/i> Authenticate\n            <\/button>\n            <div id=\"adminLoginError\" class=\"error-msg\"><\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Advertiser Signup Modal -->\n    <div id=\"signupModal\" class=\"modal-overlay\">\n        <div class=\"modal-content\">\n            <h2 style=\"font-weight: 800; margin-bottom: 24px; color: var(--dark);\">\n                <i class=\"fas fa-user-plus\" style=\"background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\"><\/i>\n                Create Account\n            <\/h2>\n            <div class=\"form-group\">\n                <label>Full Name<\/label>\n                <input type=\"text\" id=\"signupName\" class=\"modern-input\" placeholder=\"John Doe\">\n            <\/div>\n            <div class=\"form-group\">\n                <label>Email<\/label>\n                <input type=\"email\" id=\"signupEmail\" class=\"modern-input\" placeholder=\"john@example.com\">\n            <\/div>\n            <div class=\"form-group\">\n                <label>Password<\/label>\n                <input type=\"password\" id=\"signupPassword\" class=\"modern-input\" placeholder=\"Create password\">\n            <\/div>\n            <button id=\"confirmSignupBtn\" class=\"btn btn-success\" style=\"margin-bottom: 12px;\">\n                <i class=\"fas fa-check\"><\/i> Create Account\n            <\/button>\n            <div id=\"signupMsg\" style=\"margin-top:12px; text-align:center;\"><\/div>\n            <button id=\"closeSignupModal\" class=\"btn btn-danger\" style=\"margin-top: 8px;\">\n                <i class=\"fas fa-times\"><\/i> Cancel\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Main App -->\n    <div class=\"app\" id=\"app\">\n        <div class=\"app-header\">\n            <div class=\"flex-between\">\n                <div class=\"tabs\">\n                    <button class=\"tab-btn active\" data-tab=\"public\">\n                        <i class=\"fas fa-play-circle\"><\/i> Moving Strip\n                    <\/button>\n                    <button class=\"tab-btn\" data-tab=\"dashboard\">\n                        <i class=\"fas fa-chart-pie\"><\/i> Dashboard\n                    <\/button>\n                    <button class=\"tab-btn\" data-tab=\"upload\">\n                        <i class=\"fas fa-cloud-upload-alt\"><\/i> Create Post\n                    <\/button>\n                    <button class=\"tab-btn\" data-tab=\"admin\">\n                        <i class=\"fas fa-crown\"><\/i> Admin Panel\n                    <\/button>\n                <\/div>\n                <div class=\"user-info\">\n                    <span id=\"currentUserEmail\" class=\"user-email\"><\/span>\n                    <span id=\"userRoleBadge\" class=\"user-badge\"><\/span>\n                    <button id=\"logoutMainBtn\" class=\"logout-btn\">\n                        <i class=\"fas fa-sign-out-alt\"><\/i> Logout\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Public Strip Panel -->\n        <div id=\"publicPanel\" class=\"panel\">\n            <div class=\"panel-title\">\n                <i class=\"fas fa-photo-video\"><\/i> Live Activity Strip\n            <\/div>\n            <div class=\"strip-container\">\n                <div class=\"strip-track\" id=\"stripTrack\"><\/div>\n            <\/div>\n            <div style=\"margin-top: 16px; text-align: center;\">\n                <span class=\"view-badge\">\n                    <i class=\"fas fa-eye\"><\/i> Each unique view = UGX 3 to sponsor&#8217;s wallet\n                <\/span>\n            <\/div>\n        <\/div>\n        \n        <!-- Advertiser Dashboard -->\n        <div id=\"dashboardPanel\" class=\"panel\" style=\"display:none;\">\n            <div class=\"panel-title\">\n                <i class=\"fas fa-chart-line\"><\/i> My Advertiser Dashboard\n            <\/div>\n            \n            <div class=\"action-buttons\">\n                <a href=\"https:\/\/cashchatbank.com\" target=\"_blank\" class=\"action-btn verified-btn\">\n                    <i class=\"fas fa-check-circle\"><\/i>\n                    <span>Get Verified<\/span>\n                <\/a>\n                <a href=\"https:\/\/ai.cashchatapp.com\" target=\"_blank\" class=\"action-btn monetized-btn\">\n                    <i class=\"fas fa-coins\"><\/i>\n                    <span>Be Monetized<\/span>\n                <\/a>\n            <\/div>\n            \n            <div class=\"dashboard-stats\">\n                <div class=\"stat-card\">\n                    <div class=\"stat-label\">\ud83d\udcb0 Balance<\/div>\n                    <div class=\"stat-value\"><span id=\"dashboardWallet\">0<\/span> UGX<\/div>\n                <\/div>\n                <div class=\"stat-card\">\n                    <div class=\"stat-label\">\ud83d\udce2 Active Posts<\/div>\n                    <div class=\"stat-value\" id=\"activePostsCount\">0<\/div>\n                <\/div>\n                <div class=\"stat-card\">\n                    <div class=\"stat-label\">\ud83d\udc41\ufe0f Total Views<\/div>\n                    <div class=\"stat-value\" id=\"totalViewsCount\">0<\/div>\n                <\/div>\n                <div class=\"stat-card\">\n                    <div class=\"stat-label\">\ud83d\udcb8 Total Earned<\/div>\n                    <div class=\"stat-value\"><span id=\"totalEarned\">0<\/span> UGX<\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"section-title\"><i class=\"fas fa-list\"><\/i> My Posts<\/div>\n            <div id=\"myPostsList\" style=\"max-height: 300px; overflow-y: auto;\"><\/div>\n            \n            <div class=\"section-title\"><i class=\"fas fa-wallet\"><\/i> Withdraw Funds<\/div>\n            <div style=\"display: flex; gap: 12px; flex-wrap: wrap; align-items: end;\">\n                <div class=\"form-group\" style=\"flex: 1;\">\n                    <label>Amount (UGX)<\/label>\n                    <input type=\"number\" id=\"dashboardWithdrawAmount\" class=\"modern-input\" placeholder=\"Enter amount\">\n                <\/div>\n                <button id=\"dashboardWithdrawBtn\" class=\"btn btn-primary\" style=\"width: auto;\">\n                    <i class=\"fas fa-paper-plane\"><\/i> Request Withdrawal\n                <\/button>\n            <\/div>\n            <div id=\"dashboardWithdrawMsg\"><\/div>\n            \n            <div class=\"section-title\"><i class=\"fas fa-history\"><\/i> Withdrawal History<\/div>\n            <div id=\"myWithdrawalsList\"><\/div>\n        <\/div>\n\n        <!-- Upload Panel -->\n        <div id=\"uploadPanel\" class=\"panel\" style=\"display:none;\">\n            <div class=\"panel-title\">\n                <i class=\"fas fa-cloud-upload-alt\"><\/i> Create Sponsored Post\n            <\/div>\n            <div class=\"form-group\">\n                <label>Activity Image<\/label>\n                <input type=\"file\" id=\"activityImgFile\" accept=\"image\/*\" class=\"modern-input\" style=\"margin-bottom: 12px;\">\n                <input type=\"text\" id=\"activityImgUrl\" class=\"modern-input\" placeholder=\"Or enter image URL (https:\/\/...)\">\n            <\/div>\n            <div class=\"form-group\">\n                <label>Sponsor Logos (URLs, comma separated)<\/label>\n                <input type=\"text\" id=\"sponsorUrls\" class=\"modern-input\" placeholder=\"https:\/\/logo1.png, https:\/\/logo2.png\">\n            <\/div>\n            <div class=\"form-group\">\n                <label>Caption<\/label>\n                <textarea id=\"captionText\" class=\"modern-textarea\" rows=\"3\" placeholder=\"Write an engaging caption...\"><\/textarea>\n            <\/div>\n            <div class=\"form-group\">\n                <label>\ud83d\udcc5 Visibility (days)<\/label>\n                <input type=\"number\" id=\"visibilityDays\" class=\"modern-input\" min=\"1\" max=\"90\" value=\"7\">\n            <\/div>\n            <button id=\"createPostBtn\" class=\"btn btn-success\">\n                <i class=\"fas fa-rocket\"><\/i> Submit Post (needs admin approval)\n            <\/button>\n            <div id=\"postMsg\" style=\"margin-top:16px;\"><\/div>\n        <\/div>\n\n        <!-- Admin Panel -->\n        <div id=\"adminPanel\" class=\"panel\" style=\"display:none;\">\n            <div class=\"panel-title\">\n                <i class=\"fas fa-crown\"><\/i> Admin Control Panel\n            <\/div>\n            <div class=\"flex-between\" style=\"margin-bottom: 24px;\">\n                <div style=\"font-weight: 800; font-size: 1.2rem; color: var(--dark);\">\n                    \ud83d\udc51 Admin Wallet: <span id=\"adminWalletSpan\" style=\"background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">0<\/span> UGX\n                <\/div>\n                <div class=\"export-buttons\">\n                    <button id=\"exportExcelBtn\" class=\"export-btn export-excel\">\n                        <i class=\"fas fa-file-excel\"><\/i> Export Excel\n                    <\/button>\n                    <button id=\"exportPdfBtn\" class=\"export-btn export-pdf\">\n                        <i class=\"fas fa-file-pdf\"><\/i> Export PDF\n                    <\/button>\n                <\/div>\n            <\/div>\n            \n            <div class=\"section-title\"><i class=\"fas fa-wallet\"><\/i> Credit Advertiser&#8217;s Wallet<\/div>\n            <div style=\"background: linear-gradient(135deg, #f0f9ff, #e0f2fe); padding: 24px; border-radius: 20px; margin-bottom: 24px;\">\n                <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: end;\">\n                    <div class=\"form-group\" style=\"flex: 1;\">\n                        <label>Select Advertiser<\/label>\n                        <select id=\"creditAdvertiserSelect\" class=\"modern-select\">\n                            <option value=\"\">Choose advertiser&#8230;<\/option>\n                        <\/select>\n                    <\/div>\n                    <div class=\"form-group\" style=\"flex: 1;\">\n                        <label>Amount (UGX)<\/label>\n                        <input type=\"number\" id=\"creditAmount\" class=\"modern-input\" placeholder=\"Enter amount\">\n                    <\/div>\n                    <button id=\"creditWalletBtn\" class=\"btn btn-success\" style=\"width: auto;\">\n                        <i class=\"fas fa-plus-circle\"><\/i> Credit Wallet\n                    <\/button>\n                <\/div>\n                <div id=\"creditWalletMsg\" style=\"margin-top: 16px;\"><\/div>\n            <\/div>\n\n            <div class=\"section-title\"><i class=\"fas fa-file-invoice-dollar\"><\/i> Request Payment from Advertiser<\/div>\n            <div style=\"background: linear-gradient(135deg, #fef9e3, #fef3c7); padding: 24px; border-radius: 20px; margin-bottom: 24px;\">\n                <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: end;\">\n                    <div class=\"form-group\" style=\"flex: 1;\">\n                        <label>Select Advertiser<\/label>\n                        <select id=\"paymentRequestAdvertiserSelect\" class=\"modern-select\">\n                            <option value=\"\">Choose advertiser&#8230;<\/option>\n                        <\/select>\n                    <\/div>\n                    <div class=\"form-group\" style=\"flex: 1;\">\n                        <label>Amount (UGX)<\/label>\n                        <input type=\"number\" id=\"paymentRequestAmount\" class=\"modern-input\" placeholder=\"Enter amount\">\n                    <\/div>\n                    <button id=\"requestPaymentBtn\" class=\"btn btn-warning\" style=\"width: auto;\">\n                        <i class=\"fas fa-hand-holding-usd\"><\/i> Request Payment\n                    <\/button>\n                <\/div>\n                <div id=\"paymentRequestMsg\" style=\"margin-top: 16px;\"><\/div>\n            <\/div>\n\n            <div class=\"section-title\"><i class=\"fas fa-user-check\"><\/i> Pending User Approvals<\/div>\n            <div id=\"pendingUsersList\" class=\"grid\"><\/div>\n            \n            <div class=\"section-title\"><i class=\"fas fa-users\"><\/i> Approved Advertisers<\/div>\n            <div id=\"approvedUsersTableContainer\" class=\"table-container\"><\/div>\n            \n            <div class=\"section-title\"><i class=\"fas fa-clock\"><\/i> Pending Posts<\/div>\n            <div id=\"pendingPostsGrid\" class=\"grid\"><\/div>\n            \n            <div class=\"section-title\"><i class=\"fas fa-money-bill-wave\"><\/i> Withdrawal Requests<\/div>\n            <div id=\"withdrawRequestsList\"><\/div>\n            \n            <div class=\"section-title\"><i class=\"fas fa-check-circle\"><\/i> Active Approved Posts<\/div>\n            <div id=\"approvedPostsAdminList\"><\/div>\n            \n            <div class=\"section-title\"><i class=\"fas fa-history\"><\/i> Payment Requests History<\/div>\n            <div id=\"paymentRequestsHistory\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ ---------- DATA MODELS ----------\n    let advertisers = [];\n    let posts = [];\n    let withdrawalRequests = [];\n    let paymentRequests = [];\n    let adminWallet = 0;\n    let currentLoggedInUser = null;\n    let currentUserRole = null;\n\n    const ADMIN_EMAIL = \"ads@cashchat.se\";\n    const ADMIN_PASS = \"Justtrade81#\";\n\n    function saveData() {\n        localStorage.setItem('cc_advertisers', JSON.stringify(advertisers));\n        localStorage.setItem('cc_posts', JSON.stringify(posts));\n        localStorage.setItem('cc_withdrawals', JSON.stringify(withdrawalRequests));\n        localStorage.setItem('cc_paymentRequests', JSON.stringify(paymentRequests));\n        localStorage.setItem('cc_adminWallet', adminWallet);\n    }\n\n    function loadData() {\n        const adv = localStorage.getItem('cc_advertisers'); if(adv) advertisers = JSON.parse(adv);\n        const p = localStorage.getItem('cc_posts'); if(p) posts = JSON.parse(p);\n        const w = localStorage.getItem('cc_withdrawals'); if(w) withdrawalRequests = JSON.parse(w);\n        const pr = localStorage.getItem('cc_paymentRequests'); if(pr) paymentRequests = JSON.parse(pr);\n        const aw = localStorage.getItem('cc_adminWallet'); if(aw) adminWallet = Number(aw);\n        \n        if(advertisers.length === 0) {\n            advertisers.push({ id: 1, name: \"Alice Sponsor\", email: \"alice@chat.com\", password: \"alice123\", approved: true, walletBalance: 12000, role: \"advertiser\" });\n            advertisers.push({ id: 2, name: \"Bob Marketer\", email: \"bob@cashchat.se\", password: \"bob123\", approved: true, walletBalance: 5000, role: \"advertiser\" });\n            advertisers.push({ id: 3, name: \"Charlie Pending\", email: \"charlie@test.com\", password: \"charlie123\", approved: false, walletBalance: 0, role: \"advertiser\" });\n            advertisers.push({ id: 4, name: \"Diana New\", email: \"diana@new.com\", password: \"diana123\", approved: false, walletBalance: 0, role: \"advertiser\" });\n            advertisers.push({ id: 999, name: \"Super Admin\", email: ADMIN_EMAIL, password: ADMIN_PASS, approved: true, walletBalance: 0, role: \"admin\" });\n            adminWallet = 25000;\n            posts.push({ id: 101, userId: 1, activityImageUrl: \"https:\/\/picsum.photos\/id\/20\/400\/250\", sponsorUrlsArray: [\"https:\/\/picsum.photos\/id\/1\/40\/40\"], caption: \"Charity run 2025\", approved: true, createdAt: Date.now(), expiresAt: Date.now() + 30*86400000, uniqueViewers: [] });\n            posts.push({ id: 102, userId: 2, activityImageUrl: \"https:\/\/picsum.photos\/id\/29\/400\/250\", sponsorUrlsArray: [\"https:\/\/picsum.photos\/id\/13\/40\/40\"], caption: \"Bike festival\", approved: true, createdAt: Date.now(), expiresAt: Date.now() + 15*86400000, uniqueViewers: [] });\n            saveData();\n        }\n        advertisers.forEach(u => { if(u.walletBalance === undefined) u.walletBalance = 0; if(!u.role) u.role = \"advertiser\"; });\n        posts.forEach(p => { if(!p.uniqueViewers) p.uniqueViewers = []; if(!p.expiresAt) p.expiresAt = Date.now() + 7*86400000; });\n        saveData();\n    }\n\n    function escapeHtml(str) { if(!str) return ''; return str.replace(\/[&<>]\/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[m])); }\n    \n    function showToast(msg) { \n        const existingToast = document.querySelector('.toast');\n        if(existingToast) existingToast.remove();\n        \n        let t=document.createElement('div'); \n        t.className = 'toast';\n        t.innerHTML = `<i class=\"fas fa-check-circle\"><\/i> ${msg}`;\n        document.body.appendChild(t); \n        setTimeout(()=>{\n            t.style.animation = 'slideIn 0.3s ease reverse';\n            setTimeout(()=>t.remove(), 300);\n        },2500);\n    }\n\n    function recordUniqueView(postId) {\n        const post = posts.find(p => p.id === postId);\n        if(!post || !post.approved) return false;\n        const storageKey = `viewed_post_${postId}`;\n        if(localStorage.getItem(storageKey)) return false;\n        localStorage.setItem(storageKey, 'true');\n        if(!post.uniqueViewers) post.uniqueViewers = [];\n        post.uniqueViewers.push(Date.now());\n        const sponsor = advertisers.find(u => u.id === post.userId);\n        if(sponsor && sponsor.approved && sponsor.role === 'advertiser') {\n            sponsor.walletBalance = (sponsor.walletBalance || 0) + 3;\n            saveData();\n        }\n        saveData();\n        return true;\n    }\n\n    function renderStrip() {\n        const now = Date.now();\n        const activePosts = posts.filter(p => p.approved === true && p.expiresAt > now);\n        if(activePosts.length === 0) { \n            document.getElementById('stripTrack').innerHTML = `<div style=\"color:white; padding:40px; text-align:center; font-size:1.2rem; font-weight:600;\">\ud83c\udfac No active sponsored posts yet<\/div>`; \n            return; \n        }\n        let html = '';\n        for(let rep=0; rep<3; rep++) {\n            activePosts.forEach(post => {\n                recordUniqueView(post.id);\n                const sponsorHtml = (post.sponsorUrlsArray || []).map(url => `<div class=\"sponsor-badge\"><img loading=\"lazy\" decoding=\"async\" src=\"${escapeHtml(url)}\" width=\"20\" height=\"20\" style=\"border-radius:50%;\" onerror=\"this.style.display='none'\"> Sponsor<\/div>`).join('');\n                html += `<div class=\"strip-card\">\n                    <img decoding=\"async\" class=\"strip-img\" src=\"${escapeHtml(post.activityImageUrl)}\" onerror=\"this.src='https:\/\/placehold.co\/400x250'\">\n                    <div class=\"strip-info\">\n                        ${sponsorHtml}\n                        <div class=\"caption-text\">${escapeHtml(post.caption)}<\/div>\n                        <div class=\"view-badge\"><i class=\"fas fa-coins\"><\/i> UGX 3\/view<\/div>\n                    <\/div>\n                <\/div>`;\n            });\n        }\n        document.getElementById('stripTrack').innerHTML = html;\n    }\n\n    function renderAdminPanel() {\n        const approvedAdvertisers = advertisers.filter(u => u.approved === true && u.role === 'advertiser');\n        const creditSelect = document.getElementById('creditAdvertiserSelect');\n        const paymentSelect = document.getElementById('paymentRequestAdvertiserSelect');\n        \n        const optionsHtml = approvedAdvertisers.map(u => \n            `<option value=\"${u.id}\">${escapeHtml(u.name)} (${escapeHtml(u.email)}) - ${u.walletBalance || 0} UGX<\/option>`\n        ).join('');\n        \n        creditSelect.innerHTML = '<option value=\"\">Choose advertiser...<\/option>' + optionsHtml;\n        paymentSelect.innerHTML = '<option value=\"\">Choose advertiser...<\/option>' + optionsHtml;\n\n        const pendingUsers = advertisers.filter(u => u.approved === false && u.role === 'advertiser');\n        const pendingUsersDiv = document.getElementById('pendingUsersList');\n        if(pendingUsers.length === 0) {\n            pendingUsersDiv.innerHTML = '<div style=\"padding: 20px; text-align: center; color: var(--gray);\">\u2705 No pending user approvals<\/div>';\n        } else {\n            pendingUsersDiv.innerHTML = pendingUsers.map(user => `\n                <div class=\"user-preview-card\">\n                    <div class=\"card-header\">\n                        <i class=\"fas fa-user-circle\" style=\"font-size: 1.5rem;\"><\/i>\n                        ${escapeHtml(user.name)}\n                    <\/div>\n                    <div class=\"card-body\">\n                        <div style=\"margin-bottom: 8px;\"><i class=\"fas fa-envelope\" style=\"color: var(--gray); width: 20px;\"><\/i> ${escapeHtml(user.email)}<\/div>\n                        <div><i class=\"fas fa-calendar-alt\" style=\"color: var(--gray); width: 20px;\"><\/i> Registered: ${new Date(user.id).toLocaleDateString()}<\/div>\n                    <\/div>\n                    <div class=\"card-actions\">\n                        <button onclick=\"approveUserAdmin(${user.id})\" class=\"btn-approve\">\n                            <i class=\"fas fa-check\"><\/i> Approve\n                        <\/button>\n                        <button onclick=\"declineUserAdmin(${user.id})\" class=\"btn-reject\">\n                            <i class=\"fas fa-times\"><\/i> Reject\n                        <\/button>\n                    <\/div>\n                <\/div>\n            `).join('');\n        }\n\n        const approvedUsers = advertisers.filter(u => u.approved === true && u.role === 'advertiser');\n        let tableHtml = `<table><thead><tr><th>Name<\/th><th>Email<\/th><th>Wallet (UGX)<\/th><th>Status<\/th><\/tr><\/thead><tbody>`;\n        approvedUsers.forEach(u => { \n            tableHtml += `<tr>\n                <td><strong>${escapeHtml(u.name)}<\/strong><\/td>\n                <td>${escapeHtml(u.email)}<\/td>\n                <td><span style=\"color: var(--success); font-weight: 700;\">${(u.walletBalance || 0).toLocaleString()} UGX<\/span><\/td>\n                <td><span class=\"status-badge status-active\">\u2705 Active<\/span><\/td>\n            <\/tr>`; \n        });\n        tableHtml += `<\/tbody><table>`;\n        document.getElementById('approvedUsersTableContainer').innerHTML = tableHtml;\n        document.getElementById('adminWalletSpan').innerText = adminWallet.toLocaleString();\n\n        const pendingPosts = posts.filter(p => !p.approved);\n        const pendingGrid = document.getElementById('pendingPostsGrid');\n        if(pendingPosts.length === 0) pendingGrid.innerHTML = '<div style=\"padding: 20px; text-align: center; color: var(--gray);\">No pending posts<\/div>';\n        else {\n            pendingGrid.innerHTML = pendingPosts.map(post => {\n                const owner = advertisers.find(u => u.id === post.userId);\n                return `<div class=\"post-preview-card\">\n                    <img decoding=\"async\" src=\"${escapeHtml(post.activityImageUrl)}\" width=\"100%\" height=\"180\" style=\"object-fit:cover\" onerror=\"this.src='https:\/\/placehold.co\/400x250'\">\n                    <div style=\"padding: 16px;\">\n                        <div style=\"font-weight: 700; margin-bottom: 8px;\">\ud83d\udc64 ${escapeHtml(owner?.name || 'user')}<\/div>\n                        <div style=\"margin-bottom: 8px;\">\ud83d\udcc5 Days: ${Math.ceil((post.expiresAt - Date.now())\/86400000)}<\/div>\n                        <div style=\"margin-bottom: 16px;\">\ud83d\udcac ${escapeHtml(post.caption)}<\/div>\n                        <div style=\"display: flex; gap: 8px;\">\n                            <button onclick=\"approvePostAdmin(${post.id})\" class=\"btn-approve\" style=\"flex: 1;\">\n                                <i class=\"fas fa-check\"><\/i> Approve\n                            <\/button>\n                            <button onclick=\"declinePostAdmin(${post.id})\" class=\"btn-reject\" style=\"flex: 1;\">\n                                <i class=\"fas fa-times\"><\/i> Decline\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>`;\n            }).join('');\n        }\n\n        const pendingWithdraws = withdrawalRequests.filter(w => w.status === 'pending');\n        const withdrawDiv = document.getElementById('withdrawRequestsList');\n        if(pendingWithdraws.length === 0) withdrawDiv.innerHTML = '<div style=\"padding: 20px; text-align: center; color: var(--gray);\">No pending requests<\/div>';\n        else {\n            withdrawDiv.innerHTML = pendingWithdraws.map(req => {\n                const u = advertisers.find(a => a.id === req.userId);\n                return `<div style=\"background: #fef9e3; padding: 16px; border-radius: 16px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;\">\n                    <div>\n                        <strong>${u?.name}<\/strong> (${u?.email})<br>\n                        <span style=\"color: var(--warning); font-weight: 700;\">${req.amount.toLocaleString()} UGX<\/span>\n                    <\/div>\n                    <div style=\"display: flex; gap: 8px;\">\n                        <button onclick=\"approveWithdraw(${req.id})\" class=\"btn-approve\" style=\"padding: 8px 16px;\">\n                            <i class=\"fas fa-check\"><\/i> Approve\n                        <\/button>\n                        <button onclick=\"rejectWithdraw(${req.id})\" class=\"btn-reject\" style=\"padding: 8px 16px;\">\n                            <i class=\"fas fa-times\"><\/i> Reject\n                        <\/button>\n                    <\/div>\n                <\/div>`;\n            }).join('');\n        }\n\n        const activeApproved = posts.filter(p => p.approved && p.expiresAt > Date.now());\n        document.getElementById('approvedPostsAdminList').innerHTML = activeApproved.map(p => \n            `<div style=\"background: white; padding: 16px; border-radius: 12px; margin-bottom: 8px; border: 1px solid #e2e8f0;\">\n                <div style=\"font-weight: 700;\">\ud83d\udccc ${escapeHtml(p.caption)}<\/div>\n                <div style=\"color: var(--gray); font-size: 0.9rem;\">\n                    Expires: ${new Date(p.expiresAt).toLocaleDateString()} | \n                    Views: ${p.uniqueViewers?.length || 0} \n                    <span style=\"color: var(--success); font-weight: 700;\">(${(p.uniqueViewers?.length || 0)*3} UGX earned)<\/span>\n                <\/div>\n            <\/div>`\n        ).join('') || '<div style=\"padding: 20px; text-align: center; color: var(--gray);\">None<\/div>';\n\n        const paymentHistory = document.getElementById('paymentRequestsHistory');\n        if(paymentRequests.length === 0) {\n            paymentHistory.innerHTML = '<div style=\"padding: 20px; text-align: center; color: var(--gray);\">No payment requests yet<\/div>';\n        } else {\n            paymentHistory.innerHTML = paymentRequests.map(pr => {\n                const advertiser = advertisers.find(a => a.id === pr.advertiserId);\n                return `<div style=\"background: #f0f9ff; padding: 16px; border-radius: 16px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; border: 1px solid #bae6fd;\">\n                    <div>\n                        <strong>${escapeHtml(advertiser?.name || 'Unknown')}<\/strong> (${escapeHtml(advertiser?.email || 'N\/A')})<br>\n                        Amount: <span style=\"font-weight: 700;\">${pr.amount.toLocaleString()} UGX<\/span> | \n                        Status: <span class=\"status-badge ${pr.status === 'paid' ? 'status-active' : 'status-pending'}\">${pr.status.toUpperCase()}<\/span><br>\n                        <small style=\"color: var(--gray);\">Requested: ${new Date(pr.createdAt).toLocaleDateString()}<\/small>\n                    <\/div>\n                    ${pr.status === 'pending' ? `<button onclick=\"markPaymentAsPaid(${pr.id})\" class=\"btn-approve\" style=\"padding: 8px 16px;\">\n                        <i class=\"fas fa-check\"><\/i> Mark as Paid\n                    <\/button>` : ''}\n                <\/div>`;\n            }).join('');\n        }\n    }\n\n    function creditAdvertiserWallet() {\n        const select = document.getElementById('creditAdvertiserSelect');\n        const amount = parseFloat(document.getElementById('creditAmount').value);\n        const msgDiv = document.getElementById('creditWalletMsg');\n        \n        if(!select.value) { msgDiv.innerHTML = '<span style=\"color: var(--danger);\">Please select an advertiser<\/span>'; return; }\n        if(isNaN(amount) || amount <= 0) { msgDiv.innerHTML = '<span style=\"color: var(--danger);\">Please enter a valid amount<\/span>'; return; }\n        \n        const advertiser = advertisers.find(a => a.id === parseInt(select.value));\n        if(!advertiser) { msgDiv.innerHTML = '<span style=\"color: var(--danger);\">Advertiser not found<\/span>'; return; }\n        \n        advertiser.walletBalance = (advertiser.walletBalance || 0) + amount;\n        saveData();\n        msgDiv.innerHTML = `<span style=\"color: var(--success); font-weight: 600;\">\u2705 Credited ${amount.toLocaleString()} UGX to ${escapeHtml(advertiser.name)}'s wallet. New balance: ${advertiser.walletBalance.toLocaleString()} UGX<\/span>`;\n        document.getElementById('creditAmount').value = '';\n        renderAdminPanel();\n        showToast(`Credited ${amount.toLocaleString()} UGX to ${advertiser.name}`);\n    }\n\n    function requestPaymentFromAdvertiser() {\n        const select = document.getElementById('paymentRequestAdvertiserSelect');\n        const amount = parseFloat(document.getElementById('paymentRequestAmount').value);\n        const msgDiv = document.getElementById('paymentRequestMsg');\n        \n        if(!select.value) { msgDiv.innerHTML = '<span style=\"color: var(--danger);\">Please select an advertiser<\/span>'; return; }\n        if(isNaN(amount) || amount <= 0) { msgDiv.innerHTML = '<span style=\"color: var(--danger);\">Please enter a valid amount<\/span>'; return; }\n        \n        const advertiser = advertisers.find(a => a.id === parseInt(select.value));\n        if(!advertiser) { msgDiv.innerHTML = '<span style=\"color: var(--danger);\">Advertiser not found<\/span>'; return; }\n        \n        paymentRequests.push({\n            id: Date.now(),\n            advertiserId: advertiser.id,\n            amount: amount,\n            status: 'pending',\n            createdAt: Date.now()\n        });\n        \n        saveData();\n        msgDiv.innerHTML = `<span style=\"color: var(--success); font-weight: 600;\">\u2705 Payment request of ${amount.toLocaleString()} UGX sent to ${escapeHtml(advertiser.name)}<\/span>`;\n        document.getElementById('paymentRequestAmount').value = '';\n        renderAdminPanel();\n        showToast(`Payment request sent to ${advertiser.name}`);\n    }\n\n    window.markPaymentAsPaid = function(requestId) {\n        const request = paymentRequests.find(pr => pr.id === requestId);\n        if(request && request.status === 'pending') {\n            request.status = 'paid';\n            const advertiser = advertisers.find(a => a.id === request.advertiserId);\n            if(advertiser) {\n                if(advertiser.walletBalance >= request.amount) {\n                    advertiser.walletBalance -= request.amount;\n                    adminWallet += request.amount;\n                }\n            }\n            saveData();\n            renderAdminPanel();\n            showToast(`Payment of ${request.amount.toLocaleString()} UGX marked as paid`);\n        }\n    };\n\n    window.approveUserAdmin = function(userId) {\n        const user = advertisers.find(u => u.id === userId);\n        if(user && user.role === 'advertiser') {\n            user.approved = true;\n            saveData();\n            renderAdminPanel();\n            showToast(`User ${user.name} has been approved!`);\n        }\n    };\n\n    window.declineUserAdmin = function(userId) {\n        const index = advertisers.findIndex(u => u.id === userId);\n        if(index !== -1 && advertisers[index].role === 'advertiser') {\n            const removed = advertisers.splice(index, 1)[0];\n            saveData();\n            renderAdminPanel();\n            showToast(`User ${removed.name} has been rejected and removed.`);\n        }\n    };\n\n    window.approvePostAdmin = function(postId) {\n        const post = posts.find(p => p.id === postId);\n        if(post) { post.approved = true; saveData(); renderAdminPanel(); renderStrip(); showToast('Post approved'); }\n    };\n\n    window.declinePostAdmin = function(postId) {\n        posts = posts.filter(p => p.id !== postId);\n        saveData(); renderAdminPanel(); renderStrip(); showToast('Post declined');\n    };\n\n    window.approveWithdraw = function(reqId) {\n        const req = withdrawalRequests.find(r => r.id === reqId);\n        if(!req || req.status !== 'pending') return;\n        const user = advertisers.find(u => u.id === req.userId);\n        if(user && user.walletBalance >= req.amount && req.amount > 0) {\n            user.walletBalance -= req.amount;\n            adminWallet += req.amount;\n            req.status = 'approved';\n            saveData();\n            renderAdminPanel();\n            if(currentLoggedInUser && currentUserRole === 'advertiser' && currentLoggedInUser === user.email) renderDashboard();\n            showToast(`Approved ${req.amount.toLocaleString()} UGX`);\n        } else showToast('Insufficient balance');\n    };\n\n    window.rejectWithdraw = function(reqId) {\n        const req = withdrawalRequests.find(r => r.id === reqId);\n        if(req) { req.status = 'rejected'; saveData(); renderAdminPanel(); showToast('Rejected'); }\n    };\n\n    function renderDashboard() {\n        if(!currentLoggedInUser || currentUserRole !== 'advertiser') return;\n        const user = advertisers.find(u => u.email === currentLoggedInUser);\n        if(!user) return;\n        document.getElementById('dashboardWallet').innerText = (user.walletBalance || 0).toLocaleString();\n        const myPosts = posts.filter(p => p.userId === user.id);\n        const activePosts = myPosts.filter(p => p.approved && p.expiresAt > Date.now());\n        document.getElementById('activePostsCount').innerText = activePosts.length;\n        const totalViews = myPosts.reduce((sum, p) => sum + (p.uniqueViewers?.length || 0), 0);\n        document.getElementById('totalViewsCount').innerText = totalViews.toLocaleString();\n        document.getElementById('totalEarned').innerText = (totalViews * 3).toLocaleString();\n        document.getElementById('myPostsList').innerHTML = myPosts.map(p => \n            `<div style=\"background: white; padding: 16px; border-radius: 12px; margin-bottom: 8px; border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 12px;\">\n                <img loading=\"lazy\" decoding=\"async\" src=\"${escapeHtml(p.activityImageUrl)}\" width=\"60\" height=\"60\" style=\"object-fit:cover; border-radius:12px;\" onerror=\"this.src='https:\/\/placehold.co\/60x60'\">\n                <div style=\"flex: 1;\">\n                    <strong>${escapeHtml(p.caption)}<\/strong>\n                    <div style=\"color: var(--gray); font-size: 0.85rem;\">\n                        ${p.approved ? '<span style=\"color: var(--success);\">\u2705 Approved<\/span>' : '<span style=\"color: var(--warning);\">\u23f3 Pending<\/span>'} | \n                        Views: ${p.uniqueViewers?.length || 0}\n                    <\/div>\n                <\/div>\n            <\/div>`\n        ).join('') || '<div style=\"padding: 20px; text-align: center; color: var(--gray);\">No posts yet.<\/div>';\n        \n        const myWithdrawals = withdrawalRequests.filter(w => w.userId === user.id);\n        document.getElementById('myWithdrawalsList').innerHTML = myWithdrawals.map(w => \n            `<div style=\"padding: 12px; border-bottom: 1px solid #e2e8f0;\">\n                \ud83d\udcb0 ${w.amount.toLocaleString()} UGX - \n                <span class=\"status-badge ${w.status === 'approved' ? 'status-active' : w.status === 'pending' ? 'status-pending' : ''}\">\n                    ${w.status.toUpperCase()}\n                <\/span>\n                (${new Date(w.requestedAt).toLocaleDateString()})\n            <\/div>`\n        ).join('') || '<div style=\"padding: 20px; text-align: center; color: var(--gray);\">None.<\/div>';\n    }\n\n    function requestWithdrawalDashboard() {\n        if(!currentLoggedInUser || currentUserRole !== 'advertiser') return;\n        const user = advertisers.find(u => u.email === currentLoggedInUser);\n        if(!user || !user.approved) { showToast('Account not approved'); return; }\n        const amount = parseFloat(document.getElementById('dashboardWithdrawAmount').value);\n        if(isNaN(amount) || amount <= 0) { document.getElementById('dashboardWithdrawMsg').innerHTML = '<span style=\"color: var(--danger);\">Valid amount required<\/span>'; return; }\n        if(amount > (user.walletBalance || 0)) { document.getElementById('dashboardWithdrawMsg').innerHTML = '<span style=\"color: var(--danger);\">Insufficient balance<\/span>'; return; }\n        withdrawalRequests.push({ id: Date.now(), userId: user.id, amount: amount, status: 'pending', requestedAt: Date.now() });\n        saveData();\n        document.getElementById('dashboardWithdrawAmount').value = '';\n        document.getElementById('dashboardWithdrawMsg').innerHTML = '<span style=\"color: var(--success); font-weight: 600;\">\u2705 Request sent to admin successfully.<\/span>';\n        renderDashboard();\n        if(document.getElementById('adminPanel').style.display !== 'none' && currentUserRole === 'admin') renderAdminPanel();\n        showToast('Withdrawal request sent');\n    }\n\n    function createPost() {\n        if(!currentLoggedInUser || currentUserRole !== 'advertiser') { showToast('Only advertisers can post'); return; }\n        const user = advertisers.find(u => u.email === currentLoggedInUser);\n        if(!user || !user.approved) { document.getElementById('postMsg').innerHTML = '<span style=\"color: var(--danger);\">Account not approved.<\/span>'; return; }\n        let imageUrl = document.getElementById('activityImgUrl').value.trim();\n        const fileInput = document.getElementById('activityImgFile');\n        const days = parseInt(document.getElementById('visibilityDays').value);\n        if(isNaN(days) || days < 1) { document.getElementById('postMsg').innerHTML = '<span style=\"color: var(--danger);\">Valid days required<\/span>'; return; }\n        const expiresAt = Date.now() + (days * 86400000);\n        const processPost = (finalUrl) => {\n            const sponsorUrlsRaw = document.getElementById('sponsorUrls').value;\n            let sponsorUrlsArray = sponsorUrlsRaw.split(',').map(s=>s.trim()).filter(s=>s);\n            const caption = document.getElementById('captionText').value.trim();\n            if(!caption || !finalUrl) { document.getElementById('postMsg').innerHTML = '<span style=\"color: var(--danger);\">Image & caption required<\/span>'; return; }\n            posts.push({ id: Date.now(), userId: user.id, activityImageUrl: finalUrl, sponsorUrlsArray, caption, approved: false, createdAt: Date.now(), expiresAt, uniqueViewers: [] });\n            saveData();\n            document.getElementById('postMsg').innerHTML = '<span style=\"color: var(--success); font-weight: 600;\">\u2705 Post submitted for admin approval.<\/span>';\n            document.getElementById('activityImgUrl').value = ''; \n            document.getElementById('sponsorUrls').value = ''; \n            document.getElementById('captionText').value = ''; \n            document.getElementById('activityImgFile').value = '';\n            if(currentUserRole === 'admin') renderAdminPanel();\n            renderDashboard();\n        };\n        if(fileInput.files && fileInput.files[0]) {\n            const reader = new FileReader();\n            reader.onload = e => processPost(e.target.result);\n            reader.readAsDataURL(fileInput.files[0]);\n        } else { \n            if(!imageUrl) { document.getElementById('postMsg').innerHTML = '<span style=\"color: var(--danger);\">Provide image<\/span>'; return; } \n            processPost(imageUrl); \n        }\n    }\n\n    function advertiserLogin(email, password) {\n        const user = advertisers.find(a => a.email === email && a.password === password && a.role === 'advertiser');\n        if(!user) { document.getElementById('advLoginError').innerText = 'Invalid credentials'; return false; }\n        if(!user.approved) { document.getElementById('advLoginError').innerText = 'Account pending admin approval.'; return false; }\n        currentLoggedInUser = user.email;\n        currentUserRole = 'advertiser';\n        return true;\n    }\n\n    function adminLogin(email, password) {\n        if(email === ADMIN_EMAIL && password === ADMIN_PASS) {\n            currentLoggedInUser = ADMIN_EMAIL;\n            currentUserRole = 'admin';\n            return true;\n        }\n        document.getElementById('adminLoginError').innerText = 'Invalid admin credentials';\n        return false;\n    }\n\n    function showMainApp() {\n        document.getElementById('dualLoginContainer').style.display = 'none';\n        document.getElementById('app').style.display = 'block';\n        document.getElementById('currentUserEmail').innerText = currentLoggedInUser;\n        const roleBadge = document.getElementById('userRoleBadge');\n        if(currentUserRole === 'admin') {\n            roleBadge.innerText = 'Admin';\n            roleBadge.style.display = 'inline-block';\n        } else {\n            roleBadge.style.display = 'none';\n        }\n        renderStrip();\n        if(currentUserRole === 'advertiser') renderDashboard();\n        if(currentUserRole === 'admin') renderAdminPanel();\n        setInterval(() => renderStrip(), 6000);\n    }\n\n    function logout() {\n        currentLoggedInUser = null;\n        currentUserRole = null;\n        document.getElementById('dualLoginContainer').style.display = 'flex';\n        document.getElementById('app').style.display = 'none';\n        document.getElementById('advLoginError').innerText = '';\n        document.getElementById('adminLoginError').innerText = '';\n        document.getElementById('advLoginEmail').value = '';\n        document.getElementById('advLoginPassword').value = '';\n        document.getElementById('adminLoginEmail').value = '';\n        document.getElementById('adminLoginPassword').value = '';\n    }\n\n    function showSignupModal() { document.getElementById('signupModal').style.display = 'flex'; }\n    function hideSignupModal() { document.getElementById('signupModal').style.display = 'none'; }\n    \n    function advertiserSignup() {\n        const name = document.getElementById('signupName').value.trim();\n        const email = document.getElementById('signupEmail').value.trim();\n        const pwd = document.getElementById('signupPassword').value;\n        if(!name || !email || !pwd) { document.getElementById('signupMsg').innerHTML = '<span style=\"color: var(--danger);\">All fields required<\/span>'; return; }\n        if(advertisers.find(a => a.email === email)) { document.getElementById('signupMsg').innerHTML = '<span style=\"color: var(--danger);\">Email already exists<\/span>'; return; }\n        advertisers.push({ id: Date.now(), name, email, password: pwd, approved: false, walletBalance: 0, role: \"advertiser\" });\n        saveData();\n        document.getElementById('signupMsg').innerHTML = '<span style=\"color: var(--success); font-weight: 600;\">Signup successful! Wait for admin approval.<\/span>';\n        setTimeout(() => hideSignupModal(), 1500);\n        document.getElementById('signupName').value = '';\n        document.getElementById('signupEmail').value = '';\n        document.getElementById('signupPassword').value = '';\n    }\n\n    function exportToExcel() {\n        const approvedUsers = advertisers.filter(u => u.approved && u.role === 'advertiser').map(u => ({ Name: u.name, Email: u.email, Wallet_UGX: u.walletBalance || 0 }));\n        const ws = XLSX.utils.json_to_sheet(approvedUsers);\n        const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, \"Advertisers\");\n        XLSX.writeFile(wb, `advertisers_${Date.now()}.xlsx`);\n    }\n\n    async function exportToPDF() {\n        const { jsPDF } = window.jspdf;\n        const doc = new jsPDF();\n        doc.text(\"Approved Advertisers\", 14, 10);\n        const data = advertisers.filter(u => u.approved && u.role === 'advertiser').map(u => [u.name, u.email, (u.walletBalance || 0) + \" UGX\"]);\n        doc.autoTable({ head: [[\"Name\", \"Email\", \"Wallet\"]], body: data, startY: 20 });\n        doc.save(`advertisers_${Date.now()}.pdf`);\n    }\n\n    function initTabs() {\n        const btns = document.querySelectorAll('.tab-btn');\n        const panels = {\n            public: document.getElementById('publicPanel'),\n            dashboard: document.getElementById('dashboardPanel'),\n            upload: document.getElementById('uploadPanel'),\n            admin: document.getElementById('adminPanel')\n        };\n        btns.forEach(btn => {\n            btn.addEventListener('click', () => {\n                const tab = btn.dataset.tab;\n                btns.forEach(b=>b.classList.remove('active'));\n                btn.classList.add('active');\n                Object.values(panels).forEach(p=>p.style.display='none');\n                if(tab==='public') panels.public.style.display='block';\n                if(tab==='dashboard') { \n                    if(currentUserRole === 'advertiser') { panels.dashboard.style.display='block'; renderDashboard(); }\n                    else { showToast('Only advertisers can access dashboard'); document.querySelector('[data-tab=\"public\"]').click(); }\n                }\n                if(tab==='upload') { panels.upload.style.display='block'; }\n                if(tab==='admin') {\n                    if(currentUserRole === 'admin') { panels.admin.style.display='block'; renderAdminPanel(); }\n                    else { alert('Admin access only'); document.querySelector('[data-tab=\"public\"]').click(); }\n                }\n            });\n        });\n    }\n\n    \/\/ Event listeners\n    document.getElementById('advLoginBtn')?.addEventListener('click', () => {\n        const email = document.getElementById('advLoginEmail').value;\n        const pwd = document.getElementById('advLoginPassword').value;\n        if(advertiserLogin(email, pwd)) showMainApp();\n    });\n    document.getElementById('adminLoginBtn')?.addEventListener('click', () => {\n        const email = document.getElementById('adminLoginEmail').value;\n        const pwd = document.getElementById('adminLoginPassword').value;\n        if(adminLogin(email, pwd)) showMainApp();\n    });\n    document.getElementById('showAdvertiserSignup')?.addEventListener('click', showSignupModal);\n    document.getElementById('closeSignupModal')?.addEventListener('click', hideSignupModal);\n    document.getElementById('confirmSignupBtn')?.addEventListener('click', advertiserSignup);\n    document.getElementById('createPostBtn')?.addEventListener('click', createPost);\n    document.getElementById('dashboardWithdrawBtn')?.addEventListener('click', requestWithdrawalDashboard);\n    document.getElementById('exportExcelBtn')?.addEventListener('click', exportToExcel);\n    document.getElementById('exportPdfBtn')?.addEventListener('click', exportToPDF);\n    document.getElementById('logoutMainBtn')?.addEventListener('click', logout);\n    \n    document.getElementById('creditWalletBtn')?.addEventListener('click', creditAdvertiserWallet);\n    document.getElementById('requestPaymentBtn')?.addEventListener('click', requestPaymentFromAdvertiser);\n\n    loadData();\n    initTabs();\n    document.getElementById('dualLoginContainer').style.display = 'flex';\n    document.getElementById('app').style.display = 'none';\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>CashChat Strip | Advertiser + Admin Dual Login | Approve Users \ud83d\udce2 Advertiser Login Access your campaign dashboard Email Address Password Sign In or New advertiser? Create account \ud83d\udee1\ufe0f Admin Login Secure administrative access Admin Email Password Authenticate Create Account Full Name Email Password Create Account Cancel Moving Strip Dashboard Create Post Admin Panel Logout [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-266","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":3,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/266\/revisions"}],"predecessor-version":[{"id":270,"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/pages\/266\/revisions\/270"}],"wp:attachment":[{"href":"https:\/\/cashchat.se\/dir\/wp-json\/wp\/v2\/media?parent=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}