/* Stats - scoped to campaigns */
#view-campaigns .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:none;border:none}#view-campaigns .stat-card{background:var(--white);padding:18px 20px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--grey-200);border-radius: var(--radius-xl);box-shadow:0 1px 2px rgba(16,20,16,0.04), 0 8px 24px -12px rgba(16,20,16,0.08)}#view-campaigns .stat-label{font-size: 12px;font-weight:600;letter-spacing:.1em;color:var(--grey-400)}#view-campaigns .stat-value{font-size: 26px;font-weight:700;letter-spacing:-.02em}
/* Filters - Custom UI */
.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.search-box{display:flex;align-items:center;gap:7px;padding:7px 12px;background:var(--white);border:1px solid var(--grey-200);border-radius: var(--radius-lg)}.search-box:focus-within{border-color:var(--accent)}.search-box input{border:none;background:none;outline:none;font-family:var(--font);font-size: 12px;width:180px;color:var(--black)}.search-box input::placeholder{color:var(--grey-400)}
.filter-bar{display:flex;gap:0;align-items:center}
.filter-chip-group{display:flex;gap:6px}
.filter-chip{padding:9px 16px;font-size: 12px;font-weight:500;border:1px solid var(--grey-300);background:var(--white);color:var(--grey-700);cursor:pointer;font-family:var(--font);transition:all .12s;white-space:nowrap;border-radius: var(--radius-pill)}
.filter-chip:hover{border-color:var(--red);color:var(--red)}
.filter-chip.has-filter{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.filter-dropdown{position:absolute;z-index:100;background:var(--white);border:1px solid var(--grey-200);box-shadow:0 8px 24px rgba(0,0,0,.1);min-width:160px;animation:slideDown .12s ease;border-radius: var(--radius-lg);overflow:hidden}
.filter-dd-item{padding:8px 14px;font-size: 12px;color:var(--grey-600);cursor:pointer;transition:background .08s;border-radius: var(--radius-sm)}
.filter-dd-item:hover{background:var(--grey-50);color:var(--black)}
.filter-dd-item.active{color:var(--accent);font-weight:600;background:var(--accent-light)}
.filter-dd-date{padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:220px}
.filter-dd-presets{display:flex;flex-wrap:wrap;gap:4px}
.filter-dd-preset{padding:5px 10px;font-size: 12px;font-weight:500;border:1px solid var(--grey-300);background:var(--white);color:var(--grey-700);cursor:pointer;font-family:var(--font);transition:all .1s;border-radius: var(--radius-pill)}
.filter-dd-preset:hover{border-color:var(--accent);color:var(--accent)}
.filter-dd-preset.active{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.filter-dd-custom{display:flex;align-items:center;gap:6px;font-size: 12px;color:var(--grey-500)}
.filter-dd-custom .f-input{width:120px;font-size: 12px;padding:5px 6px}
/* Table */
/* Tables, badges and status chips are owned by the component layer in
   styles.css. They used to be re-declared here with hardcoded colours, and
   because this file loads second those copies won: the status badge kept a
   tint that failed contrast long after the palette changed. */

/* Buttons */
.topbar-right{display:flex;align-items:center;gap:8px}.btn-create{padding:11px 18px;background:var(--accent);color:#fff;font-size: 12px;font-weight:600;border:none;font-family:var(--font);cursor:pointer;transition:all .15s;box-shadow:0 1px 4px rgba(17,36,26,0.3);border-radius: var(--radius-lg)}.btn-create:hover{background:#0a1a12;box-shadow:0 4px 12px rgba(17,36,26,0.3)}.btn-back{font-size: 12px;font-weight:500;color:var(--accent);border:none;background:none;font-family:var(--font);cursor:pointer;padding:4px 8px}.btn-draft{padding:10px 18px;font-size: 12px;font-weight:600;border:1px solid var(--grey-300);color:var(--grey-700);background:var(--white);font-family:var(--font);cursor:pointer;border-radius: var(--radius-md)}.btn-draft:hover{border-color:var(--accent);color:var(--accent)}.btn-outline{padding:10px 18px;font-size: 12px;font-weight:500;border:1px solid var(--grey-300);color:var(--grey-700);background:var(--white);font-family:var(--font);cursor:pointer;transition:all .12s;border-radius: var(--radius-md)}.btn-outline:hover{border-color:var(--accent);color:var(--accent)}.full-w{width:100%!important}
.card-body-pad{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
/* Tags */
.tags-wrap{display:flex;flex-direction:column;gap:6px}.tags-list{display:flex;flex-wrap:wrap;gap:4px}.tag-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--accent-light);border:1px solid var(--accent);color:var(--accent);font-size: 12px;font-weight:600;border-radius: var(--radius-pill)}.tag-chip button{background:none;border:none;color:var(--accent);font-size: 12px;cursor:pointer;padding:0}.tags-input-row{display:flex;gap:6px;align-items:center}
/* Steps */
.step-indicator{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:20px}.step{display:flex;align-items:center;gap:8px;padding:8px 16px;cursor:pointer}.step-number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size: 12px;font-weight:700;border:1.5px solid var(--grey-300);color:var(--grey-400);border-radius:50%}.step-label{font-size: 12px;font-weight:500;color:var(--grey-400)}.step.active .step-number{background:var(--accent);color:#fff;border-color:var(--accent)}.step.active .step-label{color:var(--black);font-weight:600}.step.done .step-number{background:var(--black);color:var(--white);border-color:var(--black)}.step.done .step-label{color:var(--black)}.step-connector{width:36px;height:1px;background:var(--grey-200)}.step-content{display:none;flex-direction:column;gap:14px;animation:slideDown .2s ease}.step-content.active{display:flex!important}.step-nav{display:flex;justify-content:space-between;align-items:center;padding-top:8px}.step-nav-btn{padding:11px 22px;font-size: 12px;font-weight:600;font-family:var(--font);cursor:pointer;transition:all .12s;border-radius: var(--radius-md)}.step-nav-btn.next{background:var(--accent);color:#fff;border:none}.step-nav-btn.next:hover{background:#0a1a12}.step-nav-btn.prev{background:var(--white);color:var(--grey-700);border:1px solid var(--grey-300)}.step-nav-btn.launch{background:var(--black);color:var(--white);border:none;font-size: 13px}
.segment-preview{display:flex;gap:16px;padding:10px 14px;background:var(--grey-50);border:1px solid var(--grey-100);margin-top:8px;font-size: 12px;font-weight:600}

/* A/B Variants */
.ab-row{display:flex;align-items:center;gap:10px;padding:6px 0}.ab-label{font-size: 12px;font-weight:500;color:var(--grey-600)}.variant-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--white);border:1px solid var(--grey-200);margin-bottom:8px;flex-wrap:wrap;border-radius: var(--radius-lg)}.variant-tabs{display:flex;gap:3px}.variant-tab{padding:5px 14px;font-size: 12px;font-weight:600;border:1px solid var(--grey-200);background:var(--white);cursor:pointer;font-family:var(--font);position:relative;transition:all .12s;border-radius: var(--radius-md)}.variant-tab.active{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.variant-tab .vt-close{position:absolute;top:-6px;right:-6px;width:14px;height:14px;background:var(--white);border:1px solid var(--grey-200);font-size: 12px;display:none;align-items:center;justify-content:center;cursor:pointer;border-radius:50%}.variant-tab:hover .vt-close{display:flex}.variant-tab .vt-close:hover{border-color:var(--negative);color:var(--negative)}.variant-add-btn{width:26px;height:26px;border:1px dashed var(--grey-400);display:flex;align-items:center;justify-content:center;font-size: 14px;color:var(--grey-500);cursor:pointer;background:none;font-family:var(--font);border-radius: var(--radius-md)}.variant-add-btn:hover{border-color:var(--accent);color:var(--accent)}.variant-split-info{font-size: 12px;color:var(--grey-500);margin-left:auto}
/* Template Section */
.template-section{display:flex;gap:8px;margin-bottom:10px}.template-btn{padding:10px 18px;font-size: 12px;font-weight:600;border:2px solid var(--accent);color:var(--accent);background:var(--accent-light);cursor:pointer;font-family:var(--font);transition:all .12s;border-radius: var(--radius-md)}.template-btn:hover{background:var(--accent);color:#fff}.template-btn.outline{border-color:var(--grey-300);color:var(--grey-700);background:var(--white)}.template-btn.outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
/* Template Grid (modal) */
.modal-lg{width:600px;max-width:95vw}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.template-card{border:1px solid var(--grey-200);padding:16px;transition:all .12s;cursor:pointer;position:relative;border-radius: var(--radius-lg)}.template-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.06)}.template-card-name{font-size: 13px;font-weight:600;margin-bottom:4px}.template-card-desc{font-size: 12px;color:var(--grey-500)}.template-card-actions{display:flex;gap:6px;margin-top:10px}.template-card-actions button{font-size: 12px;padding:3px 8px;border:1px solid var(--grey-200);background:var(--white);cursor:pointer;font-family:var(--font);transition:all .12s}.template-card-actions button:hover{border-color:var(--accent);color:var(--accent)}.template-card-actions button.del:hover{border-color:var(--negative);color:var(--negative)}
/* Rich Input (SL/PT) */
.rich-input{border:1px solid var(--grey-200);padding:8px 10px;font-size: 12px;min-height:32px;font-family:var(--font);outline:none;transition:border-color .12s;color:var(--black);line-height:1.4;border-radius: var(--radius-md)}.rich-input:focus{border-color:var(--accent)}.rich-input:empty::before{content:attr(data-placeholder);color:var(--grey-400)}
.email-meta-card{margin-bottom:0}.email-meta-fields{padding:14px 18px;display:flex;flex-direction:column;gap:8px}.meta-row{display:flex;gap:12px}.meta-row .meta-field{flex:1;display:flex;flex-direction:column;gap:3px}.meta-row .meta-field.full{flex:1}.meta-row .meta-field label{font-size: 12px;font-weight:600;color:var(--grey-400);}.meta-hint{font-size: 12px;color:var(--grey-400);text-align:right}

