@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800&display=swap";:root{--bg:#f0f2f5;--surface:#fff;--surface-2:#f6f7f9;--ink:#1b1f23;--ink-soft:#69707a;--ink-faint:#9ca3ac;--green:#0f9d8a;--green-dark:#0b7a6b;--green-deep:#0c2320;--green-deep-2:#123b34;--green-soft:#dcf5f0;--orange:#f5a524;--orange-soft:#fdf0da;--blue:#3aa1f0;--blue-soft:#e4f1fd;--red:#f3486b;--red-soft:#fde3e9;--border:#e4e7ec;--shadow:0 2px 0 #10141908, 0 14px 28px -16px #1014192e;--sidebar-w:264px;--radius:18px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(1200px 500px at 90% -10%, #0f9d8a0d, transparent 60%), radial-gradient(900px 500px at 0% 0%, #3aa1f00a, transparent 55%), var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Nunito,system-ui,sans-serif;overflow-x:hidden}h1,h2,h3,.num,.brand-name{font-family:"Baloo 2",sans-serif}a{color:inherit;text-decoration:none}button,input{font-family:inherit}.app-shell{align-items:flex-start;min-height:100vh;display:flex}.main{flex-direction:column;flex:1;min-width:0;min-height:100vh;display:flex}.content{padding:26px 28px 60px}.page-head{opacity:0;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:22px;animation:.55s cubic-bezier(.22,1,.36,1) .15s forwards navIn;display:flex;transform:translateY(8px)}.head-actions{gap:10px;display:flex}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);opacity:0;padding:20px;transition:box-shadow .2s,transform .2s;animation:.55s cubic-bezier(.22,1,.36,1) forwards navIn;transform:translateY(10px)}.panel:hover{box-shadow:var(--shadow)}@keyframes navIn{to{opacity:1;transform:translateY(0)}}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-2{gap:8px}.gap-3{gap:12px}.mb-4{margin-bottom:16px}.mt-4{margin-top:16px}.modal-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:var(--surface);border-radius:var(--radius);width:100%;max-width:650px;max-height:90vh;padding:24px;overflow-y:auto}.modal-header{margin-bottom:16px;font-size:20px;font-weight:700}.form-group{margin-bottom:12px}.form-group label{margin-bottom:6px;font-size:13px;font-weight:700;display:block}.form-control{border:1px solid var(--border);border-radius:10px;width:100%;padding:10px 14px;font-size:14px}.form-control:focus{border-color:var(--green);outline:none}.sidebar{width:var(--sidebar-w);background:var(--green-deep);z-index:40;background-image:radial-gradient(circle at 100% 0,#ffffff0d,#0000 55%);flex-direction:column;flex-shrink:0;gap:4px;height:100vh;padding:22px 14px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;padding:6px 8px 20px;display:flex}.brand-mark{background:var(--green);width:38px;height:38px;box-shadow:0 3px 0 var(--green-dark);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.brand-name{letter-spacing:-.01em;color:#fff;font-size:18px;font-weight:700}.brand-sub{color:#9dbe8e;margin-top:1px;font-size:11.5px;font-weight:600}.nav-item{color:#b9d2a9;cursor:pointer;border-radius:12px;align-items:center;gap:11px;padding:10px 12px;font-size:14.5px;font-weight:700;transition:background .18s,color .18s;display:flex;position:relative}.nav-item:hover{color:#fff;background:#ffffff0f}.nav-item.active{background:var(--green);color:#fff;box-shadow:0 3px 0 var(--green-dark)}.nav-badge{background:var(--orange);color:#fff;border-radius:20px;margin-left:auto;padding:1px 6px;font-size:10.5px;font-weight:800}.nav-item.active .nav-badge{background:#ffffff40}.sidebar-footer{border-top:1px solid #ffffff14;align-items:center;gap:10px;margin-top:auto;padding-top:14px;padding-left:8px;display:flex}.avatar{background:var(--orange);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:13px;font-weight:800;display:flex;box-shadow:0 3px #b87a12}.sf-name{color:#fff;font-size:13.5px;font-weight:700}.sf-role{color:#9dbe8e;font-size:11.5px;font-weight:600}.mobile-close-btn{color:#fff;cursor:pointer;background:0 0;border:none;padding:4px;display:none}@media (width<=900px){.sidebar{z-index:1000;height:100vh;transition:transform .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.sidebar.mobile-open{transform:translate(0);box-shadow:4px 0 24px #00000080}.mobile-close-btn{justify-content:center;align-items:center;display:flex}.sidebar-backdrop{z-index:999;background:#00000080;position:fixed;inset:0}}.topbar{z-index:30;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);background:#f0f2f5c7;align-items:center;gap:14px;padding:14px 28px;display:flex;position:sticky;top:0}.search{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;flex:1;align-items:center;gap:8px;max-width:380px;padding:9px 14px;transition:border-color .15s,background .15s;display:flex}.search:focus-within{border-color:var(--green);background:var(--surface)}.search input{width:100%;color:var(--ink);background:0 0;border:none;outline:none;font-size:13.5px}.topbar-right{align-items:center;gap:10px;margin-left:auto;display:flex}.stat-chip{background:var(--surface);border:1px solid var(--border);color:var(--ink);border-radius:20px;align-items:center;gap:6px;padding:7px 12px 7px 10px;font-size:13px;font-weight:800;display:flex;box-shadow:0 1px #10141908}.stat-chip.flame{color:var(--orange)}.stat-chip.gem{color:var(--blue)}.icon-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;transition:transform .15s,border-color .15s;display:flex;position:relative}.icon-btn:hover{border-color:var(--green);transform:translateY(-1px)}.dot-ping{background:var(--red);border:2px solid var(--surface);border-radius:50%;width:8px;height:8px;position:absolute;top:6px;right:6px}.dot-ping:after{content:"";background:var(--red);border-radius:50%;animation:1.8s cubic-bezier(0,0,.2,1) infinite ping;position:absolute;inset:0}@keyframes ping{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}.mobile-menu-btn{display:none}@media (width<=900px){.mobile-menu-btn{justify-content:center;align-items:center;display:flex}.topbar{padding:10px 16px}}.dashboard-page{animation:.5s cubic-bezier(.22,1,.36,1) forwards navIn}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:22px;display:flex}.page-head h1{letter-spacing:-.01em;margin:0 0 4px;font-size:25px;font-weight:700}.page-head p{color:var(--ink-soft);margin:0;font-size:13.5px;font-weight:600}.charts-row{grid-template-columns:1.7fr 1fr;gap:16px;margin-bottom:16px;display:grid}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:box-shadow .2s,transform .2s}.panel:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.panel.dark{background:var(--green-deep-2);border-color:var(--green-deep-2);color:#fff}.panel.dark:hover{box-shadow:0 14px 28px -16px #17331180}.panel-head{justify-content:space-between;align-items:flex-start;margin-bottom:16px;display:flex}.panel-head h3{margin:0 0 2px;font-size:16px;font-weight:700}.panel-head p{color:var(--ink-faint);margin:0;font-size:12px;font-weight:600}.panel.dark .panel-head p{color:#9dbe8e}.wa-panel-body{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:250px;display:flex}.qr-container{background:#fff;border-radius:12px;margin-top:16px;padding:16px;display:inline-block;box-shadow:0 4px 12px #0000001a}.connected-state h4,.qr-state h4,.loading-state h4{color:var(--ink);margin:12px 0 4px;font-size:18px}.connected-state p,.qr-state p,.loading-state p{color:var(--ink-soft);max-width:300px;margin:0;font-size:14px;line-height:1.4}.table-panel{padding:0;overflow:hidden}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:760px}thead th{text-align:left;color:var(--ink-faint);border-bottom:2px solid var(--border);white-space:nowrap;padding:16px 20px 10px;font-size:11.5px;font-weight:800}tbody td{border-bottom:1px solid var(--border);white-space:nowrap;padding:14px 20px;font-size:13.5px;font-weight:600}tbody tr{transition:background .15s}tbody tr:hover{background:var(--surface-2)}tbody tr:last-child td{border-bottom:none}.cust-email{color:var(--ink-faint);font-size:11.5px;font-weight:600;display:block}.status-pill{text-transform:capitalize;border-radius:20px;align-items:center;gap:5px;padding:4px 11px;font-size:11.5px;font-weight:800;display:inline-flex}.status-pill.delivered{background:var(--green-soft);color:var(--green-dark)}.status-pill.pending{background:var(--orange-soft);color:#a66a12}.status-pill.cancelled{background:var(--red-soft);color:var(--red)}.status-pill:before{content:"";background:currentColor;border-radius:50%;width:6px;height:6px}.row-action{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:9px;justify-content:center;align-items:center;width:32px;height:32px;transition:border-color .15s,background .15s,transform .15s;display:inline-flex}.row-action:hover{border-color:var(--green);background:var(--green-soft);transform:translateY(-1px)}.row-action svg{stroke:var(--ink-soft)}.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--border);cursor:pointer;border-radius:12px;align-items:center;gap:7px;padding:10px 18px;font-size:14px;font-weight:800;transition:border-color .15s,color .15s,transform .1s;display:inline-flex}.btn-secondary:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px)}.btn-primary{background:linear-gradient(180deg, #17c2a9, var(--green));color:#fff;cursor:pointer;box-shadow:0 4px 0 var(--green-dark);border:none;border-radius:12px;align-items:center;gap:7px;padding:10px 20px;font-size:14px;font-weight:800;transition:transform .1s,box-shadow .1s;display:inline-flex}.btn-primary:hover{transform:translateY(-1px)}.btn-primary:active{box-shadow:0 1px 0 var(--green-dark);transform:translateY(3px)}.meta-tpl-container{max-width:1400px;margin:0 auto;padding:24px}.meta-tpl-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.meta-tpl-header h1{color:#0f172a;margin:0 0 4px;font-size:1.5rem;font-weight:700}.meta-tpl-header p{color:#64748b;margin:0;font-size:.9rem}.waba-status-banner{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;justify-content:space-between;align-items:center;margin-bottom:24px;padding:12px 18px;display:flex}.waba-status-banner.disconnected{background:#fff1f2;border-color:#fecdd3}.banner-info{color:#166534;align-items:center;gap:10px;font-size:.875rem;font-weight:600;display:flex}.banner-info.disconnected{color:#9f1239}.btn-sync-meta{color:#fff;cursor:pointer;background:#0f9d8a;border:none;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-sync-meta:hover{background:#0b7a6b}.stepper-bar{background:#fff;border:1px solid #e2e8f0;border-radius:12px;align-items:center;gap:12px;margin-bottom:24px;padding:14px 20px;display:flex;box-shadow:0 1px 3px #0000000a}.step-item{color:#94a3b8;cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:6px 12px;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.step-item.active{color:#fff;background:#0f9d8a}.step-item.completed{color:#0f9d8a}.step-number{color:#475569;background:#e2e8f0;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;font-weight:700;display:flex}.step-item.active .step-number{color:#0f9d8a;background:#fff}.step-item.completed .step-number{color:#0f9d8a;background:#e6f4f1}.step-divider{background:#e2e8f0;flex:1;height:2px}.mt-grid{grid-template-columns:1fr 380px;align-items:start;gap:24px;display:grid}@media (width<=1024px){.mt-grid{grid-template-columns:1fr}}.mt-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000000a}.category-selector-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px;display:grid}.category-card-btn{text-align:left;cursor:pointer;background:#f8fafc;border:2px solid #e2e8f0;border-radius:10px;padding:16px;transition:all .2s}.category-card-btn:hover{background:#fff;border-color:#cbd5e1}.category-card-btn.selected{background:#e6f4f1;border-color:#0f9d8a}.category-card-btn h4{color:#0f172a;margin:8px 0 4px;font-size:.95rem}.category-card-btn p{color:#64748b;margin:0;font-size:.8rem;line-height:1.4}.phone-mockup{background:#111827;border:4px solid #374151;border-radius:36px;width:100%;max-width:360px;margin:0 auto;padding:16px 12px;box-shadow:0 20px 25px -5px #0000004d}.phone-header{color:#fff;background:#075e54;border-radius:20px 20px 0 0;align-items:center;gap:10px;padding:10px 14px;display:flex}.phone-avatar{background:#128c7e;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:.8rem;font-weight:700;display:flex}.phone-body-screen{background:#efeae2;flex-direction:column;justify-content:flex-end;min-height:380px;padding:16px 12px;display:flex}.wa-message-bubble{color:#111827;background:#fff;border-radius:12px 12px 12px 2px;margin-bottom:8px;padding:10px 12px;font-size:.85rem;line-height:1.5;box-shadow:0 1px 2px #00000026}.wa-header-preview{color:#0f172a;margin-bottom:6px;font-weight:700}.wa-media-preview-box{color:#475569;background:#cbd5e1;border-radius:8px;justify-content:center;align-items:center;width:100%;height:160px;margin-bottom:8px;display:flex;overflow:hidden}.wa-footer-preview{color:#64748b;margin-top:6px;font-size:.75rem}.wa-button-item{color:#00a884;text-align:center;cursor:pointer;border-top:1px solid #e2e8f0;margin-top:6px;padding:8px 4px;font-size:.825rem;font-weight:600}.status-badge{text-transform:uppercase;border-radius:12px;align-items:center;gap:4px;padding:4px 10px;font-size:.75rem;font-weight:700;display:inline-flex}.status-badge.APPROVED{color:#166534;background:#dcfce7}.status-badge.PENDING{color:#854d0e;background:#fef9c3}.status-badge.REJECTED{color:#991b1b;background:#fee2e2}.status-badge.PAUSED,.status-badge.DISABLED{color:#c2410c;background:#ffedd5}.settings-container{max-width:1200px;margin:0 auto;padding:24px}.settings-header{margin-bottom:24px}.settings-header h1{color:#0f172a;margin:0 0 6px;font-size:1.5rem;font-weight:700}.settings-header p{color:#64748b;margin:0;font-size:.9rem}.settings-layout{align-items:flex-start;gap:24px;display:flex}@media (width<=768px){.settings-layout{flex-direction:column}}.settings-tabs-sidebar{background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;flex-shrink:0;gap:4px;width:260px;padding:12px;display:flex;box-shadow:0 1px 3px #0000000d}.tab-btn{color:#475569;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:.925rem;font-weight:600;transition:all .2s;display:flex}.tab-btn:hover{color:#0f172a;background:#f1f5f9}.tab-btn.active{color:#fff;background:#0f9d8a;box-shadow:0 2px 6px #0f9d8a4d}.tab-btn.active svg{color:#fff!important}.settings-content-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex:1;padding:28px;box-shadow:0 1px 3px #0000000d}.card-title-section{border-bottom:1px solid #f1f5f9;margin-bottom:24px;padding-bottom:16px}.card-title-section h2{color:#0f172a;margin:0 0 4px;font-size:1.2rem;font-weight:700}.card-title-section p{color:#64748b;margin:0;font-size:.85rem}.form-grid-2{grid-template-columns:1fr 1fr;gap:20px;display:grid}@media (width<=640px){.form-grid-2{grid-template-columns:1fr}}.form-group-full{grid-column:1/-1}.form-label{color:#334155;margin-bottom:6px;font-size:.875rem;font-weight:600;display:block}.form-input-control{color:#0f172a;background-color:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:10px 14px;font-size:.9rem;transition:border-color .2s,box-shadow .2s}.form-input-control:focus{background-color:#fff;border-color:#0f9d8a;box-shadow:0 0 0 3px #0f9d8a26}.form-input-control:disabled{color:#94a3b8;cursor:not-allowed;background-color:#f1f5f9}.form-help-text{color:#64748b;margin-top:4px;font-size:.8rem}.btn-save-settings{color:#fff;cursor:pointer;background:#0f9d8a;border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 24px;font-size:.9rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-save-settings:hover{background:#0b7a6b;box-shadow:0 2px 8px #0f9d8a66}.btn-save-settings:disabled{opacity:.6;cursor:not-allowed}.login-page{background:radial-gradient(1200px 500px at 90% -10%, #0f9d8a1a, transparent 60%), radial-gradient(900px 500px at 0% 0%, #3aa1f01a, transparent 55%), var(--bg);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:420px;box-shadow:var(--shadow);padding:40px;animation:.5s cubic-bezier(.22,1,.36,1) forwards navIn}.brand-header{text-align:center;margin-bottom:30px}.brand-mark-lg{background:var(--green);width:56px;height:56px;box-shadow:0 4px 0 var(--green-dark);border-radius:16px;justify-content:center;align-items:center;margin-bottom:16px;display:inline-flex}.brand-header h1{margin:0 0 6px;font-size:28px}.brand-header p{color:var(--ink-soft);margin:0;font-weight:600}.w-100{width:100%}.error-alert{background:var(--red-soft);color:var(--red);text-align:center;border-radius:12px;margin-bottom:16px;padding:12px;font-size:13px;font-weight:800}