{"id":1380,"date":"2026-03-11T02:28:53","date_gmt":"2026-03-11T02:28:53","guid":{"rendered":"https:\/\/abatablaster.xyz\/?page_id=1380"},"modified":"2026-10-12T12:50:57","modified_gmt":"2026-10-12T12:50:57","slug":"smart-blast","status":"publish","type":"page","link":"https:\/\/abatablaster.xyz\/index.php\/smart-blast\/","title":{"rendered":"Smart Blast"},"content":{"rendered":"\n\n<!DOCTYPE html>\n\n<html lang=\"ms\">\n\n<head>\n    <meta charset=\"utf-8\" \/>\n    <meta content=\"width=device-width, initial-scale=1\" name=\"viewport\">\n    <title>Smart Blast \u2013 AbataBlaster<\/title>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-app-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-auth-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-firestore-compat.js\"><\/script>\n    <script src=\"https:\/\/www.gstatic.com\/firebasejs\/9.22.2\/firebase-storage-compat.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/xlsx@0.18.5\/dist\/xlsx.full.min.js\"><\/script>\n    <script src=\"https:\/\/abatablaster.xyz\/js\/shared-status.js\"><\/script>\n    <style>\n        @keyframes blink {\n            50% {\n                opacity: 0;\n            }\n        }\n\n        :root {\n            --page-max: 1600px;\n            --page-pad: clamp(10px, 1.5vw, 24px);\n            --clr-bg: #f2faf6;\n            --clr-text: #1a4321;\n            --clr-primary: #36c47c;\n            --clr-primary-d: #1a7f4a;\n            --clr-border: #b3dbc5;\n            --clr-soft: #f7fcfa;\n            --clr-accent: #cfe8dc;\n            --clr-info: #1976d2;\n            --clr-warn: #ffb300;\n            --clr-danger: #d32f2f;\n            --clr-blue: #0288d1;\n            --shadow-1: 0 3px 10px rgba(54, 196, 124, .07), 0 1.5px 5px rgba(0, 0, 0, .05);\n            --shadow-2: 0 1.5px 4px rgba(54, 196, 124, .06);\n        }\n\n        html,\n        body {\n            overflow-x: hidden;\n        }\n\n        * {\n            box-sizing: border-box;\n        }\n\n        body {\n            margin: 0;\n            padding: 0 !important;\n            font-family: 'Segoe UI', Arial, sans-serif;\n            color: var(--clr-text);\n            background: var(--clr-bg);\n        }\n\n        .page {\n            width: 100%;\n            max-width: var(--page-max);\n            margin: 0 auto;\n            padding-left: var(--page-pad);\n            padding-right: var(--page-pad);\n        }\n\n        h3 {\n            margin: 0 0 12px;\n            color: var(--clr-primary-d);\n            font-weight: 600;\n        }\n\n        label,\n        .card label {\n            display: block;\n            margin-bottom: 4px;\n            font-size: 15px;\n            color: #185734;\n        }\n\n        .card {\n            background: #fff;\n            padding: 18px 16px;\n            border-radius: 16px;\n            margin-bottom: 22px;\n            border-left: 7px solid var(--clr-primary);\n            box-shadow: var(--shadow-1);\n        }\n\n        .card.card-number {\n            padding: 12px 12px;\n            margin-bottom: 16px;\n        }\n\n        .card.card-number h3 {\n            margin: 0 0 8px;\n            font-size: 16px;\n        }\n\n        #jobStatusCard {\n            padding: 14px 16px;\n            margin-bottom: 14px;\n            border-radius: 14px;\n        }\n\n        #jobStatusCard h3 {\n            margin: 0;\n            font-size: 15px;\n            line-height: 1.2;\n        }\n\n        #progressArea {\n            font-size: 12px;\n            line-height: 1.45;\n            color: #2d6a3d;\n            margin: 0;\n        }\n\n        .compact-stack {\n            display: grid;\n            gap: 12px;\n            margin-bottom: 14px;\n        }\n\n        .compact-card {\n            background: #fff;\n            border-left: 6px solid var(--clr-primary);\n            border-radius: 14px;\n            box-shadow: var(--shadow-1);\n            padding: 14px 16px;\n        }\n\n        .compact-head {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 10px;\n            margin-bottom: 10px;\n            flex-wrap: wrap;\n        }\n\n        .compact-title {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            color: var(--clr-primary-d);\n            font-weight: 800;\n            font-size: 15px;\n        }\n\n        .compact-sub {\n            font-size: 12px;\n            color: #5f7d69;\n        }\n\n        .job-meta-grid {\n            display: grid;\n            grid-template-columns: repeat(4, minmax(0, 1fr));\n            gap: 8px;\n            margin-bottom: 10px;\n        }\n\n        .job-meta-item {\n            background: #f7fcfa;\n            border: 1px solid #e0f1e7;\n            border-radius: 10px;\n            padding: 8px 10px;\n            min-width: 0;\n        }\n\n        .job-meta-label {\n            font-size: 11px;\n            color: #678472;\n            margin-bottom: 3px;\n        }\n\n        .job-meta-value {\n            font-size: 13px;\n            font-weight: 700;\n            color: #1d4b2a;\n            overflow-wrap: anywhere;\n        }\n\n        .job-inline-list {\n            display: grid;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n            gap: 6px 12px;\n            margin-top: 8px;\n        }\n\n        .job-inline-item {\n            font-size: 12px;\n            color: #2d6a3d;\n        }\n\n        .progress-compact-grid {\n            display: grid;\n            grid-template-columns: repeat(6, minmax(0, 1fr));\n            gap: 10px;\n        }\n\n        .progress-stat {\n            background: #f7fcfa;\n            border: 1px solid #e0f1e7;\n            border-radius: 12px;\n            padding: 10px 8px;\n            text-align: center;\n        }\n\n        .progress-stat .icon {\n            display: block;\n            font-size: 18px;\n            margin-bottom: 4px;\n        }\n\n        .progress-stat .label {\n            font-size: 11px;\n            color: #678472;\n            margin-bottom: 4px;\n        }\n\n        .progress-stat .value {\n            font-size: 22px;\n            font-weight: 800;\n            color: #19492a;\n            line-height: 1;\n        }\n\n        #senderSummaryBox.compact-card {\n            padding: 12px 14px;\n            font-size: 13px;\n        }\n\n        .sender-summary-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n            gap: 8px;\n            margin-top: 8px;\n        }\n\n        .sender-chip {\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\n            gap: 10px;\n            background: #f7fcfa;\n            border: 1px solid #d9eee2;\n            border-radius: 10px;\n            padding: 10px 12px;\n        }\n\n        .sender-main {\n            min-width: 0;\n            flex: 1;\n        }\n\n        .sender-chip .phone {\n            min-width: 0;\n            font-size: 12px;\n            color: #24553a;\n            line-height: 1.25;\n            overflow: hidden;\n        }\n\n        .sender-name {\n            font-size: 11px;\n            color: #6b7f73;\n            font-weight: 600;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            margin-top: 2px;\n        }\n\n        .sender-chip .count {\n            font-size: 13px;\n            font-weight: 800;\n            color: #2e7d32;\n            white-space: nowrap;\n            align-self: center;\n        }\n\n        .sender-conn-row {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            flex-wrap: wrap;\n            margin-top: 6px;\n        }\n\n        .sender-conn-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 4px;\n            padding: 4px 8px;\n            border-radius: 999px;\n            font-size: 11px;\n            font-weight: 700;\n            line-height: 1;\n            border: 1px solid transparent;\n            white-space: nowrap;\n        }\n\n        .sender-conn-badge.connected {\n            background: #e8f5e9;\n            color: #2e7d32;\n            border-color: #c8e6c9;\n        }\n\n        .sender-conn-badge.waiting {\n            background: #fff8e1;\n            color: #a46b00;\n            border-color: #ffe082;\n        }\n\n        .sender-conn-badge.disconnected {\n            background: #f5f5f5;\n            color: #616161;\n            border-color: #e0e0e0;\n        }\n\n        .sender-conn-badge.failed {\n            background: #ffebee;\n            color: #c62828;\n            border-color: #ffcdd2;\n        }\n\n        .sender-qr-btn {\n            border: 0;\n            border-radius: 999px;\n            padding: 5px 10px;\n            font-size: 11px;\n            font-weight: 700;\n            cursor: pointer;\n            background: #1565c0;\n            color: #fff;\n            white-space: nowrap;\n        }\n\n        .sender-qr-btn:hover {\n            opacity: .92;\n        }\n\n        .swal-qr-wrap {\n            text-align: center;\n        }\n\n        .swal-qr-status {\n            margin-bottom: 10px;\n            font-size: 13px;\n            font-weight: 700;\n        }\n\n        .swal-qr-image {\n            width: 100%;\n            max-width: 280px;\n            border-radius: 12px;\n            border: 1px solid #e5e7eb;\n            background: #fff;\n            padding: 10px;\n            box-sizing: border-box;\n        }\n\n        .swal-qr-note {\n            margin-top: 10px;\n            font-size: 12px;\n            color: #666;\n            line-height: 1.45;\n        }\n\n        .swal-qr-actions {\n            display: flex;\n            justify-content: center;\n            gap: 8px;\n            flex-wrap: wrap;\n            margin-top: 12px;\n        }\n\n        .swal-qr-btn {\n            border: 0;\n            border-radius: 999px;\n            padding: 8px 14px;\n            font-size: 12px;\n            font-weight: 700;\n            cursor: pointer;\n        }\n\n        .swal-qr-btn.primary {\n            background: #1565c0;\n            color: #fff;\n        }\n\n        .swal-qr-btn.secondary {\n            background: #eceff1;\n            color: #263238;\n        }\n\n        .download-actions {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n            margin-top: 10px;\n        }\n\n        @media (max-width: 900px) {\n            .job-meta-grid {\n                grid-template-columns: repeat(2, minmax(0, 1fr));\n            }\n\n            .progress-compact-grid {\n                grid-template-columns: repeat(3, minmax(0, 1fr));\n            }\n        }\n\n        @media (max-width: 700px) {\n            .compact-card {\n                padding: 12px;\n                border-radius: 12px;\n            }\n\n            .job-inline-list {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        @media (max-width: 560px) {\n            .job-meta-grid {\n                grid-template-columns: 1fr;\n            }\n\n            .progress-compact-grid {\n                grid-template-columns: repeat(2, minmax(0, 1fr));\n            }\n\n            .progress-stat .value {\n                font-size: 18px;\n            }\n\n            .sender-summary-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        .btn {\n            display: inline-block;\n            min-width: 110px;\n            padding: 8px 16px;\n            margin: 4px 4px 0 0;\n            font-size: 15px;\n            font-weight: 500;\n            color: #fff;\n            background: var(--clr-primary);\n            border: 0;\n            border-radius: 7px;\n            cursor: pointer;\n            transition: background .15s;\n            box-shadow: var(--shadow-2);\n        }\n\n        .btn:hover,\n        .btn:focus {\n            background: var(--clr-primary-d);\n        }\n\n        #stopBtn {\n            background: var(--clr-danger);\n        }\n\n        #stopBtn:hover,\n        #stopBtn:focus {\n            background: #b71c1c;\n        }\n\n        #pauseBtn {\n            background: var(--clr-warn);\n            color: #fff;\n        }\n\n        #pauseBtn:hover,\n        #pauseBtn:focus {\n            background: #c68400;\n        }\n\n        #resumeBtn {\n            background: var(--clr-blue);\n            color: #fff;\n        }\n\n        #resumeBtn:hover,\n        #resumeBtn:focus {\n            background: #01579b;\n        }\n\n        textarea,\n        input[type=\"text\"],\n        input[type=\"number\"],\n        input[type=\"file\"],\n        select {\n            width: 100%;\n            font-size: 15px;\n            padding: 7px 9px;\n            margin: 6px 0 12px;\n            border: 1.3px solid var(--clr-border);\n            border-radius: 6px;\n            background: var(--clr-soft);\n            outline: none;\n            transition: border .2s, background .2s;\n        }\n\n        textarea:focus,\n        input[type=\"text\"]:focus,\n        input[type=\"number\"]:focus,\n        select:focus {\n            border-color: var(--clr-primary);\n            background: #f2faf6;\n        }\n\n        input[type=\"file\"] {\n            padding: 0;\n            background: none;\n            border: none;\n        }\n\n        #numberList {\n            display: grid;\n            gap: 8px 10px;\n            grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));\n            max-height: none;\n            overflow: unset;\n            padding-right: 0;\n        }\n\n        #numberList label {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 10px;\n            padding: 6px 10px;\n            background: var(--clr-soft);\n            border: 1px dashed var(--clr-accent);\n            border-radius: 8px;\n            max-width: 100%;\n            white-space: normal;\n            overflow-wrap: anywhere;\n            min-width: 0;\n            font-size: 13px;\n            line-height: 1.25;\n        }\n\n        .settings-wrap {\n            margin-bottom: 18px;\n        }\n\n        .settings-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: #ffffff;\n            border-left: 7px solid var(--clr-primary);\n            border-radius: 16px;\n            padding: 14px 16px;\n            box-shadow: var(--shadow-1);\n            border: 1px solid rgba(0, 0, 0, .06);\n            cursor: pointer;\n            user-select: none;\n        }\n\n        .settings-header .title {\n            font-weight: 800;\n            color: var(--clr-primary-d);\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .settings-header .meta {\n            font-size: 12px;\n            color: #2d6a3d;\n            opacity: .85;\n        }\n\n        .settings-header .chev {\n            font-size: 18px;\n            transition: transform .18s ease;\n        }\n\n        .settings-header[data-open=\"0\"] .chev {\n            transform: rotate(-90deg);\n        }\n\n        .settings-body {\n            margin-top: 10px;\n        }\n\n        .settings-body[hidden] {\n            display: none;\n        }\n\n        .settings-actions {\n            display: flex;\n            gap: 8px;\n            flex-wrap: wrap;\n            margin-top: 10px;\n        }\n\n        .btn-mini {\n            padding: 6px 10px;\n            border-radius: 10px;\n            border: 1px dashed rgba(0, 0, 0, .18);\n            background: #f7fcfa;\n            cursor: pointer;\n            font-size: 13px;\n            color: #185734;\n        }\n\n        .btn-mini:hover {\n            border-style: solid;\n        }\n\n        .timer-block-ui {\n            background: #f4fef8;\n            border: 1.4px solid #c4f1e3;\n            border-radius: 11px;\n            padding: 15px 18px 10px;\n            margin-bottom: 18px;\n            box-shadow: var(--shadow-2);\n        }\n\n        .timer-block-title {\n            font-size: 16px;\n            font-weight: 700;\n            color: #19734d;\n            margin-bottom: 7px;\n        }\n\n        .timer-block-info {\n            background: #eafbea;\n            color: #19734d;\n            font-size: 13px;\n            padding: 7px 13px;\n            border-left: 3.5px solid var(--clr-primary);\n            border-radius: 7px;\n            margin-bottom: 12px;\n        }\n\n        .grid-2 {\n            display: grid;\n            gap: 14px;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n        }\n\n        .schedule-start-grid {\n            display: grid;\n            grid-template-columns: 1.2fr .8fr;\n            gap: 10px;\n            align-items: end;\n        }\n\n        .small-note {\n            font-size: 12px;\n            color: #666;\n            margin-top: 2px;\n        }\n\n        .status-pill {\n            display: inline-block;\n            padding: 4px 10px;\n            border-radius: 999px;\n            font-size: 12px;\n            font-weight: 700;\n        }\n\n        .pill-green {\n            background: #e8f5e9;\n            color: #2e7d32;\n        }\n\n        .pill-orange {\n            background: #fff3e0;\n            color: #ef6c00;\n        }\n\n        .pill-red {\n            background: #ffebee;\n            color: #c62828;\n        }\n\n        .pill-blue {\n            background: #e3f2fd;\n            color: #1565c0;\n        }\n\n        @media (max-width: 700px) {\n            .btn {\n                font-size: 13px;\n                min-width: 90px;\n                padding: 8px 6px;\n                margin: 3px 2px 0 0;\n            }\n\n            .card {\n                padding: 12px 7px;\n                border-radius: 10px;\n            }\n\n            .grid-2 {\n                grid-template-columns: 1fr;\n            }\n\n            .schedule-start-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        @media (max-width: 560px) {\n            #numberList {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        \/* Smart Blast \u2014 Native CTA URL *\/\n        .smart-cta-toggle {\n            display: flex !important;\n            align-items: center;\n            gap: 10px;\n            font-size: 14px !important;\n            font-weight: 700;\n            cursor: pointer;\n        }\n\n        .smart-cta-toggle input {\n            width: 19px;\n            height: 19px;\n            flex: 0 0 auto;\n            accent-color: #128c55;\n        }\n\n        .smart-cta-fields[hidden] {\n            display: none !important;\n        }\n\n        .smart-cta-grid {\n            display: grid;\n            grid-template-columns: repeat(2, minmax(0, 1fr));\n            gap: 12px;\n        }\n\n        .smart-cta-grid>div {\n            min-width: 0;\n        }\n\n        .smart-cta-fields input[type=\"url\"] {\n            display: block;\n            width: 100%;\n            max-width: 100%;\n            font-size: 15px;\n            padding: 7px 9px;\n            margin: 6px 0 12px;\n            border: 1.3px solid var(--clr-border);\n            border-radius: 6px;\n            background: var(--clr-soft);\n        }\n\n        .smart-cta-preview {\n            margin-top: 12px;\n            padding: 12px;\n            border: 1px solid #d8e9e0;\n            border-radius: 13px;\n            background: #e8f5ec;\n        }\n\n        .smart-cta-preview-card {\n            width: 100%;\n            max-width: 390px;\n            margin: 10px auto 0;\n            padding: 12px;\n            background: #fff;\n            border-radius: 12px;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, .07);\n        }\n\n        .smart-cta-preview-media img,\n        .smart-cta-preview-media video {\n            display: block;\n            width: 100%;\n            max-width: 100%;\n            max-height: 240px;\n            object-fit: contain;\n            border-radius: 9px;\n            margin-bottom: 9px;\n        }\n\n        .smart-cta-preview-text {\n            white-space: pre-wrap;\n            overflow-wrap: anywhere;\n            font-size: 13px;\n            color: #293b32;\n            line-height: 1.5;\n        }\n\n        .smart-cta-preview-button {\n            display: block;\n            width: 100%;\n            padding: 10px 9px;\n            margin-top: 8px;\n            background: #fff;\n            color: #0875c9;\n            border: 1px solid #e0e7e3;\n            border-radius: 8px;\n            font-weight: 800;\n            font-size: 13px;\n            text-align: center;\n            overflow-wrap: anywhere;\n        }\n\n        @media (max-width: 700px) {\n            .smart-cta-grid {\n                grid-template-columns: 1fr;\n            }\n\n            .smart-cta-preview-card {\n                max-width: 100%;\n            }\n        }\n    <\/style>\n    <\/meta>\n    <style>\n        \/* ============================================================\n   AbataBlaster Smart Blast \u00b7 App Studio 2026\n   Scoped layer; original IDs, auth logic, uploads and reports kept.\n   ============================================================ *\/\n        :root {\n            --sb-ink: #163a30;\n            --sb-muted: #678076;\n            --sb-green: #16a566;\n            --sb-surface: #fff;\n            --sb-line: #ddebe4;\n            --sb-tint: #f2f9f5;\n        }\n\n        html,\n        body {\n            max-width: 100%;\n            overflow-x: hidden;\n        }\n\n        .abata-app {\n            max-width: 1120px;\n            min-height: 100vh;\n            padding-top: 12px;\n            padding-bottom: 100px;\n            color: var(--sb-ink);\n        }\n\n        .abata-app,\n        .abata-app * {\n            min-width: 0;\n        }\n\n        .abata-app button,\n        .abata-app input,\n        .abata-app select,\n        .abata-app textarea {\n            font-family: inherit;\n        }\n\n        .abata-app button,\n        .abata-app a {\n            -webkit-tap-highlight-color: transparent;\n        }\n\n        .abata-app .sb-app-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 10px;\n            padding: 10px 12px 13px;\n            background: linear-gradient(130deg, #0c513a, #087b53);\n            border-radius: 18px;\n            box-shadow: 0 12px 28px #0b56381e;\n            color: white;\n        }\n\n        .abata-app .sb-brand {\n            display: flex;\n            align-items: center;\n            gap: 11px;\n        }\n\n        .abata-app .sb-brand img {\n            width: 43px;\n            height: 43px;\n            border-radius: 13px;\n            object-fit: cover;\n            background: #fff;\n            border: 2px solid #e3f8eb;\n        }\n\n        .abata-app .sb-brand strong {\n            display: block;\n            font-size: 19px;\n            line-height: 1.1;\n            letter-spacing: -.4px;\n        }\n\n        .abata-app .sb-brand small {\n            display: block;\n            margin-top: 4px;\n            font-size: 10px;\n            color: #c3ead7;\n            font-weight: 600;\n        }\n\n        .abata-app .sb-header-actions {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            flex: 0 0 auto;\n        }\n\n        .abata-app .sb-header-icon,\n        .abata-app .sb-account-details>summary {\n            width: 37px;\n            height: 37px;\n            border-radius: 12px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 21px;\n            font-weight: 800;\n            background: #ffffff22;\n            color: #fff;\n            text-decoration: none;\n            border: 1px solid #ffffff35;\n            cursor: pointer;\n            list-style: none;\n        }\n\n        .abata-app .sb-header-icon:hover,\n        .abata-app .sb-account-details>summary:hover {\n            background: #ffffff40;\n        }\n\n        .abata-app .sb-account-details {\n            position: relative;\n        }\n\n        .abata-app .sb-account-details>summary::-webkit-details-marker {\n            display: none;\n        }\n\n        .abata-app .sb-account-details #statusHeader {\n            position: absolute;\n            right: 0;\n            top: 44px;\n            z-index: 70;\n            width: min(340px, calc(100vw - 35px));\n            box-shadow: 0 15px 34px #092f2550;\n            border-radius: 14px;\n        }\n\n        .abata-app #topUserStatus {\n            color: #174d36;\n            margin-bottom: 0 !important;\n            display: flex;\n        }\n\n        .abata-app #topUserStatus>div {\n            flex: 1 1 160px;\n        }\n\n        .abata-app #topUserStatus button {\n            cursor: pointer;\n        }\n\n        .abata-app #amaranLangganan {\n            margin: 12px 0 !important;\n        }\n\n        .abata-app .sb-glance {\n            margin: 12px 0 12px;\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 12px 14px;\n            border: 1px solid #d7e9de;\n            background: #fff;\n            border-radius: 16px;\n            box-shadow: 0 2px 10px #10291908;\n        }\n\n        .abata-app .sb-glance-status {\n            flex: 1;\n            min-width: 0;\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n        }\n\n        .abata-app .sb-glance-status span {\n            font-size: 9px;\n            font-weight: 900;\n            color: var(--sb-green);\n            letter-spacing: 1px;\n        }\n\n        .abata-app .sb-glance-status strong {\n            font-size: 23px;\n            letter-spacing: -.4px;\n            line-height: 1.05;\n        }\n\n        .abata-app .sb-glance-status small {\n            font-size: 10px;\n            color: var(--sb-muted);\n        }\n\n        .abata-app .sb-glance-steps {\n            display: flex;\n            gap: 10px;\n        }\n\n        .abata-app .sb-glance-steps div {\n            display: flex;\n            gap: 5px;\n            align-items: center;\n            font-size: 11px;\n            color: #436957;\n            font-weight: 700;\n        }\n\n        .abata-app .sb-glance-live {\n            padding: 9px 11px;\n            background: #e6f7ed;\n            color: #07794c;\n            border: 0;\n            border-radius: 11px;\n            font-size: 11px;\n            font-weight: 800;\n            cursor: pointer;\n            white-space: nowrap;\n        }\n\n        .abata-app .sb-app-tabs {\n            display: flex;\n            gap: 7px;\n            overflow-x: auto;\n            overscroll-behavior-x: contain;\n            scrollbar-width: none;\n            position: sticky;\n            top: 0;\n            z-index: 25;\n            background: #f2faf6fa;\n            backdrop-filter: blur(12px);\n            padding: 8px 2px 10px;\n            margin-bottom: 9px;\n            scroll-padding-inline: 12px;\n        }\n\n        .abata-app .sb-app-tabs::-webkit-scrollbar {\n            display: none;\n        }\n\n        .abata-app .sb-tab {\n            border: 1px solid var(--sb-line);\n            background: white;\n            border-radius: 13px;\n            padding: 9px 12px;\n            display: flex;\n            align-items: center;\n            gap: 5px;\n            white-space: nowrap;\n            cursor: pointer;\n            flex: 0 0 auto;\n            font-size: 12px;\n            color: #537266;\n            font-weight: 800;\n            box-shadow: 0 2px 5px #08251606;\n        }\n\n        .abata-app .sb-tab .sb-tab-icon {\n            font-size: 16px;\n        }\n\n        .abata-app .sb-tab.is-active {\n            background: #0c8a59;\n            color: #fff;\n            border-color: #0c8a59;\n            box-shadow: 0 5px 12px #0c8a5932;\n        }\n\n        .abata-app .sb-tab-panel[hidden],\n        .abata-app .sb-record-panel[hidden],\n        .abata-app .sb-preview-slide[hidden],\n        .abata-app [hidden] {\n            display: none !important;\n        }\n\n        .abata-app .sb-panel-container {\n            min-height: 390px;\n        }\n\n        .abata-app .sb-tab-panel {\n            animation: sb-arrive .17s ease;\n        }\n\n        @keyframes sb-arrive {\n            from {\n                opacity: .35;\n                transform: translateY(5px);\n            }\n\n            to {\n                opacity: 1;\n                transform: none;\n            }\n        }\n\n        .abata-app .sb-panel-header {\n            margin: 9px 1px 15px;\n        }\n\n        .abata-app .sb-panel-header h2 {\n            margin: 0;\n            color: #164633;\n            font-size: 19px;\n            font-weight: 850;\n            letter-spacing: -.3px;\n        }\n\n        .abata-app .sb-panel-header p {\n            margin: 4px 0 0;\n            font-size: 12px;\n            line-height: 1.5;\n            color: #668173;\n        }\n\n        .abata-app .card,\n        .abata-app .compact-card {\n            border: 1px solid #dcebe3;\n            border-left: 1px solid #dcebe3;\n            box-shadow: 0 3px 12px #133d250b;\n            margin-bottom: 12px;\n            border-radius: 15px;\n            padding: 15px;\n            background: #fff;\n        }\n\n        .abata-app .card h3 {\n            font-size: 15px;\n            font-weight: 850;\n            margin-bottom: 10px;\n        }\n\n        .abata-app input[type=\"text\"],\n        .abata-app input[type=\"url\"],\n        .abata-app input[type=\"number\"],\n        .abata-app input[type=\"datetime-local\"],\n        .abata-app textarea,\n        .abata-app select {\n            border-radius: 10px;\n            min-height: 41px;\n            margin: 6px 0 12px;\n            background: #fbfefa;\n            border-color: #dae7df;\n            padding: 10px 11px;\n            color: #193e2e;\n            max-width: 100%;\n        }\n\n        .abata-app textarea {\n            min-height: 170px;\n            line-height: 1.55;\n            resize: vertical;\n        }\n\n        .abata-app input:focus-visible,\n        .abata-app button:focus-visible,\n        .abata-app textarea:focus-visible,\n        .abata-app summary:focus-visible {\n            outline: 3px solid #2ebc8663;\n            outline-offset: 2px;\n        }\n\n        .abata-app #numberList {\n            max-height: 360px;\n            overflow: auto;\n            padding: 2px;\n            grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr));\n            gap: 5px;\n        }\n\n        .abata-app #numberList label {\n            margin: 3px 0 !important;\n            border-radius: 12px !important;\n        }\n\n        .abata-app .sb-panel-footer {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 10px;\n            flex-wrap: wrap;\n            background: #eff9f3;\n            border: 1px dashed #c2e5d1;\n            padding: 12px;\n            border-radius: 14px;\n            font-size: 11px;\n            color: #527661;\n            margin: 13px 0;\n        }\n\n        .abata-app .sb-next-btn {\n            border: 0;\n            background: #0d9159;\n            color: white;\n            border-radius: 10px;\n            font-weight: 800;\n            cursor: pointer;\n            padding: 11px 13px;\n            font-size: 12px;\n            white-space: nowrap;\n        }\n\n        .abata-app .sb-help-accordion,\n        .abata-app .sb-media-accordion {\n            border-radius: 14px;\n            background: #fff;\n            border: 1px solid #dcebe3;\n            margin-bottom: 12px;\n            overflow: hidden;\n            box-shadow: 0 3px 10px #133d2507;\n        }\n\n        .abata-app .sb-help-accordion>summary,\n        .abata-app .sb-media-accordion>summary {\n            list-style: none;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            gap: 9px;\n            padding: 13px 15px;\n            font-weight: 800;\n            color: #185c3b;\n            font-size: 13px;\n        }\n\n        .abata-app .sb-help-accordion>summary::-webkit-details-marker,\n        .abata-app .sb-media-accordion>summary::-webkit-details-marker {\n            display: none;\n        }\n\n        .abata-app .sb-help-accordion[open]>summary,\n        .abata-app .sb-media-accordion[open]>summary {\n            background: #eaf7ef;\n            border-bottom: 1px solid #dcebe3;\n        }\n\n        .abata-app .sb-help-accordion>.card,\n        .abata-app .sb-media-accordion>.card {\n            margin: 10px;\n            border: 0;\n            background: transparent;\n            box-shadow: none;\n            padding: 9px;\n        }\n\n        .abata-app .sb-media-accordion .sb-chevron {\n            margin-left: 0;\n            color: #4b8c6b;\n            font-size: 17px;\n        }\n\n        .abata-app .sb-media-accordion .sb-inline-note {\n            margin-left: auto;\n            color: #52826b;\n            font-size: 11px;\n            background: #eaf8f0;\n            border-radius: 18px;\n            padding: 5px 9px;\n        }\n\n        .abata-app #smartBlastEstimate {\n            max-height: 240px;\n            overflow-y: auto;\n            overflow-x: hidden;\n            padding: 8px 12px;\n        }\n\n        .abata-app .sb-estimate-accordion {\n            margin: 12px 0 0;\n        }\n\n        .abata-app .sb-preview-message-container {\n            border: 1px solid #cde6d6;\n            background: #eaf7f0;\n            padding: 12px;\n            border-radius: 14px;\n            margin: 8px 0;\n        }\n\n        .abata-app .sb-mini-title {\n            font-size: 12px;\n            font-weight: 850;\n            color: #217043;\n        }\n\n        .abata-app #previewMessage {\n            white-space: pre-wrap;\n            overflow-wrap: anywhere;\n            max-height: 180px;\n            overflow-y: auto;\n            padding: 9px;\n            border: 1px solid #d7e8db;\n            border-radius: 10px;\n            background: white;\n            margin: 8px 0;\n            font-size: 12px;\n        }\n\n        .abata-app .smart-cta-grid {\n            gap: 9px;\n        }\n\n        .abata-app .smart-cta-fields input[type=\"url\"] {\n            min-height: 41px;\n            border-radius: 10px;\n            padding: 10px 11px;\n        }\n\n        .abata-app .smart-cta-preview {\n            margin-top: 12px;\n            padding: 11px;\n            border-radius: 14px;\n        }\n\n        .abata-app .sb-fallback-option {\n            background: #f5f8ff;\n            border: 1px solid #d8e3f7;\n            border-radius: 13px;\n            padding: 11px;\n            margin: 15px 0 11px;\n        }\n\n        .abata-app .sb-switch-row {\n            display: flex !important;\n            gap: 9px;\n            align-items: center;\n            font-size: 12px !important;\n            margin: 0 !important;\n            cursor: pointer;\n        }\n\n        .abata-app .sb-switch-icon {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            min-width: 32px;\n            width: 32px;\n            height: 32px;\n            border-radius: 10px;\n            background: #e4efff;\n            font-size: 18px;\n        }\n\n        .abata-app .sb-switch-copy {\n            display: flex;\n            flex-direction: column;\n            gap: 3px;\n            flex: 1;\n        }\n\n        .abata-app .sb-switch-copy strong {\n            font-size: 13px;\n            color: #244f80;\n        }\n\n        .abata-app .sb-switch-copy small {\n            font-size: 10px;\n            color: #678099;\n            line-height: 1.35;\n        }\n\n        .abata-app .sb-switch {\n            width: 43px;\n            min-width: 43px;\n            height: 25px;\n            position: relative;\n            display: block;\n        }\n\n        .abata-app .sb-switch input {\n            opacity: 0;\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            z-index: 2;\n            cursor: pointer;\n        }\n\n        .abata-app .sb-switch-slider {\n            position: absolute;\n            inset: 0;\n            border-radius: 50px;\n            background: #b8c7c5;\n            transition: .15s;\n        }\n\n        .abata-app .sb-switch-slider:before {\n            content: \"\";\n            position: absolute;\n            width: 19px;\n            height: 19px;\n            left: 3px;\n            top: 3px;\n            border-radius: 50%;\n            background: white;\n            box-shadow: 0 1px 4px #0003;\n            transition: .15s;\n        }\n\n        .abata-app .sb-switch input:checked+.sb-switch-slider {\n            background: #079d60;\n        }\n\n        .abata-app .sb-switch input:checked+.sb-switch-slider:before {\n            transform: translateX(18px);\n        }\n\n        .abata-app .sb-switch input:disabled+.sb-switch-slider {\n            opacity: .4;\n        }\n\n        .abata-app .sb-switch-state {\n            font-size: 11px;\n            font-weight: 900;\n            color: #18573b;\n            width: 26px;\n        }\n\n        .abata-app .sb-guard-explain {\n            font-size: 11px;\n            color: #2759a0;\n            font-weight: 700;\n            margin: 9px 0 3px;\n        }\n\n        .abata-app .sb-guard-note {\n            font-size: 10px;\n            color: #657580;\n            display: block;\n            line-height: 1.5;\n        }\n\n        .abata-app .sb-preview-header {\n            display: flex;\n            align-items: flex-start;\n            justify-content: space-between;\n            gap: 10px;\n            flex-wrap: wrap;\n        }\n\n        .abata-app .sb-preview-header strong {\n            display: block;\n            font-size: 13px;\n            color: #16784c;\n        }\n\n        .abata-app .sb-preview-header small {\n            display: block;\n            font-size: 10px;\n            line-height: 1.4;\n            margin-top: 3px;\n            color: #587768;\n        }\n\n        .abata-app .sb-preview-stepbar {\n            display: flex;\n            gap: 5px;\n            align-items: center;\n        }\n\n        .abata-app .sb-preview-stepbar button {\n            background: white;\n            border: 1px solid #d2e1d8;\n            border-radius: 10px;\n            padding: 7px 8px;\n            cursor: pointer;\n            font-weight: 800;\n            font-size: 11px;\n            color: #366a4b;\n        }\n\n        .abata-app .sb-preview-stepbar button.is-active {\n            background: #0c8a59;\n            color: white;\n            border-color: #0c8a59;\n        }\n\n        .abata-app .sb-preview-track {\n            display: flex;\n            gap: 12px;\n            overflow-x: auto;\n            scroll-snap-type: x mandatory;\n            scrollbar-width: thin;\n            scroll-padding: 0;\n            overscroll-behavior-x: contain;\n            position: relative;\n        }\n\n        .abata-app .sb-preview-slide {\n            flex: 0 0 100%;\n            max-width: 100%;\n            scroll-snap-align: start;\n            scroll-snap-stop: normal;\n            padding-bottom: 8px;\n        }\n\n        .abata-app .sb-preview-card-caption {\n            font-size: 11px;\n            font-weight: 750;\n            color: #4f8367;\n            margin: 9px auto -4px;\n            max-width: 390px;\n        }\n\n        .abata-app .smart-cta-preview-card {\n            max-width: 390px;\n            min-width: 0;\n        }\n\n        .abata-app .smart-cta-preview-text {\n            position: relative;\n            max-height: 145px;\n            overflow-y: auto;\n            scrollbar-width: thin;\n            padding-bottom: 5px;\n            white-space: pre-wrap;\n            overflow-wrap: anywhere;\n        }\n\n        .abata-app .smart-cta-preview-text.sb-preview-expanded {\n            max-height: 320px;\n            overflow-y: auto;\n        }\n\n        .abata-app .sb-preview-more {\n            border: 1px solid #c6e4d4;\n            background: white;\n            color: #18824f;\n            display: block;\n            margin: 7px auto 0;\n            border-radius: 9px;\n            padding: 6px 12px;\n            cursor: pointer;\n            font-size: 11px;\n            font-weight: 800;\n        }\n\n        .abata-app .sb-fallback-preview-links {\n            margin-top: 12px;\n            border-top: 1px dashed #dbe9de;\n            padding-top: 6px;\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n        }\n\n        .abata-app .sb-fallback-link-block {\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n            overflow-wrap: anywhere;\n            color: #215b41;\n            font-size: 12px;\n        }\n\n        .abata-app .sb-fallback-link-block span {\n            color: #0967bd;\n            text-decoration: underline;\n            font-size: 11px;\n            word-break: break-all;\n        }\n\n        .abata-app .smart-cta-preview-media img,\n        .abata-app .smart-cta-preview-media video {\n            max-height: 165px;\n            object-fit: contain;\n        }\n\n        .abata-app .sb-send-readiness {\n            display: grid;\n            grid-template-columns: repeat(3, minmax(0, 1fr));\n            gap: 8px;\n            margin: 10px 0;\n        }\n\n        .abata-app .sb-send-readiness>div {\n            background: #fff;\n            border: 1px solid #e0eee7;\n            border-radius: 13px;\n            padding: 12px 9px;\n            text-align: center;\n        }\n\n        .abata-app .sb-send-readiness span {\n            font-size: 10px;\n            color: #608473;\n            display: block;\n        }\n\n        .abata-app .sb-send-readiness strong {\n            font-size: 14px;\n            color: #126744;\n            display: block;\n            overflow-wrap: anywhere;\n            margin-top: 4px;\n        }\n\n        .abata-app .sb-safety-note {\n            font-size: 11px;\n            color: #68766a;\n            line-height: 1.55;\n            padding: 8px 11px;\n            background: #eaf4ec;\n            border-radius: 10px;\n        }\n\n        .abata-app .sb-record-tabs {\n            display: flex;\n            gap: 8px;\n            background: #e5f2e9;\n            border-radius: 13px;\n            padding: 5px;\n            margin-bottom: 12px;\n        }\n\n        .abata-app .sb-record-tabs button {\n            flex: 1;\n            border: 0;\n            background: transparent;\n            border-radius: 9px;\n            padding: 10px 15px;\n            color: #4d775f;\n            font-size: 12px;\n            font-weight: 850;\n            cursor: pointer;\n        }\n\n        .abata-app .sb-record-tabs button.is-active {\n            background: white;\n            color: #0d774c;\n            box-shadow: 0 1px 7px #00000013;\n        }\n\n        .abata-app .sb-record-panel table {\n            width: 100%;\n            min-width: 630px;\n            border-collapse: collapse;\n        }\n\n        .abata-app .sb-record-panel table th {\n            position: sticky;\n            top: 0;\n            background: #e9f7ed;\n            color: #265e40;\n            z-index: 1;\n        }\n\n        .abata-app .sb-record-panel table th,\n        .abata-app .sb-record-panel table td {\n            padding: 9px 10px;\n            border-bottom: 1px solid #e7efea;\n            white-space: nowrap;\n            vertical-align: top;\n        }\n\n        .abata-app #logBlastTable td:last-child {\n            max-width: 300px;\n            white-space: normal;\n            overflow-wrap: anywhere;\n        }\n\n        .abata-app #logBlastTable {\n            font-size: 12px;\n        }\n\n        .abata-app .sb-record-panel>div[style*=\"overflow\"] {\n            width: 100%;\n            max-width: 100%;\n            overflow-x: auto !important;\n            overscroll-behavior-x: contain;\n            border: 1px solid #dbece3;\n            border-radius: 11px;\n            background: white;\n        }\n\n        .abata-app .sb-record-panel .download-actions {\n            padding: 9px 0;\n        }\n\n        .abata-app .sb-record-panel .download-actions .btn {\n            border-radius: 10px;\n        }\n\n        .abata-app #senderSummaryBox {\n            min-height: 70px;\n        }\n\n        .abata-app .progress-compact-grid {\n            grid-template-columns: repeat(4, minmax(0, 1fr));\n        }\n\n        .abata-app .sb-live-cta {\n            display: flex;\n            justify-content: flex-end;\n            margin-bottom: 15px;\n        }\n\n        .abata-app .sb-mobile-dock {\n            display: none;\n        }\n\n        @media (min-width:900px) {\n            .abata-app .sb-panel-container {\n                max-width: 100%;\n            }\n\n            .abata-app .sb-tab {\n                flex: 1;\n                justify-content: center;\n            }\n\n            .abata-app #numberList {\n                max-height: 470px;\n            }\n\n            .abata-app .sb-preview-track {\n                gap: 14px;\n            }\n\n            .abata-app .sb-preview-slide {\n                flex-basis: calc(50% - 7px);\n            }\n\n            .abata-app .sb-preview-stepbar {\n                display: none;\n            }\n\n            .abata-app .sb-preview-track {\n                overflow-x: visible;\n            }\n        }\n\n        @media (max-width:700px) {\n            .abata-app {\n                padding-left: 10px;\n                padding-right: 10px;\n                padding-top: 8px;\n                padding-bottom: calc(75px + env(safe-area-inset-bottom));\n            }\n\n            .abata-app .sb-app-header {\n                padding: 9px 11px;\n            }\n\n            .abata-app .sb-brand img {\n                height: 36px;\n                width: 36px;\n                border-radius: 10px;\n            }\n\n            .abata-app .sb-brand strong {\n                font-size: 17px;\n            }\n\n            .abata-app .sb-brand small {\n                font-size: 9px;\n            }\n\n            .abata-app .sb-glance {\n                gap: 8px;\n                padding: 9px 11px;\n            }\n\n            .abata-app .sb-glance-steps {\n                display: none;\n            }\n\n            .abata-app .sb-tab {\n                padding: 8px 10px;\n            }\n\n            .abata-app .sb-tab-label {\n                font-size: 11px;\n            }\n\n            .abata-app .sb-panel-header h2 {\n                font-size: 17px;\n            }\n\n            .abata-app .card,\n            .abata-app .compact-card {\n                padding: 12px 11px;\n            }\n\n            .abata-app #numberList {\n                max-height: 390px;\n            }\n\n            .abata-app .progress-compact-grid {\n                grid-template-columns: repeat(3, minmax(0, 1fr));\n                gap: 7px;\n            }\n\n            .abata-app .progress-stat {\n                padding: 9px 4px;\n            }\n\n            .abata-app .job-meta-grid {\n                grid-template-columns: repeat(2, minmax(0, 1fr));\n            }\n\n            .abata-app .sb-mobile-dock {\n                position: fixed;\n                display: flex;\n                align-items: stretch;\n                justify-content: space-around;\n                bottom: 0;\n                left: 0;\n                right: 0;\n                padding: 6px 6px calc(6px + env(safe-area-inset-bottom));\n                background: #ffffffee;\n                backdrop-filter: blur(18px);\n                border-top: 1px solid #d3e6da;\n                z-index: 50;\n                box-shadow: 0 -3px 16px #093b2715;\n            }\n\n            .abata-app .sb-mobile-dock button {\n                display: flex;\n                align-items: center;\n                flex-direction: column;\n                justify-content: center;\n                gap: 1px;\n                flex: 1;\n                border: 0;\n                background: transparent;\n                font-size: 10px;\n                font-weight: 750;\n                color: #6b8277;\n                cursor: pointer;\n                padding: 5px 2px;\n                border-radius: 10px;\n            }\n\n            .abata-app .sb-mobile-dock button span {\n                font-size: 20px;\n                line-height: 1.2;\n            }\n\n            .abata-app .sb-mobile-dock button.is-active {\n                color: #068950;\n                background: #eaf7ef;\n            }\n\n            .abata-app .sb-mobile-dock .sb-dock-primary {\n                background: #087e53 !important;\n                color: white !important;\n                box-shadow: 0 4px 9px #087e5338;\n            }\n\n            .abata-app .sb-glance-status strong {\n                font-size: 20px;\n            }\n\n            .abata-app .sb-send-readiness strong {\n                font-size: 12px;\n            }\n        }\n\n        @media (max-width:390px) {\n\n            .abata-app .sb-header-icon,\n            .abata-app .sb-account-details>summary {\n                width: 32px;\n                height: 32px;\n                font-size: 17px;\n            }\n\n            .abata-app .sb-tab {\n                padding: 7px 9px;\n            }\n        }\n\n        @media (prefers-reduced-motion:reduce) {\n            .abata-app .sb-tab-panel {\n                animation: none;\n            }\n\n            .abata-app .sb-app-tabs {\n                scroll-behavior: auto;\n            }\n        }\n    <\/style>\n<\/head>\n\n<body>\n    <main class=\"page abata-app\" id=\"smartBlastApp\">\n        <header class=\"sb-app-header\">\n            <div class=\"sb-brand\"><img decoding=\"async\" alt=\"AbataBlaster\" loading=\"lazy\"\n                    src=\"https:\/\/abatablaster.xyz\/wp-content\/uploads\/2025\/05\/photo_2024-05-16_15-47-59.jpg\" \/>\n                <div><strong>Smart Blast<\/strong><small>WhatsApp Campaign Studio<\/small><\/div>\n            <\/div>\n            <div class=\"sb-header-actions\"><a aria-label=\"Dashboard\" class=\"sb-header-icon\"\n                    href=\"https:\/\/abatablaster.xyz\/index.php\/dashboard-user\/\" title=\"Dashboard\">\u2302<\/a><a\n                    aria-label=\"Frontpage\" class=\"sb-header-icon\" href=\"https:\/\/abatablaster.xyz\/frontpage.html\"\n                    title=\"Frontpage\">\u25a6<\/a>\n                <details class=\"sb-account-details\">\n                    <summary aria-label=\"Maklumat akaun\" title=\"Akaun\">\ud83d\udc64<\/summary>\n                    <div id=\"statusHeader\" style=\"display:none;\">\n                        <div id=\"topUserStatus\"\n                            style=\"display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px;background:#effaf4;border-radius:14px;border:1px solid #d9eee3;font-size:12px;\">\n                            <div>\n                                <div>\ud83d\udce7 <strong>Email:<\/strong> <span id=\"userEmail\">\u2013<\/span><\/div>\n                                <div>\ud83d\udcbc <strong>Pakej:<\/strong> <span id=\"infoPakej\">\u2013<\/span><\/div>\n                                <div>\ud83d\udce4 <strong>Mesej Baki:<\/strong> <span id=\"infoMesej\">\u2013<\/span> (<span\n                                        id=\"infoHari\">\u2013<\/span>\n                                    hari)<\/div>\n                                <div>\ud83d\udcf1 <strong>WhatsApp Aktif:<\/strong> <span id=\"infoNombor\">\u2013<\/span><\/div>\n                            <\/div>\n                            <div style=\"margin-left: auto; align-self: center; text-align: right;\">\n                                <a href=\"https:\/\/abatablaster.xyz\/index.php\/telegram-alert\/\"\n                                    style=\"display:block; margin-bottom: 8px; color: #1565c0; font-weight: bold;\">\n                                    \ud83d\udd14 Sambungkan Telegram\n                                <\/a>\n                                <button onclick=\"logout()\"\n                                    style=\"background: #d32f2f; color: white; padding: 6px 15px; border-radius: 6px; border: none;\">\ud83d\udeaa\n                                    Log Keluar<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/details>\n            <\/div>\n        <\/header>\n        <div id=\"amaranLangganan\"\n            style=\"display: none; background: #ffebee; border: 1px solid #f44336; color: #b71c1c; padding: 12px; border-radius: 10px; margin-bottom: 20px; font-weight: bold; text-align: center; animation: blink 1s step-end infinite;\">\n            \u26a0\ufe0f Langganan anda telah tamat atau mesej telah habis. Sila upgrade untuk terus gunakan sistem ini.\n        <\/div>\n        <div class=\"sb-glance\">\n            <div class=\"sb-glance-status\"><span>\u26a1 STATUS<\/span><strong id=\"sbLiveSent\">0\/0<\/strong><small>Mesej dihantar\n                    \/ target<\/small><\/div>\n            <div class=\"sb-glance-steps\">\n                <div><span>\ud83e\udd16<\/span><strong id=\"sbTopBots\">Sender<\/strong><\/div>\n                <div><span>\ud83d\udc65<\/span><strong id=\"sbTopContacts\">Contact<\/strong><\/div>\n            <\/div><button class=\"sb-glance-live\" data-sb-nav=\"live\" type=\"button\">\ud83d\udcca Monitor \u2197<\/button>\n        <\/div>\n        <nav aria-label=\"Navigasi Smart Blast\" class=\"sb-app-tabs\" id=\"sbAppTabs\" role=\"tablist\"><button\n                aria-controls=\"sb-panel-bots\" aria-selected=\"false\" class=\"sb-tab\" data-sb-tab=\"bots\" role=\"tab\"\n                title=\"Bot\" type=\"button\"><span class=\"sb-tab-icon\">\ud83d\udcf1<\/span><span\n                    class=\"sb-tab-label\">Bot<\/span><\/button><button aria-controls=\"sb-panel-contacts\"\n                aria-selected=\"false\" class=\"sb-tab\" data-sb-tab=\"contacts\" role=\"tab\" title=\"Contact\"\n                type=\"button\"><span class=\"sb-tab-icon\">\ud83d\udc65<\/span><span\n                    class=\"sb-tab-label\">Contact<\/span><\/button><button aria-controls=\"sb-panel-message\"\n                aria-selected=\"false\" class=\"sb-tab\" data-sb-tab=\"message\" role=\"tab\" title=\"Mesej\" type=\"button\"><span\n                    class=\"sb-tab-icon\">\u270d\ufe0f<\/span><span class=\"sb-tab-label\">Mesej<\/span><\/button><button\n                aria-controls=\"sb-panel-cta\" aria-selected=\"false\" class=\"sb-tab\" data-sb-tab=\"cta\" role=\"tab\"\n                title=\"CTA\" type=\"button\"><span class=\"sb-tab-icon\">\ud83d\udd17<\/span><span\n                    class=\"sb-tab-label\">CTA<\/span><\/button><button aria-controls=\"sb-panel-settings\"\n                aria-selected=\"false\" class=\"sb-tab\" data-sb-tab=\"settings\" role=\"tab\" title=\"Tetapan\"\n                type=\"button\"><span class=\"sb-tab-icon\">\u2699\ufe0f<\/span><span\n                    class=\"sb-tab-label\">Tetapan<\/span><\/button><button aria-controls=\"sb-panel-send\"\n                aria-selected=\"false\" class=\"sb-tab\" data-sb-tab=\"send\" role=\"tab\" title=\"Hantar\" type=\"button\"><span\n                    class=\"sb-tab-icon\">\ud83d\ude80<\/span><span class=\"sb-tab-label\">Hantar<\/span><\/button><button\n                aria-controls=\"sb-panel-live\" aria-selected=\"false\" class=\"sb-tab\" data-sb-tab=\"live\" role=\"tab\"\n                title=\"Live\" type=\"button\"><span class=\"sb-tab-icon\">\ud83d\udcca<\/span><span\n                    class=\"sb-tab-label\">Live<\/span><\/button><button aria-controls=\"sb-panel-records\"\n                aria-selected=\"false\" class=\"sb-tab\" data-sb-tab=\"records\" role=\"tab\" title=\"Rekod\" type=\"button\"><span\n                    class=\"sb-tab-icon\">\ud83d\udccb<\/span><span class=\"sb-tab-label\">Rekod<\/span><\/button><\/nav>\n        <div class=\"sb-panel-container\">\n            <section aria-label=\"\ud83d\udcf1 WhatsApp Bot\" class=\"sb-tab-panel\" data-sb-panel=\"bots\" hidden=\"\" id=\"sb-panel-bots\"\n                role=\"tabpanel\">\n                <div class=\"sb-panel-header\">\n                    <div>\n                        <h2>\ud83d\udcf1 WhatsApp Bot<\/h2>\n                        <p>Pilih sender dalam susunan round-robin. Ketik nombor untuk pilih atau imbas QR.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"card card-number\">\n                    <h3>\ud83d\udcf1 WhatsApp Sender<\/h3>\n                    <div id=\"numberList\"><\/div>\n                <\/div>\n                <div class=\"sb-panel-footer\"><span id=\"sbBotPanelHint\">Susunan #1, #2 mengikut turutan\n                        pilihan.<\/span><button class=\"sb-next-btn\" data-sb-next=\"contacts\" type=\"button\">Seterusnya:\n                        Contact \u2192<\/button><\/div>\n            <\/section>\n            <section aria-label=\"\ud83d\udc65 Contact\" class=\"sb-tab-panel\" data-sb-panel=\"contacts\" hidden=\"\"\n                id=\"sb-panel-contacts\" role=\"tabpanel\">\n                <div class=\"sb-panel-header\">\n                    <div>\n                        <h2>\ud83d\udc65 Contact<\/h2>\n                        <p>Import CSV\/JSON, atau tukar fail Excel kepada CSV. Data lama kekal sehingga anda upload\n                            semula.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"card\">\n                    <h3>\ud83d\udc65 Import Contact<\/h3>\n                    <input accept=\".csv,.json,text\/csv,application\/json,text\/plain,application\/vnd.ms-excel\"\n                        id=\"fileInput\" type=\"file\" \/>\n                    <button class=\"btn\" id=\"downloadCsvTemplateBtn\" style=\"margin-left:10px;background:#1976d2;\"\n                        type=\"button\">Download Contoh CSV<\/button>\n                    <div class=\"small-note\">\n                        Pastikan field nombor utama ialah <b>no_tel<\/b>. Field lain seperti\n                        <b>nama<\/b>, <b>company<\/b> dan <b>tempat<\/b> boleh digunakan untuk personalization.\n                    <\/div>\n                    <div id=\"uploadProgressWrap\" style=\"display:none;margin-top:10px;\">\n                        <div style=\"height:10px;background:#e0f2f1;border-radius:6px;overflow:hidden;\">\n                            <div id=\"uploadProgressBar\" style=\"height:10px;width:0%;background:#26a69a;\"><\/div>\n                        <\/div>\n                        <div id=\"uploadProgressText\" style=\"font-size:12px;color:#1565c0;margin-top:6px;\">\n                            Menunggu&#8230;\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"card\" id=\"xlsxConverterCard\"\n                    style=\"background:#f7fcfa;border-left:7px solid #00bfa5; margin-bottom:18px;\">\n                    <button id=\"toggleConverterBtn\"\n                        style=\"background:#009688;color:#fff;padding:7px 16px;border-radius:7px;border:none;font-size:14px;cursor:pointer;font-weight:600;margin-bottom:8px;\"\n                        type=\"button\">\n                        \u2b07\ufe0f Tukar Excel ke CSV? (Klik untuk buka\/tutup)\n                    <\/button>\n                    <div id=\"xlsxToCsvSection\" style=\"display:none;\">\n                        <div style=\"background:#e8f5e9;padding:14px 18px;border-radius:10px;\">\n                            <b>Convert fail Excel (.xlsx) ke CSV<\/b>\n                            <div style=\"font-size:13px;color:#333;margin-bottom:7px;\">Jika anda terima contact dalam\n                                format Excel, boleh convert di sini sebelum upload ke sistem.<\/div>\n                            <input accept=\".xlsx\" id=\"xlsxFile\" style=\"margin-bottom:8px;\" type=\"file\" \/>\n                            <button id=\"convertBtn\" onclick=\"convertXLSXtoCSV()\"\n                                style=\"padding:6px 16px;background:#43a047;color:#fff;border-radius:6px;\">Convert<\/button>\n                            <a href=\"#\" id=\"downloadCsvBtn\"\n                                style=\"display:none;margin-left:18px;padding:6px 16px;background:#43a047;color:#fff;border-radius:5px;text-decoration:none;\">Download\n                                .csv<\/a>\n                            <div id=\"csvPreview\" style=\"margin-top:12px;font-size:13px;color:#444;\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <div id=\"fieldsPreview\" style=\"margin-top:10px;color:#444;font-size:13px\"><\/div>\n                <div class=\"sb-panel-footer\"><span id=\"sbContactPanelHint\">Field no_tel diperlukan.<\/span><button\n                        class=\"sb-next-btn\" data-sb-next=\"message\" type=\"button\">Seterusnya: Mesej \u2192<\/button><\/div>\n            <\/section>\n            <section aria-label=\"\u270d\ufe0f Copywriting\" class=\"sb-tab-panel\" data-sb-panel=\"message\" hidden=\"\"\n                id=\"sb-panel-message\" role=\"tabpanel\">\n                <div class=\"sb-panel-header\">\n                    <div>\n                        <h2>\u270d\ufe0f Copywriting<\/h2>\n                        <p>Masukkan mesej. Preview menggunakan contact pertama dengan contoh SpinText dan\n                            personalization.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"card\">\n                    <h3>\u270d\ufe0f Copywriting<\/h3>\n                    <textarea id=\"blastMessage\"\n                        placeholder=\"{{Hi|Hello|Salam}} {nama}, {{apa khabar?|semoga sihat|harap semuanya baik}} \ud83d\ude0a\"\n                        rows=\"5\" style=\"width:100%;\"><\/textarea>\n                    <div class=\"small-note\">\n                        \ud83c\udfb2 SpinText: <b>{{Hi|Hello|Salam}}<\/b>\n                        \u00a0 \u2022 \u00a0\n                        \ud83d\udc64 Personalization: <b>{nama}<\/b>, <b>{company}<\/b>, <b>{tempat}<\/b>\n                    <\/div>\n                <\/div>\n                <div class=\"sb-preview-message-container\">\n                    <div class=\"sb-mini-title\">\ud83d\udc41\ufe0f Preview Mesej<\/div>\n                    <div id=\"previewMessage\" style=\"margin:10px 0;color:#2e7d32;font-size:14px\"><\/div>\n                <\/div>\n                <details class=\"sb-help-accordion\">\n                    <summary>\u2754 Panduan SpinText &amp; Personalization<\/summary>\n                    <div class=\"card\"\n                        style=\"border-left-color:#1976d2;background:linear-gradient(135deg,#ffffff 0%,#f4f9ff 100%);\">\n                        <h3 style=\"color:#1565c0;\">\u2728 SpinText &amp; Personalization<\/h3>\n                        <div style=\"font-size:13px;line-height:1.65;color:#37474f;\">\n                            Jadikan setiap mesej lebih bervariasi dan personalized mengikut contact.\n                        <\/div>\n                        <div\n                            style=\"margin-top:12px;padding:12px;background:#fff;border:1px solid #d7e9ff;border-radius:10px;\">\n                            <div style=\"font-weight:800;color:#1565c0;margin-bottom:5px;\">\n                                \ud83c\udfb2 SpinText\n                            <\/div>\n                            <div style=\"font-size:13px;color:#455a64;\">\n                                Gunakan <b>double curly bracket<\/b> dan pisahkan pilihan menggunakan simbol <b>|<\/b>.\n                            <\/div>\n                            <div\n                                style=\"margin-top:7px;padding:8px 10px;background:#f5f7fa;border-radius:7px;font-family:monospace;font-size:13px;overflow-wrap:anywhere;\">\n                                {{Hi|Hello|Salam}}\n                            <\/div>\n                            <div style=\"font-size:12px;color:#607d8b;margin-top:5px;\">\n                                Sistem akan pilih salah satu secara rawak untuk setiap penghantaran.\n                            <\/div>\n                        <\/div>\n                        <div\n                            style=\"margin-top:10px;padding:12px;background:#fff;border:1px solid #d9eee2;border-radius:10px;\">\n                            <div style=\"font-weight:800;color:#2e7d32;margin-bottom:5px;\">\n                                \ud83d\udc64 Personalization\n                            <\/div>\n                            <div style=\"font-size:13px;color:#455a64;\">\n                                Gunakan <b>single curly bracket<\/b> berdasarkan nama column dalam CSV\/JSON.\n                            <\/div>\n                            <div\n                                style=\"margin-top:7px;padding:8px 10px;background:#f5f7fa;border-radius:7px;font-family:monospace;font-size:13px;overflow-wrap:anywhere;\">\n                                {nama} \u00a0 {tempat} \u00a0 {company}\n                            <\/div>\n                            <div style=\"font-size:12px;color:#607d8b;margin-top:5px;\">\n                                Contoh: jika field <b>nama<\/b> ialah Ali, <b>{nama}<\/b> akan menjadi <b>Ali<\/b>.\n                            <\/div>\n                        <\/div>\n                        <div\n                            style=\"margin-top:10px;padding:12px;background:#fff8e1;border:1px solid #ffe082;border-radius:10px;\">\n                            <div style=\"font-weight:800;color:#a46b00;margin-bottom:5px;\">\n                                \ud83d\ude80 Gunakan Kedua-duanya Sekali\n                            <\/div>\n                            <div\n                                style=\"padding:8px 10px;background:#fff;border-radius:7px;font-family:monospace;font-size:13px;overflow-wrap:anywhere;\">\n                                {{Hi|Hello|Salam}} {nama}, {{apa khabar?|semoga sihat|harap semuanya baik}}.\n                            <\/div>\n                            <div style=\"font-size:12px;color:#795548;margin-top:7px;\">\n                                Contoh hasil:<br \/>\n                                <b>Hello Ali, semoga sihat.<\/b><br \/>\n                                atau<br \/>\n                                <b>Salam Siti, apa khabar?<\/b>\n                            <\/div>\n                        <\/div>\n                        <div style=\"font-size:11px;color:#78909c;margin-top:10px;\">\n                            \u2139\ufe0f Format lama seperti <b>{{nama}}<\/b> masih disokong untuk compatibility,\n                            tetapi untuk mesej baru gunakan format <b>{nama}<\/b>.\n                        <\/div>\n                    <\/div>\n                <\/details>\n                <div class=\"sb-panel-footer\"><span>Preview sahaja; teks penuh kekal dalam input.<\/span><button\n                        class=\"sb-next-btn\" data-sb-next=\"cta\" type=\"button\">Seterusnya: CTA \u2192<\/button><\/div>\n            <\/section>\n            <section aria-label=\"\ud83d\udd17 CTA &amp; Media\" class=\"sb-tab-panel\" data-sb-panel=\"cta\" hidden=\"\"\n                id=\"sb-panel-cta\" role=\"tabpanel\">\n                <div class=\"sb-panel-header\">\n                    <div>\n                        <h2>\ud83d\udd17 CTA &amp; Media<\/h2>\n                        <p>Butang URL Native CTA adalah pilihan. Fallback ON\/OFF dikawal sendiri oleh pengguna.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"card\" id=\"smartBlastCtaCard\" style=\"border-left-color:#128c55;\">\n                    <h3>\ud83d\udd17 Native CTA<\/h3>\n                    <label class=\"smart-cta-toggle\" for=\"smartBlastCtaEnabled\">\n                        <input id=\"smartBlastCtaEnabled\" type=\"checkbox\" \/>\n                        Aktifkan butang CTA pada mesej WhatsApp\n                    <\/label>\n                    <div class=\"small-note\" style=\"margin-top:6px;\">\n                        Maksimum 2 butang URL. Menyokong mesej teks, gambar atau video sahaja.\n                    <\/div>\n                    <div class=\"smart-cta-fields\" hidden=\"\" id=\"smartBlastCtaFields\">\n                        <div class=\"smart-cta-grid\" style=\"margin-top:14px;\">\n                            <div>\n                                <label for=\"smartBlastCtaText1\">Label Butang 1 *<\/label>\n                                <input id=\"smartBlastCtaText1\" maxlength=\"80\" placeholder=\"Contoh: Daftar Sekarang\"\n                                    type=\"text\" \/>\n                            <\/div>\n                            <div>\n                                <label for=\"smartBlastCtaUrl1\">URL Butang 1 *<\/label>\n                                <input id=\"smartBlastCtaUrl1\" inputmode=\"url\" placeholder=\"https:\/\/contoh.com\/daftar\"\n                                    type=\"url\" \/>\n                            <\/div>\n                        <\/div>\n                        <div class=\"smart-cta-grid\">\n                            <div>\n                                <label for=\"smartBlastCtaText2\">Label Butang 2 (Pilihan)<\/label>\n                                <input id=\"smartBlastCtaText2\" maxlength=\"80\" placeholder=\"Contoh: Lihat Pakej\"\n                                    type=\"text\" \/>\n                            <\/div>\n                            <div>\n                                <label for=\"smartBlastCtaUrl2\">URL Butang 2 (Pilihan)<\/label>\n                                <input id=\"smartBlastCtaUrl2\" inputmode=\"url\" placeholder=\"https:\/\/contoh.com\/pakej\"\n                                    type=\"url\" \/>\n                            <\/div>\n                        <\/div>\n                        <div class=\"small-note\" id=\"smartBlastCtaWarning\"\n                            style=\"display:none;padding:9px 11px;background:#fff3e0;border:1px solid #ffcc80;border-radius:8px;color:#9a5400;\">\n                        <\/div>\n                        <div class=\"small-note\">\n                            Label dan URL CTA adalah sama untuk semua contact.\n                            Personalization {nama} \/ SpinText hanya diproses pada teks mesej.\n                        <\/div>\n                        <div class=\"sb-fallback-option\"><label class=\"sb-switch-row\"\n                                for=\"smartBlastCtaFallbackEnabled\"><span class=\"sb-switch-icon\">\ud83d\udee1\ufe0f<\/span><span\n                                    class=\"sb-switch-copy\"><strong>Fallback Protection<\/strong><small>Jika Native CTA\n                                        gagal sebelum relay, cuba mesej biasa + URL butang<\/small><\/span><span\n                                    class=\"sb-switch\"><input id=\"smartBlastCtaFallbackEnabled\" role=\"switch\"\n                                        type=\"checkbox\" \/><span class=\"sb-switch-slider\"><\/span><\/span><span\n                                    class=\"sb-switch-state\" id=\"smartBlastCtaFallbackState\">OFF<\/span><\/label>\n                            <div class=\"sb-guard-explain\" id=\"sbFallbackHint\">OFF \u00b7 Tiada fallback automatik<\/div><small\n                                class=\"sb-guard-note\">Jika relay sudah dicuba tetapi keputusan WhatsApp tidak pasti,\n                                fallback tidak dihantar untuk mengelakkan mesej berganda. Preview bukan jaminan paparan\n                                butang pada telefon penerima.<\/small>\n                        <\/div>\n                        <div class=\"smart-cta-preview\">\n                            <div class=\"sb-preview-header\">\n                                <div><strong>\ud83d\udc41\ufe0f Preview Penerima<\/strong><small>Contoh contact pertama \u00b7 mesej sebenar\n                                        mungkin berbeza ikut SpinText<\/small><\/div>\n                                <div class=\"sb-preview-stepbar\"><button class=\"is-active\" data-sb-preview=\"native\"\n                                        type=\"button\">\ud83c\udfaf CTA<\/button><button data-sb-preview=\"fallback\" hidden=\"\"\n                                        type=\"button\">\ud83d\udee1\ufe0f Fallback<\/button><\/div>\n                            <\/div>\n                            <div class=\"sb-preview-track\" id=\"sbCtaPreviewTrack\">\n                                <article class=\"sb-preview-slide\" id=\"sbNativePreviewPane\">\n                                    <div class=\"sb-preview-card-caption\">\ud83d\udcac Mesej + butang asli WhatsApp<\/div>\n                                    <div class=\"smart-cta-preview-card\">\n                                        <div class=\"smart-cta-preview-media\" id=\"smartBlastCtaPreviewMedia\"><\/div>\n                                        <div aria-label=\"Teks mesej Native CTA\"\n                                            class=\"smart-cta-preview-text sb-preview-clamped\"\n                                            id=\"smartBlastCtaPreviewText\"><\/div>\n                                        <div id=\"smartBlastCtaPreviewButtons\"><\/div>\n                                    <\/div><button aria-expanded=\"false\" class=\"sb-preview-more\"\n                                        data-sb-preview-expand=\"native\" type=\"button\">\u2195 Baca penuh<\/button>\n                                <\/article>\n                                <article class=\"sb-preview-slide\" hidden=\"\" id=\"smartBlastCtaFallbackPreview\">\n                                    <div class=\"sb-preview-card-caption\">\ud83d\udee1\ufe0f Contoh jika Native CTA gagal sebelum relay\n                                    <\/div>\n                                    <div class=\"smart-cta-preview-card sb-fallback-card\">\n                                        <div class=\"smart-cta-preview-text sb-preview-clamped\"\n                                            id=\"smartBlastCtaFallbackPreviewText\"><\/div>\n                                        <div class=\"sb-fallback-preview-links\" id=\"smartBlastCtaFallbackPreviewLinks\">\n                                        <\/div><textarea aria-label=\"Teks fallback sebenar\" hidden=\"\"\n                                            id=\"smartBlastCtaFallbackFullText\"><\/textarea>\n                                    <\/div><button aria-expanded=\"false\" class=\"sb-preview-more\"\n                                        data-sb-preview-expand=\"fallback\" type=\"button\">\u2195 Baca penuh<\/button>\n                                <\/article>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n                <details class=\"sb-media-accordion\" id=\"sbMediaDetails\">\n                    <summary><span>\ud83d\udcce Lampiran Media<\/span><span class=\"sb-inline-note\" id=\"sbMediaSummary\">\ud83d\udcdd\n                            Teks<\/span><span class=\"sb-chevron\">\u2304<\/span><\/summary>\n                    <div class=\"card\" data-section=\"media\">\n                        <h3>\ud83d\udcce Lampiran<\/h3>\n                        <div style=\"font-size:13px;color:#1565c0;margin-bottom:8px;\">\n                            *Smart Blast kini support text, gambar, audio, video dan dokumen. Untuk keselamatan, pilih\n                            satu\n                            jenis media sahaja bagi setiap job.\n                        <\/div>\n                        <div id=\"mediaUploadFields\">\n                            <div id=\"imageInputBlock\" style=\"margin-bottom:8px;\">\n                                <label>Gambar (JPG\/PNG):<\/label>\n                                <input accept=\"image\/*\" id=\"blastImageInput\" type=\"file\" \/>\n                                <button id=\"clearImageInput\" style=\"display:none;margin-left:6px;\"\n                                    type=\"button\">Clear<\/button>\n                                <span id=\"uploadedImagePreview\"><\/span>\n                            <\/div>\n                            <div id=\"audioInputBlock\" style=\"margin-bottom:8px;\">\n                                <label>Audio (MP3\/OGG):<\/label>\n                                <input accept=\"audio\/*\" id=\"blastAudioInput\" type=\"file\" \/>\n                                <button id=\"clearAudioInput\" style=\"display:none;margin-left:6px;\"\n                                    type=\"button\">Clear<\/button>\n                                <span id=\"uploadedAudioPreview\"><\/span>\n                                <label\n                                    style=\"display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:#185734;\">\n                                    <input id=\"isVoiceNote\" type=\"checkbox\" \/>\n                                    Hantar audio sebagai Voice Note\n                                <\/label>\n                            <\/div>\n                            <div id=\"videoInputBlock\" style=\"margin-bottom:8px;\">\n                                <label>Video (MP4\/MOV):<\/label>\n                                <input accept=\"video\/*,.mp4,.mov\" id=\"blastVideoInput\" type=\"file\" \/>\n                                <div style=\"display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;\">\n                                    <button id=\"clearVideoInput\" style=\"display:none;\" type=\"button\">\n                                        Clear\n                                    <\/button>\n                                    <button id=\"cancelVideoUploadBtn\"\n                                        style=\"display:none;background:#c62828;color:#fff;border:0;border-radius:6px;padding:6px 12px;cursor:pointer;font-weight:700;\"\n                                        type=\"button\">\n                                        \u2715 Batalkan Upload\n                                    <\/button>\n                                    <span id=\"uploadedVideoPreview\"><\/span>\n                                <\/div>\n                                <div id=\"videoUploadProgressWrap\"\n                                    style=\"display:none;margin-top:10px;padding:12px;background:#f7fbff;border:1px solid #d7e9ff;border-radius:10px;\">\n                                    <div\n                                        style=\"display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;\">\n                                        <div id=\"videoUploadStatus\"\n                                            style=\"font-size:12px;font-weight:700;color:#1565c0;\">\n                                            Menunggu upload&#8230;\n                                        <\/div>\n                                        <div id=\"videoUploadPercent\"\n                                            style=\"font-size:12px;font-weight:800;color:#1565c0;\">\n                                            0%\n                                        <\/div>\n                                    <\/div>\n                                    <div style=\"height:10px;background:#e3edf7;border-radius:999px;overflow:hidden;\">\n                                        <div id=\"videoUploadProgressBar\"\n                                            style=\"height:10px;width:0%;background:#1976d2;border-radius:999px;transition:width .2s ease;\">\n                                        <\/div>\n                                    <\/div>\n                                    <div id=\"videoUploadDetail\"\n                                        style=\"font-size:11px;color:#607d8b;margin-top:7px;line-height:1.5;\">\n                                        Video belum mula dimuat naik.\n                                    <\/div>\n                                <\/div>\n                                <div id=\"videoPreviewWrapper\" style=\"margin-top:8px;min-height:40px;\">\n                                <\/div>\n                            <\/div>\n                            <div id=\"docInputBlock\" style=\"margin-bottom:8px;\">\n                                <label>Dokumen (PDF, DOCX):<\/label>\n                                <input accept=\".pdf,.doc,.docx,.txt,.xls,.xlsx,.ppt,.pptx\" id=\"blastDocInput\"\n                                    type=\"file\" \/>\n                                <button id=\"clearDocInput\" style=\"display:none;margin-left:6px;\"\n                                    type=\"button\">Clear<\/button>\n                                <span id=\"uploadedDocPreview\"><\/span>\n                            <\/div>\n                        <\/div>\n                        <div style=\"font-size:12px;color:#888;\">\n                            Limit saiz: Gambar\/Audio \u2264 5MB, Video \u2264 20MB, Dokumen \u2264 10MB.\n                        <\/div>\n                    <\/div>\n                <\/details>\n                <div class=\"sb-panel-footer\"><span id=\"sbCtaModeLabel\">CTA OFF<\/span><button class=\"sb-next-btn\"\n                        data-sb-next=\"settings\" type=\"button\">Seterusnya: Tetapan \u2192<\/button><\/div>\n            <\/section>\n            <section aria-label=\"\u2699\ufe0f Tetapan\" class=\"sb-tab-panel\" data-sb-panel=\"settings\" hidden=\"\"\n                id=\"sb-panel-settings\" role=\"tabpanel\">\n                <div class=\"sb-panel-header\">\n                    <div>\n                        <h2>\u2699\ufe0f Tetapan<\/h2>\n                        <p>Nama kempen, had harian, jeda dan masa delay.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"card\">\n                    <h3>\ud83c\udff7\ufe0f Kempen<\/h3>\n                    <label>Nama Job \/ Kempen<\/label>\n                    <input id=\"jobName\" placeholder=\"Contoh: Promo Raya Mac 2026\" type=\"text\" \/>\n                    <div class=\"small-note\">Nama ini untuk anda kenal job Smart Blast dalam status &amp; history.<\/div>\n                <\/div>\n                <div class=\"card\">\n                    <h3>\u2699\ufe0f Quota &amp; Delay<\/h3>\n                    <div class=\"timer-block-ui\">\n                        <div class=\"timer-block-title\">\ud83d\udcc5 Daily Quota<\/div>\n                        <div class=\"timer-block-info\">\n                            Setiap nombor hanya akan blast ikut limit harian. Sistem akan pause automatik selepas cycle\n                            harian selesai.\n                        <\/div>\n                        <div class=\"grid-2\">\n                            <div>\n                                <label>Had maksimum blast setiap nombor \/ sehari<\/label>\n                                <input id=\"dailyQuotaPerSender\" max=\"40\" min=\"1\" type=\"number\" value=\"40\" \/>\n                                <div class=\"small-note\" id=\"quotaPerBotLiveInfo\" style=\"color:#1565c0;\">\n                                    Quota sebenar cycle hari ini akan dikira automatik ikut jumlah contact &amp; bot\n                                    dipilih. Maksimum dibenarkan ialah 40 contact bagi setiap nombor sehari.\n                                <\/div>\n                            <\/div>\n                            <div>\n                                <label>Pause selepas selesai cycle harian<\/label>\n                                <input id=\"dailyPauseHours\" max=\"72\" min=\"1\" type=\"number\" value=\"24\" \/>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"timer-block-ui\">\n                        <div class=\"timer-block-title\">\u23f1\ufe0f Delay Blasting<\/div>\n                        <div class=\"timer-block-info\">\n                            Delay rawak antara mesej untuk kurangkan pattern terlalu laju.\n                        <\/div>\n                        <div class=\"grid-2\">\n                            <div>\n                                <label>Delay minimum (saat)<\/label>\n                                <input id=\"delayMinSec\" max=\"600\" min=\"5\" type=\"number\" value=\"45\" \/>\n                            <\/div>\n                            <div>\n                                <label>Delay maksimum (saat)<\/label>\n                                <input id=\"delayMaxSec\" max=\"900\" min=\"5\" type=\"number\" value=\"120\" \/>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <details class=\"sb-help-accordion sb-estimate-accordion\">\n                        <summary>\ud83d\udcca Lihat anggaran agihan &amp; kapasiti penuh<\/summary>\n                        <div id=\"smartBlastEstimate\" style=\"font-size:13px;color:#1976d2;margin-top:5px;\"><\/div>\n                    <\/details>\n                <\/div>\n                <div class=\"sb-panel-footer\"><span>Had harian maksimum: 40\/nombor.<\/span><button class=\"sb-next-btn\"\n                        data-sb-next=\"send\" type=\"button\">Seterusnya: Hantar \u2192<\/button><\/div>\n            <\/section>\n            <section aria-label=\"\ud83d\ude80 Hantar &amp; Jadual\" class=\"sb-tab-panel\" data-sb-panel=\"send\" hidden=\"\"\n                id=\"sb-panel-send\" role=\"tabpanel\">\n                <div class=\"sb-panel-header\">\n                    <div>\n                        <h2>\ud83d\ude80 Hantar &amp; Jadual<\/h2>\n                        <p>Semak tetapan sebelum mula. Schedule boleh disimpan maksimum 5 bagi setiap akaun.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"card\">\n                    <div class=\"schedule-start-grid\">\n                        <div>\n                            <label>Schedule mula jalan<\/label>\n                            <input id=\"scheduledAtInput\" type=\"datetime-local\" \/>\n                            <div class=\"small-note\">Kosongkan jika mahu start sekarang. Isi tarikh &amp; jam jika mahu\n                                auto\n                                jalan kemudian.<\/div>\n                        <\/div>\n                        <div>\n                            <label>\u00a0<\/label>\n                            <button class=\"btn\" id=\"scheduleBtn\" style=\"background:#6a1b9a;width:100%;\">\ud83d\udcc5 Simpan\n                                Schedule<\/button>\n                        <\/div>\n                    <\/div>\n                    <div style=\"display: flex; flex-wrap: wrap; gap: 8px; margin-top:12px;\">\n                        <button class=\"btn\" id=\"startBtn\">Start Smart Blast<\/button>\n                        <button class=\"btn\" id=\"stopBtn\" style=\"background:#c62828;\">Stop<\/button>\n                        <button class=\"btn\" id=\"pauseBtn\" style=\"background:#ff9800;\">Pause<\/button>\n                        <button class=\"btn\" id=\"resumeBtn\" style=\"background:#039be5;\">Resume<\/button>\n                        <button class=\"btn\" id=\"refreshStatusBtn\" style=\"background:#1976d2;\">Refresh Status<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"sb-send-readiness\">\n                    <div><span>\ud83e\udd16 Sender dipilih<\/span><strong id=\"sbBotCount\">0<\/strong><\/div>\n                    <div><span>\ud83d\udc65 Contact<\/span><strong id=\"sbContactCount\">0<\/strong><\/div>\n                    <div><span>\u26a1 Live job<\/span><strong id=\"sbLiveStatus\">Belum ada job<\/strong><\/div>\n                <\/div>\n                <p class=\"sb-safety-note\">CTA Fallback ON hanya aktif untuk kegagalan sebelum relay. Jika penghantaran\n                    sudah dicuba tetapi ACK tidak pasti, sistem mengelakkan penghantaran kedua secara automatik.<\/p>\n            <\/section>\n            <section aria-label=\"\ud83d\udcca Monitor Live\" class=\"sb-tab-panel\" data-sb-panel=\"live\" hidden=\"\" id=\"sb-panel-live\"\n                role=\"tabpanel\">\n                <div class=\"sb-panel-header\">\n                    <div>\n                        <h2>\ud83d\udcca Monitor Live<\/h2>\n                        <p>Status, countdown, bilangan mesej dan prestasi setiap bot secara langsung.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"compact-stack\">\n                    <div class=\"compact-card\" id=\"jobStatusCard\">\n                        <div class=\"compact-head\">\n                            <div class=\"compact-title\">\ud83d\udcca Status Smart Blast<\/div>\n                            <span class=\"status-pill pill-blue\" id=\"statusNow\">Tiada sesi aktif<\/span>\n                        <\/div>\n                        <div class=\"job-meta-grid\">\n                            <div class=\"job-meta-item\">\n                                <div class=\"job-meta-label\">Job ID<\/div>\n                                <div class=\"job-meta-value\" id=\"jobIdNow\">&#8211;<\/div>\n                            <\/div>\n                            <div class=\"job-meta-item\">\n                                <div class=\"job-meta-label\">Nama Job<\/div>\n                                <div class=\"job-meta-value\" id=\"jobNameNow\">&#8211;<\/div>\n                            <\/div>\n                            <div class=\"job-meta-item\">\n                                <div class=\"job-meta-label\">Hari \/ Cycle<\/div>\n                                <div class=\"job-meta-value\" id=\"cycleNow\">&#8211;<\/div>\n                            <\/div>\n                            <div class=\"job-meta-item\">\n                                <div class=\"job-meta-label\">Next Run<\/div>\n                                <div class=\"job-meta-value\" id=\"nextRunAt\">&#8211;<\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"job-inline-list\">\n                            <div class=\"job-inline-item\"><b>Updated:<\/b> <span id=\"updatedAt\">&#8211;<\/span><\/div>\n                            <div class=\"job-inline-item\"><b>Maklumat job:<\/b> live ringkas &amp; padat<\/div>\n                        <\/div>\n                        <div class=\"job-meta-item\" id=\"countdownWrap\" style=\"margin-top:10px; display:none;\">\n                            <div class=\"job-meta-label\">Live Countdown<\/div>\n                            <div class=\"job-meta-value\" id=\"countdownValue\">&#8211;<\/div>\n                            <div class=\"compact-sub\" id=\"countdownLabel\" style=\"margin-top:4px;\">&#8211;<\/div>\n                        <\/div>\n                        <div id=\"progressArea\" style=\"white-space: pre-line; margin-top:8px;\">Belum bermula&#8230;<\/div>\n                    <\/div>\n                    <div class=\"compact-card\">\n                        <div class=\"compact-head\">\n                            <div class=\"compact-title\">\ud83d\udcc8 Ringkasan Progress<\/div>\n                            <div class=\"compact-sub\">Status target semasa<\/div>\n                        <\/div>\n                        <div class=\"progress-compact-grid\">\n                            <div class=\"progress-stat\">\n                                <span class=\"icon\">\u2705<\/span>\n                                <div class=\"label\">Sent<\/div>\n                                <div class=\"value\" id=\"sentCount\">0<\/div>\n                            <\/div>\n                            <div class=\"progress-stat\">\n                                <span class=\"icon\">\u23f3<\/span>\n                                <div class=\"label\">Pending<\/div>\n                                <div class=\"value\" id=\"pendingCount\">0<\/div>\n                            <\/div>\n                            <div class=\"progress-stat\" title=\"ACK tidak dapat disahkan; tiada auto-retry\"><span\n                                    class=\"icon\">\u2754<\/span>\n                                <div class=\"label\">Unconfirmed<\/div>\n                                <div class=\"value\" id=\"unconfirmedCount\">0<\/div>\n                            <\/div>\n                            <div class=\"progress-stat\">\n                                <span class=\"icon\">\u26a0\ufe0f<\/span>\n                                <div class=\"label\">Temp Failed<\/div>\n                                <div class=\"value\" id=\"tempFailedCount\">0<\/div>\n                            <\/div>\n                            <div class=\"progress-stat\">\n                                <span class=\"icon\">\u274c<\/span>\n                                <div class=\"label\">Perm Failed<\/div>\n                                <div class=\"value\" id=\"permFailedCount\">0<\/div>\n                            <\/div>\n                            <div class=\"progress-stat\">\n                                <span class=\"icon\">\u23ed\ufe0f<\/span>\n                                <div class=\"label\">Skipped<\/div>\n                                <div class=\"value\" id=\"skippedCount\">0<\/div>\n                            <\/div>\n                            <div class=\"progress-stat\">\n                                <span class=\"icon\">\ud83d\udce6<\/span>\n                                <div class=\"label\">Total<\/div>\n                                <div class=\"value\" id=\"totalTargets\">0<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"compact-card\" id=\"senderSummaryBox\">\n                        Memuatkan summary sender&#8230;\n                    <\/div>\n                <\/div>\n                <div class=\"sb-live-cta\"><button class=\"sb-next-btn\" data-sb-next=\"records\" type=\"button\">\ud83d\udccb Lihat Log\n                        &amp; Jadual \u2192<\/button><\/div>\n            <\/section>\n            <section aria-label=\"\ud83d\udccb Rekod &amp; Jadual\" class=\"sb-tab-panel\" data-sb-panel=\"records\" hidden=\"\"\n                id=\"sb-panel-records\" role=\"tabpanel\">\n                <div class=\"sb-panel-header\">\n                    <div>\n                        <h2>\ud83d\udccb Rekod &amp; Jadual<\/h2>\n                        <p>Pantau sejarah penghantaran, tapis cycle, eksport CSV dan urus schedule.<\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"sb-record-tabs\" role=\"tablist\"><button aria-selected=\"true\" class=\"is-active\"\n                        data-sb-record-tab=\"log\" type=\"button\">\ud83d\udccb Log<\/button><button aria-selected=\"false\"\n                        data-sb-record-tab=\"schedule\" type=\"button\">\ud83d\udcc5 Jadual<\/button><\/div>\n                <div class=\"sb-record-panel\" data-sb-record-panel=\"log\">\n                    <div style=\"display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;\">\n                        <label style=\"margin:0;font-size:13px;font-weight:600;\">Tapis Hari\/Cycle:<\/label>\n                        <select id=\"logCycleFilter\" style=\"max-width:180px;margin:0;\">\n                            <option value=\"ALL\">Semua Hari<\/option>\n                        <\/select>\n                    <\/div>\n                    <div style=\"max-height:400px;overflow:auto;\">\n                        <table id=\"logBlastTable\" style=\"width:100%;font-size:13px;\">\n                            <thead>\n                                <tr>\n                                    <th>Bil<\/th>\n                                    <th>No.Target<\/th>\n                                    <th>Status<\/th>\n                                    <th>Dari Nombor<\/th>\n                                    <th>Attempt<\/th>\n                                    <th>Hari\/Cycle<\/th>\n                                    <th>Updated<\/th>\n                                    <th>Error<\/th>\n                                <\/tr>\n                            <\/thead>\n                            <tbody>\n                                <tr>\n                                    <td colspan=\"8\">Tiada log blasting&#8230;<\/td>\n                                <\/tr>\n                            <\/tbody>\n                        <\/table>\n                    <\/div>\n                    <div class=\"download-actions\">\n                        <button class=\"btn\" id=\"downloadReportBtn\" style=\"background:#1976d2;\">Download Report\n                            CSV<\/button>\n                        <button class=\"btn\" id=\"downloadFailedOnlyBtn\" style=\"background:#ef6c00;\">\u2b07\ufe0f Download Tak\n                            Berjaya\n                            Sahaja<\/button>\n                        <button class=\"btn\" id=\"downloadRemainingBtn\">\u2b07\ufe0f Download Baki Contact<\/button>\n                    <\/div>\n                <\/div>\n                <div class=\"sb-record-panel\" data-sb-record-panel=\"schedule\" hidden=\"\">\n                    <div class=\"card\" style=\"margin-top:18px;\">\n                        <div class=\"compact-head\">\n                            <div class=\"compact-title\">\ud83d\udcc5 Jadual Schedule Smart Blast<\/div>\n                            <div class=\"compact-sub\">Maksimum 5 schedule \u2022 setiap satu simpan target, copywriting, media\n                                &amp; setting\n                                sendiri<\/div>\n                        <\/div>\n                        <div style=\"overflow:auto;\">\n                            <table id=\"scheduleTable\" style=\"width:100%;font-size:13px;\">\n                                <thead>\n                                    <tr>\n                                        <th>Bil<\/th>\n                                        <th>Nama Job<\/th>\n                                        <th>Tarikh \/ Masa<\/th>\n                                        <th>Status<\/th>\n                                        <th>Result<\/th>\n                                        <th>Tindakan<\/th>\n                                    <\/tr>\n                                <\/thead>\n                                <tbody>\n                                    <tr>\n                                        <td colspan=\"6\">Belum ada schedule.<\/td>\n                                    <\/tr>\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n        <\/div>\n        <nav aria-label=\"Pintasan Smart Blast\" class=\"sb-mobile-dock\"><button data-sb-nav=\"bots\"\n                type=\"button\"><span>\ud83d\udcf1<\/span>Bot<\/button><button data-sb-nav=\"message\"\n                type=\"button\"><span>\u270d\ufe0f<\/span>Mesej<\/button><button data-sb-nav=\"cta\"\n                type=\"button\"><span>\ud83d\udd17<\/span>CTA<\/button><button class=\"sb-dock-primary\" data-sb-nav=\"send\"\n                type=\"button\"><span>\ud83d\ude80<\/span>Hantar<\/button><button data-sb-nav=\"live\"\n                type=\"button\"><span>\ud83d\udcca<\/span>Live<\/button><\/nav>\n    <\/main>\n    <script src=\"\/js\/smart-blast-frontend.js?v=20261012-app-cta-fallback-v2\"><\/script>\n\n<\/body>\n\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Smart Blast \u2013 AbataBlaster Smart BlastWhatsApp Campaign Studio \u2302\u25a6 \ud83d\udc64 \ud83d\udce7 Email: \u2013 \ud83d\udcbc Pakej: \u2013 \ud83d\udce4 Mesej Baki: \u2013 (\u2013 hari) \ud83d\udcf1 WhatsApp Aktif: \u2013 \ud83d\udd14 Sambungkan Telegram \ud83d\udeaa Log Keluar \u26a0\ufe0f Langganan anda telah tamat atau mesej telah habis. Sila upgrade untuk terus gunakan sistem ini. \u26a1 STATUS0\/0Mesej dihantar \/ target \ud83e\udd16Sender \ud83d\udc65Contact [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1380","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=1380"}],"version-history":[{"count":20,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1380\/revisions"}],"predecessor-version":[{"id":1604,"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/pages\/1380\/revisions\/1604"}],"wp:attachment":[{"href":"https:\/\/abatablaster.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=1380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}