/* Editor */
.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:var(--white);border:1px solid var(--grey-200);border-bottom:none}.toolbar-left{display:flex;align-items:center;gap:4px}.toolbar-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--grey-600);border:1px solid transparent;background:none;cursor:pointer;font-size: 13px;transition:all .12s}.toolbar-btn:hover{background:var(--grey-50);border-color:var(--grey-300)}.toolbar-btn.active{color:var(--accent);background:var(--accent-light)}.toolbar-divider{width:1px;height:16px;background:var(--grey-200);margin:0 4px}
.editor-layout{display:grid;grid-template-columns:180px 1fr 220px;border:1px solid var(--grey-200);min-height:480px;border-radius: var(--radius-lg);overflow:hidden}.editor-panel-left{background:var(--white);padding:10px;border-right:1px solid var(--grey-200);overflow-y:auto;max-height:480px}.editor-panel-right{background:var(--white);padding:12px;border-left:1px solid var(--grey-200);overflow-y:auto;max-height:480px}.editor-canvas-wrap{background:var(--grey-50);padding:16px;display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;max-height:480px}.editor-canvas{width:100%;max-width:600px;background:var(--white);border:1px solid var(--grey-200);min-height:350px;display:flex;flex-direction:column;transition:max-width .3s;box-shadow:0 2px 8px rgba(0,0,0,.04)}.editor-canvas.phone-view{max-width:375px}
.panel-tabs{display:flex;border-bottom:1px solid var(--grey-200);margin-bottom:10px}.panel-tab{flex:1;padding:7px 4px;font-size: 12px;font-weight:600;text-align:center;color:var(--grey-500);border:none;border-bottom:2px solid transparent;cursor:pointer;background:none;font-family:var(--font)}.panel-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.block-palette{display:grid;grid-template-columns:1fr 1fr;gap:5px}.palette-block{display:flex;align-items:center;justify-content:center;padding:10px 4px;border:1px solid var(--grey-200);font-size: 12px;font-weight:500;color:var(--grey-600);cursor:grab;transition:all .12s;background:var(--white);text-align:center;border-radius: var(--radius-md)}.palette-block:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.palette-block:active{cursor:grabbing}
.row-palette{display:flex;flex-direction:column;gap:6px}.row-option{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--grey-200);cursor:pointer;transition:all .12s}.row-option:hover{border-color:var(--accent);background:var(--accent-light)}.row-preview{display:flex;gap:3px;flex:1;height:18px}.rp-col{flex:1;background:var(--grey-200)}.row-option span{font-size: 12px;color:var(--grey-600)}
.settings-form{display:flex;flex-direction:column;gap:10px}.color-row{display:flex;align-items:center;gap:6px}.cb-sm{display:flex;align-items:center;gap:3px;font-size: 12px;color:var(--grey-500);cursor:pointer;white-space:nowrap}.cb-sm input{width:11px;height:11px}
.canvas-placeholder{display:flex;align-items:center;justify-content:center;flex:1;color:var(--grey-300);font-size: 12px;padding:60px 30px;text-align:center;border:2px dashed var(--grey-200);margin:12px}
.canvas-block{position:relative;border:2px solid transparent;transition:border-color .1s}.canvas-block:hover{border-color:var(--grey-200)}.canvas-block.selected{border-color:var(--accent)}.canvas-block-toolbar{position:absolute;top:-26px;right:0;display:none;gap:2px;background:var(--white);border:1px solid var(--grey-200);padding:2px;box-shadow:0 2px 6px rgba(0,0,0,.08);z-index:10;border-radius: var(--radius-md)}.canvas-block:hover .canvas-block-toolbar,.canvas-block.selected .canvas-block-toolbar{display:flex}.block-action-btn{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size: 12px;color:var(--grey-500);cursor:pointer;background:none;border:none}.block-action-btn:hover{color:var(--accent)}.block-action-btn.delete:hover{color:var(--negative)}
.canvas-drop-zone{height:4px;transition:all .15s}.canvas-drop-zone.drag-over{height:36px;background:var(--accent-light);border:2px dashed var(--accent);margin:3px 0}
/* Inline text editing toolbar */
.text-toolbar{display:flex;gap:2px;padding:6px 8px;background:var(--black);position:absolute;top:-34px;left:50%;transform:translateX(-50%);z-index:20;box-shadow:0 4px 12px rgba(0,0,0,.2);border-radius: var(--radius-md)}.text-toolbar button{width:24px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--white);background:none;border:none;cursor:pointer;font-size: 12px;font-weight:700;font-family:var(--font)}.text-toolbar button:hover{background:rgba(255,255,255,.15)}.text-toolbar button.active{color:var(--accent)}
/* Row block on canvas */
.canvas-row{display:flex;gap:2px;min-height:60px}.canvas-row-col{flex:1;border:1px dashed var(--grey-300);min-height:50px;padding:6px;position:relative;transition:border-color .12s}.canvas-row-col:hover{border-color:var(--accent)}.canvas-row-col.drag-over-col{background:var(--accent-light);border-color:var(--accent)}.canvas-row-col .col-placeholder{font-size: 12px;color:var(--grey-400);text-align:center;padding:16px 4px}
/* Properties */
#propertiesEmpty{color:var(--grey-400);font-size: 12px;text-align:center;padding:30px 8px}#propertiesContent{display:flex;flex-direction:column;gap:10px}#propertiesContent .form-group{padding:0}#propertiesContent .form-label{font-size: 12px}#propertiesContent .f-input,#propertiesContent .f-select{font-size: 12px;padding:5px 7px}.prop-section-title{font-size: 12px;font-weight:700;color:var(--grey-400);padding:6px 0 2px;border-top:1px solid var(--grey-100);margin-top:2px}.color-input{width:100%;height:28px;padding:2px;cursor:pointer}
.padding-control{display:flex;flex-direction:column;gap:4px}.pad-all-row{display:flex;align-items:center;gap:6px}.pad-all-row .f-input{width:60px}.pad-toggle{font-size: 12px;color:var(--accent);cursor:pointer;border:none;background:none;font-family:var(--font)}.pad-sides{display:grid;grid-template-columns:1fr 1fr;gap:4px}.pad-sides .f-input{width:100%;font-size: 12px;padding:4px 6px}
.alignment-btns{display:flex;gap:3px}.alignment-btns button{width:26px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--grey-200);background:var(--white);cursor:pointer;font-size: 12px;color:var(--grey-500)}.alignment-btns button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.send-test-section{display:flex;gap:8px;align-items:center;padding:12px 0;margin-top:8px;border-top:1px solid var(--grey-100)}
/* Scheduling */
.timing-options{display:flex;gap:20px}.schedule-picker{display:flex;gap:12px;margin-top:8px}.freq-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.freq-label{font-size: 12px;color:var(--grey-500)}
.campaign-summary{padding:14px 20px;display:flex;flex-direction:column;gap:6px}.summary-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--grey-100)}.summary-row:last-child{border-bottom:none}.summary-label{font-size: 12px;color:var(--grey-500)}.summary-value{font-size: 12px;font-weight:500}
/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:6000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.modal{background:var(--white);width:440px;max-width:92vw;box-shadow:0 16px 48px rgba(0,0,0,.15);border-radius: var(--radius-xl);overflow:hidden}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--grey-100)}.modal-header h2, .modal-header h3{font-size: 14px;font-weight:600}.modal-close{font-size: 20px;color:var(--grey-400);background:none;border:none;cursor:pointer}.modal-body{padding:20px 22px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--grey-100)}.modal-option-grid{display:flex;gap:8px;flex-wrap:wrap}.modal-option{padding:14px 18px;border:1px solid var(--grey-300);background:var(--white);font-size: 12px;font-weight:500;color:var(--grey-700);cursor:pointer;font-family:var(--font);transition:all .12s;min-width:80px;text-align:center;border-radius: var(--radius-md)}.modal-option:hover{border-color:var(--accent);color:var(--accent)}.modal-option.active{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
/* Image visibility */
.vis-toggle{display:flex;gap:8px;margin-top:4px}.vis-toggle label{display:flex;align-items:center;gap:4px;font-size: 12px;color:var(--grey-500);cursor:pointer}.vis-toggle input{width:12px;height:12px}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Form inputs global border-radius */
#view-campaigns .f-input,#view-campaigns .f-select,.filter-dd-custom .f-input{border-radius: var(--radius-md)}

/* @ Mention Dropdown */
.mention-dropdown{position:fixed;z-index:9000;background:var(--white);border:1px solid var(--grey-200);box-shadow:0 8px 32px rgba(0,0,0,.12);max-height:280px;overflow-y:auto;width:260px;animation:slideDown .15s ease;border-radius: var(--radius-lg);overflow:hidden}
.mention-header{padding:8px 12px;font-size: 12px;font-weight:700;color:var(--grey-400);border-bottom:1px solid var(--grey-100)}
.mention-cat{padding:6px 12px 2px;font-size: 12px;font-weight:600;color:var(--accent);}
.mention-item{padding:7px 12px;font-size: 12px;color:var(--grey-700);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .08s}
.mention-item:hover,.mention-item.active{background:var(--accent-light);color:var(--accent)}
.mention-tag-preview{font-size: 12px;color:var(--grey-400);font-family:var(--font-mono)}

/* Dynamic Tag Chips (inline) */
.dynamic-tag-chip{display:inline-block;padding:2px 8px;margin:0 2px;background:var(--accent-light);border:1px solid var(--accent);color:var(--accent);font-size: 12px;font-weight:600;border-radius: var(--radius-sm);font-family:var(--font-mono);white-space:nowrap;cursor:default;vertical-align:baseline;line-height:1.4;user-select:none}

/* Text toolbar color button */
.tt-color-btn{color:var(--accent)!important;border-bottom:2px solid var(--accent)}

/* Popovers (inline UI replacing browser prompts) */
.popover{position:fixed;z-index:9500;background:var(--white);border:1px solid var(--grey-200);box-shadow:0 8px 32px rgba(0,0,0,.15);width:280px;animation:slideDown .12s ease;border-radius: var(--radius-lg);overflow:hidden}
.popover-header{padding:10px 14px;font-size: 12px;font-weight:700;border-bottom:1px solid var(--grey-100);color:var(--black)}
.popover-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.popover-desc{font-size: 12px;color:var(--grey-500);margin:0}
.popover-options{display:flex;flex-direction:column;gap:6px}
.popover-footer{display:flex;justify-content:flex-end;gap:6px;padding:10px 14px;border-top:1px solid var(--grey-100)}
/* Color picker */
.color-picker-large{width:100%;height:40px;padding:2px;cursor:pointer;border:1px solid var(--grey-200)}
.color-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.color-swatch{width:24px;height:24px;border:2px solid var(--grey-200);cursor:pointer;transition:all .1s;padding:0;background:none;border-radius: var(--radius-sm)}
.color-swatch:hover{border-color:var(--black);transform:scale(1.15)}
/* Links in contenteditable - clean styling (no bold/color override) */
.ce-block a,.rich-input a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:2px;position:relative;cursor:pointer}
.ce-block a:hover,.rich-input a:hover{background:var(--accent-light);text-decoration-color:var(--accent)}

/* Campaign Detail View */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.detail-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--grey-100);font-size: 12px}
.detail-row:last-child{border-bottom:none}
.detail-row .dl{color:var(--grey-500);font-size: 12px}
.detail-row .dv{font-weight:500}
/* Action buttons in table */
.action-cell{display:flex;gap:3px}.action-btn{padding:8px 16px;font-size: 12px;font-weight:600;border:1px solid var(--grey-300);background:var(--white);cursor:pointer;font-family:var(--font);color:var(--grey-700);transition:all .1s;white-space:nowrap;border-radius: var(--radius-sm)}.action-btn:hover{border-color:var(--accent);color:var(--accent)}.action-btn.danger:hover{border-color:var(--negative);color:var(--negative)}
/* Date range filter */
@media(max-width:900px){.detail-grid{grid-template-columns:1fr}}

/* ===== WHATSAPP EDITOR ===== */
.wa-editor-layout{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.wa-config-panel{min-width:0}
.wa-preview-panel{position:sticky;top:20px}
.wa-template-preview-box{padding:10px 12px;background:var(--grey-50);border:1px solid var(--grey-100);margin-bottom:12px;display:flex;flex-direction:column;gap:2px}
.wa-tpl-name{font-size: 12px;font-weight:600;color:var(--black)}
.wa-tpl-category,.wa-tpl-lang{font-size: 12px;color:var(--grey-500)}
.wa-tag-mappings{display:flex;flex-direction:column;gap:8px}
.wa-tag-row{display:flex;align-items:center;gap:8px}
.wa-tag-row .wa-tag-label{font-size: 12px;font-weight:600;color:var(--accent);min-width:36px;font-family:var(--font-mono)}
.wa-tag-row span.arrow{color:var(--grey-400);font-size: 12px}
.wa-tag-row select{flex:1}

/* iPhone Frame & Chat */
.iphone-frame-wrap{position:relative;width:280px;margin:0 auto}
.iphone-frame{width:100%;display:block;position:relative;z-index:2;pointer-events:none}
.iphone-screen{position:absolute;top:1.5%;left:6.5%;right:6.5%;bottom:1.5%;z-index:1;overflow:hidden;border-radius: 12px;background:#e5ddd5}
.wa-chat-screen{display:flex;flex-direction:column;height:100%;background:#e5ddd5}
.wa-chat-header{background:#075E54;padding:36px 12px 10px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.wa-chat-avatar{width:28px;height:28px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size: 12px;font-weight:700;color:#fff}
.wa-chat-name{font-size: 12px;font-weight:600;color:#fff}
.wa-chat-body{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:6px}
.wa-chat-input{background:#fff;padding:8px 12px 22px;font-size: 12px;color:var(--grey-400);flex-shrink:0;border-top:1px solid #ddd}
.wa-msg-placeholder{font-size: 12px;color:var(--grey-400);text-align:center;padding:40px 10px}
/* WA message bubble */
.wa-bubble{background:#fff;padding:8px 10px;border-radius:0 8px 8px 8px;max-width:88%;align-self:flex-start;box-shadow:0 1px 1px rgba(0,0,0,.08);position:relative}
.wa-bubble-img{width:100%;border-radius: 4px;margin-bottom:6px}
.wa-bubble-text{font-size: 12px;line-height:1.5;color:#303030;word-wrap:break-word}
.wa-bubble-text .wa-tag-highlight{background:#dcf8c6;padding:1px 3px;border-radius: 2px;font-weight:600}
.wa-bubble-footer{display:flex;justify-content:flex-end;margin-top:4px;font-size: 12px;color:#999}
.wa-bubble-cta{display:block;text-align:center;padding:8px;margin-top:6px;border-top:1px solid #eee;color:#075E54;font-size: 12px;font-weight:600;text-decoration:none}
.wa-bubble-cta:hover{text-decoration:underline}
@media(max-width:768px){.wa-editor-layout{grid-template-columns:1fr}.wa-preview-panel{order:-1}}

/* WA Tag Pick Button */
.wa-tag-pick-btn{padding:5px 10px;font-size: 12px;border:1px dashed var(--grey-300);background:var(--white);color:var(--grey-500);cursor:pointer;font-family:var(--font);transition:all .12s;flex:1;text-align:left}
.wa-tag-pick-btn:hover{border-color:var(--accent);color:var(--accent)}
.wa-tag-pick-btn.mapped{border:1px solid var(--accent);background:var(--accent-light);color:var(--accent);font-weight:600;font-family:var(--font-mono);border-style:solid}
.wa-tag-dropdown{max-height:300px}

/* SMS preview in detail */
.detail-msg-sms{max-width:320px}
.sms-preview-bubble{background:#dcf8c6;padding:10px 14px;border-radius:0 12px 12px 12px;font-size: 13px;line-height:1.5;color:#303030;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.detail-msg-wa{max-width:320px}