*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,sans-serif;color:#20242a}body{overflow:auto;background:#eef1f5}.app{display:flex;min-height:100vh}.palette{position:sticky;top:0;width:220px;height:100vh;padding:20px;background:#fff;border-right:1px solid #d7dce3;flex:0 0 220px}.palette h2{margin:0 0 6px}.palette p,.note{font-size:13px;color:#667085;line-height:1.5}.palette-item{padding:12px;margin:10px 0;border:1px solid #aeb7c4;border-radius:7px;background:#f8fafc;cursor:default;user-select:none}.canvas{width:calc(100% - 220px);padding:28px 36px 220px;min-height:150vh}.row{background:white;border:1px solid #cdd4de;border-radius:8px;margin:0 0 24px;padding:12px}.row-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;color:#667085}.handle{cursor:grab;user-select:none;border:1px solid #cdd4de;background:#f6f8fa;border-radius:5px;padding:4px 8px}.columns{display:flex;gap:12px}.column{flex:1;min-width:0;border:1px dashed #b7c0cc;background:#f8fafc;border-radius:6px;padding:8px;min-height:110px}.column-head{font-size:11px;color:#667085;margin-bottom:7px;display:flex;align-items:center;gap:6px}.item{background:#fff;border:1px solid #98a3b3;border-radius:5px;padding:11px;margin:7px 0;cursor:grab;user-select:none}.item[data-type="Image"]{background:#f2f7ff}.item[data-type="HTML"]{background:#f8f3ff}.drop-line{height:4px;background:#3478f6;border-radius:3px;margin:4px 0}.row-drop{height:6px;background:#3478f6;border-radius:3px;margin:0 0 18px}.col-drop{width:6px;background:#3478f6;border-radius:3px;align-self:stretch}.ghost{position:fixed;z-index:9999;pointer-events:none;display:none;opacity:.72;background:white;border:2px solid #3478f6;border-radius:7px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:10px;max-width:520px;overflow:hidden}.drag-source{opacity:.22}.valid-target{outline:2px solid rgba(52,120,246,.25)}
/* Dedicated editor scroll viewport test */
html,body{height:100%;overflow:hidden}
.app{height:100vh}
.canvas-scroll{height:100vh;overflow-y:auto;overflow-x:auto;min-width:0}
.canvas{min-height:140vh}
/* Full-width right preview while preserving the working internal scroll container */
.app{
display:grid;
grid-template-columns:260px minmax(0,1fr);
width:100vw;
max-width:none;
}
.canvas-scroll{
width:100%;
max-width:none;
min-width:0;
}
.canvas{
width:100%;
max-width:none;
}
/* Selection/options prototype layered onto the locked drag base */
.item.selected-item{outline:2px solid #2563eb;outline-offset:2px}
.options-view{position:relative;height:100%}
.close-options{position:absolute;right:0;top:0;border:0;background:transparent;font-size:24px;line-height:1;cursor:pointer;padding:0 2px;z-index:2}
.options-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:4px}
.options-column{min-width:0}
.options-column h2{font-size:13px;margin:0 0 14px;padding-right:16px}
.options-column label{display:block;font-size:11px;margin-bottom:12px;color:#555}
.options-column input,.options-column select{display:block;width:100%;margin-top:5px;padding:7px;border:1px solid #cfd3d8;border-radius:5px;background:#fff;font:inherit}
.new-row-drop{height:4px;background:#2563eb;border-radius:4px;margin:8px 0;}
/* Row Options controls only */
.row-options{max-height:calc(100vh - 32px);overflow-y:auto;padding-right:4px}
.row-options input[type="color"]{height:34px;padding:2px}
.row-options input[type="range"]{padding:0}
.check-label{display:flex!important;align-items:center;gap:6px}
.check-label input{display:inline-block!important;width:auto!important;margin:0!important}
.column-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:5px}
.column-picker button{border:1px solid #cfd3d8;background:#fff;border-radius:4px;padding:6px 0;cursor:pointer}
.column-picker button.active{border-color:#2563eb;box-shadow:inset 0 0 0 1px #2563eb}
/* Direct row selection */
.row.selected-row{outline:2px solid #2563eb;outline-offset:2px}
.options-column[hidden]{display:none!important}
/* Keep the two 50% option tracks even when Item Options is hidden. */
.options-columns{grid-template-columns:1fr 1fr}
/* Larger between-row drop space for creating a new row */
.new-row-drop{
height:32px;
min-height:32px;
margin:8px 0;
border:2px dashed #2563eb;
border-radius:6px;
background:rgba(37,99,235,.08);
box-sizing:border-box;
}
/* Unified drop targets: same generous target size everywhere */
.unified-drop-zone{
height:32px!important;
min-height:32px!important;
margin:8px 0!important;
border:2px dashed #2563eb!important;
border-radius:6px!important;
background:rgba(37,99,235,.08)!important;
box-sizing:border-box!important;
}
.col-drop.unified-drop-zone{
width:32px!important;
min-width:32px!important;
height:auto!important;
min-height:72px!important;
margin:0 8px!important;
align-self:stretch!important;
}
/* v4 landing refinement: generous target without crowding the destination */
.unified-drop-zone{
height:32px!important;
min-height:32px!important;
margin:5px 0!important;
}
.col-drop.unified-drop-zone{
margin:0 5px!important;
}
/* DROP-ZONE REVERT: restore original thin-line behavior/appearance */
.new-row-drop{
height:4px!important;
min-height:4px!important;
background:#2563eb!important;
border:0!important;
border-radius:4px!important;
margin:8px 0!important;
}
.drop-line{
height:3px!important;
min-height:3px!important;
background:#2563eb!important;
border:0!important;
border-radius:3px!important;
margin:4px 0!important;
}
.row-drop{
height:4px!important;
min-height:4px!important;
background:#2563eb!important;
border:0!important;
border-radius:4px!important;
margin:8px 0!important;
}
.col-drop{
width:4px!important;
min-width:4px!important;
height:auto!important;
min-height:0!important;
background:#2563eb!important;
border:0!important;
border-radius:4px!important;
margin:0 6px!important;
align-self:stretch!important;
}
/* Dynamic Row Options: hidden must override normal label/control display rules */
.row-options [hidden]{
display:none!important;
}
/* Keep the approved thin-line insertion indicators */
.new-row-drop{height:4px!important;min-height:4px!important;background:#2563eb!important;border:0!important;border-radius:4px!important;margin:8px 0!important;}
.drop-line{height:3px!important;min-height:3px!important;background:#2563eb!important;border:0!important;border-radius:3px!important;margin:4px 0!important;}
/* Image Options prototype */
.item-options-column{max-height:calc(100vh - 32px);overflow-y:auto;padding-right:4px}
.item-placeholder{font-size:12px;color:#6b7280;line-height:1.45}
.field-with-button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:5px}
.field-with-button input{min-width:0}
.field-with-button button{border:1px solid #cfd3d8;background:#f5f6f8;border-radius:4px;padding:0 8px}
.width-control{display:flex;align-items:center;gap:6px;margin-top:5px}
.width-control>input{width:82px!important}
.compact-check{margin-left:auto!important;font-size:11px!important}
.image-item{box-sizing:border-box}
.image-item img{display:inline-block;height:auto;vertical-align:top}
#image-width:disabled{
background:#eef0f3;
color:#8a9099;
border-color:#d7dbe0;
cursor:not-allowed;
}
/* Match Image Options sliders to Row Options sliders */
#image-options input[type="range"]{
padding:0;
width:100%;
box-sizing:border-box;
}
/* Library modal prototypes */
.test-modal[hidden]{display:none!important}
.test-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px}
.test-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.test-modal-card{position:relative;z-index:1;width:min(520px,calc(100vw - 48px));min-height:240px;background:#fff;border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.25);padding:24px;box-sizing:border-box}
.test-modal-card h2{margin:0 40px 20px 0;font-size:20px}
.test-modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;background:#f0f2f5;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
.modal-placeholder{display:flex;align-items:center;justify-content:center;min-height:150px;border:1px dashed #c9cfd8;border-radius:8px;background:#f8f9fb;color:#707782;font-size:13px}
/* Shared color control pattern: swatch/picker + editable hex field */
.color-control{
display:grid;
grid-template-columns:42px minmax(0,1fr);
gap:7px;
align-items:center;
margin-top:5px;
}
.color-control .color-swatch{
width:42px!important;
height:34px!important;
padding:2px!important;
cursor:pointer;
}
.color-control .color-hex{
width:100%!important;
min-width:0;
box-sizing:border-box;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
text-transform:lowercase;
}
/* v8: final-layout proportion — left editor panel is 40% */
.app{
grid-template-columns:30% minmax(0,70%)!important;
}
.palette{
width:100%!important;
max-width:none!important;
flex:0 0 auto!important;
}
.canvas-scroll{
width:100%!important;
}
.canvas{
width:100%!important;
}
/* Per-side / per-corner controls */
.four-control{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:5px;
margin:5px 0 10px;
}
.four-control label{
display:block!important;
margin:0!important;
min-width:0;
}
.four-control label span{
display:block;
margin-bottom:3px;
font-size:10px;
color:#6b7280;
text-align:center;
}
.four-control input{
width:100%!important;
min-width:0!important;
padding:6px 3px!important;
text-align:center;
box-sizing:border-box;
}
#text-options[hidden],#text-mobile-font-size-wrap[hidden]{display:none!important}
.font-family-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;margin:5px 0 10px}
.font-family-row select{width:100%;min-width:0}.font-family-row button{white-space:nowrap;padding:7px 9px}
#text-button-options[hidden],#text-empty-options[hidden]{display:none!important}
#text-mobile-font-size:disabled{background:#eef0f3;color:#8b929c;cursor:not-allowed}
.option-section-title{font-weight:700;font-size:12px;margin:16px 0 10px;padding-top:12px;border-top:1px solid #e2e5e9}
#text-options [data-text-nonempty][hidden]{display:none!important}
/* Conditional sections stay in v3's original DOM; only visual order changes. */
#text-options{display:flex;flex-direction:column}
#text-options[hidden]{display:none!important}
#text-options > label:first-child{order:0} /* Display */
#text-options > label:nth-child(2){order:1} /* Type */
#text-button-options,#text-empty-options{order:2}
#text-options > *{order:3}
/* Stable Text Options ordering: Display, Type, conditional Button/Empty options, then common options. */
#text-options > *{order:20!important}
#text-options > .text-display-control{order:0!important}
#text-options > .text-type-control{order:1!important}
#text-options > #text-button-options,
#text-options > #text-empty-options{order:2!important}
#text-accessory-options[hidden],#text-icon-options[hidden],#text-list-options[hidden]{display:none!important}
.option-help{font-size:11px;color:#69717d;margin:4px 0 8px;line-height:1.4}
.editable-text{min-width:1px;outline:none;cursor:text}
.rich-selected{background:rgba(37,99,235,.18);outline:1px solid #2563eb;border-radius:2px}
.rich-text-toolbar{position:fixed;z-index:10000;display:flex;align-items:center;gap:4px;padding:6px;background:#fff;border:1px solid #cfd5dd;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.rich-text-toolbar[hidden]{display:none!important}.rich-text-toolbar button{width:auto;min-width:30px;padding:5px 7px;border:1px solid #d7dce3;background:#fff;border-radius:5px;cursor:pointer}.rich-color{display:flex;align-items:center;gap:4px}.rich-color input[type=color]{width:30px;height:28px;padding:2px}.rich-color input[type=text]{width:70px;padding:5px}
.rich-link{display:flex;align-items:center;gap:4px}
.rich-link select{width:62px}.rich-link input{width:130px;min-width:80px}
.rich-link button{white-space:nowrap}
.rich-color input[type="text"]{pointer-events:auto!important;user-select:text!important}
.rich-selected a{color:inherit;text-decoration:inherit}
.editable-text .rich-locked{-webkit-user-select:none;user-select:none;cursor:pointer}
.editable-text{overflow:visible}
.editable-text{display:block;width:100%;min-width:0}
.item{position:relative}
.item-move-handle{
position:absolute;right:-28px;top:50%;transform:translateY(-50%);
width:24px;height:34px;display:flex;align-items:center;justify-content:center;
border:1px solid #cbd2dc;border-radius:5px;background:#fff;color:#667085;
font-size:15px;line-height:1;cursor:grab;z-index:12;box-shadow:0 1px 3px rgba(0,0,0,.08);
user-select:none;-webkit-user-select:none
}
.item-move-handle:active{cursor:grabbing}
.column{overflow:visible}
.editable-text{display:block;width:100%}
/* Item move handles stay out of the way until that item is selected. */
.item-move-handle{display:none}
.item.selected .item-move-handle,
.item.selected-item .item-move-handle{display:flex}
.image-item.selected-item .item-move-handle{
right:6px;
}
.item:not(.image-item){cursor:default}
.item-move-handle{cursor:grab}
.item-move-handle:active{cursor:grabbing}
/* v17: image email content is nested so builder controls can live outside safely */
.item.image-item{
overflow:visible!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
padding:0!important;
}
.image-content{
box-sizing:border-box;
width:100%;
}
.image-item.selected-item .item-move-handle{
right:-28px;
}
.rich-text-toolbar button[data-rich="bold"].active,
.rich-text-toolbar button[data-rich="italic"].active,
.rich-text-toolbar button[data-rich="underline"].active,
.rich-text-toolbar button[data-rich="strike"].active{
background:#e8eefc;
border-color:#2563eb;
color:#1d4ed8;
box-shadow:inset 0 0 0 1px rgba(37,99,235,.12);
}
#html-options{display:flex;flex-direction:column;gap:10px;height:100%}#html-options[hidden]{display:none!important}
.html-show-toggle{display:flex!important;flex-direction:row!important;align-items:center;gap:7px}.html-show-toggle input{width:auto!important;margin:0}
.html-code-label{display:flex!important;flex-direction:column!important;gap:5px}.html-code-editor{width:100%;box-sizing:border-box;resize:vertical;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:12px;line-height:1.45;white-space:pre;tab-size:2}
.html-css-editor{min-height:110px;height:30%}.html-markup-editor{min-height:260px;height:70%}.html-css-note{margin:-3px 0 2px;color:#667085;font-size:11px;line-height:1.4}
.html-item-content,.html-rendered-preview{width:100%;box-sizing:border-box}.html-item-content{min-height:42px}.html-code-preview{margin:0;padding:12px;background:#f7f8fa;border:1px solid #e1e5ea;border-radius:4px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:12px;line-height:1.45}
.item-move-handle{left:-28px!important;right:auto!important}
.item.image-item.selected-item .item-move-handle{left:-28px!important;right:auto!important}
.text-emoji-control{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px}
.text-emoji-control[hidden]{display:none!important}
#emoji-picker-button{width:auto;padding:7px 10px}
.emoji-picker{position:absolute;top:100%;right:0;margin-top:6px;width:250px;max-height:220px;overflow-y:auto;padding:8px;background:#fff;border:1px solid #cbd2dc;border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:1000}
.emoji-picker[hidden]{display:none!important}
.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.emoji-choice{border:0!important;background:transparent!important;padding:5px!important;font-size:20px;line-height:1.2;cursor:pointer;border-radius:4px}
.emoji-choice:hover{background:#f1f3f5!important}
/* Keep the emoji picker above panel clipping while constraining it to the left panel. */
.emoji-picker{position:fixed!important;right:auto!important;margin:0!important;z-index:5000!important;box-sizing:border-box}
/* Builder-only item action rail. */
.item-actions{display:none;position:absolute;right:0;top:-30px;height:26px;align-items:center;gap:4px;z-index:20;overflow:visible}
.item.selected .item-actions,.item.selected-item .item-actions{display:flex}
.item-action{width:26px!important;height:26px!important;min-width:26px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;border:1px solid #cbd2dc!important;border-radius:5px!important;background:#fff!important;color:#667085!important;font-size:14px!important;line-height:1!important;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.item-action:hover{background:#f7f8fa!important}
.item-delete:hover{color:#b42318!important;border-color:#f1b5b0!important}
.item-save,.item-clone{opacity:.65}
/* Builder-only row action rail. */
.row-actions{display:none;position:absolute;right:0;top:-30px;height:26px;align-items:center;gap:4px;z-index:21;overflow:visible}
.row.selected-row .row-actions{display:flex}
.row-action{width:26px!important;height:26px!important;min-width:26px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;border:1px solid #cbd2dc!important;border-radius:5px!important;background:#fff!important;color:#667085!important;font-size:14px!important;line-height:1!important;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.row-action:hover{background:#f7f8fa!important}
.row-delete:hover{color:#b42318!important;border-color:#f1b5b0!important}
.row-save,.row-clone{opacity:.65}
/* Anchor the selected-row action rail to the row itself. */
#canvas .row{position:relative}
.mobile-padding-label{display:flex!important;align-items:center;justify-content:space-between;gap:8px}
.mobile-padding-label input[type="checkbox"]{width:auto!important;margin:0!important}
.four-control input:disabled{opacity:.55;background:#f1f3f5;color:#8a929d;cursor:not-allowed}
/* Brick prototype */
.mobile-padding-label{justify-content:flex-start!important}
.brick-library{margin-top:18px;padding-top:14px;border-top:1px solid #d9dee7}
.brick-library-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#667085;margin-bottom:10px}
.brick-library-list{display:grid;gap:12px}
.brick-empty{font-size:12px;color:#98a2b3;padding:8px 0}
.brick-card{position:relative;cursor:grab}
.brick-thumb{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden;border:1px solid #d6dbe3;border-radius:6px;background:#fff;box-sizing:border-box}
.brick-thumb-preview{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#667085;background:linear-gradient(135deg,#fff,#f3f5f8)}
.brick-card-name{font-size:12px;font-weight:600;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brick-library-delete{display:none;position:absolute;right:0;top:-28px;width:26px;height:26px;padding:0;border:1px solid #cbd2dc;border-radius:5px;background:#fff;color:#667085;cursor:pointer;z-index:3}
.brick-card:hover .brick-library-delete{display:block}
.brick-save-card{min-height:0!important}
.brick-save-card label{display:block;margin:12px 0 8px}
.brick-save-card input{display:block;width:100%;box-sizing:border-box;margin-top:6px}
.brick-save-card button:not(.test-modal-close){padding:8px 14px}
.brick-save-divider{margin:22px 0 8px;padding-top:18px;border-top:1px solid #e4e7ec;font-weight:700}
/* v16 UI-only Brick library test. No capture/screenshot or selection logic changes. */
.base-item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.base-item-grid .palette-item{min-width:0;margin:0!important;padding:10px 4px!important;text-align:center;box-sizing:border-box}
.brick-library{min-width:0}
.brick-library-list{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px 8px!important;
max-height:230px;
overflow-y:auto;
overflow-x:hidden;
padding:30px 3px 4px 0
}
.brick-card{min-width:0;width:100%;box-sizing:border-box}
.brick-thumb{position:relative;width:100%!important;aspect-ratio:2/1!important;overflow:hidden!important}
.brick-card-name{font-size:10px!important;margin-top:4px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brick-library-delete{
display:flex!important;align-items:center;justify-content:center;
right:3px!important;top:3px!important;
width:20px!important;height:20px!important;min-width:20px!important;
font-size:11px!important;z-index:5;
background:rgba(255,255,255,.94)!important
}
.brick-card:hover .brick-library-delete{display:flex!important}
/* Brick thumbnails rendered only from stored Brick data. No live preview DOM is cloned/read. */
.brick-thumb{position:relative;overflow:hidden;background:#fff}
.brick-thumb-data{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#fff}
.bt-stage{width:600px;min-height:300px;box-sizing:border-box;background:#fff;transform-origin:top left;transform:scale(var(--brick-thumb-scale,.115))}
.bt-stage-item>.bt-item{width:600px;box-sizing:border-box}
.bt-row{width:600px;min-height:1px}
.bt-col{box-sizing:border-box}
.bt-item{box-sizing:border-box}
.bt-image img{vertical-align:top}
.bt-image-placeholder{height:180px;background:#eef1f5;display:flex;align-items:center;justify-content:center;color:#6b7280;font:20px Arial}
/* v25: data thumbnail mirrors preview sizing at a fixed 600px desktop canvas. */
.bt-item-canvas{width:600px;box-sizing:border-box}
.bt-stage-item .bt-item{width:100%;box-sizing:border-box}
.bt-stage-row .bt-row{width:600px;box-sizing:border-box}
.bt-col{min-width:0;box-sizing:border-box}
.bt-image-item{overflow:visible}
.bt-image-content{display:block}
.bt-image-content img{display:inline-block;height:auto;vertical-align:top}
/* v32 template-level preview controls */
.canvas-scroll{display:flex;flex-direction:column}
.preview-nav{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:10px 16px;background:#fff;border-bottom:1px solid #d9dee7;box-sizing:border-box}
.preview-nav-left,.preview-nav-right,.preview-nav-center{display:flex;align-items:center;gap:10px}
.preview-nav-right{justify-content:flex-end}
.preview-control{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:600;white-space:nowrap}
.preview-control select{width:72px}
.preview-color-control{display:flex;align-items:center;gap:5px}
.preview-color-control input[type="color"]{width:30px;height:30px;padding:2px;border:1px solid #cbd2dc;border-radius:5px;background:#fff}
.preview-color-control input[type="text"]{width:76px}
.preview-nav-button,.preview-toggle{min-height:32px;padding:5px 10px;border:1px solid #cbd2dc;border-radius:6px;background:#fff;cursor:pointer}
.preview-toggle.active{background:#e9edf3;font-weight:700}
.preview-board{flex:1;padding:28px 36px 220px;box-sizing:border-box}
.preview-board .canvas{width:600px;max-width:100%;margin:0 auto;padding:0;min-height:140vh;background:#fff;transition:width .15s ease}
.preview-board.mobile-preview .canvas{width:375px!important}
/* v33 container control fixes */
.preview-board{height:max-content;background:#fff}
.preview-board .canvas{max-width:none!important;box-sizing:border-box;flex:none}
/* v34: canvas itself is the fixed-width email container; board owns full scrollable background */
.canvas-scroll{background:transparent}
.preview-board{
flex:0 0 auto;
width:100%;
min-height:100%;
box-sizing:border-box;
overflow:visible;
}
.preview-board .canvas{
width:600px;
max-width:none;
min-width:600px;
margin-left:auto;
margin-right:auto;
box-sizing:border-box;
}
.preview-board.mobile-preview .canvas{
width:375px!important;
min-width:375px!important;
}
/* v36: template background shows through the email canvas between rows */
.preview-board .canvas{background:transparent!important}
/* v40-clean Sections — isolated on top of confirmed v39 */
.section-options{grid-column:1/-1;border-bottom:1px solid #d7dce3;padding:4px 0 14px;margin-bottom:14px}
.section-options h2{font-size:13px;margin:0 0 12px}
.section-options-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.section-options-controls label{display:block;font-size:11px;color:#555}
.preview-board{padding-left:0!important;padding-right:0!important}
.preview-board .canvas{width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;background:transparent!important}
.builder-section{position:relative;width:100%;box-sizing:border-box;padding:30px 16px 16px;margin:0 0 24px;background:#fff;min-height:86px}
.builder-section.selected-section{outline:2px solid #2563eb;outline-offset:-2px}
.section-head{position:absolute;left:16px;top:5px;display:flex;align-items:center;gap:8px;font-size:12px;color:#667085}
.section-actions{position:absolute;right:16px;top:5px;display:flex;gap:4px}
.section-action{border:1px solid #cbd2dc;background:#fff;border-radius:5px;cursor:pointer;min-width:28px;height:24px}
.section-rows>.row{width:min(var(--row-preview-width,600px),calc(100% - 32px));max-width:none!important;min-width:0!important;margin-left:auto!important;margin-right:auto!important}
.section-empty-drop{width:min(var(--row-preview-width,600px),calc(100% - 32px));margin:8px auto;padding:18px;border:1px dashed #aeb7c4;border-radius:6px;text-align:center;font-size:12px;color:#667085;background:rgba(255,255,255,.55)}
.section-drop{height:6px;background:#3478f6;border-radius:3px;margin:4px 0}
.builder-section .row-drop,.builder-section .new-row-drop{width:min(var(--row-preview-width,600px),calc(100% - 32px));margin-left:auto;margin-right:auto}
/* v41: scroll the whole left options view so Section Options never clips Row/Item controls. */
#left-panel{overflow:hidden}
.options-view{height:100%;overflow-y:auto;overflow-x:hidden;padding-right:6px;padding-bottom:28px}
.row-options{max-height:none!important;overflow:visible!important;padding-right:4px}
/* Native color pickers have no transparency; add an explicit standard action. */
.color-control{grid-template-columns:42px minmax(0,1fr) auto}
.color-transparent{width:auto!important;margin:5px 0 0!important;padding:7px 8px!important;border:1px solid #cfd3d8;border-radius:5px;background:#fff;font-size:10px!important;cursor:pointer}
/* v42 simple, predictable builder color picker */
.custom-color-swatch{
width:34px!important;height:30px!important;padding:0!important;border:1px solid #cbd2dc!important;
border-radius:5px!important;cursor:pointer!important;display:inline-block!important;
}
.simple-color-popover{
position:fixed;z-index:20000;width:220px;padding:10px;background:#fff;border:1px solid #cbd2dc;
border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.18)
}
.simple-color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:10px}
.simple-color-grid button{width:28px;height:28px;border:1px solid #b8c0cb;border-radius:5px;background:var(--pick);cursor:pointer}
.simple-color-transparent{position:relative;background:linear-gradient(135deg,#fff 0 43%,#d33 44% 56%,#fff 57% 100%)!important}
.simple-color-custom{display:block;font-size:10px;color:#555}
.simple-color-custom input{width:100%;margin-top:4px}
.simple-color-actions{display:flex;justify-content:flex-end;margin-top:8px}
.simple-color-actions button{padding:6px 10px;border:1px solid #cbd2dc;border-radius:5px;background:#fff;cursor:pointer}
/* v42 fixed Brick thumbnail capture viewport: always 600px desktop, then scale into card. */
.brick-fixed-capture-stage{position:relative;width:100%;height:100%;overflow:hidden}
.brick-fixed-capture-email{
width:600px!important;min-width:600px!important;max-width:600px!important;
transform:scale(.235);transform-origin:top left;
box-sizing:border-box;
}
.brick-fixed-capture-email .bt-stage,
.brick-fixed-capture-email .bt-row-canvas,
.brick-fixed-capture-email .bt-item-canvas{
width:600px!important;min-width:600px!important;max-width:600px!important;
box-sizing:border-box;
}
/* v43 column conditional controls */
#row-gap-wrap[hidden],#row-valign-wrap[hidden],#row-ratio-wrap[hidden],#row-flip-wrap[hidden],#row-fullwidth-wrap[hidden]{display:none!important}
/* Color popover is independent editor chrome and must remain interactive. */
#simple-color-popover{pointer-events:auto}
#simple-color-popover *{pointer-events:auto}
.url-library-card{width:min(720px,calc(100vw - 40px));max-width:720px}
.url-library-create{display:grid;grid-template-columns:1fr 1.5fr;gap:12px}
.url-library-create label{display:flex;flex-direction:column;gap:6px}
.url-library-save,.url-library-add{margin-top:12px}
.url-library-list-head,.url-library-row{display:grid;grid-template-columns:minmax(160px,.9fr) minmax(220px,1.4fr) 34px;gap:12px;align-items:center}
.url-library-list-head{margin-top:18px;padding:0 10px 8px}
.url-library-name-head{display:flex;align-items:center;gap:4px}
.url-library-name-head button{padding:2px 7px}
.url-library-name-head button.active{font-weight:700}
.url-library-list{max-height:280px;overflow:auto;border:1px solid #d7d9de;border-radius:6px}
.url-library-row{width:100%;padding:10px;text-align:left;border:0;border-bottom:1px solid #e7e9ed;background:#fff}
.url-library-row:last-child{border-bottom:0}.url-library-row:hover{background:#f6f7f9}.url-library-row.selected{background:#e8f1ff}
.url-library-row .url-name,.url-library-row .url-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.url-library-delete{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;cursor:pointer;justify-self:end}
.url-library-delete:hover{background:#e1e4e9}
.url-library-empty{padding:20px;text-align:center;color:#777}
.url-library-add:disabled{opacity:.45;cursor:not-allowed}
/* Custom Google Fonts v1 */
.custom-font-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.custom-font-heading h2{margin:0}.custom-font-heading strong{font-size:13px;color:#667085}.custom-font-source-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:16px 0}.custom-font-source-tabs button{padding:8px 6px;border:1px solid #cbd2dc;border-radius:6px;background:#fff}.custom-font-source-tabs button.active{border-color:#2563eb;background:#eff6ff}.custom-font-source-tabs button:disabled{opacity:.45}.custom-google-create{display:grid;grid-template-columns:1fr 150px auto;gap:8px;align-items:end;padding:12px 0 16px;border-bottom:1px solid #e2e6eb}.custom-google-create label{font-size:11px;color:#555}.custom-google-create input,.custom-google-create select{display:block;width:100%;margin-top:5px}.custom-font-error{grid-column:1/-1;font-size:12px;color:#b42318}.custom-font-list-head{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 7px;font-size:11px;font-weight:700;color:#667085}.custom-font-list-head button{border:0;background:transparent;cursor:pointer;padding:2px 5px}.custom-font-list{max-height:240px;overflow:auto;border-top:1px solid #edf0f3}.custom-font-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid #edf0f3}.custom-font-row-name{font-size:13px;font-weight:600}.custom-font-row-meta{display:block;margin-top:2px;font-size:11px;color:#667085}.custom-font-delete{border:0;background:transparent;cursor:pointer;font-size:16px}.custom-font-empty{padding:18px 4px;color:#667085;font-size:12px}.section-drop{width:min(var(--row-preview-width,600px),calc(100% - 32px));margin-left:auto!important;margin-right:auto!important}
.custom-hosted-create{display:grid;gap:10px;margin:14px 0}
.custom-hosted-create label{display:grid;gap:5px;font-size:12px;font-weight:600}
.custom-hosted-create input,.custom-hosted-create select{width:100%;box-sizing:border-box}
.custom-hosted-variants-head{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.custom-hosted-variant{border:1px solid #d9dce1;border-radius:8px;padding:10px;display:grid;gap:8px}
.custom-hosted-variant-top{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.custom-hosted-sources{display:grid;grid-template-columns:70px 1fr;gap:6px 8px;align-items:center}
.custom-hosted-sources span{font-size:11px;font-weight:700;color:#62666d}
.custom-hosted-remove-variant{min-width:32px}
.custom-font-source-tabs button.active{font-weight:700}
/* Modal layout pass: inputs left (75%), saved library right (25%). */
#custom-font-modal .test-modal-card,
#url-library-modal .test-modal-card{
width:min(1100px,calc(100vw - 48px));
max-width:1100px;
}
.modal-split-layout{
display:grid;
grid-template-columns:minmax(0,3fr) minmax(220px,1fr);
gap:24px;
align-items:start;
}
.modal-input-column,
.modal-list-column{min-width:0}
.modal-list-column{
border-left:1px solid #e1e4e8;
padding-left:24px;
}
@media (max-width:760px){
.modal-split-layout{grid-template-columns:1fr}
.modal-list-column{border-left:0;border-top:1px solid #e1e4e8;padding-left:0;padding-top:18px}
}
/* Center only the between-section insertion line; keep its existing visual width/style. */
.section-wrap > .new-row-drop,
.preview-section > .new-row-drop,
.section > .new-row-drop{
margin-left:auto!important;
margin-right:auto!important;
}
.custom-upload-create{margin:14px 0}
.custom-upload-placeholder{border:1px dashed #cfd3d8;border-radius:8px;padding:18px;display:grid;gap:5px;color:#62666d}
.custom-upload-placeholder strong{color:#20242a}
/* Custom Font source tabs: hidden panel must always stay hidden. */
#custom-google-panel[hidden],
#custom-hosted-panel[hidden],
#custom-upload-panel[hidden]{
display:none!important;
}
.custom-font-row{cursor:pointer}
.custom-font-row.selected{outline:2px solid #2563eb;outline-offset:-2px;background:rgba(37,99,235,.08)}
#custom-google-name-display:disabled,#custom-hosted-name:disabled{opacity:.75;cursor:not-allowed}
.custom-upload-create{display:grid;gap:10px;margin:14px 0}
.custom-upload-create label{display:grid;gap:5px;font-size:12px;font-weight:600}
.custom-upload-create input,.custom-upload-create select{width:100%;box-sizing:border-box}
.custom-upload-variants-head{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.custom-upload-variant{border:1px solid #d9dce1;border-radius:8px;padding:10px;display:grid;gap:8px}
.custom-upload-variant-top{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.custom-upload-file-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.custom-upload-file-name{font-size:12px;color:#62666d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-upload-file-input{font-size:12px}
#custom-upload-name:disabled{opacity:.75;cursor:not-allowed}
#image-library-modal .test-modal-card{width:min(1100px,calc(100vw - 48px));max-width:1100px}
.image-library-drop{min-height:260px;border:2px dashed #cfd3d8;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-top:10px;background:#fafbfc}
.image-library-drop.dragover{border-color:#2563eb;background:rgba(37,99,235,.06)}
.image-library-drop span{font-weight:700}.image-library-drop small{color:#737780}
.image-library-preview-wrap{display:grid;gap:12px}.image-library-preview-box{min-height:260px;border:1px solid #e1e4e8;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f7f8fa}
.image-library-preview-box img{max-width:100%;max-height:340px;display:block}
.image-library-preview-actions{display:flex;gap:8px}
.image-library-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.image-library-list{display:grid;gap:6px;max-height:430px;overflow:auto}
.image-library-row{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px;border:1px solid #e1e4e8;border-radius:7px;cursor:pointer}
.image-library-row.selected{outline:2px solid #2563eb;outline-offset:-2px;background:rgba(37,99,235,.08)}
.image-library-thumb{width:72px;height:60px;object-fit:contain;background:#f5f6f8;border-radius:4px}
.image-library-info{min-width:0;display:grid;gap:3px}.image-library-name{font-weight:700;font-size:12px}.image-library-path{font-size:10px;color:#737780;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.image-library-delete{align-self:center}
#image-library-add{margin-top:10px;width:100%}
#image-library-preview-wrap[hidden],#image-library-upload-form[hidden]{display:none!important}
/* Undo / Redo v1 */
#undo-history-ui{position:sticky;left:14px;bottom:14px;z-index:30;width:max-content;margin:0 0 14px 14px;font-family:Arial,Helvetica,sans-serif}
.undo-history-controls{display:flex;gap:6px;align-items:center}
.undo-history-controls button{height:34px;min-width:36px;border:1px solid #cdd4de;background:#fff;border-radius:7px;cursor:pointer;font-size:17px;color:#20242a}
.undo-history-controls button:disabled{opacity:.35;cursor:default}
#undo-history-toggle{font-size:19px!important;padding:0;width:36px}
.undo-history-panel{position:absolute;left:0;bottom:42px;width:280px;max-height:430px;overflow:auto;background:#fff;border:1px solid #cdd4de;border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:8px}
.undo-history-title{font-size:12px;font-weight:700;color:#667085;padding:5px 7px 8px;text-transform:uppercase;letter-spacing:.04em}
.undo-history-entry{display:block;width:100%;text-align:left;border:0;border-radius:6px;background:transparent;padding:8px 9px;cursor:pointer;color:#20242a}
.undo-history-entry:hover{background:#f1f1f2}.undo-history-entry.current{background:#eaf1ff}.undo-history-entry.future{color:#98a3b3}
.undo-history-entry span,.undo-history-entry small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.undo-history-entry span{font-size:13px;font-weight:600}.undo-history-entry small{font-size:11px;margin-top:2px;color:inherit}
#undo-history-empty{font-size:12px;color:#98a3b3;padding:10px 8px}
#custom-font-add-selected{margin-top:12px;width:100%;height:36px}
/* Header / three-zone library layout: UI staging, no template actions yet. */
.palette{width:40%;flex:0 0 40%;padding:0;overflow:hidden}
#palette-view{height:100%;display:flex;flex-direction:column;min-height:0}
#palette-view[hidden]{display:none!important}
.palette-top-third,#brick-library,#template-library-placeholder{flex:1 1 0;min-height:0;padding:16px;border-bottom:1px solid #d9dee7;overflow:auto}
.palette-top-third{display:flex;flex-direction:column;gap:16px}
.builder-logo{font-size:20px;font-weight:750;min-height:30px}
.builder-items{display:flex;gap:8px;flex-wrap:wrap}
.builder-items .palette-item{flex:1 1 75px;text-align:center;margin:0;padding:12px 8px;cursor:grab}
#brick-library{margin:0;border-top:0}
#brick-library-list{max-height:none;overflow:auto}
.template-library-placeholder{background:#fff}
.template-empty{color:#87909c;font-size:13px}
#options-view{height:100%;overflow-y:auto;padding:20px}
.canvas-scroll{width:60%;flex:1 1 60%;min-width:0}
.preview-header{position:sticky;top:0;z-index:50;display:flex;align-items:stretch;background:#fff;border-bottom:1px solid #d9dee7;flex:none}
.preview-header-main{flex:1;min-width:0;display:flex;flex-direction:column}
.message-fields{display:flex;gap:12px;padding:10px 14px 7px;min-width:0}
.message-field{display:flex;flex:1;align-items:center;gap:8px;min-width:0;font-size:12px;font-weight:600}
.message-field>span:first-child{flex:none}
.message-input-wrap{display:flex;position:relative;flex:1;min-width:0}
.message-input-wrap input{width:100%;min-width:0;height:34px;padding:6px 34px 6px 9px;border:1px solid #cbd2dc;border-radius:6px;font:inherit;font-weight:400}
.message-emoji-button{position:absolute;right:3px;top:3px;bottom:3px;width:28px;border:0;background:transparent;cursor:pointer;font-size:19px;color:#555}
.preview-header .preview-nav{position:static;border:0;min-width:0;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;padding:7px 14px 10px}
.preview-nav-left,.preview-nav-center,.preview-nav-right{gap:6px;flex-wrap:wrap}
.account-slot{display:flex;align-items:center;justify-content:center;width:58px;flex:0 0 58px;border-left:1px solid #d9dee7}
.account-button{border:1px solid #cbd2dc;border-radius:50%;width:34px;height:34px;background:#fff;font-size:23px;cursor:default}
.message-emoji-picker{position:fixed!important;width:250px!important;max-height:230px!important;overflow-y:auto!important;z-index:6000!important}
@media(max-width:1050px){.message-fields{flex-wrap:wrap}.message-field{flex:1 1 100%}.preview-header .preview-nav{display:flex;flex-wrap:wrap;justify-content:space-between}}
/* Align item/row insertion indicators with the centered row canvas. */
.builder-section .section-rows > .new-row-drop,
.builder-section .section-rows > .row-drop,
.builder-section > .new-row-drop,
.builder-section > .row-drop {
width:min(var(--row-preview-width,600px),calc(100% - 32px));
max-width:calc(100% - 32px);
margin-left:auto!important;
margin-right:auto!important;
box-sizing:border-box;
}
/* Item-only actual column-width thumbnail; existing 2:1 viewport clips tall items. */
.brick-thumb-data:has(.bt-stage-item) .bt-stage-item{min-width:0!important;max-width:none!important;transform-origin:top left}
.brick-thumb-data:has(.bt-stage-item) .bt-item-canvas{min-width:0!important;max-width:none!important}
.brick-thumb-data:has(.bt-stage-item) .bt-stage-item>.bt-item{width:100%!important}
/* Row/Section captures use their measured stage, with no nested fixed-scale wrapper. */
.brick-thumb-data .bt-stage-row,.brick-thumb-data .bt-stage-section{max-width:none!important;transform-origin:top left}
.brick-thumb-data .bt-stage-section .bt-row-canvas{box-sizing:border-box}
.brick-thumb-data .bt-stage-section .bt-stage-row{transform:none!important;min-height:0!important}
.brick-thumb-data .bt-stage-section .bt-row{max-width:none!important}
#row-auto-align-wrap[hidden]{display:none!important}
/* Pickr is embedded in the existing popup; preserve original preset swatches. */
#simple-color-popover{width:250px}
#simple-color-pickr{margin-bottom:10px}
#simple-color-pickr .pcr-app{position:static!important;display:flex!important;width:100%!important;box-shadow:none!important;padding:0!important;max-width:100%!important}
#simple-color-pickr .pcr-button{display:none!important}
#simple-color-pickr .pcr-interaction{display:none!important}
/* Comments are builder-only overlays, not part of exported email content. */
.comment-open{font-size:16px!important;line-height:1!important}.comment-open.has-comments{color:#e2a900!important}.comments-modal{position:fixed;inset:0;z-index:30000;background:rgba(15,23,42,.42);display:flex;align-items:center;justify-content:center;padding:20px}.comments-modal[hidden]{display:none!important}.comments-panel{background:white;width:min(490px,95vw);max-height:85vh;display:flex;flex-direction:column;border-radius:12px;padding:20px;box-shadow:0 15px 55px #0003}.comments-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.comments-header button{font-size:24px;border:0;background:none;cursor:pointer}.comments-panel #comments-thread{overflow:auto;min-height:60px;max-height:50vh}.comment-card{padding:11px 10px;border-bottom:1px solid #e3e7ec}.comment-reply{background:#f2f3f5;margin-left:22px;border-left:2px solid #cbd5e1}.comment-time{font-size:11px;color:#6b7280}.comment-author{font-size:13px;font-weight:700;margin:4px 0}.comment-body{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.comment-actions{display:flex;gap:12px;margin-top:8px}.comment-actions button{font-size:12px;color:#2563eb;background:none;border:0;padding:0;cursor:pointer}.comments-empty{font-size:13px;color:#64748b}.comments-panel textarea{width:100%;margin-top:12px;padding:9px;resize:vertical;font:inherit;font-size:13px}.comments-compose-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.comments-compose-actions button{padding:8px 12px;cursor:pointer}.comments-compose-actions #comments-submit{background:#2563eb;color:#fff;border:0;border-radius:5px}#comments-reply-label{font-size:12px;color:#64748b;margin-top:9px}
/* Comments v2: distinct, immediate indicators, independent of saving bricks. */
.comment-open.has-comments{color:inherit!important}
.item > .comment-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}
.comment-indicator{display:inline-block;width:12px;height:12px;flex:0 0 12px;border-radius:50%;background:#facc15;border:1px solid #d69e00;box-shadow:0 0 0 2px #fff9;pointer-events:none}
.row-head > .comment-indicator,.section-head > .comment-indicator{margin-left:2px;vertical-align:middle}
#row-auto-width-wrap[hidden],#row-stack-mobile-wrap[hidden]{display:none!important}
/* Template header layout staging; existing width and background controls untouched. */
.preview-header .preview-nav{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(90px,auto) minmax(0,1fr)!important;gap:8px!important;align-items:center}
.preview-nav-left,.preview-nav-right{flex-wrap:nowrap;min-width:0}
.preview-nav-center{justify-content:center;min-width:0;overflow:hidden}
.template-display-name{font-size:14px;font-weight:600;color:#20242a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-nav{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 33px;width:33px;height:33px;padding:5px!important}
.icon-nav svg,#undo-history-toggle svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.preview-bottom-toolbar{position:sticky;bottom:14px;z-index:35;display:flex;align-items:flex-end;justify-content:space-between;margin:0 14px 14px;pointer-events:none}
.preview-bottom-toolbar>*{pointer-events:auto}
.preview-bottom-devices{display:flex;gap:6px}
.preview-bottom-devices .preview-toggle.active{background:#eaf1ff;border-color:#6699e6;color:#1958ad}
#undo-history-ui{position:relative;left:auto;bottom:auto;margin:0}
#undo-history-panel{left:auto;right:0}
#undo-history-toggle{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:1050px){.preview-header .preview-nav{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important}.preview-nav-left{gap:3px}.preview-nav-right{gap:3px}.preview-control{min-width:0}}
/* Tabs layout preview only: tab close, editing and reordering will be wired later. */
.preview-nav-devices{justify-content:center;flex-wrap:nowrap}
.template-tabs{display:flex;align-items:stretch;gap:4px;overflow-x:auto;overflow-y:hidden;min-height:40px;padding:5px 12px 0;background:#f5f6f8;border-bottom:1px solid #d9dee7;box-sizing:border-box;flex:none}
.template-tab{display:flex;align-items:center;gap:12px;min-width:100px;max-width:220px;padding:7px 9px 7px 13px;background:#e9ecf1;border:1px solid #d9dee7;border-bottom:0;border-radius:7px 7px 0 0;font-size:12px;color:#273244;white-space:nowrap}
.template-tab.active{background:#fff;font-weight:600;position:relative;top:1px}
.template-tab-name{overflow:hidden;text-overflow:ellipsis}
.template-tab-close{flex:none;width:20px;height:20px;display:grid;place-items:center;padding:0;background:transparent;border:0;border-radius:4px;font-size:18px;line-height:1;color:#677080;cursor:default}
.template-tab-close:hover{background:#e9ecf1}
.preview-bottom-toolbar{justify-content:flex-end}
/* Template tabs above subject/preheader, with fixed right-side actions */
.template-tabs{align-items:stretch;overflow:visible;padding:0 12px;gap:10px;}
.template-tab-list{display:flex;align-items:stretch;gap:4px;overflow-x:auto;overflow-y:hidden;min-width:0;flex:1;padding-top:5px;}
.template-tab-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex:none;}
.template-tab-actions .icon-nav{display:inline-flex;align-items:center;justify-content:center;}
/* Template tab names: bounded labels with a full-name hover tooltip. */
.template-tab{flex:0 0 auto;max-width:220px;min-width:0;overflow:visible;}
.template-tab-name{display:block;position:relative;flex:0 1 auto;min-width:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text;}
/* Keep the tab strip's horizontal scrolling; render the tooltip separately
outside the scrolling element once interactive tabs are implemented. */
.template-tab-list{overflow:visible;}
.template-tab-name:hover::after{content:attr(data-full-name);position:absolute;top:calc(100% + 13px);left:0;z-index:9999;max-width:320px;width:max-content;white-space:normal;overflow-wrap:anywhere;padding:7px 10px;background:#273244;color:white;border-radius:5px;font-size:12px;font-weight:400;box-shadow:0 3px 12px rgba(0,0,0,.18);pointer-events:none;}
/* Overflow clipping on the name itself prevents pseudo-element tooltips;
use a sibling tooltip positioned from the tab instead. */
.template-tab-name:hover::after{display:none;}
.template-tab{position:relative;}
.template-tab:hover .template-tab-tooltip{display:block;}
.template-tab-tooltip{display:none;position:absolute;top:calc(100% + 7px);left:8px;z-index:9999;max-width:320px;width:max-content;white-space:normal;overflow-wrap:anywhere;padding:7px 10px;background:#273244;color:white;border-radius:5px;font-size:12px;font-weight:400;box-shadow:0 3px 12px rgba(0,0,0,.18);pointer-events:none;}
/* Template tabs, phase 1 */
.template-tab.tab-unsaved .template-tab-name{color:#c62828}
.template-tab-edit{width:150px;max-width:160px;min-width:65px;font:inherit;padding:2px 4px;border:1px solid #6687d9;border-radius:3px}
.template-tab-close{cursor:pointer}
.template-tab.tab-error-tooltip .template-tab-tooltip{display:block;background:#ad2834;color:#fff}
@keyframes tabReject{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.template-tab.tab-rejected{animation:tabReject .32s ease}
.tab-close-modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:20000}
.tab-close-modal[hidden]{display:none}
.tab-close-dialog{background:#fff;border-radius:10px;padding:22px;max-width:390px;width:calc(100% - 32px);box-shadow:0 16px 50px #0003}
.tab-close-dialog h3{margin:0 0 12px;font-size:17px}.tab-close-dialog p{font-size:13px;line-height:1.5}
.tab-close-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.tab-close-actions button{padding:8px 13px;cursor:pointer}
.tab-save-note{display:block;color:#b42318;margin-top:12px}.tab-save-note[hidden]{display:none}
/* Template save modal, phase 2 */
.template-save-dialog{width:min(420px,calc(100vw - 32px));display:flex;flex-direction:column;gap:14px}
.template-save-dialog label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.template-save-dialog input{width:100%;box-sizing:border-box;border:1px solid #b7c0ce;border-radius:5px;padding:9px;font:inherit}
.template-save-dialog input.invalid{border-color:#c62828}
.template-save-error{color:#c62828;font-size:12px;margin:0}
/* Template save dialog follows the existing Brick save layout. */
.template-save-dialog #template-new-fields,.template-save-dialog #template-existing-fields{display:flex;flex-direction:column;gap:10px}
.template-save-dialog #template-new-fields[hidden],.template-save-dialog #template-existing-fields[hidden]{display:none}
.template-save-dialog #template-existing-name{background:#f3f4f6;color:#667085}
.template-save-dialog [data-save="overwrite"],.template-save-dialog [data-save="new"]{align-self:flex-start;padding:8px 15px;cursor:pointer}
.template-save-dialog .brick-save-divider{margin:7px 0 0}
.template-save-footer{display:flex;justify-content:flex-end}
.template-save-footer button{padding:8px 13px;cursor:pointer}
/* Tab-only pointer reordering; independent of the builder's HTML drag/drop. */
.template-tab{user-select:none;cursor:grab;touch-action:pan-y}
.template-tab.tab-dragging{opacity:.55;cursor:grabbing}
.template-tab.tab-drop-before{box-shadow:inset 3px 0 #2672e6}
.template-tab.tab-drop-after{box-shadow:inset -3px 0 #2672e6}
.template-tab-edit{user-select:text;cursor:text}
/* Tabs drag by default; text selection is reserved for the rename input. */
.template-tab,.template-tab-name{-webkit-user-select:none;user-select:none;cursor:grab}
.template-tab.tab-dragging,.template-tab.tab-dragging .template-tab-name{cursor:grabbing}
.template-tab .template-tab-edit{-webkit-user-select:text;user-select:text;cursor:text}
/* Live tab sorting */
.template-tab.tab-dragging{opacity:.95;cursor:grabbing;box-shadow:0 5px 15px rgba(25,40,70,.22);position:relative;pointer-events:none}
.template-tab-list .template-tab:not(.tab-dragging){will-change:transform}
/* Saved templates: same three-across, 2:1 thumbnail treatment as Bricks. */
.saved-template-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;padding:6px 3px 4px 0}
.saved-template-card{min-width:0;position:relative}
.saved-template-thumb{position:relative;aspect-ratio:2/1;overflow:hidden;border:1px solid #d6dbe3;border-radius:6px;background:white;box-sizing:border-box}
.saved-template-capture{position:absolute;left:0;top:0;width:600px;transform-origin:top left;pointer-events:none}
.saved-template-name{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.saved-template-delete{position:absolute;top:3px;right:3px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #cbd2dc;border-radius:4px;background:rgba(255,255,255,.95);color:#667085;cursor:pointer;z-index:5}
.saved-template-capture{border:0;height:1200px;display:block;pointer-events:none}
.saved-template-card{cursor:grab}.saved-template-card:active{cursor:grabbing}.saved-template-delete{cursor:pointer}.preview-board.saved-template-drop-target{outline:2px dashed #3787e8;outline-offset:-5px}
.saved-template-drag-ghost{position:fixed;z-index:999999;pointer-events:none;padding:9px 14px;border:1px solid #3787e8;background:white;box-shadow:0 5px 18px #0002;border-radius:6px;font:12px Arial,sans-serif;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-template-list,.saved-template-card{user-select:none;-webkit-user-select:none}
/* Preview layout foundations: keep editing handles and insertion targets, remove
decorative spacing/borders that would otherwise alter the final email width. */
#canvas .column{padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;min-height:0!important}
#canvas .column-head{margin:0!important;padding:3px 0 5px!important;border:0!important;background:transparent!important}
#canvas .item{margin:0!important}
#canvas .item.html-item{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
#canvas .html-item-content{min-height:0!important}
#canvas .row{margin-bottom:0!important}
/* The builder retains visible between-item/row/section insertion spaces. */
#canvas .drop-line{margin:5px 0!important}
/* v11: editor-only headings and empty-column surfaces. */
#canvas .row-head{background:#ffffff!important}
#canvas .column-head{background:#f1f3f6!important;padding:4px 6px!important;margin:0!important;border:0!important}
#canvas .column:has(> .column-head:last-child){background:#f1f3f6!important;min-height:90px!important}
/* v12: restore a persistent editor insertion gap between rows without
introducing padding or margins into the email content itself. */
#canvas .builder-section .section-rows > .row + .row {
margin-top:24px!important;
}
/* Empty-column prompt: editor-only, removed as soon as the column has items. */
#canvas .column:has(> .column-empty-drop){background:#f1f3f6!important;min-height:90px!important}
#canvas .column-empty-drop{display:flex;align-items:center;justify-content:center;min-height:72px;margin:0;padding:12px 6px;color:#667085;font:12px Arial,sans-serif;text-align:center;background:#f1f3f6;border:1px dashed #aeb7c4;border-top:0;pointer-events:none}
/* v14: keep the entire empty-column drop target visible. */
#canvas .column:has(> .column-empty-drop){box-sizing:border-box!important;padding:8px!important}
#canvas .column-empty-drop{box-sizing:border-box!important;width:100%!important;margin:0!important;border:1px dashed #aeb7c4!important;border-radius:4px!important;min-height:72px!important}
/* v15: derive the empty state from the actual DOM, including after moving items.
A pseudo-element cannot retain a stale placeholder when drag code mutates columns. */
#canvas .column:not(:has(> .item)){
background:#f1f3f6!important;
min-height:90px!important;
box-sizing:border-box!important;
padding:8px!important;
}
#canvas .column:not(:has(> .item))::after{
content:"Drop item here";
display:flex;align-items:center;justify-content:center;
box-sizing:border-box;min-height:72px;width:100%;
border:1px dashed #aeb7c4;border-radius:4px;
color:#667085;font:12px Arial,sans-serif;text-align:center;
background:#f1f3f6;pointer-events:none;
}
/* v16: use the actual rendered item array for the empty prompt.
This also works when an item is moved out of an existing column. */
#canvas .column:not(:has(> .item))::after{content:none!important;display:none!important}
#canvas .column:has(> .column-empty-drop){background:#f1f3f6!important;min-height:90px!important;padding:8px!important}
#canvas .column-empty-drop{display:flex!important;border:1px dashed #aeb7c4!important;border-radius:4px!important;min-height:72px!important;width:100%!important;margin:0!important;box-sizing:border-box!important}
/* v17: inset only the empty prompt; leave the column heading flush. */
#canvas .column:has(> .column-empty-drop),
#canvas .column:not(:has(> .item)) {
padding:0!important;
}
#canvas .column > .column-empty-drop {
width:calc(100% - 16px)!important;
margin:8px!important;
}
/* v19: section toolbar sits above the upper-right edge and appears only
when the section itself or one of its descendants is selected. */
#canvas .builder-section .section-actions {
top: -28px;
right: 0;
display: none;
z-index: 12;
}
#canvas .builder-section.selected-section > .section-actions,
#canvas .builder-section:has(.selected-row, .selected-item) > .section-actions {
display: flex;
}
/* v22: editor-only row heading, flush against the column heading. */
#canvas .row-head {
background:#f8f9fb!important; /* lighter than column heading #f1f3f6 */
padding:4px 6px!important;
margin:0!important;
border:0!important;
}
#canvas .row > .columns { margin-top:0!important; padding-top:0!important; }
/* v23: white tabs strip; compact resting gap between rows.
During dragging the existing insertion marker supplies its own drop area. */
.template-tabs { background:#fff!important; }
#canvas .builder-section .section-rows > .row + .row { margin-top:12px!important; }
/* v25: view-only preview; builder data and responsive rules are untouched. */
body.email-preview-mode #canvas .section-head,
body.email-preview-mode #canvas .section-actions,
body.email-preview-mode #canvas .row-head,
body.email-preview-mode #canvas .row-actions,
body.email-preview-mode #canvas .column-head,
body.email-preview-mode #canvas .item-actions,
body.email-preview-mode #canvas .comment-indicator,
body.email-preview-mode #canvas .comment-open,
body.email-preview-mode #canvas .section-empty-drop,
body.email-preview-mode #canvas .column-empty-drop,
body.email-preview-mode #canvas .drop-line,
body.email-preview-mode #canvas .row-drop,
body.email-preview-mode #canvas .new-row-drop,
body.email-preview-mode #canvas .section-drop {display:none!important}
body.email-preview-mode #canvas .builder-section,
body.email-preview-mode #canvas .builder-section.selected-section {outline:none!important;outline-offset:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;min-height:0!important}
body.email-preview-mode #canvas .row,
body.email-preview-mode #canvas .row.selected-row {outline:none!important;box-shadow:none!important;margin-top:0!important;margin-bottom:0!important;min-height:0!important}
body.email-preview-mode #canvas .builder-section .section-rows > .row + .row {margin-top:0!important}
body.email-preview-mode #canvas .column,
body.email-preview-mode #canvas .column:not(:has(> .item)),
body.email-preview-mode #canvas .column:has(> .column-empty-drop){outline:none!important;box-shadow:none!important;min-height:0!important;background:transparent!important;padding:0!important}
body.email-preview-mode #canvas .column::after {content:none!important;display:none!important}
body.email-preview-mode #canvas .item,
body.email-preview-mode #canvas .item.selected,
body.email-preview-mode #canvas .item.selected-item {outline:none!important;box-shadow:none!important;cursor:default!important}
body.email-preview-mode #canvas [contenteditable] {caret-color:transparent}
body.email-preview-mode .preview-nav-left {opacity:.5;pointer-events:none}
body.email-preview-mode #preview-mode-toggle {background:#e9f1ff;border-color:#4284dc}
#preview-dark-icon {display:none;position:absolute;right:12px;top:10px;z-index:8;width:30px;height:30px;border:1px solid #cbd2dc;border-radius:6px;background:white;color:#475569;opacity:.7;align-items:center;justify-content:center}
#preview-dark-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.email-preview-mode #preview-dark-icon{display:flex}
.preview-board{position:relative}
/* Preview: builder items and Bricks are unavailable; saved templates stay active. */
body.email-preview-mode #left-panel .builder-items,
body.email-preview-mode #left-panel #brick-library-list {opacity:.5}
body.email-preview-mode #left-panel .palette-item,
body.email-preview-mode #left-panel .palette-item *,
body.email-preview-mode #left-panel .brick-card,
body.email-preview-mode #left-panel .brick-card * {cursor:not-allowed!important}
/* v29: Preview-only disabled styling and inactive tabs. */
body.email-preview-mode .preview-nav-left { opacity:.25; }
body.email-preview-mode #left-panel .builder-items,
body.email-preview-mode #left-panel #brick-library-list { opacity:.25; }
.template-tab:not(.active) { background:#fff; color:#8a929f; }
.template-tab:not(.active):not(.tab-unsaved) .template-tab-name { color:#8a929f; }
/* v30: dark-mode visual simulation is restricted to Preview and never alters email styles.
Re-invert image assets to preserve their original colors. */
/* Template background is converted from its chosen color by preview.js. */
/* Apply dark colors to email layout/text rather than inverting rendered pixels.
Pixel inversion changes emoji colors and the backgrounds baked into images. */
body.email-preview-mode.email-preview-dark #canvas {filter:none!important;color:#f0f0f0;}
/* Preserve actual section, row, and column backgrounds. Transparent layers must
reveal the exact same underlying template color, without an opaque strip. */
body.email-preview-mode.email-preview-dark #canvas .item:not([data-dark-has-image]):not(:has(img,svg,video,picture,canvas)),
body.email-preview-mode.email-preview-dark #canvas .item:not([data-dark-has-image]) :is(p,span,a,h1,h2,h3,h4,h5,h6,div):not(:has(img,svg,video,picture,canvas)) {color:#f0f0f0!important;}
/* Image elements, their backgrounds and native color emoji are never filtered. */
body.email-preview-mode.email-preview-dark #canvas :is(img,picture,video,svg,canvas) {filter:none!important;}
body.email-preview-mode.email-preview-dark #preview-dark-icon {background:#34425a;color:#fff;border-color:#7297cc;opacity:1;}
body.email-preview-mode #preview-dark-icon {cursor:pointer;}
/* v36: anchor the dark-preview button to the sticky action navigation. */
.preview-nav-right{position:relative}
#preview-dark-icon{right:0;top:calc(100% + 18px);z-index:65}
/* v41: UL/OL use Vertical Gap only; Icon retains Gap + Vertical Align. */
#text-accessory-gap-wrap[hidden],
#text-accessory-valign-wrap[hidden]{display:none!important}
/* v43: Text Brick overwrite-content control is hidden for non-Text Bricks. */
#brick-overwrite-text-content-wrap[hidden]{display:none!important}
/* Export modal shell — v44 */
.export-modal-card{width:min(570px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;min-height:0}
.export-template-label{font-size:12px;color:#667085;margin-bottom:5px}
.export-template-name{font-size:16px;font-weight:600;overflow-wrap:anywhere;margin-bottom:18px}
.export-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}
.export-actions button{border:1px solid #d0d5dd;border-radius:7px;background:#f8fafc;padding:12px 6px;font:inherit;font-size:13px;font-weight:600}
.export-actions button:disabled{opacity:.55;cursor:not-allowed}
.export-issues,.export-guidance{border-top:1px solid #e4e7ec;padding:13px 0 0;margin-top:13px}
.export-pending{font-size:12px;line-height:1.5;color:#667085;margin:0 0 5px}
/* v45 export source inspection */
.export-source-viewer{margin-top:14px;border-top:1px solid #ddd;padding-top:12px}
.export-source-viewer[hidden]{display:none!important}
.export-source-header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;margin-bottom:8px}
.export-source-header button{cursor:pointer}
.export-source-viewer textarea{box-sizing:border-box;width:100%;height:310px;resize:vertical;font:12px/1.5 monospace;white-space:pre;tab-size:2;padding:10px}
/* Email checks accordion */
.email-checks-heading{font-weight:700;margin:0 0 10px}.check-section{border:1px solid #e4e7ec;border-radius:7px;margin:7px 0;overflow:hidden}.check-section>summary{cursor:pointer;padding:11px 12px;font-weight:600;display:flex;justify-content:space-between;align-items:center;list-style:none}.check-section>summary::-webkit-details-marker{display:none}.check-section>summary:before{content:'▸';margin-right:8px;color:#667085}.check-section[open]>summary:before{content:'▾'}.check-section>summary span:first-of-type{flex:1}.check-count{font-size:12px;color:#667085;font-weight:400}.check-entries{border-top:1px solid #e4e7ec;padding:5px 10px}.check-entry{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;text-align:left;padding:9px 4px;border-bottom:1px solid #f0f1f4;font:inherit;color:inherit}.check-entry:last-child{border-bottom:0}.check-entry[data-action]{cursor:pointer}.check-entry[data-action]:hover{background:#f4f7ff}.check-entry .check-icon{font-weight:bold;color:#b45309}.check-entry.error .check-icon{color:#b42318}.check-entry .check-description{flex:1}.check-entry small{display:block;color:#667085;font-size:12px;margin-top:2px}.check-entry .check-arrow{color:#667085}.check-clear{color:#667085;padding:9px 4px;font-size:13px}
/* Export HTML size meter — v63 */
.email-size-meter{position:fixed;z-index:34;width:30px;box-sizing:border-box;background:#fff;border-left:1px solid #d8dde5;pointer-events:none;font-family:Arial,Helvetica,sans-serif;}
.email-size-meter-track{position:relative;width:100%;height:100%;background:#fff;overflow:hidden;}
.email-size-meter-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:#3cb96a;transition:height .22s ease,background-color .22s ease;}
.email-size-meter-label{position:absolute;left:0;right:0;bottom:0;display:block;text-align:center;white-space:nowrap;font:10px/12px Arial,Helvetica,sans-serif;color:#111;transform:translateY(-2px);transition:bottom .22s ease;}
.preview-bottom-toolbar{padding-right:38px!important;box-sizing:border-box;}
/* v64: Reserve a dedicated gutter for the meter; do not overlay the preview. */
.preview-board{padding-right:30px!important;}
/* v65 Test Send */
.test-send-card{width:min(960px,94vw);max-width:960px;max-height:90vh;overflow:auto;box-sizing:border-box}.test-send-card h3{font-size:14px;margin:18px 0 8px}.ts-label{display:flex;justify-content:space-between;font-weight:600;font-size:13px;margin:16px 0 7px}.ts-label span{font-weight:400;color:#667085}.ts-sendto{min-height:74px;padding:9px;border:1px solid #cdd4de;border-radius:7px;background:#fff;box-sizing:border-box}.ts-tags{display:flex;gap:6px;flex-wrap:wrap}.ts-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 7px;background:#edf2fb;border:1px solid #cddbf4;border-radius:5px;font-size:12px;max-width:100%;overflow-wrap:anywhere}.ts-tag button{border:0;background:none;cursor:pointer;font-size:16px;padding:0 2px;color:#445}.ts-sendto input{width:100%;border:0;outline:none;padding:9px 2px 3px;font-size:12px;box-sizing:border-box}.ts-notice{min-height:18px;color:#b42318;font-size:12px;margin-top:5px}.ts-add-form{display:grid;grid-template-columns:1fr 1.7fr auto;gap:8px}.ts-add-form input,.ts-group-row input,.ts-inline{min-width:0;padding:8px;border:1px solid #cdd4de;border-radius:5px;font:inherit}.ts-add-form button,.ts-panel-head button,.ts-group-row button{padding:7px 12px;cursor:pointer;border:1px solid #cdd4de;border-radius:5px;background:#fff}.ts-lists{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;margin-top:18px}.ts-panel{border:1px solid #d5dbe4;border-radius:7px;overflow:hidden;min-width:0}.ts-panel-head{height:40px;box-sizing:border-box;background:#f4f6fa;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid #d5dbe4;font-size:13px}.ts-panel-head button{font-size:12px;padding:4px 9px}.ts-columns{display:grid;grid-template-columns:minmax(80px,1fr) minmax(120px,1.5fr) 64px;background:#f8f9fb;border-bottom:1px solid #d5dbe4}.ts-columns button{border:0;background:transparent;text-align:left;padding:8px;font-size:12px;cursor:pointer;font-weight:600}.ts-scroll{height:270px;overflow-y:auto;overflow-x:hidden}.ts-rec-row{display:grid;grid-template-columns:minmax(80px,1fr) minmax(120px,1.5fr) 64px;align-items:center;border-bottom:1px solid #edf0f3;min-height:35px;font-size:12px;cursor:grab}.ts-rec-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;cursor:text}.ts-rec-row button,.ts-group-row>button[data-delete-group]{border:0;background:transparent;cursor:pointer;font-size:12px}.ts-selected{background:#dceaff!important}.ts-group-row{display:grid;grid-template-columns:minmax(0,1fr) 30px 25px;align-items:center;min-height:35px;border-bottom:1px solid #edf0f3;font-size:12px;cursor:grab;padding:0 7px;gap:5px}.ts-group-row .ts-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 3px;cursor:text}.ts-group-row>span:nth-child(2){text-align:center}.ts-group-row input{padding:5px;width:100%}.ts-group-row:has(input){grid-template-columns:minmax(0,1fr) auto auto}.ts-group-row:has(input) button{padding:5px}.ts-empty{font-size:12px;color:#667085;padding:10px}.ts-inline{width:100%;box-sizing:border-box;font-size:12px}.ts-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:18px;border-top:1px solid #e3e6eb;padding-top:15px;font-size:12px;color:#667085}.ts-footer button{padding:9px 17px;opacity:.55;cursor:not-allowed}@media(max-width:690px){.ts-lists{grid-template-columns:1fr}.ts-add-form{grid-template-columns:1fr 1fr}.ts-add-form button{grid-column:1/-1}}
/* v66: allow dragging saved recipient/group text without selecting it. */
.ts-rec-row > span, .ts-group-row .ts-name{cursor:grab;user-select:none;-webkit-user-select:none}
.ts-rec-row:active > span, .ts-group-row:active .ts-name{cursor:grabbing}
.ts-rec-row .ts-inline, .ts-group-row .ts-inline{cursor:text;user-select:text;-webkit-user-select:text}
/* v67: Groups left, saved recipients right */
.ts-lists{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.ts-footer #ts-send-button{opacity:1;cursor:pointer;background:#2563eb;color:#fff;border:0;border-radius:5px}
.ts-footer #ts-send-button:disabled{opacity:.55;cursor:wait}
@media(max-width:690px){.ts-lists{grid-template-columns:1fr}}
/* v72: compact palette grouping, section-level content zone */
.builder-items{flex-wrap:nowrap;gap:4px;align-items:stretch}
.builder-items .palette-item{flex:1 1 0;min-width:0;padding:8px 2px;font-size:11px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:3px}
.builder-items .content-zone-palette-item{border-right:2px solid #8d9aac;margin-right:5px!important}
.builder-items .section-palette-item{flex:1.1 1 0}
.builder-items .content-zone-palette-item span{font-size:10px}
.builder-section.content-zone{background:#e4f3ff!important;border:1px solid #9ec8ed;min-height:145px}
.builder-section.content-zone .section-head{color:#355f81}
.builder-section.content-zone .section-rows{min-height:95px;display:flex;align-items:center;justify-content:center;color:#41769d;font-size:14px;font-weight:500}
/* Content Zone toolbar follows normal selected-section visibility rules. */
#canvas .builder-section.content-zone.selected-section > .section-actions{display:flex}
/* v78: equal-height left-panel regions; preserve independent scroll areas. */
#palette-view>.palette-top-third{flex:0 0 25%;box-sizing:border-box;padding:8px 12px;gap:5px;overflow:auto}
#palette-view>.palette-top-third .builder-logo{font-size:15px;min-height:17px}
#palette-view>.palette-top-third .builder-items .palette-item{padding:5px 2px}
#palette-view>#brick-library,#palette-view>#template-library-placeholder,#palette-view>#message-library{flex:0 0 25%;min-height:0;box-sizing:border-box;overflow:auto;padding:12px 16px;border-bottom:1px solid #d9dee7}
#message-library{background:#fff}
.saved-message-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.message-library-card{position:relative;min-width:0;border:1px solid #d7dce6;border-radius:7px;background:white;padding:6px;cursor:grab}
.message-library-thumb{height:95px;overflow:hidden;background:#f2f4f8;display:flex;align-items:center;justify-content:center;color:#8391a3;font-size:22px}
.message-library-name{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}
.message-new-dialog{width:min(490px,calc(100vw - 40px));max-height:80vh;overflow:auto}
.message-new-types{display:flex;gap:8px;margin:12px 0}
.message-new-types label{flex:1;cursor:pointer;border:1px solid #ccd3dd;border-radius:7px;padding:10px}
.message-new-types label:has(input:checked){border-color:#3975d9;background:#edf5ff}
.message-new-templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:250px;overflow:auto}
.message-new-template{border:1px solid #ccd3dd;background:#fff;border-radius:6px;padding:8px;cursor:pointer;text-align:left;min-width:0}
.message-new-template[aria-pressed=true]{border:2px solid #3975d9;background:#edf5ff}
.message-new-template span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-new-template .message-new-mini{height:55px;background:#f2f4f8;margin-bottom:5px;display:flex;align-items:center;justify-content:center}
.message-new-error{color:#c03030;font-size:12px}
/* v79: Document-specific, single-row navigation and inherited-section presentation. */
.document-tab-icon{font-size:13px;color:#68778c;margin-right:5px;flex:none}
.preview-header-main{min-width:0}
body.document-template .preview-header-main,body.document-message .preview-header-main{display:flex;flex-direction:row;align-items:center;gap:10px;padding:6px 12px}
body.document-template .preview-header .preview-nav,body.document-message .preview-header .preview-nav{display:contents!important}
body.document-template .preview-nav-center,body.document-message .preview-nav-center{order:0;justify-content:flex-start;flex:none;overflow:visible}
body.document-template .preview-nav-left{order:1;flex:1;justify-content:center}
body.document-message .preview-nav-left{display:none}
body.document-template .message-fields{display:none}
body.document-message .message-fields{order:1;flex:1;display:flex;padding:0;min-width:0;gap:8px}
body.document-message .message-field{flex:1;min-width:0}
body.document-template .preview-nav-right,body.document-message .preview-nav-right{order:2;margin-left:auto;flex:none}
body.document-message .preview-nav-right{order:2}
body.document-message .message-input-wrap input{height:32px}
.message-template-association{padding:8px 16px;background:#f2f6fc;border-bottom:1px solid #d9dee7;color:#53667c;font-size:12px;display:flex;align-items:center;gap:7px}
.message-template-association[hidden]{display:none!important}
body.linked-message #canvas>.builder-section:not(.content-zone){cursor:default}
body.linked-message #canvas>.builder-section:not(.content-zone) .section-head,body.linked-message #canvas>.builder-section:not(.content-zone) .row-head,body.linked-message #canvas>.builder-section:not(.content-zone) .column-head,body.linked-message #canvas>.builder-section:not(.content-zone) .section-actions,body.linked-message #canvas>.builder-section:not(.content-zone) .row-actions,body.linked-message #canvas>.builder-section:not(.content-zone) .item-actions,body.linked-message #canvas>.builder-section:not(.content-zone) .item-move-handle{display:none!important}
body.linked-message #canvas>.builder-section:not(.content-zone) .item [contenteditable]{pointer-events:none!important}
body.linked-message #canvas>.builder-section:not(.content-zone) .item,body.linked-message #canvas>.builder-section:not(.content-zone) .row{cursor:default!important}
body.linked-message #canvas>.builder-section.content-zone .section-head,body.linked-message #canvas>.builder-section.content-zone .section-actions{display:none!important}
@media(max-width:1120px){body.document-message .message-field>span:first-child{display:none}body.document-template .preview-header-main,body.document-message .preview-header-main{gap:4px;padding:6px}body.document-message .message-fields{gap:4px}}
/* v82: populated Message zones render like normal editable message content. */
body.linked-message #canvas>.builder-section.content-zone.content-zone-populated{background:transparent!important;border:0!important;min-height:0!important}
body.linked-message #canvas>.builder-section.content-zone.content-zone-populated>.section-rows{min-height:0!important;display:block!important;color:inherit;font-size:inherit;font-weight:inherit}
body.linked-message #canvas>.builder-section.content-zone.content-zone-populated>.section-rows>.row{width:100%}
body.linked-message #canvas>.builder-section.content-zone .section-head,body.linked-message #canvas>.builder-section.content-zone .section-actions{display:none!important}
/* v89: a linked Message Content Zone is a fixed host for regular Sections. */
body.linked-message #canvas > .builder-section.content-zone.content-zone-populated {
background:transparent!important;border:0!important;min-height:0!important;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows {
display:block!important;width:100%;box-sizing:border-box;
color:inherit;font-size:inherit;font-weight:inherit;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section {
width:100%;box-sizing:border-box;
}
body.linked-message #canvas > .builder-section.content-zone .message-zone-empty {
display:flex;align-items:center;justify-content:center;min-height:95px;
color:#41769d;font-size:14px;font-weight:500;
}
body.linked-message #canvas > .builder-section.content-zone .message-zone-section-drop {
min-height:8px;border-top:2px solid #2578cf;
}
body.linked-message #canvas > .builder-section.content-zone .message-zone-first-drop {
min-height:50px;border:2px dashed #2578cf;
}
/* v90: linked Message zones are layout-only hosts; their child Sections
retain the exact same editing chrome and spacing as ordinary Sections. */
body.document-message .content-zone-palette-item{display:none!important}
body.linked-message #canvas > .builder-section.content-zone{
padding:0!important;margin:0!important;
}
body.linked-message #canvas > .builder-section.content-zone:not(.content-zone-populated){
padding:16px!important;margin-bottom:24px!important;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows{
padding:0!important;margin:0!important;min-height:0!important;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section:last-child{
margin-bottom:0!important;
}
/* Hide only the fixed zone's own chrome, never the nested Sections'. */
body.linked-message #canvas > .builder-section.content-zone > .section-head,
body.linked-message #canvas > .builder-section.content-zone > .section-actions{display:none!important}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-head{
display:block!important;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section.selected-section > .section-actions,
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section:has(.selected-row,.selected-item) > .section-actions{
display:flex!important;
}
/* v91: Message Content Zones are layout hosts only. Their nested Sections
must use the same flow, spacing, headers and drop widths as root Sections. */
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section {
position:relative!important;
display:block!important;
padding:30px 16px 16px!important;
margin:0 0 24px!important;
min-height:86px!important;
width:100%!important;
box-sizing:border-box!important;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-head {
position:absolute!important;top:5px!important;left:16px!important;
display:flex!important;align-items:center!important;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-actions {
position:absolute!important;top:5px!important;right:16px!important;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-rows {
display:block!important;width:100%!important;min-height:0!important;
margin:0!important;padding:0!important;
color:inherit!important;font-size:inherit!important;font-weight:inherit!important;
text-align:initial!important;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-rows > .row,
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-rows > .new-row-drop,
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-rows > .row-drop {
width:min(var(--row-preview-width,600px),calc(100% - 32px))!important;
max-width:calc(100% - 32px)!important;
margin-left:auto!important;margin-right:auto!important;
}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .message-zone-section-drop {
width:min(var(--row-preview-width,600px),calc(100% - 32px));
margin-left:auto!important;margin-right:auto!important;
}
body.email-preview-mode.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section {
padding-top:0!important;padding-bottom:0!important;margin-bottom:0!important;min-height:0!important;
}
body.email-preview-mode.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-head,
body.email-preview-mode.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-actions {display:none!important}
/* v92: use the normal outside toolbar position for nested Message Sections. */
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-actions {
top:-28px!important;right:0!important;z-index:24!important;
}
/* Keep the toolbar visible above its Section instead of clipping it at the zone. */
body.linked-message #canvas > .builder-section.content-zone > .section-rows {overflow:visible!important;}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section {overflow:visible!important;}
/* v93: Sections sit flush at rest; the insertion target opens only while dragging. */
body:not(.email-preview-mode) #canvas > .builder-section,
body:not(.email-preview-mode) #canvas > .builder-section.content-zone > .section-rows > .builder-section {
margin-bottom:0!important;
}
body.linked-message:not(.email-preview-mode) #canvas > .builder-section.content-zone:not(.content-zone-populated){
margin-bottom:0!important;
}
body.linked-message:not(.email-preview-mode) #canvas > .builder-section.content-zone > .section-rows {
margin-bottom:0!important;
}
/* Existing drag markers already appear only during a section drag. Make them
provide a temporary insertion slot with a centered, thin blue line. */
body:not(.email-preview-mode) #canvas .section-drop,
body:not(.email-preview-mode) #canvas .message-zone-section-drop {
position:relative;
height:28px!important;
min-height:28px!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
margin-top:0!important;
margin-bottom:0!important;
box-sizing:border-box!important;
}
body:not(.email-preview-mode) #canvas .section-drop::after,
body:not(.email-preview-mode) #canvas .message-zone-section-drop::after {
content:"";
position:absolute;
left:0;right:0;top:13px;
height:2px;
border-radius:2px;
background:#3478f6;
pointer-events:none;
}
/* v96: populated Message Sections should not show artificial builder-only bottom padding.
Empty Sections retain their drop target space. User-configured Section settings
are applied to their content separately and must remain unchanged. */
body.linked-message:not(.email-preview-mode) #canvas > .builder-section.content-zone > .section-rows > .builder-section:has(.row) {
padding-bottom:0!important;
}
/* v98: populated builder Sections must not introduce extra vertical space
that is absent from exported HTML. Empty Sections retain their drop space. */
#canvas .builder-section:not(.content-zone):has(.item) {
padding-bottom:0!important;
}
/* Inherited Template Sections inside linked Messages are display-only.
Their editing chrome is suppressed, so the builder's 30px header inset
must not create an artificial gap above the rendered content. */
body.linked-message #canvas > .builder-section:not(.content-zone) {
padding-top:0!important;
padding-bottom:0!important;
}
/* v99: only empty Sections need a builder drop-target minimum height. */
#canvas .builder-section:not(.content-zone):has(.item),
body.linked-message #canvas > .builder-section:not(.content-zone) {
min-height:0!important;
}
.zone-usage-warning{color:#cf2438;font-size:16px;display:inline-flex;align-items:center;margin-left:5px;cursor:help}
.zone-protection-modal:not([hidden]){position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px}
.zone-protection-dialog{background:#fff;color:#222;border-radius:10px;max-width:480px;width:100%;padding:24px;box-shadow:0 12px 50px #0004}
.zone-protection-dialog h3{margin:0 0 12px;font-size:18px}
.zone-protection-dialog ul{max-height:240px;overflow:auto;margin:12px 0 20px;padding-left:24px}
.zone-protection-dialog button{cursor:pointer;padding:8px 18px}
/* v101: protected zone warning replaces the delete action. */
.zone-usage-warning{background:transparent;border:0;padding:0 3px;font:inherit;cursor:pointer}
.section-action[hidden]{display:none!important}
/* v102: board vertical spacing; preserve horizontal padding */
.preview-board{padding-top:0!important;padding-bottom:40px!important}
/* v104: preview height follows actual content, not viewport or demo canvas. */
.preview-board{min-height:0!important;height:auto!important;}
.preview-board .canvas, .preview-board #canvas, #canvas.canvas{min-height:0!important;height:auto!important;}
/* v105: keep the right editor viewport at full height while its contents scroll.
The board fills unused vertical space without forcing the canvas/email tall. */
.canvas-scroll{height:100vh!important;min-height:0!important;overflow-y:auto!important;overflow-x:auto!important;}
.preview-board{flex:1 0 auto!important;min-height:0!important;height:auto!important;padding-top:40px!important;padding-bottom:40px!important;}
.preview-board .canvas,.preview-board #canvas,#canvas.canvas{height:auto!important;min-height:0!important;}
/* History is anchored to the visible viewport, not the document's height. */
.preview-bottom-toolbar{position:fixed!important;right:14px;bottom:14px;left:auto;z-index:35;margin:0!important;padding-right:38px!important;width:auto;}
/* v106: Message subject and preheader live in Export, not the navigation. */
body.document-message .preview-nav-left{display:flex!important;order:1;flex:1;justify-content:center;gap:10px}
body.document-message .preview-nav-right{order:2}
.export-message-details{margin:12px 0 18px;border-bottom:1px solid #e1e6ed;padding-bottom:14px}
.export-message-details[hidden]{display:none!important}
.export-message-details h3{font-size:14px;margin:0 0 12px}
.export-message-details .message-fields{display:flex!important;padding:0;gap:12px;flex-wrap:wrap}
.export-message-details .message-field{flex:1 1 220px;display:flex;flex-direction:column;gap:5px}
.export-message-details .message-input-wrap{display:flex;min-width:0}
.export-message-details .message-input-wrap input{flex:1;min-width:0}
.document-settings-locked{opacity:.45;cursor:not-allowed}
.document-settings-locked>*{pointer-events:none}
/* v108: one active options level and a persistent breadcrumb. */
#options-view .options-breadcrumb{position:sticky;top:-20px;z-index:15;display:flex;align-items:center;gap:8px;min-height:40px;padding:10px 32px 10px 0;margin:-4px 0 14px;background:#fff;border-bottom:1px solid #d7dce3;font-size:12px;}
#options-view .options-breadcrumb[hidden]{display:none!important}
.options-breadcrumb button{border:0;background:none;padding:3px 0;color:#2563eb;font:inherit;cursor:pointer}
.options-breadcrumb button:hover{text-decoration:underline}
.options-breadcrumb strong{font-weight:700;color:#1f2937}
.breadcrumb-separator{color:#9ca3af}
#options-view .options-columns[hidden]{display:none!important}
#options-view .options-columns{grid-template-columns:minmax(0,1fr)}
#options-view .item-options-column{max-height:none!important;overflow:visible!important}
/* v124 AI workspace shell */
#ai-workspace[hidden]{display:none!important}
body.ai-workspace-open #palette-view,body.ai-workspace-open #options-view{display:none!important}
body.ai-workspace-open #ai-workspace{display:flex!important}
#ai-workspace{height:100%;min-height:0;flex-direction:column;background:var(--panel-bg,#fff);color:inherit}
.ai-workspace-header{display:flex;align-items:center;justify-content:space-between;padding:17px 15px;border-bottom:1px solid #ddd}
.ai-workspace-title{font-weight:700;font-size:15px}
#ai-close{border:0;background:transparent;font-size:24px;cursor:pointer;line-height:1}
.ai-conversation{flex:1;overflow-y:auto;padding:16px 14px;min-height:0}
.ai-welcome{font-weight:600;font-size:14px;margin-bottom:14px}
.ai-quick-actions{display:grid;gap:9px}
.ai-quick-actions button{display:block;width:100%;text-align:left;background:#fff;border:1px solid #d9dde5;border-radius:7px;padding:12px;cursor:pointer;font-weight:600;font-size:13px;color:#222}
.ai-quick-actions button:hover{border-color:#407bf5;background:#f7faff}
.ai-quick-actions button span{display:block;font-size:11px;font-weight:400;color:#666;margin-top:4px}
.ai-chat-form{border-top:1px solid #ddd;padding:12px 14px 16px;display:flex;flex-direction:column;gap:8px}
.ai-chat-form label{font-size:12px;font-weight:600}
#ai-chat-input{box-sizing:border-box;width:100%;resize:vertical;min-height:76px;max-height:180px;padding:10px;border:1px solid #c9cdd5;border-radius:7px;font:inherit;font-size:13px}
#ai-chat-send{align-self:flex-end;padding:8px 17px;border:0;border-radius:6px;background:#2169dc;color:white;cursor:pointer}
#ai-chat-notice{font-size:11px;line-height:1.4;color:#777;margin:0}
.ai-draft-message{background:#edf3ff;border-radius:9px;padding:10px 12px;margin:12px 0 0 20px;font-size:13px;overflow-wrap:anywhere}
#ai-open[aria-pressed="true"]{background:#e6efff;color:#2169dc}
/* v126: chat controls and two-sided conversation styling */
.ai-header-actions{display:flex;align-items:center;gap:8px}
#ai-clear{border:1px solid #d9dde5;border-radius:6px;background:#fff;color:#4b5563;padding:5px 9px;font-size:12px;cursor:pointer}
#ai-clear:hover{background:#f3f6fa}
.ai-send-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-send-row span{font-size:10px;color:#777;line-height:1.35}
.ai-chat-message{max-width:92%;width:fit-content;padding:10px 12px;margin-top:12px;border-radius:10px;font-size:13px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}
.ai-chat-user{margin-left:auto;background:#e7f0ff;color:#1c3354;border-bottom-right-radius:3px}
.ai-chat-assistant{margin-right:auto;background:#f2f3f5;color:#333;border-bottom-left-radius:3px}
/* v129: AI and History stay accessible along the left edge of the preview board.
The AI panel and Preview/Dark Mode operate independently. */
.preview-side-actions{position:fixed;top:115px;left:calc(30% + 12px);z-index:65;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.preview-side-actions>*{pointer-events:auto}
.preview-side-actions #ai-open{background:#fff;border:1px solid #cdd4de;border-radius:7px;color:#20242a;cursor:pointer}
.preview-side-actions #ai-open[aria-pressed="true"]{background:#e6efff;color:#2169dc}
.preview-side-actions #undo-history-ui{position:relative!important;margin:0!important;left:auto!important;bottom:auto!important}
.preview-side-actions #undo-history-panel{left:44px!important;right:auto!important;bottom:auto!important;top:0!important}
/* v130: History at the original bottom height, opposite side of the board. */
.preview-side-actions #undo-history-ui{position:fixed!important;left:calc(30% + 12px)!important;bottom:14px!important;top:auto!important;margin:0!important}
.preview-side-actions #undo-history-panel{left:44px!important;right:auto!important;bottom:0!important;top:auto!important}
.ai-proposal{border:1px solid #b8c9e8;background:#f7faff;border-radius:9px;padding:12px;margin:12px 0;font-size:13px}
.ai-proposal button{margin:8px 8px 0 0;padding:7px 12px;border-radius:6px;border:1px solid #9aaac2;background:#fff;cursor:pointer}
.ai-proposal button.ai-apply{background:#2169dc;color:#fff;border-color:#2169dc}
/* v131: Tabs and the menu form a two-tier sticky header in the right scroll pane. */
.canvas-scroll .template-tabs{position:sticky;top:0;z-index:61;flex-shrink:0;min-height:45px;align-items:center;padding-left:12px}
.canvas-scroll .preview-header{position:sticky;top:45px;z-index:60;flex-shrink:0}
.template-tabs #ai-open{display:inline-flex;flex:0 0 33px;width:33px;height:33px;align-self:center;margin-right:8px;background:#fff;border:1px solid #cdd4de;border-radius:7px;cursor:pointer}
.template-tabs #ai-open[aria-pressed="true"]{background:#e6efff;color:#2169dc}
.template-tabs .template-tab-list{margin-left:0}
/* Restore History to the original bottom-right position. */
.preview-side-actions #undo-history-ui{position:fixed!important;left:auto!important;right:14px!important;bottom:14px!important;top:auto!important;margin:0!important}
.preview-side-actions #undo-history-panel{left:auto!important;right:0!important;bottom:44px!important;top:auto!important}
/* Initial standalone Message must not expose the Template-only Content Zone. */
body:not(.document-template) .content-zone-palette-item{display:none!important}
/* v132: active tab visually joins the lower toolbar. */
.canvas-scroll .template-tabs{border-bottom:1px solid #d9dee7!important;overflow:visible!important}
.canvas-scroll .template-tab-list{align-self:stretch;align-items:flex-end;padding-top:5px;overflow:visible}
.canvas-scroll .template-tab{height:34px;box-sizing:border-box}
.canvas-scroll .template-tab.active{top:1px;z-index:2;border-bottom:1px solid #fff!important;border-radius:7px 7px 0 0}
/* Original bottom-right History position, clear of the size meter. */
.preview-side-actions #undo-history-ui{right:5px!important;bottom:14px!important}
/* Dark Mode is revealed immediately beside the eye when Preview is active. */
.preview-nav-right{position:relative}
#preview-dark-icon{position:static!important;display:inline-flex!important;visibility:hidden;opacity:0!important;pointer-events:none;width:30px;height:30px;flex:0 0 30px;order:1;transition:opacity .2s ease,visibility .2s ease}
#preview-mode-toggle{order:0;transition:transform .2s ease}
#test-open{order:2}#export-open{order:3}
body.email-preview-mode #preview-dark-icon{visibility:visible;opacity:1!important;pointer-events:auto}
/* v133: Preview eye covers the dark-mode control until Preview is enabled. */
.preview-nav-right{gap:6px!important}
#preview-dark-icon{position:relative!important;inset:auto!important;order:0!important;display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:none!important;flex:0 0 32px!important;width:32px!important;height:32px!important;z-index:1!important;transition:opacity .2s ease!important}
#preview-mode-toggle{order:1!important;position:relative!important;z-index:2!important;margin-left:-38px!important;transform:translateX(0)!important;transition:margin-left .25s ease,transform .25s ease!important}
body.email-preview-mode #preview-mode-toggle{margin-left:0!important;transform:translateX(0)!important}
body.email-preview-mode #preview-dark-icon{pointer-events:auto!important}
#test-open{order:2!important}#export-open{order:3!important}
/* v134: dark-mode control overlays the Preview slot without consuming toolbar width. */
.preview-nav-right{position:relative!important}
#preview-dark-icon{position:absolute!important;inset:auto!important;left:0!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important;z-index:1!important;pointer-events:none!important}
#preview-mode-toggle{margin-left:0!important;transform:translateX(0)!important;transition:transform .25s ease!important;z-index:2!important}
body.email-preview-mode #preview-mode-toggle{margin-left:0!important;transform:translateX(-38px)!important}
body.email-preview-mode #preview-dark-icon{pointer-events:auto!important}
/* v136: fixed Preview eye; Dark Mode slides out from beneath it without layout shift. */
.preview-nav-right{position:relative!important;}
#preview-mode-toggle{position:relative!important;z-index:3!important;transform:none!important;margin-left:0!important;transition:none!important;}
body.email-preview-mode #preview-mode-toggle{transform:none!important;margin-left:0!important;}
#preview-dark-icon{position:absolute!important;left:auto!important;right:0!important;top:50%!important;inset:auto 0 auto auto!important;transform:translateY(-50%) translateX(0)!important;z-index:2!important;opacity:1!important;visibility:visible!important;pointer-events:none!important;transition:transform .25s ease!important;}
body.email-preview-mode #preview-dark-icon{transform:translateY(-50%) translateX(-38px)!important;pointer-events:auto!important;}
/* v137: dark control anchored to the eye, never the entire toolbar. */
.preview-nav-right .preview-eye-stack{position:relative;display:flex;align-items:center;flex:0 0 auto;isolation:isolate}
.preview-nav-right #preview-mode-toggle{position:relative!important;z-index:3!important;order:unset!important;transform:none!important;margin:0!important;transition:none!important}
.preview-nav-right #preview-dark-icon{position:absolute!important;display:flex!important;inset:auto!important;top:50%!important;left:50%!important;right:auto!important;order:unset!important;margin:0!important;transform:translate(-50%,-50%)!important;transition:transform .25s ease!important;z-index:2!important;opacity:1!important;visibility:visible!important;pointer-events:none!important}
body.email-preview-mode .preview-nav-right #preview-dark-icon{transform:translate(calc(-50% - 39px),-50%)!important;pointer-events:auto!important}
/* v138 account UI: minimal white styling, isolated from builder export. */
#palette-view>.palette-top-third{display:flex;flex-direction:column;justify-content:space-between;gap:0;overflow:visible;background:#fff;padding:10px 12px 8px}
.builder-brand-row{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:0}
.builder-brand-row .builder-logo{font-size:19px;font-weight:750;letter-spacing:-.04em;min-width:0}
.builder-account-actions{display:flex;gap:7px;align-items:center}
.builder-account-actions button{background:#fff;color:#252b36;border:1px solid #d9dfe8;border-radius:7px;padding:8px 12px;cursor:pointer;font-size:12px;font-weight:600}
.builder-account-actions button:hover{background:#f5f7fa}
#palette-view>.palette-top-third .builder-items{flex:0 0 auto;display:flex;align-items:stretch;gap:5px;width:100%}
#palette-view>.palette-top-third .builder-items .palette-item{display:flex;flex-direction:column;gap:3px;justify-content:center;align-items:center;min-width:0;flex:1 1 0;padding:6px 2px;border:1px solid #e0e4eb;border-radius:7px;background:#fff;color:#343a46;font-size:10px;line-height:1.1;cursor:grab;user-select:none}
#palette-view>.palette-top-third .builder-items .palette-item:hover{background:#f5f8ff;border-color:#9db6f0}
.builder-items .item-symbol{font-size:21px;font-weight:600;line-height:24px;pointer-events:none}
.builder-items .item-label{font-size:10px;pointer-events:none}
#palette-view>.palette-top-third .builder-items .content-zone-palette-item{border-right:1px solid #e0e4eb;margin-right:0!important}
.account-overlay[hidden],.account-overlay [hidden]{display:none!important}
.account-overlay{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:20px}
.account-backdrop{position:absolute;inset:0;background:rgba(20,27,40,.42)}
.account-dialog{position:relative;background:#fff;color:#20242a;border:1px solid #e0e4eb;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.18);width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:24px;font-family:inherit}
.account-modal-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:20px}
.account-modal-heading h2{margin:0 0 5px;font-size:22px}.account-modal-heading p{margin:0;color:#737d8d;font-size:13px}
.account-x{border:0;background:#f4f5f7;border-radius:7px;font-size:23px;width:34px;height:34px;cursor:pointer}
.account-auth-columns{display:grid;grid-template-columns:1fr 1fr;gap:0}
.account-auth-columns .account-form:first-child{border-right:1px solid #e7e9ee;padding-right:24px}
.account-auth-columns .account-form:last-child{padding-left:24px}
.account-form{display:flex;flex-direction:column;gap:13px;min-width:0}
.account-form h3,.account-section-heading,.account-team-heading h3{font-size:16px;margin:0 0 5px}
.account-form label,.account-profile-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#4b5563}
.account-form input:not([type=checkbox]),.account-form select,.account-profile-grid input{box-sizing:border-box;width:100%;min-width:0;border:1px solid #d6dbe4;border-radius:7px;background:#fff;padding:10px 11px;font-size:13px;color:#20242a}
.account-form .account-terms{display:flex;flex-direction:row;align-items:flex-start;font-weight:400;line-height:1.5}.account-terms input{margin-top:3px}
.account-primary{background:#242b36!important;color:white!important;border:1px solid #242b36!important;border-radius:7px;padding:11px;cursor:pointer;font-weight:650}
.account-link{border:0;background:transparent;text-align:left;padding:0;color:#2563eb;cursor:pointer;font-size:12px}
.account-or{display:flex;align-items:center;gap:10px;color:#8b94a2;font-size:11px}.account-or:before,.account-or:after{content:'';height:1px;background:#e1e5eb;flex:1}
.account-social{padding:10px;background:white;border:1px solid #d6dbe4;border-radius:7px;cursor:pointer;font-weight:600}.google-g{font-weight:800;margin-right:8px;color:#4285f4}
.account-hint{font-size:12px;color:#7b8492;line-height:1.5;margin:0}
#account-notice:not(:empty){font-size:12px;color:#555d6a;background:#f4f6f9;border-radius:7px;padding:10px;margin:18px 0 0}
.account-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.account-inline{display:flex;align-items:center;gap:12px;margin:22px 0;border-bottom:1px solid #e6e9ef;padding-bottom:20px;font-size:13px}
.account-inline strong{margin-right:auto}.account-inline button,.account-team-heading button,.account-footer button,#account-seat-back{background:white;border:1px solid #d6dbe4;border-radius:7px;padding:9px 12px;cursor:pointer}
.account-usage-row{margin:14px 0}.account-usage-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px}.account-usage-track{height:7px;background:#edf0f5;border-radius:9px;overflow:hidden}.account-usage-track>div{height:100%;background:#3c78e8;border-radius:9px}
.account-team-heading{display:flex;align-items:center;justify-content:space-between;margin:24px 0 12px;border-top:1px solid #e6e9ef;padding-top:20px}
.account-footer{display:flex;justify-content:flex-end;margin-top:20px;border-top:1px solid #e6e9ef;padding-top:16px}
#account-dev-switch{position:fixed;bottom:10px;left:10px;z-index:9998;background:#fff;border:1px dashed #9da7b8;border-radius:8px;padding:6px 8px;box-shadow:0 3px 12px #0001;font-size:10px}
#account-dev-switch label{display:flex;align-items:center;gap:6px}#account-dev-switch select{font-size:11px;padding:3px}
@media(max-width:640px){.account-auth-columns,.account-profile-grid{grid-template-columns:1fr}.account-auth-columns .account-form:first-child{border-right:0;border-bottom:1px solid #e7e9ee;padding:0 0 22px}.account-auth-columns .account-form:last-child{padding:22px 0 0}.account-dialog{padding:18px}}
/* v139 shared skin foundation: neutral white, two blues, 8px control corners. */
:root{--skin-white:#fff;--skin-blue:#2563eb;--skin-blue-light:#eaf2ff;--skin-blue-dark:#1746a2;--skin-ink:#202733;--skin-border:#cdd4df;--skin-radius:8px;--modal-small:720px;--modal-large:960px}
.builder-account-actions button,.account-dialog button,.account-dialog input,.account-dialog select,.help-dialog button{border-radius:var(--skin-radius)}
.builder-account-actions button{border-color:var(--skin-border);color:var(--skin-ink)}
.builder-account-actions button:hover,.account-inline button:hover,.account-team-heading button:hover{border-color:var(--skin-blue);background:var(--skin-blue-light);color:var(--skin-blue-dark)}
#palette-view>.palette-top-third .builder-items .palette-item{border:1px solid #202733;border-radius:var(--skin-radius);color:#202733;background:#fff;transition:background .15s,border-color .15s,color .15s}
#palette-view>.palette-top-third .builder-items .palette-item:hover{background:var(--skin-blue-light);border-color:var(--skin-blue)}
#palette-view>.palette-top-third .builder-items .palette-item.active,#palette-view>.palette-top-third .builder-items .palette-item.selected,#palette-view>.palette-top-third .builder-items .palette-item[aria-pressed="true"]{background:var(--skin-blue);border-color:var(--skin-blue);color:#fff}
.account-primary{background:var(--skin-blue)!important;border-color:var(--skin-blue)!important}
.account-primary:hover{background:var(--skin-blue-dark)!important;border-color:var(--skin-blue-dark)!important}
.account-link{color:var(--skin-blue-dark)}
.account-usage-track>div{background:var(--skin-blue)}
.account-dialog,.account-dialog.modal-size-small{width:min(var(--modal-small),100%);border-radius:var(--skin-radius)}
.account-dialog.modal-size-large{width:min(var(--modal-large),100%)}
/* Existing library/export/test dialogs use the large size; confirmations remain compact. */
.test-modal-card.image-library-card,.test-modal-card.url-library-card,.test-modal-card.export-modal-card,.test-modal-card.test-send-card{width:min(var(--modal-large),94vw);max-width:var(--modal-large);border-radius:var(--skin-radius)}
.test-modal-card{border-radius:var(--skin-radius)}
.help-content h3{font-size:14px;margin:18px 0 5px;color:var(--skin-ink)}
.help-content h3:first-child{margin-top:0}
.help-content p{font-size:13px;line-height:1.6;color:#566274;margin:0}
.help-dialog{max-width:100%;box-sizing:border-box}
/* v140: shared modal sizes and control skin */
:root{--skin-control-height:36px;--modal-small-height:560px;--modal-large-height:680px}
/* Account, Help and URL Library are the same fixed size; scroll content inside. */
.account-dialog,.help-dialog,#url-library-modal .test-modal-card{
width:min(720px,calc(100vw - 40px))!important;max-width:720px!important;
height:min(var(--modal-small-height),calc(100dvh - 40px))!important;
min-height:0!important;max-height:calc(100dvh - 40px)!important;
overflow-y:auto!important;overflow-x:hidden!important;border-radius:8px!important;
}
/* Complex operations use the second standard size. */
#image-library-modal .test-modal-card,#custom-font-modal .test-modal-card,
#export-modal .test-modal-card,#test-send-modal .test-modal-card,
.test-modal-card.image-library-card,.test-modal-card.export-modal-card,.test-modal-card.test-send-card{
width:min(960px,calc(100vw - 40px))!important;max-width:960px!important;
height:min(var(--modal-large-height),calc(100dvh - 40px))!important;
min-height:0!important;max-height:calc(100dvh - 40px)!important;
overflow-y:auto!important;overflow-x:hidden!important;border-radius:8px!important;
}
.test-modal-card{border-radius:8px}
/* Match left-panel inputs and options; leave native checkbox/radio/range geometry alone. */
#options-view input:not([type=checkbox]):not([type=radio]):not([type=range]),
#options-view select,#options-view textarea,
#palette-view input:not([type=checkbox]):not([type=radio]):not([type=range]),#palette-view select{
border:1px solid var(--skin-border);border-radius:8px;background:#fff;color:var(--skin-ink);
min-height:var(--skin-control-height);box-sizing:border-box;
}
#options-view input:focus-visible,#options-view select:focus-visible,#options-view textarea:focus-visible,
#palette-view input:focus-visible,#palette-view select:focus-visible{
outline:2px solid var(--skin-blue);outline-offset:1px;
}
#options-view .color-control{align-items:center}
#options-view .color-control .color-swatch,#options-view .color-control .custom-color-swatch,
#options-view .color-control .color-hex{
height:var(--skin-control-height)!important;min-height:var(--skin-control-height)!important;
box-sizing:border-box!important;margin-top:0!important;border-radius:8px!important;
border:1px solid var(--skin-border)!important;
}
#options-view .color-control .color-swatch{width:42px!important}
#options-view .color-control .color-hex{width:100%!important}
#options-view .color-control .color-transparent{
height:var(--skin-control-height)!important;min-height:var(--skin-control-height)!important;
margin:0!important;border-radius:8px!important;
}
/* Unify primary toolbar and left-panel button color states. */
.preview-nav button,.preview-side-actions button,.builder-account-actions button,
#options-view button:not(.color-swatch):not(.custom-color-swatch){border-radius:8px}
.preview-nav button,.preview-side-actions button,.builder-account-actions button{
color:var(--skin-ink);border-color:var(--skin-border);
}
.preview-nav button:hover,.preview-side-actions button:hover,.builder-account-actions button:hover{
border-color:var(--skin-blue);background:var(--skin-blue-light);color:var(--skin-blue-dark);
}
.preview-nav button.active,.preview-nav button[aria-pressed=true],
.preview-side-actions button.active,.preview-side-actions button[aria-pressed=true],
#palette-view .palette-item.active,#palette-view .palette-item.selected,
#palette-view .palette-item[aria-pressed=true]{
background:var(--skin-blue)!important;border-color:var(--skin-blue)!important;color:#fff!important;
}
#options-view .column-picker button.active,#options-view button.active,#options-view button[aria-pressed=true]{
border-color:var(--skin-blue);color:var(--skin-blue-dark);
}
@media(max-width:640px){:root{--modal-small-height:calc(100dvh - 32px);--modal-large-height:calc(100dvh - 32px)}}
/* v141 — header controls and small modal consistency */
.template-tabs{height:45px!important;min-height:45px!important;align-items:flex-end!important}
.template-tabs .template-tab-list{align-self:stretch!important;padding-top:6px!important;align-items:flex-end!important}
.template-tabs .template-tab{height:33px!important;box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!important;align-self:flex-end!important}
.template-tabs #ai-open,.template-tabs .template-tab-actions .preview-nav-button{width:33px!important;height:33px!important;min-height:33px!important;padding:5px!important;box-sizing:border-box!important;border:1px solid var(--skin-border,#cdd4df)!important;border-radius:8px!important;background:#fff!important;color:var(--skin-ink,#202733)!important;transition:background-color .15s,color .15s,border-color .15s}
.template-tabs #ai-open:hover,.template-tabs .template-tab-actions .preview-nav-button:hover{background:var(--skin-blue-light,#eaf2ff)!important;border-color:var(--skin-blue,#2563eb)!important;color:var(--skin-blue-dark,#1746a2)!important}
.template-tabs #ai-open[aria-pressed="true"],.template-tabs #ai-open.active{background:var(--skin-blue-dark,#1746a2)!important;border-color:var(--skin-blue-dark,#1746a2)!important;color:#fff!important}
.template-tabs #ai-open[aria-pressed="true"]:hover,.template-tabs #ai-open.active:hover{background:var(--skin-blue,#2563eb)!important;border-color:var(--skin-blue,#2563eb)!important;color:#fff!important}
.template-tabs .template-tab-actions{height:39px!important;align-items:center!important}
.template-tabs #ai-open{align-self:center!important;margin-bottom:6px!important}
/* New, Save, Brick save, and unsaved confirmation dialogs use the small modal dimensions. */
.test-modal .tab-close-dialog,.tab-close-modal .tab-close-dialog,.test-modal .template-save-dialog,.test-modal .message-new-dialog,#brick-save-modal .brick-save-card{width:min(var(--modal-small,720px),calc(100vw - 40px))!important;max-width:var(--modal-small,720px)!important;height:min(var(--modal-small-height,560px),calc(100dvh - 40px))!important;min-height:0!important;max-height:calc(100dvh - 40px)!important;box-sizing:border-box!important;overflow-y:auto!important;overflow-x:hidden!important;border-radius:8px!important}
.test-modal .tab-close-dialog,.tab-close-modal .tab-close-dialog{padding:24px!important}
@media(max-width:640px){.test-modal .tab-close-dialog,.tab-close-modal .tab-close-dialog,.test-modal .template-save-dialog,.test-modal .message-new-dialog,#brick-save-modal .brick-save-card{height:calc(100dvh - 32px)!important;max-height:calc(100dvh - 32px)!important}}
/* v142: align the TOP edges of AI, tabs, New and Save to the same 6px inset.
Tabs remain taller and extend to the strip's bottom border. */
.canvas-scroll .template-tabs{
height:45px!important;
min-height:45px!important;
padding:6px 12px 0!important;
align-items:flex-start!important;
box-sizing:border-box!important;
}
.canvas-scroll .template-tabs #ai-open{
flex:0 0 33px!important;
height:33px!important;
min-height:33px!important;
margin:0 8px 0 0!important;
align-self:flex-start!important;
}
.canvas-scroll .template-tabs .template-tab-list{
align-self:stretch!important;
height:38px!important;
padding:0!important;
margin:0!important;
align-items:flex-start!important;
box-sizing:border-box!important;
}
.canvas-scroll .template-tabs .template-tab{
height:39px!important;
min-height:39px!important;
padding:0 12px!important;
align-self:flex-start!important;
box-sizing:border-box!important;
}
.canvas-scroll .template-tabs .template-tab-actions{
height:33px!important;
min-height:33px!important;
align-self:flex-start!important;
align-items:flex-start!important;
margin:0!important;
padding:0!important;
}
.canvas-scroll .template-tabs .template-tab-actions .preview-nav-button{
height:33px!important;
min-height:33px!important;
margin:0!important;
}
/* v143: Item palette idle, hover, and drag styling */
#palette-view>.palette-top-third .builder-items .palette-item,
#palette-view>.palette-top-third .builder-items .content-zone-palette-item {
background:#f1f3f6!important;
border:1px solid transparent!important;
border-radius:8px!important;
color:var(--skin-ink,#202733)!important;
transition:background-color .15s,border-color .15s,color .15s!important;
}
#palette-view>.palette-top-third .builder-items .palette-item:hover,
#palette-view>.palette-top-third .builder-items .palette-item:focus-visible,
#palette-view>.palette-top-third .builder-items .palette-item.drag-source,
#palette-view>.palette-top-third .builder-items .palette-item[aria-grabbed="true"] {
background:var(--skin-blue-light,#eaf2ff)!important;
border-color:var(--skin-blue,#2563eb)!important;
color:var(--skin-blue-dark,#1746a2)!important;
}
#palette-view>.palette-top-third .builder-items .palette-item.active,
#palette-view>.palette-top-third .builder-items .palette-item.selected,
#palette-view>.palette-top-third .builder-items .palette-item[aria-pressed="true"] {
background:var(--skin-blue,#2563eb)!important;
border-color:var(--skin-blue,#2563eb)!important;
color:#fff!important;
}
/* v145: retain original Section layout geometry; style headings only.
No added padding, negative margins or forced width on Section content. */
body:not(.email-preview-mode) #canvas .builder-section > .section-head{
background:#fbfcfd!important;
box-sizing:border-box!important;
}
body:not(.email-preview-mode) #canvas .row-head{background:#f5f7f9!important}
body:not(.email-preview-mode) #canvas .column-head{background:#e9edf2!important}
/* v146: actual stacked Section layout, no absolute header and no spacing hacks. */
body:not(.email-preview-mode) #canvas .builder-section:not(.content-zone){
display:flex!important;
flex-direction:column!important;
padding:0!important;
/* Preserve the Section inline background value. */
}
body:not(.email-preview-mode) #canvas .builder-section:not(.content-zone) > .section-head{
position:relative!important;
inset:auto!important;
display:flex!important;
flex:0 0 30px!important;
width:100%!important;
min-height:30px!important;
margin:0!important;
padding:0 12px!important;
box-sizing:border-box!important;
background:#fbfcfd!important;
}
body:not(.email-preview-mode) #canvas .builder-section:not(.content-zone) > .section-rows{
position:relative!important;
flex:1 1 auto!important;
width:100%!important;
min-height:56px;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
background-clip:padding-box;
}
body:not(.email-preview-mode) #canvas .builder-section:not(.content-zone) > .section-actions{
position:absolute!important;
top:-28px!important;
right:0!important;
z-index:24!important;
}
/* v150 compact reusable confirmation, used by reduce columns only */
.builder-confirm-overlay{position:fixed;inset:0;z-index:2147483000;background:rgba(16,24,40,.46);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.builder-confirm-dialog{width:min(420px,100%);max-height:calc(100dvh - 40px);overflow:auto;box-sizing:border-box;background:#fff;border:1px solid #cdd4df;border-radius:8px;box-shadow:0 18px 55px rgba(0,0,0,.18);padding:24px;color:#202733}
.builder-confirm-dialog h2{font-size:18px;font-weight:650;margin:0 0 12px;line-height:1.3}
.builder-confirm-dialog p{font-size:14px;line-height:1.5;margin:0 0 24px}
.builder-confirm-actions{display:flex;justify-content:flex-end;gap:10px}
.builder-confirm-actions button{border-radius:8px;padding:9px 15px;min-height:36px;font:inherit;font-size:13px;cursor:pointer;border:1px solid #cdd4df;background:#fff;color:#202733}
.builder-confirm-actions button:hover{background:#eaf2ff;border-color:#2563eb}
.builder-confirm-actions .builder-confirm-accept{background:#2563eb;border-color:#2563eb;color:#fff}
.builder-confirm-actions .builder-confirm-accept:hover{background:#1746a2;border-color:#1746a2}
.builder-confirm-actions button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
/* v154: selected Section border drawn above the heading and background content.
This overlay is decorative and never intercepts editing or dragging. */
body:not(.email-preview-mode) #canvas .builder-section.selected-section{outline:none!important;position:relative!important;}
body:not(.email-preview-mode) #canvas .builder-section.selected-section::after{
content:"";position:absolute;inset:0;z-index:30;pointer-events:none;
border:2px solid #2563eb;box-sizing:border-box;
}
/* v168: ensure New and Save have a dimmed full-screen overlay. */
.test-modal.template-save-modal,.test-modal.message-new-modal{position:fixed!important;inset:0!important;z-index:20000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:20px!important;box-sizing:border-box!important;background:rgba(15,23,42,.45)!important}
.test-modal.template-save-modal[hidden],.test-modal.message-new-modal[hidden]{display:none!important}
.test-modal.template-save-modal>.template-save-dialog,.test-modal.message-new-modal>.message-new-dialog{position:relative!important;z-index:1!important;background:#fff!important}
/* Immediate hover/selected transitions in the top header. */
.canvas-scroll .template-tabs #ai-open,.canvas-scroll .template-tabs .template-tab-actions .preview-nav-button{transition:none!important;animation:none!important}
/* Use palette Ink for active and primary buttons, not the former primary blue. */
:root{--skin-button-ink:#202733}
.builder-confirm-actions .builder-confirm-accept,.template-save-dialog button[data-save],.message-new-dialog button[data-create],.tab-close-dialog button[data-switch="save"],.test-modal-card button[type="submit"],.account-dialog button[type="submit"]{background:var(--skin-button-ink)!important;border-color:var(--skin-button-ink)!important;color:#fff!important}
.builder-confirm-actions .builder-confirm-accept:hover,.template-save-dialog button[data-save]:hover,.message-new-dialog button[data-create]:hover,.tab-close-dialog button[data-switch="save"]:hover,.test-modal-card button[type="submit"]:hover,.account-dialog button[type="submit"]:hover{background:#343e4d!important;border-color:#343e4d!important;color:#fff!important}
.template-tabs #ai-open[aria-pressed="true"],.template-tabs #ai-open.active,.template-tabs #ai-open[aria-pressed="true"]:hover,.template-tabs #ai-open.active:hover,.template-tabs .template-tab-actions .preview-nav-button.active,.template-tabs .template-tab-actions .preview-nav-button[aria-pressed="true"]{background:var(--skin-button-ink)!important;border-color:var(--skin-button-ink)!important;color:#fff!important}
/* v169: consistent ink selection for UI icon buttons, not canvas outlines. */
:root{--skin-selected-ink:#202733}
.preview-nav button:is(.active,[aria-pressed="true"],[aria-selected="true"]),
.preview-side-actions button:is(.active,[aria-pressed="true"],[aria-selected="true"]),
.builder-account-actions button:is(.active,[aria-pressed="true"]),
#palette-view .palette-item:is(.active,.selected,[aria-pressed="true"]),
#palette-view>.palette-top-third .builder-items .palette-item:is(.active,.selected,[aria-pressed="true"]),
#options-view button:is(.active,.selected,[aria-pressed="true"]):not(.color-swatch):not(.custom-color-swatch),
.template-tabs .template-tab-actions button:is(.active,[aria-pressed="true"]),
.template-tabs #ai-open:is(.active,[aria-pressed="true"]){
background:var(--skin-selected-ink)!important;
border-color:var(--skin-selected-ink)!important;
color:#fff!important;
}
.preview-nav button:is(.active,[aria-pressed="true"]):hover,
.preview-side-actions button:is(.active,[aria-pressed="true"]):hover,
#palette-view .palette-item:is(.active,.selected,[aria-pressed="true"]):hover,
#options-view button:is(.active,.selected,[aria-pressed="true"]):hover:not(.color-swatch):not(.custom-color-swatch){
background:var(--skin-selected-ink)!important;border-color:var(--skin-selected-ink)!important;color:#fff!important;
}
.library-view-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;min-height:30px}
.library-view-header>.brick-library-title{margin:0;flex:1;min-width:0}
.library-view-actions{display:flex;gap:3px;align-items:center;flex-shrink:0}
.library-view-button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid transparent;border-radius:5px;background:transparent;color:#667085;cursor:pointer;transition:none!important}
.library-view-button svg{width:16px;height:16px;display:block}
.library-view-button:hover{background:#eaf2ff;color:#202733}
.library-view-button.active,.library-view-button[aria-pressed="true"]{background:#202733;color:#fff;border-color:#202733}
.library-view-button:focus-visible{outline:2px solid #202733;outline-offset:2px}
#brick-library-list.library-table-view,#saved-template-list.library-table-view,#saved-message-list.library-table-view{display:flex!important;flex-direction:column!important;gap:5px!important;padding:4px 3px 8px 0!important;grid-template-columns:none!important}
.library-table-view>.brick-card,.library-table-view>.saved-template-card{display:grid!important;grid-template-columns:68px minmax(0,1fr) 24px!important;gap:9px!important;align-items:center!important;width:100%!important;min-height:48px!important;padding:5px 3px!important;border-bottom:1px solid #e4e7ec;box-sizing:border-box}
.library-table-view .brick-thumb,.library-table-view .saved-template-thumb{grid-column:1!important;width:68px!important;height:38px!important;aspect-ratio:auto!important;margin:0!important}
.library-table-view .brick-card-name,.library-table-view .saved-template-name{grid-column:2!important;font-size:12px!important;margin:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.library-table-view .brick-library-delete,.library-table-view .saved-template-delete{grid-column:3!important;position:static!important;display:flex!important;margin:0!important;width:22px!important;height:22px!important}
.library-table-view .brick-thumb-data{height:100%}
.library-table-view .brick-card:hover,.library-table-view .saved-template-card:hover{background:#f8fafc}
.library-table-view .brick-library-delete svg,.library-table-view .saved-template-delete svg{width:13px;height:13px}
/* v171: align library header controls with the top-bar icon button skin. */
#palette-view .library-view-actions .library-view-button{
width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important;
box-sizing:border-box!important;padding:5px!important;
border:1px solid var(--skin-border,#cdd4df)!important;border-radius:8px!important;
background:#fff!important;color:var(--skin-ink,#202733)!important;
display:flex!important;align-items:center!important;justify-content:center!important;
transition:none!important;
}
#palette-view .library-view-actions .library-view-button:hover:not(.active):not([aria-pressed="true"]){
background:#eaf2ff!important;border-color:#a9cfff!important;color:#202733!important;
}
#palette-view .library-view-actions .library-view-button.active,
#palette-view .library-view-actions .library-view-button[aria-pressed="true"]{
background:#202733!important;border-color:#202733!important;color:#fff!important;
}
#palette-view .library-view-actions .library-view-button svg{width:16px!important;height:16px!important;flex:none!important}
/* All three libraries: identical delete control and glyph dimensions in grid and table views. */
#palette-view .brick-card .brick-library-delete,
#palette-view .saved-template-card .saved-template-delete{
width:24px!important;height:24px!important;min-width:24px!important;min-height:24px!important;
box-sizing:border-box!important;padding:4px!important;
border:1px solid #cbd2dc!important;border-radius:6px!important;
background:rgba(255,255,255,.96)!important;color:#667085!important;
display:flex!important;align-items:center!important;justify-content:center!important;
transition:none!important;
}
#palette-view .brick-card .brick-library-delete svg,
#palette-view .saved-template-card .saved-template-delete svg,
#palette-view .library-table-view .brick-library-delete svg,
#palette-view .library-table-view .saved-template-delete svg{
width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important;
flex:none!important;display:block!important;
}
#palette-view .brick-card .brick-library-delete:hover,
#palette-view .saved-template-card .saved-template-delete:hover{
background:#eaf2ff!important;border-color:#a9cfff!important;color:#202733!important;
}
#palette-view .library-table-view .brick-card .brick-library-delete,
#palette-view .library-table-view .saved-template-card .saved-template-delete{
position:static!important;grid-column:3!important;margin:0!important;
}
/* v172 Lucide consistent dimensions */
.item-symbol .lucide{width:20px;height:20px;vertical-align:middle}
.section-handle .lucide,.row-handle .lucide,.col-handle .lucide,.item-move-handle .lucide{width:16px;height:16px;vertical-align:middle;pointer-events:none}
.section-action .lucide,.row-action .lucide,.item-action .lucide{width:15px;height:15px;vertical-align:middle;pointer-events:none}
.preview-nav-button .lucide,.preview-toggle .lucide,#undo-history-toggle .lucide{width:18px;height:18px;pointer-events:none}
/* v174 Section options: three primary rows and consistent control sizing. */
#section-options .section-options-controls{display:flex!important;flex-direction:column!important;gap:12px!important}
#section-options .section-options-controls>label{display:block!important;width:100%;box-sizing:border-box}
#section-options .section-display-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
#section-options .section-display-buttons{display:flex;gap:5px;margin-top:5px;width:100%}
#section-options .section-display-buttons button{flex:1;min-width:0;height:34px;padding:0 8px;border:1px solid #d7dce3;border-radius:7px;background:#fff;color:#202733;font:inherit;font-size:12px;cursor:pointer;transition:none!important}
#section-options .section-display-buttons button.active{background:#202733;border-color:#202733;color:#fff}
#section-options .section-options-controls>label>.color-control{display:flex;gap:6px;align-items:center;margin-top:5px;min-width:0}
#section-options #section-background{width:34px!important;height:34px!important;min-width:34px!important;flex:0 0 34px!important;border-radius:7px;box-sizing:border-box}
#section-options #section-background-hex,#section-options #section-background-image{height:34px!important;min-height:34px!important;box-sizing:border-box;min-width:0;flex:1}
#section-options #section-background-image-library{height:34px!important;width:34px!important;min-width:34px!important;padding:0!important;display:flex;align-items:center;justify-content:center;border:1px solid #d7dce3;border-radius:7px;background:#fff;color:#202733;cursor:pointer;transition:none!important}
#section-options #section-background-image-library:hover{background:#eaf2ff;border-color:#93c5fd}
#section-options #section-background-image-library svg{pointer-events:none}
/* v175: Background image controls match Display buttons and remain visible under Cover. */
.background-position-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.background-position-control{display:block!important;position:relative}
.background-position-buttons{display:flex;gap:6px;margin-top:6px;width:100%}
.background-position-buttons button{flex:1;min-width:0;height:34px;border:1px solid #d0d5dd;border-radius:7px;background:#fff;color:#202733;font:inherit;font-size:12px;cursor:pointer;transition:none!important}
.background-position-buttons button.active:not(:disabled){background:#202733;border-color:#202733;color:#fff}
.background-option-disabled{opacity:.45;cursor:not-allowed}
.background-option-disabled button{cursor:not-allowed}
/* v177: spacing between primary option groups, without splitting image settings. */
#section-options .section-options-controls > label:nth-child(2),
#section-options .section-options-controls > label:nth-child(3){
margin-top:12px!important;
}
/* Keep the background-image suboptions (Cover, Repeat, Position) visually together. */
#section-options .section-options-controls > label:nth-child(n+4){
margin-top:0!important;
}
/* Reusable heading spacing for subsequent Row and Item options styling. */
#options-view .options-column > h2:not(:first-child),
#options-view .section-options > h2:not(:first-child){
margin-top:18px;
}
/* v178: centered Lucide icon controls, retaining equal-width segments. */
.section-display-buttons button,.background-position-buttons button{display:flex!important;align-items:center!important;justify-content:center!important;gap:3px!important}
.section-display-buttons button svg,.background-position-buttons button svg{width:18px;height:18px;flex-shrink:0;pointer-events:none}
.section-display-buttons button[data-section-display="both"] svg{width:16px;height:16px}
/* v179: the outer color popup owns spacing and shadow, not embedded Pickr. */
#simple-color-popover{box-sizing:border-box;width:250px}
#simple-color-pickr{width:100%;min-width:0;box-sizing:border-box;margin-bottom:10px}
#simple-color-pickr .pcr-app,
#simple-color-popover .pcr-app{
position:relative!important;
width:100%!important;max-width:100%!important;min-width:0!important;
box-sizing:border-box!important;
padding:0!important;margin:0!important;
border:0!important;border-radius:0!important;
box-shadow:none!important;filter:none!important;
}
#simple-color-pickr .pcr-button,
#simple-color-popover .pcr-button{display:none!important}
#simple-color-pickr .pcr-app .pcr-selection,
#simple-color-popover .pcr-app .pcr-selection{min-width:0!important;width:100%!important;box-sizing:border-box!important}
#simple-color-pickr .pcr-app .pcr-selection .pcr-color-preview,
#simple-color-popover .pcr-app .pcr-selection .pcr-color-preview{display:none!important}
/* v180 Row Options visual system */
.row-options .row-option-group{display:flex;flex-direction:column;gap:9px;margin:0 0 20px}
.row-options .row-option-heading{font-size:12px;font-weight:700;letter-spacing:.01em;margin-bottom:0;color:var(--ink,#202733)}
.row-options .row-option-group>label{margin:0}
.row-options .row-option-group[data-row-group="display"]>label,
.row-options .row-option-group[data-row-group="background"]>label,
.row-options .row-option-group[data-row-group="image"]>label:first-of-type,
.row-options .row-option-group[data-row-group="columns"]>label:first-of-type{font-size:0}
.row-options .row-option-group[data-row-group="display"] .row-option-buttonset,
.row-options .row-option-group[data-row-group="columns"] .row-option-buttonset{font-size:12px}
.row-options .row-option-native{display:none!important}
.row-options .row-option-buttonset{display:flex;gap:5px;width:100%;margin-top:5px}
.row-options .row-option-choice{flex:1 1 0;min-width:0;min-height:34px;border:1px solid #cfd6e1;border-radius:7px;background:#fff;color:#202733;display:flex;align-items:center;justify-content:center;gap:3px;padding:4px 2px;font-size:11px;cursor:pointer;transition:none!important}
.row-options .row-option-choice svg{width:17px;height:17px;pointer-events:none}
.row-options .row-option-choice.active{background:#202733!important;color:#fff!important;border-color:#202733!important}
.row-options .row-option-choice:focus-visible{outline:2px solid #202733;outline-offset:2px}
.row-options .row-option-group .color-control{display:flex;align-items:stretch;gap:6px}
.row-options .row-option-group .color-control .color-swatch,
.row-options .row-option-group .color-control .color-hex,
#row-background-image-library{height:34px!important;min-height:34px!important;box-sizing:border-box}
#row-background-image-library{width:34px!important;min-width:34px!important;display:flex;align-items:center;justify-content:center;padding:0!important}
#row-background-image-library svg{width:16px;height:16px}
.row-options .row-full-rounding-hidden{display:none!important}
.row-options .row-side-editor{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px!important;padding:10px;border:1px solid #d8dfe8;border-radius:9px;background:#f7f9fc;position:relative}
.row-options .row-side-editor>label{display:flex;align-items:center;gap:5px;min-width:0;margin:0!important}
.row-options .row-side-editor>label span{font-size:10px!important;min-width:36px;color:#667085}
.row-options .row-side-editor input{width:100%!important;min-width:0!important;max-width:none!important;height:32px!important;box-sizing:border-box}
.row-options .row-side-editor>label[data-side="top"],.row-options .row-side-editor>label[data-side="tl"]{grid-column:1}
.row-options .row-side-editor>label[data-side="right"],.row-options .row-side-editor>label[data-side="tr"]{grid-column:2}
.row-options .row-side-editor>label[data-side="bottom"],.row-options .row-side-editor>label[data-side="bl"]{grid-column:1}
.row-options .row-side-editor>label[data-side="left"],.row-options .row-side-editor>label[data-side="br"]{grid-column:2}
.row-options .row-gap-slider-row{display:flex;align-items:center;gap:8px}
.row-options .row-gap-slider{flex:1;min-width:0;accent-color:#202733}
.row-options .row-gap-value{font-size:11px;min-width:32px;text-align:right}
.row-options #row-gap{display:none!important}
.row-options #row-ratio-wrap .row-option-choice{font-size:10px;padding:3px 0}
.row-options #row-fullwidth-wrap.row-option-disabled{opacity:.45}
.row-options #row-fullwidth-wrap.row-option-disabled input{cursor:not-allowed}
.row-options #row-columns button.active{border-color:#202733!important;background:#202733!important;color:#fff!important}
.row-options #row-columns button:hover:not(.active){background:#eaf2ff!important;border-color:#90b8f5!important}
.row-options [hidden]{display:none!important}
/* v181: match Section labels; do not hide text or input contents of color controls. */
#options-view .row-options .row-option-heading,
#options-view #section-options .section-options-controls>label{
font-family:inherit!important;font-size:12px!important;font-weight:400!important;
line-height:1.45!important;letter-spacing:normal!important;color:inherit!important;
}
#options-view .row-options .row-option-group[data-row-group="display"]>label,
#options-view .row-options .row-option-group[data-row-group="background"]>label,
#options-view .row-options .row-option-group[data-row-group="image"]>label:first-of-type,
#options-view .row-options .row-option-group[data-row-group="columns"]>label:first-of-type{
font-size:12px!important;
}
#options-view .row-options .row-option-group[data-row-group="display"]>label,
#options-view .row-options .row-option-group[data-row-group="background"]>label,
#options-view .row-options .row-option-group[data-row-group="image"]>label:first-of-type{
line-height:1.45!important;
}
#options-view .row-options .color-control{
display:flex!important;gap:6px!important;align-items:center!important;
margin-top:5px!important;min-width:0!important;
}
#options-view .row-options .color-control>.color-swatch{
width:34px!important;height:34px!important;min-width:34px!important;
flex:0 0 34px!important;border-radius:7px!important;
}
#options-view .row-options .color-control>.color-hex{
display:block!important;visibility:visible!important;opacity:1!important;
font-size:12px!important;line-height:normal!important;color:#202733!important;
min-width:0!important;flex:1!important;height:34px!important;
background:#fff!important;
}
#options-view .row-options #row-background-image{
height:34px!important;min-height:34px!important;min-width:0!important;flex:1!important;
box-sizing:border-box!important;
}
#options-view .row-options #row-background-image-library{
height:34px!important;width:34px!important;min-width:34px!important;
flex:0 0 34px!important;padding:0!important;display:flex!important;
align-items:center!important;justify-content:center!important;
border:1px solid #d7dce3!important;border-radius:7px!important;
background:#fff!important;color:#202733!important;cursor:pointer!important;
transition:none!important;
}
#options-view .row-options #row-background-image-library:hover{
background:#eaf2ff!important;border-color:#93c5fd!important;
}
#options-view .row-options #row-background-image-library svg{pointer-events:none}
#options-view .row-options label:has(> #row-background-cover),
#options-view .row-options label:has(> #row-background-repeat){
display:flex!important;align-items:center!important;gap:6px!important;
font-size:12px!important;line-height:1.45!important;min-height:20px!important;
}
#options-view .row-options #row-background-cover,
#options-view .row-options #row-background-repeat{
flex:0 0 auto!important;margin:0!important;vertical-align:middle!important;
}
#options-view .row-options #row-columns button.active{
outline:none!important;box-shadow:none!important;border:1px solid #202733!important;
background:#202733!important;color:#fff!important;
}
#options-view .row-options #row-columns button.active:focus-visible{
outline:2px solid #202733!important;outline-offset:2px!important;
}
/* v182: original labels are the only headings, matching Section styling. */
.row-options .row-option-group>label,
.row-options .row-option-group>label:first-of-type,
.row-options .row-option-group>label:not(.check-label){font-family:inherit!important;font-size:12px!important;font-weight:400!important;line-height:1.45!important;letter-spacing:normal!important;color:inherit!important}
.row-options .row-option-group[data-row-group="display"]>label,
.row-options .row-option-group[data-row-group="background"]>label,
.row-options .row-option-group[data-row-group="image"]>label:first-of-type,
.row-options .row-option-group[data-row-group="columns"]>label:first-of-type{font-size:12px!important}
.row-options .row-option-group[data-row-group="image"]>label:has(>input[type="checkbox"]){align-self:flex-start!important;width:max-content!important;max-width:100%!important;flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;padding:0!important;margin:0!important;white-space:nowrap!important}
.row-options .row-option-group[data-row-group="image"]>label:has(>input[type="checkbox"]) input{margin:0!important;flex:0 0 auto!important;width:15px!important;height:15px!important}
/* v183: align Row Options spacing with Section Options. */
#options-view .row-options .row-option-group{
gap:12px!important;
margin:0 0 12px!important;
}
#options-view .row-options .row-option-group:last-child{margin-bottom:0!important}
#options-view .row-options h2{margin-bottom:12px!important}
#options-view .row-options #row-background-image{
margin-top:0!important;
}
#options-view .row-options label:has(> #row-background-image){
margin-top:0!important;
}
/* v184: requested Section and Row spacing adjustments. */
#options-view .row-options .row-option-group{margin-bottom:20px!important}
#section-options .section-options-controls{gap:20px!important}
#section-options .section-options-controls > label:nth-child(2),
#section-options .section-options-controls > label:nth-child(3){margin-top:0!important}
#section-options #section-background-cover{margin:0!important}
/* v185 — Shared options skin. Additive: no existing IDs, DOM hierarchy, or handlers change.
Both panels share one title, label, input and button styling contract. */
#options-view .options-skin > h2{
font-family:inherit!important;font-size:16px!important;font-weight:600!important;
line-height:20px!important;letter-spacing:normal!important;margin:0 0 12px!important;
}
#options-view .options-skin .section-options-controls,
#options-view .options-skin .row-option-group{
row-gap:12px!important;
}
#options-view .options-skin .section-options-controls{gap:20px!important}
#options-view .options-skin .row-option-group{margin-bottom:20px!important}
#options-view .options-skin .section-options-controls > label,
#options-view .options-skin .row-option-group > label:not(:has(input[type="checkbox"])),
#options-view .options-skin .row-option-group > .row-option-heading{
font-family:inherit!important;font-size:12px!important;font-weight:400!important;
line-height:18px!important;letter-spacing:normal!important;color:inherit!important;
}
/* Shared control dimensions, without modifying Pickr internals, swatch buttons,
hidden native selects, range sliders, or specialized 4-side editors. */
#options-view .options-skin input[type="text"]:not(.color-hex),
#options-view .options-skin input[type="url"],
#options-view .options-skin select:not(.section-display-native):not(.row-option-native){
box-sizing:border-box;height:34px;min-height:34px;border-radius:7px;
}
#options-view .options-skin .color-control > .color-swatch,
#options-view .options-skin .color-control > .color-hex{
box-sizing:border-box!important;height:34px!important;min-height:34px!important;
}
#options-view .options-skin #section-background-image-library,
#options-view .options-skin #row-background-image-library{
box-sizing:border-box!important;width:34px!important;min-width:34px!important;
height:34px!important;min-height:34px!important;
}
#options-view .options-skin .section-display-buttons button,
#options-view .options-skin .section-position-buttons button,
#options-view .options-skin .row-option-choice{
min-height:34px;transition:none!important;
}
/* Keep the confirmed v184 Section spacing and the Row's own 20px group rhythm. */
#section-options .section-options-controls > label:nth-child(2),
#section-options .section-options-controls > label:nth-child(3){margin-top:0!important}
#section-options #section-background-cover{margin:0!important}
#options-view .row-options #row-background-image{margin-top:0!important}
/* v186: actual shared controls for Section and Row; overrides legacy per-panel
visual rules while retaining native inputs, IDs, listeners and Pickr setup. */
#options-view :is(#section-options,.row-options).options-skin
:is(input[type="text"],input[type="url"],input[type="number"],select):not(.section-display-native):not(.row-option-native):not(.background-position-native):not([type="range"]){
box-sizing:border-box!important;
min-height:34px!important;height:34px!important;
padding:7px!important;
border-radius:7px!important;
font-family:inherit!important;font-size:12px!important;
line-height:18px!important;
}
#options-view :is(#section-options,.row-options).options-skin
:is(.section-display-buttons button,.row-option-buttonset .row-option-choice,.background-position-buttons button){
box-sizing:border-box!important;
height:34px!important;min-height:34px!important;
padding:4px 2px!important;
border-radius:7px!important;
font-size:12px!important;
line-height:18px!important;
display:flex!important;align-items:center!important;justify-content:center!important;
gap:3px!important;
}
#options-view :is(#section-options,.row-options).options-skin
:is(.section-display-buttons button,.row-option-buttonset .row-option-choice,.background-position-buttons button) svg{
width:18px!important;height:18px!important;min-width:0!important;
flex:0 0 18px!important;
}
#options-view :is(#section-options,.row-options).options-skin
:is(.section-display-buttons button[data-section-display="both"],.row-option-buttonset .row-option-choice[data-value="both"]) svg{
width:16px!important;height:16px!important;flex:0 0 16px!important;
}
#options-view :is(#section-options,.row-options).options-skin
:is(.section-display-buttons button,.row-option-buttonset .row-option-choice,.background-position-buttons button).active{
background:#202733!important;color:#fff!important;border-color:#202733!important;
box-shadow:none!important;
}
#options-view :is(#section-options,.row-options).options-skin
:is(.section-options-controls>label,.row-option-group>label:not(:has(input[type="checkbox"])),.row-option-heading){
font-family:inherit!important;font-size:12px!important;
font-weight:400!important;line-height:18px!important;
letter-spacing:normal!important;
}
#options-view :is(#section-options,.row-options).options-skin
:is(.color-control>.color-hex,.color-control>.color-swatch){
box-sizing:border-box!important;height:34px!important;min-height:34px!important;
}
/* v187 — Section/Row panel spacing and breadcrumb cleanup. */
#options-view .row-options{padding-right:0!important}
#section-options .section-options-controls{display:block!important;gap:0!important}
#section-options .section-options-controls.options-skin-groups>label{margin-bottom:20px!important}
#section-options .section-options-controls.options-skin-groups>label:last-child{margin-bottom:0!important}
#section-options .section-options-controls>label:has(> #section-background-cover),
#section-options .section-options-controls>label:has(> #section-background-repeat){min-height:20px!important}
#section-options #section-background-repeat{margin:0!important}
#options-view .section-options{border-bottom:0!important;margin-bottom:0!important}
/* v188 — Section background image controls share a 12px internal gap. */
#options-view .options-breadcrumb{height:40px!important;box-sizing:border-box!important}
#section-options .section-options-controls.options-skin-groups .section-background-image-group{
display:flex;flex-direction:column;gap:12px;
}
#section-options .section-options-controls.options-skin-groups .section-background-image-group>label{
margin:0!important;
}
/* v189 — Section labels and background-image checkbox alignment. */
#section-options .section-options-controls label {
font-size:12px!important;
line-height:18px!important;
color:inherit!important;
}
#options-view .color-control { display:flex!important; }
#section-options .section-options-controls.options-skin-groups .section-background-image-group > label {
margin-bottom:12px!important;
}
#options-view .row-options label:has(> #row-background-cover),
#options-view .row-options label:has(> #row-background-repeat) {
line-height:18px!important;
}
#section-options #section-background-cover {
width:15px!important;
height:15px!important;
}
#section-options .section-options-controls.options-skin-groups .section-background-image-group > label:nth-child(2),
#section-options .section-options-controls.options-skin-groups .section-background-image-group > label:nth-child(3) {
display:flex!important;
min-height:20px!important;
gap:6px!important;
align-items:center!important;
}
/* v190 — Match Section background image control spacing and checkbox dimensions to Row. */
#section-options .section-options-controls.options-skin-groups .section-background-image-group {
gap:0!important;
}
#section-options #section-background-repeat {
width:15px!important;
height:15px!important;
}
/* v196: four fields per line, in the existing DOM order (TRBL / TL TR BL BR). */
#options-view .row-options .row-side-editor {
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:6px!important;
}
#options-view .row-options .row-side-editor > label {
grid-column:auto!important;
grid-row:auto!important;
min-width:0!important;
flex-direction:column!important;
align-items:stretch!important;
}
#options-view .row-options .row-side-editor > label input {
width:100%!important;
min-width:0!important;
box-sizing:border-box!important;
}
/* Breadcrumb and close travel together while the options pane scrolls. */
#options-view .options-breadcrumb-bar {
position:sticky;
top:-20px;
z-index:20;
display:flex;
align-items:center;
height:40px;
box-sizing:border-box;
background:#fff;
margin:-4px 0 14px;
border-bottom:1px solid #d7dce3;
}
#options-view .options-breadcrumb-bar .options-breadcrumb {
position:static!important;
top:auto!important;
flex:1 1 auto;
min-width:0;
height:40px!important;
margin:0!important;
padding:0!important;
border:0!important;
background:transparent!important;
}
#options-view .options-breadcrumb-bar .close-options {
position:static!important;
flex:0 0 auto;
margin-left:auto;
z-index:auto;
}
/* v197: four-control sets have no outer margins or gray side-editor skin. */
#options-view .row-options .four-control { margin:0!important; }
/* v198: option group spacing refinements. */
#options-view .options-skin .section-options-controls,
#options-view .options-skin .row-option-group { row-gap:0!important; }
#options-view .row-options .row-option-group { gap:0!important; }
.row-option-group.options-skin-group.row-background-image-group > label { margin-bottom:12px!important; }
/* v200: background-image label spacing. */
.row-background-image-group > label { margin-bottom:12px; }
.row-background-image-group > label:last-child { margin-bottom:20px; }
/* v201: specific row background-image label spacing. */
.row-options .row-option-group.options-skin-group[data-row-group="image"].row-background-image-group > label {margin-bottom:12px!important;}
/* v202 — requested Row Options spacing adjustments */
#options-view .options-skin .row-option-group.row-background-image-group {margin-bottom:8px!important;}
#options-view .row-options .four-control {margin-bottom:12px!important;}
.four-control + label {margin-bottom:12px!important;}
/* v204: four-control labels and targeted group spacing */
.four-control label span { text-align:left; margin-top:5px; }
.four-control + label.mobile-padding-label { margin-bottom:0px !important; }
#options-view .row-options .row-option-group.options-skin-group[data-row-group="border"] { margin-bottom:8px !important; }
/* v205: targeted corners and mobile padding label spacing */
.four-control[data-side-kind="corners"] + label { margin-bottom: 0px !important; }
.four-control + label.mobile-padding-label { margin-bottom: 5px !important; margin-top: 0 !important; }
/* v206: row auto-width and column heading alignment. */
#row-auto-width-wrap { min-height:20px; line-height:18px!important; }
.check-label input { width:15px!important; height:15px; }
#options-view .row-options .row-option-group.options-skin-group[data-row-group="columns"] > label { margin-bottom:12px; }
/* v207: mobile padding checkbox sizing */
.mobile-padding-label input[type="checkbox"] {width:15px!important;height:15px;}
/* v208: Row Padding group spacing */
#options-view .row-options .row-option-group[data-row-group="padding"] {margin-bottom:8px!important;}
/* v209 Image Options: shared control dimensions and grouped spacing. */
#options-view #image-options{display:flex;flex-direction:column;gap:0}
#options-view #image-options[hidden]{display:none!important}
#options-view #image-options .image-option-group{display:flex;flex-direction:column;gap:0;margin:0 0 20px;padding:0;border:0;background:transparent}
#options-view #image-options .image-option-group>label{margin:0 0 12px;font-size:12px;line-height:18px;font-weight:400}
#options-view #image-options .image-option-group>label:last-child{margin-bottom:0}
#options-view #image-options .four-control{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px!important;padding:0;border:0;background:transparent;box-shadow:none}
#options-view #image-options .four-control label{min-width:0}
#options-view #image-options .four-control label span{display:block;text-align:left;margin-top:5px;font-size:11px}
#options-view #image-options .four-control input{width:100%;min-width:0;box-sizing:border-box}
#options-view #image-options .image-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
#options-view #image-options .image-option-buttons{display:flex;width:100%;gap:0}
#options-view #image-options .image-option-choice{display:flex;flex:1 1 0;align-items:center;justify-content:center;gap:3px;height:34px;min-width:0;border:1px solid #cbd5e1;background:#fff;color:#202733;padding:4px 2px;cursor:pointer}
#options-view #image-options .image-option-choice:first-child{border-radius:7px 0 0 7px}
#options-view #image-options .image-option-choice:last-child{border-radius:0 7px 7px 0}
#options-view #image-options .image-option-choice+button{border-left:0}
#options-view #image-options .image-option-choice.active{background:#202733;color:#fff;border-color:#202733}
#options-view #image-options .image-option-choice svg{width:18px;height:18px;flex:0 0 18px}
#options-view #image-options .image-plus-button{display:flex;align-items:center;justify-content:center;width:34px;min-width:34px;height:34px;padding:0}
#options-view #image-options .image-plus-button svg{width:18px;height:18px}
#options-view #image-options .color-control{display:flex}
#options-view #image-options .image-option-group[data-image-group="width"] .width-control{display:flex;align-items:center;gap:10px}
#options-view #image-options #image-width{flex:1;min-width:0;max-width:100%;height:auto}
#options-view #image-options #image-width-value{white-space:nowrap;font-size:12px;min-width:45px;text-align:right}
#options-view #image-options .image-option-group[data-image-group="width"] .width-control>span{display:none}
#options-view #image-options .check-label input,#options-view #image-options .mobile-padding-label input{width:15px!important;height:15px}
/* v210 — Image Options refinements */
.options-column h2 {font-size:16px;line-height:20px;margin-bottom:12px;font-weight:600;}
#options-view #image-options .image-option-buttons {gap:5px;margin-top:5px;font-size:12px;}
#options-view #image-options .image-option-group>label {margin-bottom:0px;}
#options-view #image-options label:has(> #image-full-rounding) {display:none!important;}
#options-view #image-options .image-option-group.options-skin-group[data-image-group="border"] {margin-bottom:8px!important;}
#options-view #image-options .image-option-group.options-skin-group[data-image-group="padding"] {margin-bottom:8px!important;}
#options-view #image-options .field-with-button > input {margin-top:0px!important;}
#options-view #image-options .image-option-group.options-skin-group[data-image-group="paths"] {margin-bottom:8px!important;}
#options-view #image-options .image-option-group.options-skin-group[data-image-group="paths"] > label {margin-bottom:12px;}
/* Match Row Gap slider's native track/thumb appearance and accent. */
#options-view #image-options #image-width {accent-color:#202733!important;}
/* v211 — Image Options refinements */
.width-control { margin-top:0; }
#options-view #image-options .image-option-group.options-skin-group[data-image-group="width"] .check-label { margin-top:5px; }
.item-options-column { padding-right:0; }
#options-view #image-options .image-option-choice:first-child svg { width:16px; height:16px; flex:0 0 16px; }
#options-view #image-options .image-option-choice:first-child { border-radius:7px; }
#options-view #image-options .image-option-choice:last-child { border-radius:7px; }
/* v212 — Image Options color controls */
#image-background-hex {
height:34px!important;
min-height:34px!important;
font-family:inherit;
}
#options-view .color-control .color-swatch {
width:34px!important;
height:34px!important;
min-height:34px!important;
flex:0 0 34px!important;
}
.image-border-color-hex {font-family:inherit;}
/* v213 — Image options control refinements */
#options-view .color-control .color-hex {min-height:34px!important;height:34px!important;}
.color-control {gap:6px;}
#options-view #image-options .image-option-choice + button {border-left:1px solid #cbd5e1;}
#options-view #image-options .image-plus-button {
background:#fff!important;
border:1px solid #cbd5e1!important;
}
#options-view #image-options .image-plus-button:hover {
background:#eaf2ff!important;
border-color:#93c5fd!important;
}
/* v218: HTML option toggle sizing */
.options-column label.html-show-toggle { min-height:20px; gap:6px; font-size:12px; line-height:18px; }
/* v219 — HTML item controls */
.html-show-toggle input {width:15px!important;height:15px;}
#html-options {gap:0;}
.html-code-preview {border-radius:0;border:0;}
#canvas .builder-section .section-rows > .row + .row {margin-top:0px!important;}
#options-view #html-options .html-display-group {margin-bottom:12px;}
#options-view #html-options .html-display-group>label {display:block;font-size:12px;line-height:18px;}
#options-view #html-options #html-display {position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
#options-view #html-options .html-display-buttons {display:flex;gap:5px;margin-top:5px;}
#options-view #html-options .html-display-choice {display:flex;flex:1 1 0;min-width:0;height:34px;align-items:center;justify-content:center;gap:3px;padding:4px 2px;background:#fff;color:#202733;border:1px solid #cbd5e1;border-radius:7px;cursor:pointer;}
#options-view #html-options .html-display-choice.active {background:#202733;color:#fff;border-color:#202733;}
#options-view #html-options .html-display-choice svg {width:18px;height:18px;flex:0 0 18px;}
#options-view #html-options .html-display-choice[data-value="both"] svg {width:16px;height:16px;flex:0 0 16px;}
/* v221: HTML options spacing and adaptive editor split. */
#options-view #html-options .html-display-group {margin-bottom:8px;}
.options-column label.html-show-toggle {margin-bottom:20px;}
/* Only the HTML item editor adopts the remaining panel height. */
#options-view:has(#html-options:not([hidden])) {display:flex;flex-direction:column;overflow:hidden;}
#options-view:has(#html-options:not([hidden])) .options-columns {flex:1 1 auto;min-height:0;display:grid;}
#options-view:has(#html-options:not([hidden])) .item-options-column {display:flex;flex-direction:column;min-height:0;}
#options-view:has(#html-options:not([hidden])) #generic-item-options {display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
#options-view #html-options:not([hidden]) {flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
#options-view #html-options .html-code-label {flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin-bottom:0;}
#options-view #html-options .html-code-editor {flex:1 1 auto;min-height:0;height:100%;resize:none;margin-bottom:0;}
#options-view #html-options:has(.html-css-editor:focus) .html-code-label:has(.html-css-editor),
#options-view #html-options:has(.html-markup-editor:focus) .html-code-label:has(.html-markup-editor) {flex:4 1 0;}
#options-view #html-options:has(.html-css-editor:focus) .html-code-label:has(.html-markup-editor),
#options-view #html-options:has(.html-markup-editor:focus) .html-code-label:has(.html-css-editor) {flex:1 1 0;}
#options-view #html-options .html-css-editor,#options-view #html-options .html-markup-editor {min-height:0;}
/* v222 — Smooth HTML editor focus resizing and label spacing. */
.options-column label {font-size:12px;line-height:18px;}
.html-code-label + .html-code-label {margin-top:12px;}
#options-view #html-options .html-code-label {transition:flex-grow 240ms ease, flex-basis 240ms ease;}
@media (prefers-reduced-motion:reduce) {#options-view #html-options .html-code-label {transition:none;}}
/* v223 Text options layout */
#options-view #text-options .text-skin-group{display:flex;flex-direction:column;gap:0;margin:0 0 20px;padding:0;border:0;background:transparent}
#options-view #text-options .text-skin-group>label{margin:0 0 12px;font-size:12px;line-height:18px;font-weight:400}
#options-view #text-options .text-skin-group>label:last-child{margin-bottom:0}
#options-view #text-options .text-skin-group .four-control{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px!important;padding:0;border:0;background:transparent;box-shadow:none}
#options-view #text-options .text-skin-group .four-control label{min-width:0}
#options-view #text-options .text-skin-group .four-control label span{display:block;text-align:left;margin-top:5px;font-size:11px}
#options-view #text-options .text-skin-group .four-control input{width:100%;min-width:0;box-sizing:border-box}
#options-view #text-options .text-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
#options-view #text-options .text-option-buttons{display:flex;width:100%;gap:5px;margin-top:5px}
#options-view #text-options .text-option-choice{display:flex;flex:1 1 0;align-items:center;justify-content:center;gap:3px;height:34px;min-width:0;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#202733;padding:4px 2px;cursor:pointer}
#options-view #text-options .text-option-choice.active{background:#202733;color:#fff;border-color:#202733}
#options-view #text-options .text-option-choice svg{width:18px;height:18px;flex:0 0 18px}
#options-view #text-options .text-skin-group[data-text-group="border"]>label[hidden]{display:none!important}
#options-view #text-options .text-skin-group[data-text-group="font"]>label:has(input[type="range"]){display:flex;flex-wrap:wrap;align-items:center;gap:7px}
#options-view #text-options .text-skin-group[data-text-group="font"] input[type="range"]{flex:1 1 100px;min-width:60px;width:auto}
#options-view #text-options .text-slider-value{min-width:42px;text-align:right;font-size:12px;white-space:nowrap}
#options-view #text-options .text-plus-button{display:flex;align-items:center;justify-content:center;width:34px;min-width:34px;height:34px;padding:0}
#options-view #text-options .text-plus-button svg{width:18px;height:18px}
#options-view #text-options .text-plus-button:hover{background:#eaf2ff;border-color:#93c5fd}
/* v224 — Text sliders, labels, font-library button, type-specific controls */
#options-view #text-options .text-skin-group[data-text-group="font"]>label:has(input[type="range"]){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:6px;}
#options-view #text-options .text-skin-group[data-text-group="font"]>label:has(input[type="range"]) input[type="range"]{grid-column:1;grid-row:2;width:100%;min-width:0;flex:none;accent-color:#202733!important;}
#options-view #text-options .text-skin-group[data-text-group="font"]>label:has(input[type="range"]) .text-slider-value{grid-column:2;grid-row:2;min-width:42px;}
#options-view #text-options #custom-font-button.text-plus-button{background:#fff!important;border:1px solid #cbd5e1!important;border-radius:6px;color:#202733;padding:0;}
#options-view #text-options #custom-font-button.text-plus-button:hover{background:#eaf2ff!important;border-color:#93c5fd!important;}
#options-view #text-options #text-emoji-control[hidden],#options-view #text-options #text-button-options[hidden],#options-view #text-options #text-empty-options[hidden]{display:none!important;}
#options-view #text-options .text-skin-group[data-text-group="type"] #text-button-options,
#options-view #text-options .text-skin-group[data-text-group="type"] #text-empty-options{margin-top:12px;}
/* v225 — Button-specific Text Options layout */
#options-view #text-options .text-option-choice:first-child svg{width:16px;height:16px;flex:0 0 16px;}
#options-view .color-control .color-hex{font-family:inherit;}
#options-view #text-options #text-button-options .text-button-skin-group{display:flex;flex-direction:column;gap:0;margin:0 0 20px;padding:0;border:0;background:transparent;}
#options-view #text-options #text-button-options .text-button-skin-group:last-child{margin-bottom:0;}
#options-view #text-options #text-button-options .text-button-skin-group>label{margin:0 0 12px;font-size:12px;line-height:18px;font-weight:400;}
#options-view #text-options #text-button-options .text-button-skin-group>label:last-child{margin-bottom:0;}
#options-view #text-options #text-button-options .text-button-skin-group .four-control{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px!important;padding:0;border:0;background:transparent;box-shadow:none;}
#options-view #text-options #text-button-options .text-button-skin-group .four-control label{min-width:0;}
#options-view #text-options #text-button-options .text-button-skin-group .four-control label span{display:block;text-align:left;margin-top:5px;font-size:11px;}
#options-view #text-options #text-button-options .text-button-skin-group .four-control input{width:100%;min-width:0;box-sizing:border-box;}
#options-view #text-options #text-button-options .text-button-skin-group [hidden]{display:none!important;}
#options-view #text-options #text-button-saved-url.text-button-url-plus{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;min-width:34px;height:34px;padding:0!important;background:#fff!important;border:1px solid #cbd5e1!important;border-radius:6px;color:#202733;cursor:pointer;}
#options-view #text-options #text-button-saved-url.text-button-url-plus:hover{background:#eaf2ff!important;border-color:#93c5fd!important;}
#options-view #text-options #text-button-saved-url.text-button-url-plus svg{width:18px;height:18px;pointer-events:none;}
/* v226 — Accessory placement and full-width emoji picker */
#options-view #text-options .text-skin-group[data-text-group="emoji"][hidden]{display:none!important;}
#options-view #text-options .text-skin-group[data-text-group="accessory"] #text-accessory-options[hidden]{display:none!important;}
#options-view #text-options .text-skin-group[data-text-group="emoji"]{position:relative;}
#options-view #text-options #text-emoji-control{display:block;width:100%;}
#options-view #text-options #text-emoji-control[hidden]{display:none!important;}
#options-view #text-options #emoji-picker-button{display:flex;align-items:center;justify-content:flex-start;gap:9px;box-sizing:border-box;width:100%;min-height:34px;padding:7px 11px;background:#fff;border:1px solid #cbd5e1;border-radius:6px;color:#202733;font:inherit;font-size:12px;cursor:pointer;}
#options-view #text-options #emoji-picker-button:hover{background:#eaf2ff;border-color:#93c5fd;}
#options-view #text-options #emoji-picker-button.active{background:#202733;border-color:#202733;color:#fff;}
#options-view #text-options #emoji-picker-button.active:hover{background:#202733;border-color:#202733;color:#fff;}
#options-view #text-options #emoji-picker{box-sizing:border-box;}
/* v227: accessory uses three toggle icon buttons; None is represented by no selection. */
#options-view #text-options .text-accessory-buttons{display:flex;width:100%;gap:6px;}
#options-view #text-options .text-accessory-buttons .text-option-choice{flex:1 1 0;}
/* v229 Text Options refinements */
#options-view #text-options .text-skin-group>label{margin:0;}
#options-view #text-options .text-skin-group .four-control label span{font-size:10px;}
#options-view #text-options .text-skin-group[data-text-group="border"],
#options-view #text-options .text-skin-group[data-text-group="padding"]{margin-bottom:8px;}
#options-view #text-options .text-skin-group[data-text-group="font"]>label .color-control{margin-bottom:12px;}
#options-view select#text-font-family{margin-top:0;}
#options-view #text-options .font-family-row{margin-bottom:12px;}
#options-view #text-options .text-skin-group[data-text-group="font"]>label:has(input[type="range"]){row-gap:0;}
#options-view #text-options .text-mobile-font-override-label{margin:10px 0 7px;}
#options-view #text-options #text-mobile-font-size-wrap{margin-bottom:12px;}
#options-view #text-options .text-skin-group[data-text-group="font"]{margin-bottom:17px;}
#options-view #text-options .text-line-height-label{margin-bottom:12px;}
#options-view #text-options .text-emoji-heading{font-size:12px;line-height:18px;margin-bottom:6px;}
#options-view #text-options #emoji-picker-button{justify-content:space-between;gap:4px;}
#options-view #text-options #emoji-picker-button span{font-size:18px;line-height:20px;}
/* v230 — Text accessory controls */
#options-view #text-options #emoji-picker-button{justify-content:flex-start;gap:9px;}
#options-view #text-options #text-list-options>label{margin-bottom:0;}
#options-view #text-options #text-list-options{margin-top:20px;}
#options-view #text-options #text-accessory-gap-wrap{margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:0;column-gap:8px;align-items:center;}
#options-view #text-options #text-accessory-gap-wrap input[type="range"]{grid-column:1;grid-row:2;width:100%;min-width:0;accent-color:#202733!important;}
#options-view #text-options #text-accessory-gap-wrap .text-slider-value{grid-column:2;grid-row:2;min-width:42px;text-align:right;}
#options-view input#text-icon-path{min-height:34px!important;margin-top:0!important;}
#options-view #text-options #text-icon-library{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;min-width:34px;height:34px;padding:0!important;background:#fff!important;border:1px solid #cbd5e1!important;border-radius:6px;color:#202733;cursor:pointer;}
#options-view #text-options #text-icon-library:hover{background:#eaf2ff!important;border-color:#93c5fd!important;}
#options-view #text-options #text-icon-library svg{pointer-events:none;}
/* v231 — UL/OL vertical gap slider */
#options-view #text-options #text-list-options>label{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center;}
#options-view #text-options #text-list-options input[type="range"]{grid-column:1;grid-row:2;width:100%;min-width:0;accent-color:#202733!important;}
#options-view #text-options #text-list-options .text-slider-value{grid-column:2;grid-row:2;min-width:42px;text-align:right;}
/* v232 — Icon accessory refinements */
#options-view #text-options #text-icon-options>label:has(#text-icon-width){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center;}
#options-view #text-options #text-icon-width{grid-column:1;grid-row:2;width:100%;min-width:0;accent-color:#202733!important;}
#options-view #text-options #text-icon-width-value{grid-column:2;grid-row:2;min-width:42px;text-align:right;}
#options-view #text-options #text-accessory-valign-wrap .text-option-buttons{grid-column:1/-1;}
#text-icon-options > label:last-child {margin-bottom:0;}
/* v234 — Empty and Button Text Options refinements */
#text-empty-options {margin-top:20px!important;}
#options-view #text-options .text-skin-group[data-text-group="emoji"] {margin-top:20px;}
.options-column #text-empty-options label {margin-bottom:0;}
#options-view #text-options .text-skin-group[data-text-group="type"] #text-button-options {margin-top:20px;}
#options-view #text-options #text-button-options .text-button-skin-group[data-button-group="border"]>label {margin-bottom:0;}
#options-view #text-options #text-button-options .text-button-skin-group[data-button-group="border"],
#options-view #text-options #text-button-options .text-button-skin-group[data-button-group="padding"] {margin-bottom:12px;}
#options-view #text-options #text-button-options .text-button-skin-group[data-button-group="padding"]>label {margin-bottom:0;}
#text-button-url {margin-top:0;min-height:34px!important;}
#options-view #text-options .text-skin-group[data-text-group="accessory"] {margin-bottom:0;}
#options-view #text-options #text-empty-options>label {display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:center;}
#options-view #text-options #text-empty-height {grid-column:1;grid-row:2;width:100%;min-width:0;accent-color:#202733!important;}
#options-view #text-options #text-empty-height-value {grid-column:2;grid-row:2;min-width:42px;text-align:right;}
.text-button-url-type-label {margin-bottom:0!important;}
.comment-open svg {display:block;width:16px;height:16px;}
/* v237: Image Library modal only */
#image-library-modal .test-modal-card{display:flex;flex-direction:column}
#image-library-modal .modal-split-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:stretch;flex:1;min-height:0}
#image-library-modal .modal-list-column{display:flex;flex-direction:column;min-height:0}
#image-library-modal .image-library-list{flex:1;min-height:0;max-height:none;gap:0}
#image-library-modal .image-library-row{border:0;border-bottom:1px solid #e1e4e8;border-radius:0;padding:8px 0}
#image-library-modal .image-library-row.selected{outline:0;background:rgba(37,99,235,.08)}
#image-library-modal .modal-input-column label{display:block;font-size:12px;font-weight:400;line-height:18px}
#image-library-modal .modal-input-column label input{display:block;width:100%;height:34px;min-height:34px;box-sizing:border-box;margin-top:5px;border:1px solid var(--skin-border,#d7dce3);border-radius:8px;padding:0 10px;background:#fff}
#image-library-modal .image-library-drop{margin-top:14px}
#image-library-modal .account-primary{min-height:34px;padding:7px 15px;border-radius:7px}
#image-library-modal .image-library-preview-actions .image-library-secondary{min-height:34px;padding:7px 15px;border:1px solid var(--skin-border,#d7dce3);border-radius:7px;background:#fff;cursor:pointer}
#image-library-modal .image-library-file-info{font-size:12px;line-height:18px;color:#626b77;overflow-wrap:anywhere}
#image-library-modal .image-library-delete{border:0;background:transparent;display:flex;align-items:center;justify-content:center;padding:6px;cursor:pointer;color:#536071}
#image-library-modal .image-library-list-head strong{font-size:13px}
#image-library-modal .image-library-list-head button{border:1px solid var(--skin-border,#d7dce3);background:#fff;border-radius:6px;width:28px;height:28px;cursor:pointer;font-size:17px}
#image-library-modal .image-library-list-head button.active{background:#eaf2ff;border-color:#93c5fd}
@media(max-width:760px){#image-library-modal .modal-split-layout{grid-template-columns:1fr}#image-library-modal .modal-list-column{min-height:200px}}
/* v238: Image Library button, sort, list and selection refinements */
#image-library-modal .account-primary{background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;color:#fff!important;font-weight:650;cursor:pointer}
#image-library-modal .account-primary:hover:not(:disabled){background:#343e4d!important;border-color:#343e4d!important}
#image-library-modal .account-primary:disabled{opacity:.4!important;cursor:not-allowed!important}
#image-library-modal .image-library-secondary{background:#fff!important;color:var(--skin-ink,#202733)!important;border:1px solid var(--skin-border,#cdd4df)!important;font-weight:650}
#image-library-modal .image-library-secondary:hover{background:#f4f6f8!important}
#image-library-modal .image-library-list-head button{color:var(--skin-ink,#202733);border:1px solid var(--skin-border,#cdd4df);background:#fff;display:inline-flex;align-items:center;justify-content:center}
#image-library-modal .image-library-list-head button.active{color:#fff;background:var(--skin-button-ink,#202733);border-color:var(--skin-button-ink,#202733)}
#image-library-modal .modal-list-column{display:flex;flex-direction:column;align-items:stretch;min-height:0}
#image-library-modal .image-library-list{flex:0 1 auto;min-height:0;max-height:430px;align-content:start;grid-auto-rows:max-content}
#image-library-modal #image-library-add{align-self:flex-end;width:auto;margin-top:auto;min-width:74px}
/* v239: Image Library upload alignment, matching sort controls and list overflow */
#image-library-modal .image-library-file-info{text-align:right;}
#image-library-modal .image-library-preview-actions{justify-content:flex-end;}
#image-library-modal .image-library-list-head button{width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important;box-sizing:border-box!important;padding:5px!important;border:1px solid var(--skin-border,#cdd4df)!important;border-radius:8px!important;background:#fff!important;color:var(--skin-ink,#202733)!important;}
#image-library-modal .image-library-list-head button.active{background:#202733!important;border-color:#202733!important;color:#fff!important;}
#image-library-modal .image-library-list-head button svg{width:16px;height:16px;display:block;}
#image-library-modal .image-library-row{grid-template-columns:72px minmax(0,1fr) 24px;min-width:0;align-items:start;}
#image-library-modal .image-library-info{min-width:0;max-width:100%;overflow:hidden;align-self:center;}
#image-library-modal .image-library-name,#image-library-modal .image-library-path{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#image-library-modal .image-library-delete{width:24px;height:24px;min-width:24px;min-height:24px;box-sizing:border-box;padding:4px;border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:#667085;align-self:start;justify-self:end;}
#image-library-modal .image-library-delete svg{width:14px;height:14px;flex:none;display:block;}
#image-library-modal .image-library-list{min-width:0;overflow-x:hidden;}
/* v240: Image Library sort spacing and Saved URLs large modal */
#image-library-modal .image-library-list-head button + button {margin-left:3px;}
#url-library-modal .test-modal-card{width:min(960px,calc(100vw - 40px))!important;max-width:960px!important;height:min(var(--modal-large-height),calc(100dvh - 40px))!important;max-height:calc(100dvh - 40px)!important;}
/* v241: URL library left form and matching image-library column proportions */
#url-library-modal .test-modal-card{display:flex;flex-direction:column;}
#url-library-modal .modal-split-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:stretch;flex:1;min-height:0;}
#url-library-modal .modal-input-column{display:flex;flex-direction:column;min-width:0;}
#url-library-modal .url-library-create{display:flex;flex-direction:column;gap:0;}
#url-library-modal .url-library-create label{display:block;font-size:12px;line-height:18px;font-weight:400;margin:0 0 5px;}
#url-library-modal .url-library-create input{display:block;width:100%;min-height:34px;height:34px;box-sizing:border-box;padding:0 10px;border:1px solid var(--skin-border,#d7dce3);border-radius:8px;background:#fff;margin:0 0 14px;}
#url-library-modal .url-library-save{align-self:flex-end;min-height:34px;padding:7px 15px;border-radius:7px;background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;color:#fff!important;font-weight:650;cursor:pointer;}
#url-library-modal .url-library-save:hover{background:#343e4d!important;border-color:#343e4d!important;}
@media(max-width:760px){#url-library-modal .modal-split-layout{grid-template-columns:1fr;}#url-library-modal .modal-list-column{border-left:0;border-top:1px solid #e1e4e8;padding-left:0;padding-top:18px;}}
/* v242: URL library right column refinements */
#url-library-modal .modal-list-column{display:flex;flex-direction:column;min-width:0;min-height:0;align-items:stretch;}
#url-library-modal .url-library-list-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 8px;padding:0;font-size:13px;min-width:0;}
#url-library-modal .url-library-column-head{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;}
#url-library-modal .url-library-column-head strong{font-size:13px;min-width:0;}
#url-library-modal .url-library-sort-controls{display:flex;align-items:center;gap:3px;flex-shrink:0;}
#url-library-modal .url-library-sort-controls button{width:33px;height:33px;min-width:33px;box-sizing:border-box;padding:5px;border:1px solid var(--skin-border,#cdd4df);border-radius:8px;background:#fff;color:var(--skin-ink,#202733);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
#url-library-modal .url-library-sort-controls button.active{background:#202733;border-color:#202733;color:#fff;}
#url-library-modal .url-library-sort-controls button svg{width:16px;height:16px;display:block;}
#url-library-modal .url-library-list{min-width:0;max-height:430px;overflow-x:hidden;overflow-y:auto;border:0;border-radius:0;flex:0 1 auto;}
#url-library-modal .url-library-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;position:relative;min-width:0;width:100%;box-sizing:border-box;padding:10px 0 12px;border:0;border-bottom:1px solid #e1e4e8;border-radius:0;align-items:center;}
#url-library-modal .url-library-row:last-child{border-bottom:1px solid #e1e4e8;}
#url-library-modal .url-library-row .url-name,#url-library-modal .url-library-row .url-value{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#url-library-modal .url-library-row .url-value{padding-right:28px;box-sizing:border-box;}
#url-library-modal .url-library-delete{position:absolute;right:0;top:8px;width:24px;height:24px;box-sizing:border-box;padding:4px;border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:#667085;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#url-library-modal .url-library-delete svg{width:14px;height:14px;display:block;flex:none;}
#url-library-modal .url-library-add{align-self:flex-end;width:auto;min-width:74px;min-height:34px;margin-top:auto;padding:7px 15px;border-radius:7px;background:var(--skin-button-ink,#202733);border:1px solid var(--skin-button-ink,#202733);color:#fff;font-weight:650;cursor:pointer;}
#url-library-modal .url-library-add:disabled{opacity:.4;cursor:not-allowed;}
#url-library-modal .url-library-add:hover:not(:disabled){background:#343e4d;border-color:#343e4d;}
/* v243: equal-width columns across the three asset libraries. */
@media (min-width:761px){
#image-library-modal .modal-split-layout,
#url-library-modal .modal-split-layout,
#custom-font-modal .modal-split-layout{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
}
/* v244: Font library refinements */
#custom-font-modal .custom-font-heading{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
#custom-font-modal .custom-font-heading strong{font-size:12px;font-weight:400;color:#667085;}
#custom-font-modal .modal-split-layout{align-items:stretch;flex:1;min-height:0;}
#custom-font-modal .modal-list-column{display:flex;flex-direction:column;min-height:0;}
#custom-font-modal .custom-font-list-head{font-size:13px;}
#custom-font-modal .custom-font-list-head button{width:33px;height:33px;min-width:33px;box-sizing:border-box;padding:5px;border:1px solid var(--skin-border,#cdd4df);border-radius:8px;background:#fff;color:var(--skin-ink,#202733);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
#custom-font-modal .custom-font-list-head button+button{margin-left:3px;}
#custom-font-modal .custom-font-list-head button.active{background:#202733;border-color:#202733;color:#fff;}
#custom-font-modal .custom-font-list-head button svg{width:16px;height:16px;display:block;}
#custom-font-modal .custom-font-row.selected{outline:none;outline-offset:0;background:rgba(37,99,235,.08);}
#custom-font-modal .custom-font-delete{width:24px;height:24px;box-sizing:border-box;padding:4px;border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:#667085;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#custom-font-modal .custom-font-delete svg{width:14px;height:14px;display:block;flex:none;}
#custom-font-modal #custom-font-add-selected{align-self:flex-end;width:auto;min-width:74px;min-height:34px;height:auto;margin-top:auto;padding:7px 15px;border-radius:7px;background:var(--skin-button-ink,#202733);border:1px solid var(--skin-button-ink,#202733);color:#fff;font-weight:650;cursor:pointer;}
#custom-font-modal #custom-font-add-selected:disabled{opacity:.4;cursor:not-allowed;}
#custom-font-modal #custom-font-add-selected:hover:not(:disabled){background:#343e4d;border-color:#343e4d;}
@media(max-width:760px){#custom-font-modal .modal-list-column{min-height:200px;}}
/* v245: Font library column sizing and footer alignment */
#custom-font-modal .test-modal-card{display:flex;flex-direction:column;}
#custom-font-modal .modal-split-layout{flex:1 1 auto;min-height:0;align-items:stretch;}
#custom-font-modal .modal-list-column{align-self:stretch;min-height:0;}
#custom-font-modal #custom-font-add-selected{margin-top:auto;margin-left:auto;align-self:flex-end;flex:0 0 auto;}
/* v246: Google font editor layout (hosted/upload editors unchanged). */
#custom-google-panel.custom-google-create{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:12px 0 16px}
#custom-google-panel label,#custom-google-panel .custom-google-fallback-field>label{display:block;font-size:13px;line-height:18px;font-weight:400;color:var(--ink,#20242a);margin:0 0 6px}
#custom-google-panel input#custom-google-url{display:block;width:100%;min-height:34px;box-sizing:border-box;margin:0}
#custom-google-panel #custom-google-name-row{font-size:13px;line-height:18px}
#custom-google-panel #custom-google-name-row[hidden]{display:none}
#custom-google-panel .custom-google-name-display{display:block;font-weight:600;overflow-wrap:anywhere}
#custom-google-panel .custom-google-fallback-buttons{display:flex;flex-wrap:wrap;gap:6px}
#custom-google-panel .custom-google-fallback-buttons button{border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:var(--ink,#20242a);padding:7px 10px;min-height:34px;font-size:12px;cursor:pointer}
#custom-google-panel .custom-google-fallback-buttons button.active{background:var(--ink,#20242a);border-color:var(--ink,#20242a);color:#fff}
#custom-google-panel #custom-google-fallback{display:none!important}
#custom-google-panel #custom-google-save{align-self:flex-end;margin-top:2px;background:var(--ink,#20242a);border:1px solid var(--ink,#20242a);color:#fff;border-radius:6px;min-height:34px;padding:7px 18px;cursor:pointer}
#custom-google-panel #custom-google-save:disabled{opacity:.45;cursor:not-allowed}
/* v247: Google font URL input matches library inputs. */
#custom-google-panel input#custom-google-url{height:34px;padding:0 10px;border:1px solid var(--skin-border,#d7dce3);border-radius:8px;background:#fff;margin-top:5px;}
.custom-google-create{border-bottom:0;}
/* v248: Hosted font editor controls; variant rows remain unchanged. */
#custom-hosted-panel.custom-hosted-create{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:12px 0 16px}
#custom-hosted-panel[hidden]{display:none!important}
#custom-hosted-panel>label,#custom-hosted-panel .custom-hosted-fallback-field>label{display:block;font-size:13px;line-height:18px;font-weight:400;color:var(--ink,#20242a);margin:0 0 6px}
#custom-hosted-panel input#custom-hosted-name{display:block;width:100%;height:34px;min-height:34px;box-sizing:border-box;padding:0 10px;border:1px solid var(--skin-border,#d7dce3);border-radius:8px;background:#fff;margin-top:5px;font-size:13px}
#custom-hosted-panel .custom-hosted-fallback-buttons{display:flex;flex-wrap:wrap;gap:6px}
#custom-hosted-panel .custom-hosted-fallback-buttons button{border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:var(--ink,#20242a);padding:7px 10px;min-height:34px;font-size:12px;cursor:pointer}
#custom-hosted-panel .custom-hosted-fallback-buttons button.active{background:var(--ink,#20242a);border-color:var(--ink,#20242a);color:#fff}
#custom-hosted-panel #custom-hosted-fallback{display:none!important}
#custom-hosted-panel .custom-hosted-variants-head strong{font-size:13px;line-height:18px;font-weight:400}
#custom-hosted-panel #custom-hosted-add-variant{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;padding:0;background:#fff;border:1px solid #cbd2dc;border-radius:6px;color:var(--ink,#20242a);font-size:22px;font-weight:400;line-height:1;cursor:pointer}
#custom-hosted-panel #custom-hosted-add-variant:hover{color:#1677d2;border-color:#1677d2}
#custom-hosted-panel #custom-hosted-save{align-self:flex-end;margin-top:2px;background:var(--ink,#20242a);border:1px solid var(--ink,#20242a);color:#fff;border-radius:6px;min-height:34px;padding:7px 18px;cursor:pointer}
#custom-hosted-panel #custom-hosted-save:disabled{opacity:.45;cursor:not-allowed}
/* v249 Hosted font variant controls */
#custom-hosted-panel #custom-hosted-add-variant:hover{background:#eff6ff}
#custom-hosted-variants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#custom-hosted-variants>.custom-hosted-variant:only-child{grid-column:1/-1}
#custom-hosted-panel .custom-hosted-variant{position:relative;min-width:0;border:0;background-color:#f4f4f4;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px}
#custom-hosted-panel .custom-hosted-remove-variant{position:absolute;right:10px;top:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;border:1px solid #d7dce3;border-radius:6px;background:#fff;color:var(--ink,#20242a);cursor:pointer;padding:0}
#custom-hosted-panel .custom-hosted-variant-field{display:flex;flex-direction:column;gap:5px;min-width:0}
#custom-hosted-panel .custom-hosted-variant-field:first-of-type{padding-right:35px}
#custom-hosted-panel .custom-hosted-variant-field>label,#custom-hosted-panel .custom-hosted-source-field>label{display:block;font-size:12px;line-height:18px;font-weight:400;margin:0}
#custom-hosted-panel .custom-hosted-weight-control{display:flex;align-items:center;gap:10px;min-height:34px}
#custom-hosted-panel .custom-hosted-weight-control input{flex:1;min-width:0;width:100%;accent-color:var(--ink,#20242a)}
#custom-hosted-panel .custom-hosted-weight-value{min-width:28px;text-align:right;font-size:12px}
#custom-hosted-panel .custom-hosted-style-buttons{display:flex;gap:6px}
#custom-hosted-panel .custom-hosted-style-buttons button{flex:1;min-height:34px;border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:var(--ink,#20242a);cursor:pointer}
#custom-hosted-panel .custom-hosted-style-buttons button.active{background:var(--ink,#20242a);border-color:var(--ink,#20242a);color:#fff}
#custom-hosted-panel .custom-hosted-sources{display:flex;flex-direction:column;gap:9px;min-width:0}
#custom-hosted-panel .custom-hosted-source-field{display:flex;flex-direction:column;gap:5px;min-width:0}
#custom-hosted-panel .custom-hosted-source-field input{width:100%;min-width:0;min-height:34px;height:34px;box-sizing:border-box;border:1px solid #d7dce3;border-radius:8px;background:#fff;padding:0 10px;font-size:13px}
@media(max-width:700px){#custom-hosted-variants{grid-template-columns:minmax(0,1fr)}}
/* v250: hosted variant spacing and full-width source fields */
#custom-hosted-panel .custom-hosted-variant-field:first-of-type{padding-top:32px;padding-right:0;}
#custom-hosted-panel .custom-hosted-sources,#custom-hosted-panel .custom-hosted-source-field{width:100%;max-width:100%;box-sizing:border-box;align-self:stretch;}
#custom-hosted-panel .custom-hosted-source-field input{display:block;width:100%;max-width:100%;}
/* v251: Hosted edit name and Upload Font editor controls */
#custom-hosted-panel #custom-hosted-name-field[hidden],#custom-hosted-panel #custom-hosted-name-row[hidden]{display:none!important}
#custom-hosted-panel #custom-hosted-name-row{font-size:13px;line-height:18px;overflow-wrap:anywhere}
#custom-hosted-panel #custom-hosted-name-display{font-weight:600}
#custom-upload-panel.custom-upload-create{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:12px 0 16px;margin:0}
#custom-upload-panel>label,#custom-upload-panel .custom-upload-fallback-field>label{display:block;font-size:12px;line-height:18px;font-weight:400;color:var(--ink,#20242a);margin:0 0 6px}
#custom-upload-panel input#custom-upload-name{display:block;width:100%;height:34px;min-height:34px;box-sizing:border-box;padding:0 10px;border:1px solid var(--skin-border,#d7dce3);border-radius:8px;background:#fff;margin-top:5px;font-size:13px}
#custom-upload-panel .custom-upload-fallback-buttons{display:flex;flex-wrap:wrap;gap:6px}
#custom-upload-panel .custom-upload-fallback-buttons button{border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:var(--ink,#20242a);padding:7px 10px;min-height:34px;font-size:12px;font-weight:400;cursor:pointer}
#custom-upload-panel .custom-upload-fallback-buttons button.active{background:var(--ink,#20242a);border-color:var(--ink,#20242a);color:#fff}
#custom-upload-panel #custom-upload-fallback{display:none!important}
#custom-upload-panel .custom-upload-variants-head strong{font-size:13px;line-height:18px;font-weight:400}
#custom-upload-panel #custom-upload-add-variant{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;padding:0;background:#fff;border:1px solid #cbd2dc;border-radius:6px;color:var(--ink,#20242a);font-size:22px;font-weight:400;line-height:1;cursor:pointer}
#custom-upload-panel #custom-upload-add-variant:hover{color:#1677d2;border-color:#1677d2;background:#eff6ff}
#custom-upload-panel #custom-upload-save{align-self:flex-end;margin-top:2px;background:var(--ink,#20242a);border:1px solid var(--ink,#20242a);color:#fff;border-radius:6px;min-height:34px;padding:7px 18px;cursor:pointer}
#custom-upload-panel #custom-upload-save:disabled{opacity:.45;cursor:not-allowed}
/* v252: font library labels and uploaded variants */
#custom-google-panel label,#custom-google-panel .custom-google-fallback-field>label{font-size:12px;}
#custom-hosted-panel>label,#custom-hosted-panel .custom-hosted-fallback-field>label{font-size:12px;}
#custom-hosted-panel .custom-hosted-variants-head strong{font-size:12px;}
#custom-upload-panel .custom-upload-variants-head strong{font-size:12px;}
#custom-upload-panel #custom-upload-name-row[hidden],#custom-upload-panel #custom-upload-name-field[hidden]{display:none!important;}
#custom-upload-panel #custom-upload-name-row strong{font-size:14px;font-weight:700;}
#custom-upload-variants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#custom-upload-variants>.custom-upload-variant:only-child{grid-column:1/-1;}
#custom-upload-panel .custom-upload-variant{position:relative;min-width:0;border:0;background-color:#f4f4f4;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px;}
#custom-upload-panel .custom-upload-remove-variant{position:absolute;right:10px;top:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #d7dce3;border-radius:6px;background:#fff;color:var(--ink,#20242a);cursor:pointer;padding:0;}
#custom-upload-panel .custom-upload-variant-field{display:flex;flex-direction:column;gap:5px;min-width:0;}
#custom-upload-panel .custom-upload-variant-field:first-of-type{padding-top:32px;}
#custom-upload-panel .custom-upload-variant-field>label{display:block;font-size:12px;line-height:18px;font-weight:400;margin:0;}
#custom-upload-panel .custom-upload-weight-control{display:flex;align-items:center;gap:10px;min-height:34px;}
#custom-upload-panel .custom-upload-weight-control input{flex:1;min-width:0;width:100%;accent-color:var(--ink,#20242a);}
#custom-upload-panel .custom-upload-weight-value{min-width:28px;text-align:right;font-size:12px;}
#custom-upload-panel .custom-upload-style-buttons{display:flex;gap:6px;}
#custom-upload-panel .custom-upload-style-buttons button{flex:1;min-height:34px;border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:var(--ink,#20242a);cursor:pointer;}
#custom-upload-panel .custom-upload-style-buttons button.active{background:var(--ink,#20242a);border-color:var(--ink,#20242a);color:#fff;}
#custom-upload-panel .custom-upload-file-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;}
#custom-upload-panel .custom-upload-choose-file{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;border:1px solid #cbd2dc;border-radius:6px;background:#fff;color:var(--ink,#20242a);font-size:12px;cursor:pointer;overflow:hidden;}
#custom-upload-panel .custom-upload-choose-file:focus-within{outline:2px solid #1677d2;outline-offset:2px;}
#custom-upload-panel .custom-upload-file-input{position:absolute;width:100%;height:100%;inset:0;opacity:0;cursor:pointer;}
#custom-upload-panel .custom-upload-file-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:700px){#custom-upload-variants{grid-template-columns:minmax(0,1fr);}}
/* v253: Test Send modal control alignment */
.test-send-card h3{font-size:12px;font-weight:400}
.test-send-card .ts-label{font-weight:400}
#ts-message-details .message-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
#ts-message-details .message-field{width:100%;min-width:0;text-align:left}
#ts-message-details .message-field>span:first-child{display:block;text-align:left;font-size:12px;line-height:18px;font-weight:400}
#ts-message-details .message-input-wrap,#ts-message-details input{width:100%;box-sizing:border-box}
.test-send-card .ts-panel-head{font-size:12px;font-weight:400}
.test-send-card .ts-panel-head strong{font-size:12px;font-weight:400}
.test-send-card .ts-columns button{font-weight:400}
.test-send-card .ts-sort-actions{display:flex;align-items:center;gap:3px;margin-left:auto}
.test-send-card .ts-sort-actions button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px;padding:5px;background:#fff;color:#222;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;box-sizing:border-box}
.test-send-card .ts-sort-actions button.active{background:var(--ink,#20232a);border-color:var(--ink,#20232a);color:#fff}
.test-send-card .ts-sort-actions button:hover:not(.active){border-color:#73a9ed;background:#eef6ff}
.test-send-card .ts-sort-actions svg{width:16px;height:16px;display:block}
.test-send-card .ts-column-heading{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:5px 8px;font-size:12px}
.test-send-card .ts-column-heading .ts-sort-actions{flex-shrink:0}
@media(max-width:500px){#ts-message-details .message-fields{grid-template-columns:1fr}}
/* v254: Test send refinements */
#ts-message-details .message-field{display:block;margin-bottom:5px;}
.test-send-card .ts-footer #ts-send-button{min-height:36px;padding:9px 15px;background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;border-radius:8px;color:#fff!important;font:inherit;font-size:13px;font-weight:400;opacity:1;}
.test-send-card .ts-footer #ts-send-button:hover:not(:disabled){background:#343e4d!important;border-color:#343e4d!important;}
.test-send-card .ts-footer #ts-send-button:disabled{opacity:.55;cursor:not-allowed;}
.test-send-card .ts-rec-row .ts-trash-button,.test-send-card .ts-group-row .ts-trash-button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:5px;background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#222;cursor:pointer;box-sizing:border-box;}
.test-send-card .ts-rec-row .ts-trash-button:hover,.test-send-card .ts-group-row .ts-trash-button:hover{background:#eef6ff;border-color:#73a9ed;}
.test-send-card .ts-rec-row .ts-trash-button svg,.test-send-card .ts-group-row .ts-trash-button svg{display:block;width:16px;height:16px;flex:none;}
/* v255: Test send field spacing and emoji controls */
#ts-message-details .message-field{margin-bottom:0;}
#ts-message-details .message-field>span:first-child{margin-bottom:5px;}
.test-send-card .ts-label{font-size:12px;}
#test-send-modal .message-emoji-picker{z-index:10000!important;}
/* v256: Export subject/preheader fill their respective field widths. */
#export-message-details .message-field,#export-message-details .message-input-wrap,#export-message-details .message-input-wrap input{width:100%;box-sizing:border-box}
/* v257 Export modal refinements */
#export-message-details .message-field{display:block;}
.message-field>span:first-child{margin-bottom:5px;font-weight:400;}
.export-modal-card .export-source-viewer{margin-top:12px;padding-top:0;border-top:0;}
.export-modal-card .export-source-viewer textarea{height:310px;display:block;}
.export-modal-card .export-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;margin-bottom:20px;}
.export-modal-card .export-actions button{background:var(--ink,#20242a);border:1px solid var(--ink,#20242a);color:#fff;border-radius:6px;min-height:34px;padding:7px 18px;font-weight:400;cursor:pointer;}
.email-checks-heading{font-size:12px;line-height:18px;font-weight:400;}
.check-section>summary span:first-of-type{font-size:12px;}
/* v258 export refinements */
.message-field>span:first-child{display:block;}
.export-modal-card .export-send-to-wrap{position:relative;}
.export-modal-card .export-send-to-menu{position:absolute;z-index:20;right:0;top:calc(100% + 5px);min-width:140px;padding:5px;background:#fff;border:1px solid #d0d5dd;border-radius:7px;box-shadow:0 5px 16px rgba(0,0,0,.12);}
.export-modal-card .export-send-to-menu[hidden]{display:none!important;}
.export-modal-card .export-send-to-menu button{width:100%;text-align:left;background:#fff;color:var(--ink,#20242a);border:0;padding:8px 10px;}
.export-modal-card .export-send-to-menu button:hover{background:#f1f5f9;}
.export-action-feedback{min-height:18px;margin-top:-12px;margin-bottom:12px;text-align:right;font-size:12px;color:var(--ink,#20242a);}
/* v259 — Send to menu and Create new dialog */
.export-modal-card .export-send-to-menu{width:100%;min-width:100%;box-sizing:border-box;}
.export-modal-card .export-send-to-menu .export-send-add-new{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.export-modal-card .export-send-add-icon{width:27px;height:27px;flex:none;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #d0d5dd;border-radius:7px;color:#202733;}
.export-modal-card .export-send-add-new:hover .export-send-add-icon{background:#edf5ff;border-color:#3975d9;color:#3975d9;}
.message-new-modal .message-new-dialog{display:flex;flex-direction:column;padding:24px!important;}
.message-new-modal .message-new-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.message-new-modal .message-new-header h3{margin:0;}
.message-new-modal .message-new-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;color:#343a40;cursor:pointer;}
.message-new-modal .message-new-close:hover{background:#e5e7eb;}
.message-new-modal .message-new-types input[type="radio"]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;}
.message-new-modal .message-new-types label{display:flex;align-items:center;justify-content:center;}
.message-new-modal .message-new-name-label{display:block;width:100%;font-size:12px;line-height:18px;font-weight:400;margin:0 0 5px;}
.message-new-modal #new-document-name{display:block;width:100%;box-sizing:border-box;min-height:34px;border:1px solid #d0d5dd;border-radius:8px;background:#fff;padding:7px 10px;font:inherit;font-size:13px;}
.message-new-modal .template-save-footer{margin-top:auto;display:flex;justify-content:flex-end;padding-top:16px;}
.message-new-modal .template-save-footer [data-new-action="create"]{min-height:34px;padding:7px 15px;border-radius:8px;background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;color:#fff!important;font-size:13px;font-weight:400;cursor:pointer;}
/* v260 — font tabs and Create new modal refinements */
.custom-font-source-tabs button{font-size:13px;}
.message-new-types label{font-size:13px;}
.message-new-types label:has(input:checked){font-weight:600;}
.custom-font-source-tabs button.active{font-weight:600;}
.test-modal.message-new-modal .message-new-dialog{width:min(var(--modal-large,960px),calc(100vw - 40px))!important;max-width:var(--modal-large,960px)!important;height:min(var(--modal-large-height,680px),calc(100dvh - 40px))!important;}
.message-new-modal .message-new-close{border:0;border-radius:50%;background:#f0f2f5;color:#343a40;}
.message-new-modal .message-new-close:hover{background:#e1e5eb;}
.message-new-modal .message-new-templates{grid-template-columns:repeat(3,minmax(0,1fr));max-height:none;min-height:0;overflow-y:auto;align-content:start;}
.message-new-modal #new-message-template-picker:not([hidden]){display:flex;flex-direction:column;min-height:0;flex:1;}
.message-new-modal .message-new-template .message-new-mini{position:relative;aspect-ratio:2/1;height:auto;overflow:hidden;border:1px solid #d6dbe3;border-radius:6px;background:#fff;display:block;}
.message-new-modal .message-new-template .saved-template-capture{display:block;position:absolute;left:0;top:0;width:600px;height:1200px;border:0;transform-origin:top left;pointer-events:none;}
/* v261: Create new template picker controls */
.message-new-modal .message-new-templates{grid-template-columns:repeat(4,minmax(0,1fr));}
.message-new-modal .message-new-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.message-new-modal .message-new-picker-head p{margin:0;font-size:12px;}
.message-new-modal .message-new-picker-actions{display:flex;align-items:center;gap:3px;}
.message-new-modal .message-new-picker-actions .library-view-button{width:33px;height:33px;min-width:33px;display:inline-flex;align-items:center;justify-content:center;padding:5px;border:1px solid var(--skin-border,#cdd4df);border-radius:8px;background:#fff;color:var(--skin-ink,#202733);cursor:pointer;}
.message-new-modal .message-new-picker-actions .library-view-button.active{background:var(--skin-button-ink,#202733);border-color:var(--skin-button-ink,#202733);color:#fff;}
.message-new-modal .message-new-picker-actions .library-view-button:hover:not(.active){background:#eaf2ff;}
.message-new-modal .message-new-templates.message-new-table-view{display:flex;flex-direction:column;}
.message-new-modal .message-new-table-view .message-new-template{display:flex;align-items:center;gap:12px;width:100%;}
.message-new-modal .message-new-table-view .message-new-mini{width:92px;min-width:92px;margin:0;}
.message-new-modal .message-new-close{position:absolute!important;top:12px!important;right:12px!important;margin:0!important;width:32px;height:32px;}
.message-new-modal .message-new-close svg{stroke-width:2.6;width:18px;height:18px;}
.message-new-modal .message-new-header{padding-right:38px;}
/* v262: compact unsaved-changes confirmation and standard action buttons. */
.tab-close-modal .tab-close-dialog,
.test-modal.tab-close-modal .tab-close-dialog{
width:min(420px,calc(100vw - 40px))!important;
max-width:420px!important;
height:auto!important;
min-height:0!important;
max-height:calc(100dvh - 40px)!important;
padding:24px!important;
}
.tab-close-modal .tab-close-actions button{
min-height:36px;border:1px solid #cdd4df;border-radius:8px;
padding:9px 15px;background:#fff;color:#202733;
font-size:13px;font-weight:400;
}
.tab-close-modal .tab-close-actions button[data-switch="save"],
.tab-close-modal .tab-close-actions button[data-choice="save"]{
background:#202733!important;border-color:#202733!important;color:#fff!important;
}
.tab-close-modal .tab-close-actions button[data-switch="save"]:hover,
.tab-close-modal .tab-close-actions button[data-choice="save"]:hover{
background:#343e4d!important;border-color:#343e4d!important;
}
.message-new-modal .message-new-picker-head {margin-top:20px;}
/* v263 — Save modal */
.template-save-modal .template-save-dialog{position:relative!important;display:flex!important;flex-direction:column!important;padding:24px!important;gap:16px!important;}
.template-save-modal .template-save-dialog h3{margin:0 42px 4px 0;}
.template-save-modal .template-save-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:#f0f2f5;color:#343a40;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.template-save-modal .template-save-close:hover{background:#e1e5eb;}
.template-save-modal .template-save-close svg{width:18px;height:18px;}
.template-save-dialog label{font-size:12px;line-height:18px;font-weight:400;}
.template-save-dialog input{min-height:34px;border:1px solid #d0d5dd;border-radius:8px;padding:7px 10px;font-size:13px;}
.template-save-dialog #template-new-fields{display:flex;flex-direction:column;flex:1;}
.template-save-dialog #template-new-fields[hidden],.template-save-dialog #template-existing-fields[hidden]{display:none!important;}
.template-save-dialog #template-new-fields>button{align-self:flex-end;margin-top:auto;}
.template-save-dialog #template-existing-fields{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);flex:1;min-height:0;gap:0;}
.template-save-dialog .template-save-section{display:flex;flex-direction:column;min-height:0;padding:12px 0;}
.template-save-dialog .template-save-overwrite{border-bottom:1px solid #e5e7eb;}
.template-save-dialog #template-existing-name{font-size:14px;font-weight:700;line-height:20px;overflow-wrap:anywhere;}
.template-save-dialog .template-save-section>button{align-self:flex-end;margin-top:auto;}
.template-save-dialog .template-save-as-new .brick-save-divider{margin:0 0 12px;font-size:13px;font-weight:600;}
.template-save-dialog button[data-save="new"],.template-save-dialog button[data-save="overwrite"]{min-height:34px;padding:7px 15px;border-radius:8px;background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;color:#fff!important;font-size:13px;font-weight:400;cursor:pointer;}
/* v264 — Save modal adjustments */
.template-save-modal .template-save-dialog .template-save-close{
position:absolute!important;top:12px!important;right:12px!important;
width:32px;height:32px;padding:0;border:0!important;border-radius:50%!important;
background:#f0f2f5!important;color:#000!important;
display:flex;align-items:center;justify-content:center;
}
.template-save-modal .template-save-dialog .template-save-close:hover{background:#e1e5eb!important;}
.template-save-modal .template-save-dialog .template-save-close svg{width:18px;height:18px;stroke:#000;stroke-width:2.6;}
.template-save-dialog #template-existing-fields{grid-template-rows:minmax(0,3fr) minmax(0,7fr);}
.template-save-dialog .template-save-overwrite{border-bottom:0;}
.tab-close-dialog h3{font-size:20px;}
.template-save-dialog .template-save-as-new .brick-save-divider{font-size:20px;}
.template-save-dialog #template-existing-name{background-color:transparent;font-size:16px;font-weight:600;color:inherit;}
/* v265: Brick Save, linked-message locked section chrome, and zone protection dialog. */
.brick-save-card label{font-size:12px;line-height:18px;}
#brick-save-modal .brick-save-card input[type="text"]{width:100%;height:34px;min-height:34px;box-sizing:border-box;padding:7px 10px;border:1px solid #cbd1d8;border-radius:7px;background:#fff;color:inherit;font:inherit;font-size:13px;outline-offset:2px;}
#brick-save-modal .brick-save-card #brick-new-fields{display:flex;flex-direction:column;min-height:calc(100% - 48px);}
#brick-save-modal .brick-save-card #brick-new-fields[hidden]{display:none!important;}
#brick-save-modal .brick-save-card #brick-create-button{align-self:flex-end;margin-top:auto;}
#brick-save-modal .brick-save-card #brick-create-button,#brick-save-modal .brick-save-card #brick-overwrite-button,#brick-save-modal .brick-save-card #brick-save-as-new-button,.zone-protection-dialog button{min-height:34px;padding:7px 15px;border-radius:8px;background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;color:#fff!important;font-size:13px;font-weight:400;cursor:pointer;}
body:not(.email-preview-mode) #canvas .builder-section:not(.content-zone) > .section-rows{min-height:auto;}
/* Locked template sections are noninteractive in a linked Message. */
body.linked-message:not(.email-preview-mode) #canvas > .builder-section:not(.content-zone) > .section-head{display:none!important;}
.zone-protection-dialog{display:flex;flex-direction:column;}
.zone-protection-dialog button{align-self:flex-end;margin-top:auto;}
/* Keep the Brick Save action at the lower-right of its dialog. */
#brick-save-modal .brick-save-card{display:flex;flex-direction:column;}
#brick-save-modal .brick-save-card #brick-new-fields:not([hidden]){flex:1;}
/* Linked-message content-zone section layout. */
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section {padding:0!important;}
body.linked-message #canvas > .builder-section.content-zone > .section-rows > .builder-section > .section-head {position:static!important;}
/* v267 — Post comment dialog styling */
.comments-header{font-size:20px;}
.comments-header #comments-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#f0f2f5;color:#000;font-size:24px;font-weight:700;line-height:1;cursor:pointer;}
.comments-header #comments-close:hover{background:#e1e5eb;}
.comments-compose-actions #comments-submit{min-height:34px;padding:7px 15px;border-radius:8px;background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;color:#fff!important;font-size:13px;font-weight:400;cursor:pointer;}
/* v268 — comments close placement and compact size meter */
.comments-panel{position:relative;}
.comments-header{padding-right:38px;}
.comments-header #comments-close{position:absolute;top:12px;right:12px;font-family:Arial,Helvetica,sans-serif;font-weight:700;}
.email-size-meter{width:10px;pointer-events:auto;cursor:default;}
.email-size-meter-label{display:none!important;}
.preview-board{padding-right:10px!important;}
.preview-bottom-toolbar{padding-right:18px!important;}
.email-size-meter-tooltip{position:absolute;right:calc(100% + 9px);bottom:0;transform:translateY(50%);padding:6px 9px;background:#202733;color:#fff;border-radius:5px;font:12px/16px Arial,Helvetica,sans-serif;white-space:nowrap;box-shadow:0 3px 12px #0002;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease;z-index:2;}
.email-size-meter:hover .email-size-meter-tooltip{opacity:1;visibility:visible;}
/* v269: top editor menu arrangement and history offset. */
.preview-side-actions #undo-history-ui{right:20px!important;}
.preview-header .preview-nav-left #ai-open{display:inline-flex;align-items:center;justify-content:center;flex:0 0 33px;width:33px;height:33px;min-height:33px;padding:5px;box-sizing:border-box;border:1px solid var(--skin-border,#cdd4df);border-radius:8px;background:#fff;color:var(--skin-ink,#202733);cursor:pointer;}
.preview-header .preview-nav-left #ai-open:hover{background:var(--skin-blue-light,#eaf2ff);border-color:var(--skin-blue,#2563eb);}
.preview-header .preview-nav-left #ai-open:is(.active,[aria-pressed="true"]){background:var(--skin-button-ink,#202733);border-color:var(--skin-button-ink,#202733);color:#fff;}
body.document-template .preview-header-main,body.document-message .preview-header-main{display:block;}
body.document-template .preview-header .preview-nav,body.document-message .preview-header .preview-nav{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center;}
body.document-template .preview-nav-left,body.document-message .preview-nav-left{order:initial;flex:none;justify-content:flex-start;gap:8px;}
body.document-template .preview-nav-center,body.document-message .preview-nav-center{order:initial;justify-content:center;}
body.document-template .preview-nav-right,body.document-message .preview-nav-right{order:initial;justify-content:flex-end;margin-left:0;}
/* v270: compact width slider and matching background hex control */
.preview-header .preview-nav{padding:0!important;}
.preview-width-control{display:flex;align-items:center;gap:6px;}
.preview-width-control #template-width{width:88px;min-width:88px;height:20px;margin:0;accent-color:var(--skin-ink,#202733);cursor:pointer;}
.preview-width-control #template-width-value{min-width:26px;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;}
.preview-header .preview-color-control #template-background-hex{height:34px;min-height:34px;box-sizing:border-box;border:1px solid var(--skin-border,#cdd4df);border-radius:8px;padding:0 8px;background:#fff;color:var(--skin-ink,#202733);font-size:12px;}
/* v271: tabs, template association icon, and width units */
.canvas-scroll .template-tabs .template-tab {border:0;}
.canvas-scroll .template-tab.active {top:0;border-bottom:3px solid #555!important;border-radius:0!important;background-color:#f1f3f6!important;}
.canvas-scroll .template-tabs .template-tab {height:45px!important;min-height:45px!important;border-bottom:3px solid #fff;}
.canvas-scroll .template-tabs {padding-top:0!important;}
.document-tab-icon svg,.association-icon svg{display:block;}
.preview-width-unit{margin-left:2px;}
/* v272 — tab and preview control refinements */
.canvas-scroll .template-tabs .template-tab {height:44px!important;min-height:44px!important;}
.template-tab {gap:4px;}
.canvas-scroll .template-tabs .template-tab-actions {padding-top:4px!important;}
.preview-control {font-weight:400;}
.preview-width-control #template-width-value {min-width:auto;}
/* v273 — library list spacing */
.saved-template-list {padding-top:0;padding-right:0;}
.brick-library-list {padding-top:0;padding-right:0;}
/* v274: persistent hover accordion for the three saved libraries. */
#palette-view > .palette-top-third {flex:0 0 19%;height:19%;min-height:0;}
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library) {
flex:0 0 46px;min-height:0;box-sizing:border-box;overflow:hidden;
display:flex;flex-direction:column;padding:8px 16px;
}
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library).library-accordion-open {
flex:1 1 0;min-height:0;
}
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library) > .library-view-header {
flex:0 0 30px;min-height:30px;margin-bottom:0;
}
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library).library-accordion-open > .library-view-header {margin-bottom:10px;}
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library):not(.library-accordion-open) > :is(#brick-library-list,#saved-template-list,#saved-message-list) {display:none!important;}
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library) > :is(#brick-library-list,#saved-template-list,#saved-message-list) {
flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;
}
/* v275 — smooth saved-library accordion expansion. */
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library) {
transition:flex-grow 240ms ease, flex-basis 240ms ease;
}
@media (prefers-reduced-motion:reduce) {
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library) {transition:none;}
}
/* v276 — saved-library search control and input. */
#palette-view .library-search-wrap {flex:0 0 auto;margin:0 0 10px;}
#palette-view .library-search-wrap[hidden] {display:none!important;}
#palette-view .library-search-input {box-sizing:border-box;width:100%;height:34px;padding:6px 10px;border:1px solid var(--skin-border,#cdd4df);border-radius:6px;background:#fff;color:var(--skin-ink,#202733);font:inherit;font-size:13px;}
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library):not(.library-accordion-open) > .library-search-wrap {display:none!important;}
/* v277 — fixed-width editor, flexible preview, and reliable per-library search. */
.app {grid-template-columns:434px minmax(0,1fr)!important;}
#left-panel.palette {width:434px!important;min-width:434px!important;max-width:434px!important;flex:0 0 434px!important;}
.canvas-scroll {min-width:0;width:100%!important;}
#palette-view :is(#brick-library-list,#saved-template-list,#saved-message-list) > .library-search-hidden {display:none!important;}
/* v278 — de-emphasize collapsed saved libraries and refine canvas handles. */
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library):not(.library-accordion-open) {
opacity:.55;
}
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library) {
transition:flex-grow 240ms ease,flex-basis 240ms ease,opacity 240ms ease;
}
.builder-section.content-zone .section-head {left:0;top:0;width:100%;min-height:30px;padding-left:12px;}
.item-move-handle {left:-34px!important;width:34px;height:26px;}
.item.image-item.selected-item .item-move-handle {left:-34px!important;}
@media (prefers-reduced-motion:reduce) {
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library) {transition:none;}
}
/* v279 — saved Brick modal split and collapsed library emphasis. */
#brick-save-modal .brick-save-card #brick-existing-fields:not([hidden]) {
display:grid;grid-template-rows:minmax(0,3fr) minmax(0,7fr);
flex:1 1 auto;min-height:0;
}
#brick-save-modal .brick-save-card .brick-save-section {
display:flex;flex-direction:column;min-height:0;box-sizing:border-box;
}
#brick-save-modal .brick-save-card .brick-save-overwrite {padding-bottom:12px;}
#brick-save-modal .brick-save-card .brick-save-as-new {padding-top:12px;}
#brick-save-modal .brick-save-card #brick-existing-name {
display:block;font-size:16px;font-weight:600;color:inherit;
overflow-wrap:anywhere;
}
#brick-save-modal .brick-save-card .brick-save-section > button {
align-self:flex-end;margin-top:auto;
}
#brick-save-modal .brick-save-card .brick-save-as-new .brick-save-divider {
margin:0 0 12px;padding:0;border-top:0;font-size:20px;
}
#palette-view > :is(#brick-library,#template-library-placeholder,#message-library):not(.library-accordion-open) {
opacity:.4;
}
/* v280 — separator between saved Brick actions. */
#brick-save-modal .brick-save-card .brick-save-overwrite {border-bottom:1px solid #d9dde3;}
/* Account form validation */
.account-field-error{font-size:12px;color:#b42318;font-weight:400;line-height:1.4}
.account-field-error[hidden]{display:none}
.account-form input[aria-invalid="true"]{border-color:#b42318}
.account-password-rules{font-size:12px;color:#697586;line-height:1.45;margin:-7px 0 0}
/* v285 account modal controls */
.account-dialog{padding-top:38px}
.account-dialog-close{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border:0;border-radius:50%;background:#f0f2f5;display:grid;place-items:center;padding:0;color:#343a43;cursor:pointer}
.account-dialog-close:hover{background:#e5e8ec}
.account-password-wrap{position:relative;display:block;width:100%}
.account-form .account-password-wrap input{padding-right:43px}
.account-password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#667085;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;border-radius:5px;padding:0}
.account-password-toggle:hover{background:#f0f2f5;color:#20242a}
/* Isolated account UI preview controls (only shown by local preview JS). */
#account-local-preview[hidden]{display:none!important}
#account-local-preview{position:fixed;left:14px;bottom:14px;z-index:21000;background:#fff;border:1px solid #d6dbe4;box-shadow:0 6px 22px #0002;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;width:220px;font-size:12px;color:#273140}
#account-local-preview select,#account-local-preview button{width:100%;box-sizing:border-box;padding:8px;border:1px solid #d6dbe4;border-radius:6px;background:#fff}
#account-local-preview button{cursor:pointer;background:#273140;color:white}
#account-local-preview small{color:#697586;line-height:1.4}
.account-preview-role{font-size:12px;color:#596579}
/* v288 account member layout */
.account-member-top{border-bottom:1px solid #e6e9ef;padding-bottom:16px;margin-bottom:20px}
.account-identity{display:flex;flex-direction:column;gap:5px;margin-bottom:20px}
#account-name{font-size:16px;font-weight:700;color:#20242a;line-height:1.4}
#account-email{font-size:13px;font-weight:400;color:#4b5563;line-height:1.4}
.account-plan-row{display:flex;align-items:center;gap:12px;font-size:13px;margin-bottom:6px}
.account-plan-row strong{font-weight:650}
#account-upgrade{display:inline-block;font-size:13px;text-decoration:underline;text-underline-offset:2px}
.account-reset-action{display:flex;justify-content:flex-end;margin-top:12px}
.account-reset-action .account-link{font-size:13px}
.account-change-password{border-top:1px solid #e6e9ef;margin-top:14px;padding-top:16px;gap:12px}
.account-change-password[hidden]{display:none}
.account-reset-submit{display:flex;justify-content:flex-end}
.account-reset-submit .account-primary{padding:9px 16px}
#account-usage{display:flex;flex-direction:column;gap:16px;margin:16px 0 24px}
#account-usage .account-usage-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(60px,2fr) 80px;align-items:center;gap:16px;margin:0;font-size:12px}
.account-usage-label{white-space:nowrap}
.account-usage-count{text-align:right;font-size:12px;white-space:nowrap}
#account-usage .account-usage-track{width:100%;height:8px;background:#e9eef5;border-radius:10px;overflow:hidden}
#account-usage .account-usage-track>div{height:100%;background:var(--skin-blue,#3677e8);border-radius:10px}
.account-footer #account-signout{padding:10px 20px}
@media(max-width:520px){#account-usage .account-usage-row{grid-template-columns:minmax(115px,1fr) minmax(35px,1fr) 65px;gap:9px}}
/* v289 account member buttons and usage panel */
#account-member .account-footer #account-signout{background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;color:#fff!important;border-radius:8px;cursor:pointer}
#account-member .account-footer #account-signout:hover{background:#343e4d!important;border-color:#343e4d!important}
#account-member .account-reset-action #account-password.account-secondary{background:#fff!important;border:1px solid var(--skin-border,#d7dce3)!important;color:var(--skin-ink,#202733)!important;border-radius:8px;padding:9px 14px;font-size:13px;cursor:pointer}
#account-member .account-reset-action #account-password.account-secondary:hover{background:#f4f6f8!important}
#account-member .account-usage-panel{background:#f1f3f6;border-radius:8px;padding:18px;margin:0 0 20px}
#account-member .account-usage-panel .account-section-heading{margin:0 0 16px}
#account-member .account-usage-panel #account-usage{margin:0;gap:16px}
/* v290 account modal refinements */
#account-member .account-member-top{border-bottom:0;padding-bottom:0}
#account-member .account-footer{border-top:0;padding-top:0;margin-top:auto;justify-content:flex-end}
#account-member{display:flex;flex-direction:column;min-height:420px}
#account-member[hidden]{display:none}
#account-member #account-usage .account-usage-track{background:#ccc}
/* v291: footer anchored to modal bottom, not content bottom */
#account-modal .account-dialog{display:flex;flex-direction:column;min-height:min(570px,calc(100vh - 40px));box-sizing:border-box}
#account-modal #account-member:not([hidden]){display:flex;flex:1 1 auto;min-height:0;flex-direction:column}
#account-modal #account-member .account-footer{margin-top:auto;align-self:stretch;display:flex;justify-content:flex-end;padding-top:20px;padding-bottom:0}
#account-modal #account-member .account-usage-panel[hidden]{display:none!important}
/* v292 editable account identity */
#account-member .account-profile-form{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
#account-member .account-profile-form label{font-size:12px;line-height:18px;font-weight:400;color:#4b5563}
#account-member .account-profile-form input{box-sizing:border-box;width:100%;height:36px;padding:7px 10px;border:1px solid #cbd1d9;border-radius:5px;background:#fff;font-size:13px;font-weight:400;color:#20242a}
#account-member .account-profile-form label:not(:first-child){margin-top:8px}
#account-member .account-profile-actions{display:flex;justify-content:flex-end;margin-top:6px}
/* v293 plan-first account layout and billing panel */
#account-member .account-plan-row{margin-bottom:4px}
#account-member #account-upgrade{display:inline-block;margin-bottom:20px}
#account-member #account-upgrade[hidden]{display:none}
#account-member .account-profile-actions .account-primary{padding:9px 16px;background:var(--skin-button-ink,#202733)!important;border-color:var(--skin-button-ink,#202733)!important;color:#fff!important}
#account-member .account-profile-actions .account-primary:disabled{opacity:.4!important;cursor:not-allowed!important}
#account-member .account-billing-panel{background:#f1f3f6;border-radius:8px;padding:18px;margin:0 0 20px}
#account-member .account-billing-panel[hidden]{display:none!important}
#account-member .account-billing-panel .account-section-heading{margin:0 0 16px}
#account-member .account-billing-history{font-size:13px;color:#697586}
#account-member .account-billing-actions{display:flex;justify-content:flex-end;margin-top:20px}
/* v294: team and billing panels */
#account-member #account-team{background:#f1f3f6;border-radius:8px;padding:18px;margin:0 0 20px}
#account-member #account-team[hidden]{display:none!important}
#account-member .account-team-heading{margin:0 0 14px;padding:0;border:0}
#account-member .account-team-heading h3{margin:0}
.account-team-controls{display:flex;align-items:center;gap:5px}
#account-member .account-team-controls button{width:30px;height:30px;padding:0;border:1px solid #cbd1db;border-radius:6px;background:#fff;color:#202733;font-size:18px;line-height:1;cursor:pointer}
#account-member .account-team-controls button:hover{border-color:var(--skin-blue);color:var(--skin-blue)}
.account-team-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 105px;gap:12px;align-items:center;padding:9px 0;border-top:1px solid #dce1e8;font-size:13px}
.account-team-name,.account-team-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-team-row select{width:100%;padding:6px;border:1px solid #cbd1db;border-radius:5px;background:white;font-size:12px}
#account-member .account-billing-history{max-height:190px;overflow-y:auto;overscroll-behavior:contain}
.account-billing-row{display:grid;grid-template-columns:minmax(0,1fr) 95px 100px;gap:12px;padding:10px 0;border-bottom:1px solid #dce1e8;font-size:13px;color:#202733}
.account-billing-row span:nth-child(2),.account-billing-row span:nth-child(3){text-align:right}
@media(max-width:540px){.account-team-row{grid-template-columns:minmax(0,1fr) 90px}.account-team-email{grid-column:1;grid-row:2}.account-team-row select{grid-column:2;grid-row:1/3}.account-billing-row{grid-template-columns:minmax(0,1fr) 75px 75px;gap:6px}}
/* v295: sub-account controls mirror library sorting buttons */
#account-member .account-team-controls button{width:33px;height:33px;min-width:33px;box-sizing:border-box;padding:5px;border:1px solid var(--skin-border,#cdd4df);border-radius:8px;background:#fff;color:var(--skin-ink,#202733);display:inline-flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}
#account-member .account-team-controls button svg{width:16px;height:16px;display:block}
#account-member .account-team-controls button:hover:not(.active){border-color:var(--skin-blue,#73a9ed);background:var(--skin-blue-light,#eef6ff);color:var(--skin-blue-dark,#2765ab)}
#account-member .account-team-controls button.active{background:var(--skin-button-ink,#202733);border-color:var(--skin-button-ink,#202733);color:#fff}
#account-member .account-team-footer{display:flex;justify-content:flex-end;margin-top:18px}
#account-member .account-team-footer .account-primary{background:var(--skin-button-ink,#202733)!important;border-color:var(--skin-button-ink,#202733)!important;color:#fff!important;padding:9px 20px}
#account-member .account-team-footer .account-primary:disabled{opacity:.4!important;cursor:not-allowed!important}
/* v296 account refinements */
#account-member #account-upgrade{margin-bottom:0}
#account-member .account-profile-form{margin-top:20px}
.account-billing-row{border-bottom:0;border-top:1px solid #dce1e8}
/* v297: independent Name and Email sorting inside column headings */
#account-member .account-team-column-headings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 105px;gap:12px;align-items:center;margin-top:2px;padding:0 0 7px;font-size:12px;line-height:18px;font-weight:400}
#account-member .account-team-column-title{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0}
#account-member .account-team-column-sort{display:flex;gap:3px;flex-shrink:0}
#account-member .account-team-column-sort button{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;padding:4px;border:1px solid var(--skin-border,#cdd4df);border-radius:6px;background:white;color:var(--skin-ink,#202733);cursor:pointer}
#account-member .account-team-column-sort button svg{width:14px;height:14px;display:block}
#account-member .account-team-column-sort button:hover:not(.active){border-color:var(--skin-blue,#73a9ed);background:var(--skin-blue-light,#eef6ff);color:var(--skin-blue-dark,#2765ab)}
#account-member .account-team-column-sort button.active{background:var(--skin-button-ink,#202733);border-color:var(--skin-button-ink,#202733);color:white}
@media(max-width:540px){#account-member .account-team-column-headings{grid-template-columns:minmax(0,1fr) 90px;gap:8px}#account-member .account-team-column-title:nth-child(2){grid-column:1;grid-row:2}#account-member .account-team-role-heading{grid-column:2;grid-row:1/3;text-align:right}}
/* v298: password controls are a permanent final panel */
#account-modal #account-member .account-footer{padding-bottom:24px}
#account-member .account-password-panel{background:#f1f3f6;border-radius:8px;padding:18px;margin:0 0 20px}
#account-member .account-password-panel .account-section-heading{margin:0 0 16px}
#account-member .account-password-panel .account-change-password{border-top:0;margin-top:0;padding-top:0}
#account-member .account-password-panel .account-reset-submit{display:flex;justify-content:flex-end}
#account-member .account-team-column-headings{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 105px}
/* v299: disabled reset password button */
#account-modal .account-reset-submit .account-primary:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
/* v300: paid owner ESP configuration UI */
#account-member .account-esp-panel{background:#f1f3f6;border-radius:8px;padding:18px;margin:0 0 20px}
#account-member .account-esp-panel[hidden],#account-member #account-esp-credentials[hidden]{display:none!important}
#account-member .account-esp-panel .account-section-heading{margin:0 0 16px}
#account-member .account-esp-panel label{display:block;font-size:12px;line-height:18px;font-weight:400;margin:0 0 6px}
#account-member .account-esp-panel select,#account-member .account-esp-panel input{width:100%;box-sizing:border-box;margin:0 0 14px}
#account-member .account-esp-hint{font-size:12px;line-height:18px;color:#697586;margin:0 0 16px}
#account-member .account-esp-actions{display:flex;justify-content:flex-end}
#account-member .account-esp-actions button:disabled{opacity:.4;cursor:not-allowed}
/* v301 ESP setup: match account form inputs and primary buttons */
#account-member .account-esp-panel select,#account-member .account-esp-panel input{display:block;width:100%;height:36px;box-sizing:border-box;border:1px solid #d6dbe4;border-radius:7px;background:#fff;padding:7px 11px;font-size:13px;color:#20242a;outline:none}
#account-member .account-esp-panel select:focus,#account-member .account-esp-panel input:focus{border-color:var(--skin-blue,#2375d6)}
#account-member .account-esp-panel .account-primary{background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;color:white!important;padding:9px 20px;font-weight:650}
#account-member .account-esp-panel .account-primary:disabled{opacity:.4!important;cursor:not-allowed}
#account-member .account-esp-connections{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
#account-member .account-esp-connections:empty{display:none}
#account-member .account-esp-connected-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #dce1e8;border-radius:7px;padding:11px}
#account-member .account-esp-connected-info{display:flex;flex-direction:column;gap:4px;font-size:13px}
#account-member .account-esp-connected-state{font-size:12px;color:#42765b}
#account-member .account-esp-disconnect{background:#fff;border:1px solid #cbd1db;color:#202733;padding:7px 10px;font-size:12px;cursor:pointer}
#account-member .account-esp-disconnect:hover{border-color:var(--skin-blue,#2375d6);background:#eaf3ff}
#account-member .account-esp-status{font-size:12px;line-height:18px;color:#697586;margin:10px 0 0}
#account-member .account-esp-status:empty{display:none}
/* v302 ESP connection and export UI */
#account-member .account-esp-connected-row{background-color:transparent;}
.export-modal-card .export-send-empty{padding:8px 10px;color:#667085;font-size:13px;}
/* v303: Named ESP connections */
#account-member .account-esp-add-row label{display:block;font-size:12px;line-height:18px;font-weight:400;margin-bottom:6px}
#account-member .account-esp-provider-detail{font-size:12px;color:#697586}
/* v304: single-screen authentication with plan selector */
#account-guest.account-auth-columns{display:block;max-width:560px;margin:0 auto}
#account-guest .account-form:first-of-type,#account-guest .account-form:last-of-type{border:0;padding:0}
#account-guest .account-form[hidden]{display:none!important}
.account-auth-tabs{display:flex;gap:4px;padding:4px;background:#f1f3f6;border-radius:8px;margin:0 36px 22px 0}
.account-auth-tab{flex:1;border:0;background:transparent;border-radius:6px;padding:10px;cursor:pointer;color:#4b5563;font-weight:600}
.account-auth-tab.is-active{background:#fff;color:#20242a;box-shadow:0 1px 4px #00000015}
.account-plan-chooser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.account-plan-choice{border:1px solid #d6dbe4;border-radius:8px;padding:12px 9px;cursor:pointer;display:flex!important;flex-direction:column!important;gap:7px!important;min-width:0}
.account-plan-choice:has(input:checked){border-color:#2769c6;background:#eef5ff;box-shadow:inset 0 0 0 1px #2769c6}
.account-plan-choice input{accent-color:#2769c6;align-self:flex-start}
.account-plan-choice strong{font-size:14px;color:#20242a}
.account-plan-choice small{font-size:11px;font-weight:400;color:#5f6977;line-height:1.4}
.account-payment-preview{padding:16px;border-radius:8px;background:#f1f3f6;display:flex;flex-direction:column;gap:10px}
.account-payment-preview[hidden]{display:none!important}
.account-payment-preview p{font-size:12px;color:#697586;margin:0}
.account-payment-preview input:disabled{background:#fff;opacity:.65}
.account-payment-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.account-payment-preview small{font-size:11px;color:#697586}
@media(max-width:520px){.account-plan-chooser{grid-template-columns:1fr}.account-plan-choice{gap:3px!important}}
/* v305: Auth tabs match Custom Font source buttons */
#account-guest.account-auth-columns{width:100%;}
.account-form label,.account-profile-grid label{font-weight:400;}
.account-auth-tabs{margin:0 auto 20px;max-width:440px;width:100%;display:flex;gap:6px;padding:0;background:transparent;border-radius:0;}
.account-auth-tab{flex:1;border:1px solid #cbd2dc;background:#fff;border-radius:6px;padding:8px 6px;color:#20242a;font-size:13px;font-weight:400;box-shadow:none;}
.account-auth-tab.is-active{border-color:#2563eb;background:#eff6ff;color:#20242a;font-weight:600;box-shadow:none;}
.account-plan-choice input[type="radio"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.account-plan-choice{position:relative;}
.account-plan-choice:focus-within{outline:2px solid #2563eb;outline-offset:2px;}
/* v306 permission preview */
#brick-library.permission-disabled {opacity:.4;pointer-events:none;}
#brick-library .permission-bricks-message {font-size:13px;line-height:1.4;margin:12px 0;color:#555;}
body[data-builder-permission-preview="viewer"] #undo-history-ui {display:none!important;}
body[data-builder-permission-preview="viewer"] #options-view {visibility:hidden;pointer-events:none;}
/* v307 — Viewer presentation: inspect and comment, never edit. */
body[data-builder-permission-preview="viewer"] #brick-library.permission-disabled{pointer-events:auto!important;opacity:1!important;}
body[data-builder-permission-preview="viewer"] #brick-library-list{opacity:.4;pointer-events:none!important;}
body[data-builder-permission-preview="viewer"] #options-view{display:none!important;}
body[data-builder-permission-preview="viewer"] #palette-view{display:flex!important;flex-direction:column!important;visibility:visible!important;}
body[data-builder-permission-preview="viewer"] .item-move-handle,body[data-builder-permission-preview="viewer"] .section-handle,body[data-builder-permission-preview="viewer"] .row-handle,body[data-builder-permission-preview="viewer"] .col-handle,body[data-builder-permission-preview="viewer"] #rich-text-toolbar{display:none!important;}
body[data-builder-permission-preview="viewer"] .item-actions button:not([class*=comment]),body[data-builder-permission-preview="viewer"] .row-actions button:not([class*=comment]),body[data-builder-permission-preview="viewer"] .section-actions button:not([class*=comment]){display:none!important;}
body[data-builder-permission-preview="viewer"] .item [contenteditable],body[data-builder-permission-preview="viewer"] .item .rich-text,body[data-builder-permission-preview="viewer"] .item .text-content{cursor:default!important;caret-color:transparent!important;user-select:none!important;}
body[data-builder-permission-preview="viewer"] #new-template-button,body[data-builder-permission-preview="viewer"] #save-template-button,body[data-builder-permission-preview="viewer"] #test-open,body[data-builder-permission-preview="viewer"] #export-open,body[data-builder-permission-preview="viewer"] #ai-open,body[data-builder-permission-preview="viewer"] .preview-width-control,body[data-builder-permission-preview="viewer"] .preview-color-control{opacity:.35!important;cursor:not-allowed!important;}
body[data-builder-permission-preview="viewer"] #template-width,body[data-builder-permission-preview="viewer"] #template-background,body[data-builder-permission-preview="viewer"] #template-background-hex{pointer-events:none!important;}
/* v309: signed-in plan selection and restricted export actions */
#account-guest.account-changing-plan .account-auth-tabs{display:none!important;}
#account-guest.account-changing-plan #account-signup-form > h3,#account-guest.account-changing-plan #account-signup-form > label:not(.account-plan-choice),#account-guest.account-changing-plan #account-signup-form > .account-terms,#account-guest.account-changing-plan #account-password-rules,#account-guest.account-changing-plan #account-confirm-error{display:none!important;}
#account-guest.account-changing-plan #account-signup-form > button[type="submit"]{display:none!important;}
#account-guest.account-changing-plan #account-signup-form::after{content:"Plan changes will be enabled when billing is connected.";display:block;font-size:13px;color:#667085;margin-top:14px;}
#export-download:disabled,#export-send-to:disabled{opacity:.35!important;cursor:not-allowed!important;pointer-events:none!important;}
/* v310 — Change-plan heading and non-selectable current tier. */
.account-change-plan-heading{display:none;margin:0 auto 20px;max-width:440px;font-size:20px;font-weight:650;text-align:left;}
#account-guest.account-changing-plan .account-change-plan-heading{display:block;}
#account-guest.account-changing-plan .account-plan-choice.account-plan-unavailable{opacity:.4;cursor:not-allowed;}
#account-guest.account-changing-plan .account-plan-choice.account-plan-unavailable input{pointer-events:none;}
/* v311: plan comparison feature lists */
.account-plan-choice{gap:10px!important;align-self:stretch;}
.account-plan-choice>strong{font-size:16px;}
.account-plan-features{display:flex;flex-direction:column;gap:6px;}
.account-plan-feature{display:block;font-size:11px;line-height:1.35;color:#4c5665;padding-left:13px;position:relative;}
.account-plan-feature::before{content:"✓";position:absolute;left:0;color:#2769c6;font-weight:700;}
/* v312 subaccount accordion and invite modal */
#account-member .account-team-row.account-team-accordion{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 78px;gap:10px;align-items:start}
.account-team-main{display:flex;flex-direction:column;gap:4px;min-width:0}.account-team-role{display:flex;flex-direction:column;gap:5px;min-width:0}.account-team-role select{max-width:150px}.account-team-status{font-size:12px;color:#555}.account-team-role a,.account-team-details a{font-size:12px;color:var(--skin-blue-dark,#2765ab);text-decoration:underline}.account-team-role-prompt{font-size:12px;line-height:1.5}.account-team-row-actions{display:flex;gap:5px;justify-content:flex-end}.account-team-icon{width:33px;height:33px;flex-shrink:0;border:1px solid #cbd1db;background:white;border-radius:8px;color:#202733;cursor:pointer;display:flex;align-items:center;justify-content:center}.account-team-icon svg{width:16px;height:16px}.account-team-icon:hover{border-color:var(--skin-blue);background:#eef6ff}.account-team-icon.expanded svg{transform:rotate(180deg)}.account-team-details{grid-column:1/-1;padding:12px 0 6px;border-top:1px solid #dce1e8}.account-team-details[hidden]{display:none}.account-team-details strong{font-size:13px}.account-team-details p{font-size:12px;margin:9px 0 0}.account-seat-description{background:#f1f3f6;padding:12px;border-radius:8px;font-size:13px;line-height:1.5}.account-seat-description strong{display:block;margin-bottom:5px}.account-seat-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}#account-seat h3,#account-resend h3,#account-activate h3{margin:0 0 18px}#account-seat,#account-resend,#account-activate{padding-top:6px}#account-team-save{display:none!important}
@media(max-width:540px){#account-member .account-team-row.account-team-accordion{grid-template-columns:minmax(0,1fr) 78px}.account-team-role{grid-column:1}.account-team-row-actions{grid-column:2;grid-row:1/3}}
/* v313 subaccount row: role on first line, action copy on second line, billing accordion below */
#account-member .account-team-row.account-team-accordion{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 78px;align-items:start}
.account-team-role-label{font-size:13px;line-height:20px}
.account-team-change{grid-column:1/-1;grid-row:2;font-size:12px;line-height:1.5}
.account-team-change a{color:var(--skin-blue-dark,#2765ab);text-decoration:underline}
.account-team-details{grid-row:3}
@media(max-width:540px){.account-team-change{grid-column:1/-1;grid-row:3}.account-team-details{grid-row:4}.account-team-row-actions{grid-column:2;grid-row:1/3}}
/* v314: restore distinct sortable Name and Email columns. */
#account-member .account-team-row.account-team-accordion{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 72px 78px;column-gap:10px;align-items:start}
#account-member .account-team-column-headings{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 72px 78px;column-gap:10px}
.account-team-name-column,.account-team-email-column{min-width:0;padding-top:7px}
.account-team-role{padding-top:7px}
.account-team-change{grid-column:1/-1;grid-row:2}
.account-team-details{grid-column:1/-1;grid-row:3}
@media(max-width:540px){#account-member .account-team-row.account-team-accordion{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 56px 72px;gap:5px}#account-member .account-team-column-headings{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 56px 72px;gap:5px}.account-team-row-actions{grid-column:4;grid-row:1}.account-team-role{grid-column:3;grid-row:1}.account-team-change{grid-row:2}.account-team-details{grid-row:3}}
/* v315: Subaccount billing accordion styling */
.account-team-details{padding:12px;border:1px solid #dce1e8;border-radius:7px;background-color:#f8f9fa;}
/* v317: Change-plan actions are independent of sign-up fields. */
.account-changing-plan #account-signup-form > h3:not(.account-change-plan-heading),
.account-changing-plan #account-signup-form > label,
.account-changing-plan #account-signup-form > .account-terms,
.account-changing-plan #account-signup-form > .account-hint,
.account-changing-plan #account-signup-form > button[type="submit"],
.account-changing-plan #account-signup-form > #account-confirm-error {display:none!important;}
#account-plan-change-actions:not([hidden]){display:flex;justify-content:flex-end;margin-top:18px;}
/* v318: Change-plan actions follow payment fields, use ink primary style. */
#account-plan-change-actions .account-primary{background:var(--skin-button-ink,#202733)!important;border-color:var(--skin-button-ink,#202733)!important;color:#fff!important;padding:9px 20px;}
#account-plan-change-actions .account-primary:hover{background:#343e4d!important;border-color:#343e4d!important;}
#account-downgrade-title{font-size:14px;}
#account-downgrade-message{font-size:13px;line-height:18px;}
/* v319: Account plan typography */
#account-expert-downgrade-warning > strong {font-size:14px;}
#account-expert-downgrade-warning > p {font-size:13px;line-height:18px;}
.account-plan-row {font-size:20px;}
/* v320: Signup plan heading prices */
.account-plan-choice-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.account-plan-price{font-size:14px;font-weight:600;color:#20242a;white-space:nowrap}
/* v321: Generate preview (small modal; real URL supplied only by backend). */
#generate-preview-modal .generate-preview-card{width:min(var(--modal-small,720px),calc(100vw - 40px))!important;max-width:var(--modal-small,720px)!important;min-height:0!important;height:auto!important;max-height:calc(100dvh - 40px);border-radius:var(--skin-radius,8px);box-sizing:border-box;}
.generate-preview-url{border:1px solid var(--skin-border,#cdd4df);border-radius:6px;padding:12px;background:#f8f9fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;line-height:18px;}
.generate-preview-notice{font-size:13px;line-height:18px;color:#626b78;margin:12px 0 20px;}
.generate-preview-actions{display:flex;justify-content:flex-end;}
.generate-preview-actions button{border:1px solid var(--skin-ink,#202733);border-radius:6px;padding:9px 20px;background:var(--skin-ink,#202733);color:white;cursor:pointer;}
.generate-preview-actions button:disabled{cursor:default;opacity:.5;}
/* Preview link modal matches the standard login/signup modal dimensions. */
#generate-preview-modal .generate-preview-card{height:min(var(--modal-small-height,560px),calc(100dvh - 40px))!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;}
/* v322: saved-content metadata, search modes, document tags and information */
.library-search-modes{display:flex;flex-wrap:wrap;gap:8px 12px;margin:8px 0 3px;font-size:11px}.library-search-modes label{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;cursor:pointer}.library-search-modes input{margin:0;accent-color:var(--skin-ink,#202733)}
.saved-template-name,.brick-card-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.saved-content-meta{min-width:0;font-size:11px;line-height:16px;color:#66717e;margin:2px 0 6px;overflow:hidden}.saved-content-tags{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.saved-content-dates{display:flex;flex-direction:column;white-space:nowrap}.library-table-view .saved-content-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}.library-table-view .saved-content-tags{flex:1;min-width:0}.library-table-view .saved-content-dates{flex-shrink:0}
#message-template-association{display:flex;align-items:center;gap:10px;min-height:34px;position:relative}#message-template-association[hidden]{display:none!important}.document-bar-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.document-info-toggle{border:0;background:none;cursor:pointer;color:#53667c;padding:2px;display:flex;align-items:center}.document-tags-link{background:none;border:0;color:#2864ad;cursor:pointer;font-size:12px;padding:3px 5px}.document-info-dropdown{position:absolute;z-index:80;left:12px;top:calc(100% + 3px);padding:12px 16px;background:white;border:1px solid #dce1e8;border-radius:7px;box-shadow:0 6px 18px #0002;min-width:200px;font-size:12px;line-height:20px}.document-info-dropdown[hidden]{display:none}.document-info-edited{margin-top:9px}
.tags-document-card{width:min(720px,calc(100vw - 40px))!important;height:min(560px,calc(100dvh - 40px))!important;box-sizing:border-box;overflow-y:auto}.tags-input-row{display:flex;flex-direction:column;gap:8px;margin:20px 0}.tags-input-row input{height:36px;padding:8px 10px;border:1px solid #dce1e8;border-radius:6px}.tags-input-row button{align-self:flex-end;background:var(--skin-ink,#202733);color:white;border:0;border-radius:6px;padding:9px 22px;cursor:pointer}.tags-list-header,.document-tag-item{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1e5e9;padding:9px 4px;font-size:13px}.tags-list-header{font-weight:600}.tags-list-header button,.document-tag-item button{border:1px solid #dce1e8;background:white;border-radius:5px;cursor:pointer;padding:5px;color:#202733}.tags-list-header button{margin-left:4px}.tags-empty{font-size:13px;color:#66717e;padding:12px 4px}
#generate-preview-modal .generate-preview-card{display:flex;flex-direction:column}#generate-preview-modal .generate-preview-actions{margin-top:auto;padding-top:18px}
/* v322.1: searchable name/tags, independent sort field, and compact table metadata. */
.library-sort-row{display:flex;align-items:center;gap:8px;margin:8px 0 12px;min-width:0;font-size:11px}
.library-sort-label{white-space:nowrap;color:#586273}
.library-sort-choices{display:flex;gap:2px;min-width:0;flex:1;justify-content:flex-end}
.library-sort-choices button{font:inherit;border:0;border-radius:4px;background:transparent;color:#202733;padding:5px 6px;cursor:pointer;white-space:nowrap}
.library-sort-choices button.active{background:var(--skin-ink,#202733);color:#fff}
.library-sort-choices button:not(.active):hover{background:#eaf2ff}
#palette-view .library-table-view>.brick-card,#palette-view .library-table-view>.saved-template-card{grid-template-columns:48px minmax(0,1fr) 91px 22px!important;column-gap:5px!important;row-gap:1px!important;min-width:0!important;overflow:hidden!important}
#palette-view .library-table-view .brick-thumb,#palette-view .library-table-view .saved-template-thumb{grid-column:1!important;grid-row:1 / span 2!important;width:48px!important;height:35px!important;min-width:0!important}
#palette-view .library-table-view .brick-card-name,#palette-view .library-table-view .saved-template-name{grid-column:2!important;grid-row:1!important;min-width:0!important;width:100%!important;max-width:100%!important}
#palette-view .library-table-view .saved-content-meta{display:contents!important}
#palette-view .library-table-view .saved-content-tags{grid-column:2!important;grid-row:2!important;min-width:0!important;width:100%!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
#palette-view .library-table-view .saved-content-dates{grid-column:3!important;grid-row:1 / span 2!important;min-width:0!important;font-size:10px!important;line-height:15px!important;overflow:hidden!important}
#palette-view .library-table-view .brick-library-delete,#palette-view .library-table-view .saved-template-delete{grid-column:4!important;grid-row:1 / span 2!important}
/* v322.2 requested library adjustments */
#palette-view .library-table-view .saved-template-card .saved-template-delete{position:absolute!important;right:0;}
#palette-view .library-search-wrap{margin-bottom:0;}
/* v322.3: saved Brick table action alignment and tag-modal sort controls. */
#palette-view .library-table-view .brick-card .brick-library-delete{position:absolute!important;right:0;}
.tags-document-card .tags-list-header button{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border:1px solid #d1d5db;background:#fff;color:#202733;border-radius:5px;transition:background-color .15s,border-color .15s,color .15s;}
.tags-document-card .tags-list-header button:hover:not(.active){border-color:#2d79d6;background:#eaf3ff;}
.tags-document-card .tags-list-header button.active{background:var(--skin-ink,#202733);color:#fff;border-color:var(--skin-ink,#202733);}
/* v322.4: match library sort controls exactly, without hover animation. */
.tags-document-card .tags-list-header button{width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important;box-sizing:border-box!important;padding:5px!important;border:1px solid var(--skin-border,#cdd4df)!important;border-radius:8px!important;background:#fff!important;color:var(--skin-ink,#202733)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;transition:none!important;}
.tags-document-card .tags-list-header button:hover:not(.active){background:#eaf2ff!important;border-color:#a9cfff!important;color:#202733!important;}
.tags-document-card .tags-list-header button.active{background:#202733!important;border-color:#202733!important;color:#fff!important;}
.tags-document-card .tags-list-header button svg{width:16px;height:16px;display:block;}
/* Size meter stays inside the preview board's left edge, clear of its right scrollbar. */
.email-size-meter{border-left:0!important;border-right:1px solid #d8dde5!important;}
.email-size-meter-tooltip{right:auto!important;left:calc(100% + 9px)!important;}
/* v322.5 — reserve the meter gutter on the left, not the right. */
.preview-board{padding-left:10px!important;padding-right:0!important;}
.preview-bottom-toolbar{padding-left:18px!important;padding-right:0!important;}
.preview-side-actions #undo-history-ui{right:12px!important;}
/* v323 — saved Brick management */
#palette-view .brick-card .brick-manage-edit{display:none;position:absolute;right:31px;top:3px;width:26px;height:26px;align-items:center;justify-content:center;padding:3px;border:1px solid #cdd4df;border-radius:5px;background:#fff;color:#202733;cursor:pointer;z-index:4}
#palette-view .brick-card:hover .brick-manage-edit{display:flex}
#palette-view .brick-card .brick-manage-edit:hover{border-color:#a9cfff;background:#eaf2ff}
#palette-view .library-table-view .brick-card .brick-manage-edit{display:flex!important;top:50%;transform:translateY(-50%);right:26px}
#palette-view .library-table-view .brick-card .brick-library-delete{right:0!important}
.brick-management-card{width:min(720px,calc(100vw - 40px))!important;height:min(560px,calc(100dvh - 40px))!important;overflow-y:auto;box-sizing:border-box}
.brick-management-title{font-size:20px!important;font-weight:700!important;overflow-wrap:anywhere;margin:0 32px 7px 0!important}
.brick-management-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:#667085;margin-bottom:18px}
.brick-management-section{background:#f5f6f8;border:1px solid #e1e5eb;border-radius:7px;padding:12px;margin:12px 0}
.brick-management-section-heading{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-bottom:8px}
.brick-management-section button,.brick-management-comments button{cursor:pointer}
.brick-manage-plus,.brick-manage-tag-sort button,.brick-manage-location-head button{width:33px;height:33px;border:1px solid #cdd4df;border-radius:8px;background:#fff;color:#202733;display:inline-flex;align-items:center;justify-content:center;transition:none!important}
.brick-manage-plus:hover:not(.active),.brick-manage-tag-sort button:hover:not(.active),.brick-manage-location-head button:hover:not(.active){background:#eaf2ff;border-color:#a9cfff}
.brick-manage-plus.active,.brick-manage-tag-sort button.active,.brick-manage-location-head button.active{background:#202733;color:#fff;border-color:#202733}
.brick-manage-entry{margin:8px 0;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.brick-manage-entry[hidden]{display:none}
.brick-manage-entry input{flex:1;min-width:130px;height:34px;padding:6px 9px;border:1px solid #cdd4df;border-radius:5px}
.brick-manage-add,.brick-manage-comments-open{background:#202733;color:white;border:0;border-radius:5px;padding:8px 16px}
.brick-manage-list-header,.brick-manage-tag,.brick-manage-location-head,.brick-manage-location{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 3px;border-bottom:1px solid #e1e5eb;font-size:13px}
.brick-manage-list-header,.brick-manage-location-head{font-weight:600}
.brick-manage-tag-sort,.brick-manage-location-head span{display:flex;gap:4px}
.brick-manage-tag button{border:1px solid #cdd4df;background:white;border-radius:5px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.brick-manage-tag button:hover{background:#eaf2ff;border-color:#a9cfff}
.brick-manage-location-head>div,.brick-manage-location>span{min-width:0;flex:1;display:flex;align-items:center;gap:5px}
.brick-manage-location-head>div:last-child,.brick-manage-location>span:last-child{flex:0 0 145px}
.brick-manage-location>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.brick-manage-empty{padding:12px 4px;font-size:12px;color:#667085}
.brick-management-comments{background:white;border:1px solid #dce1e8;border-radius:7px;padding:12px;margin-top:12px;font-size:14px}
.brick-management-comment-help{font-size:12px;color:#667085;margin:8px 0 12px}
/* v323.1 Brick management refinements */
#palette-view .library-table-view .brick-card .brick-manage-edit{width:24px!important;height:24px!important}
.brick-management-section{border:0;background:#f1f3f6}
.brick-manage-location-head>div{justify-content:space-between}
.brick-manage-location-head>div>[data-location-sort]{margin-left:auto;justify-content:flex-end}
.brick-management-comments{background:#f1f3f6;border:0}
.brick-management-comments-inline .comments-panel{position:static!important;transform:none!important;width:100%!important;max-width:none!important;min-height:0!important;max-height:none!important;box-shadow:none!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important}
.brick-management-comments-inline .comments-header{display:none!important}
.brick-management-comments-inline #comments-thread{max-height:260px;overflow-y:auto}
.brick-management-comments-inline #comments-entry{width:100%;box-sizing:border-box}
/* v323.2 — Brick comment surface, always-visible tag input, shared tag chooser */
.brick-management-comments{background-color:#fff!important;border:1px solid #dce1e8!important}
.brick-manage-entry{display:flex!important;flex-direction:column;align-items:stretch;gap:8px}
.brick-manage-add-row{display:flex;justify-content:flex-end}
.brick-manage-entry .tag-picker-field,.tags-input-row .tag-picker-field{position:relative;width:100%;display:flex;align-items:center;min-width:0}
.brick-manage-entry .tag-picker-field input,.tags-input-row .tag-picker-field input{width:100%;min-width:0;box-sizing:border-box;padding-right:42px;flex:1}
.tag-picker-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:36px!important;height:auto!important;padding:0!important;border:0!important;border-left:1px solid #dce1e8!important;border-radius:0 5px 5px 0!important;background:#fff!important;color:#202733!important;font-size:21px!important;line-height:1!important;cursor:pointer}
.tag-picker-toggle:hover{background:#eaf2ff!important;color:#202733!important}
.tag-picker-menu{position:absolute;z-index:200;top:calc(100% + 3px);left:0;right:0;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #dce1e8;border-radius:6px;box-shadow:0 5px 16px #0002;padding:4px}
.tag-picker-menu[hidden]{display:none!important}
.tag-picker-option{display:block!important;width:100%!important;text-align:left!important;background:#fff!important;border:0!important;border-radius:4px!important;color:#202733!important;font-size:13px!important;font-weight:400!important;padding:8px 10px!important;cursor:pointer}
.tag-picker-option:hover{background:#eaf2ff!important}
.tag-picker-empty{padding:10px;font-size:12px;color:#667085}
/* v323.3: table layout, shared account-style tag caret and Brick comments. */
#palette-view .library-table-view .brick-card .brick-manage-edit{top:8px!important;transform:none!important;}
#palette-view .library-table-view>.brick-card,#palette-view .library-table-view>.saved-template-card{grid-template-columns:48px minmax(0,1fr) 91px 50px!important;}
.brick-management-comments{background-color:#fff!important;border:1px solid #dce1e8!important;}
.tag-picker-toggle svg{width:16px;height:16px;display:block;margin:auto;}
/* v323.4 requested refinements */
#palette-view .brick-card .brick-manage-edit{display:flex!important;}
.preview-board{padding-bottom:0!important;}
.tag-picker-toggle{height:34px!important;}
.generate-preview-url-row{display:flex;align-items:stretch;border:1px solid var(--skin-border,#cdd4df);border-radius:6px;background:#f8f9fa;min-width:0;}
.generate-preview-url-row .generate-preview-url{flex:1;min-width:0;border:0!important;background:transparent!important;border-radius:6px 0 0 6px!important;}
.generate-preview-copy-icon{width:40px;flex:none;border:0;border-left:1px solid #dce1e8;background:transparent;color:#202733;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.generate-preview-copy-icon:hover:not(:disabled){background:#eaf2ff;}
.generate-preview-copy-icon:disabled{opacity:.45;cursor:default;}
.document-template-label{font-size:inherit;color:inherit;}
/* v323.5: show the template identification bar in template mode even when
legacy message-only logic applies the hidden attribute. */
body.document-template #message-template-association {display:flex!important;}
body.document-template #message-template-association .document-template-label {display:inline!important;}
#palette-view .brick-card .brick-manage-edit {width:24px;height:24px;}
/* v323.7: Save-before-tags guidance */
.tags-save-first-note{margin-top:20px;font-size:13px;color:#66717e;}
.tags-document-card .tags-input-row[hidden],.tags-document-card .tags-list-header[hidden],.tags-document-card .document-tags-list[hidden]{display:none!important;}
/* v324: local Expert subaccount permission prototype */
.member-permissions,.member-tag-permissions{padding:12px 0;border-bottom:1px solid #dce1e8;display:flex;flex-direction:column;gap:9px}
.member-permission-option{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}
.member-permission-option input{margin:0;accent-color:#202733}
.member-tag-group{padding:10px;background:#f1f3f6;border-radius:6px;display:flex;flex-direction:column;gap:8px;font-size:12px}
.member-tag-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* v324.1 subaccount accordion refinements */
#account-member .account-team-icon.expanded{background:#202733!important;color:#fff!important;border-color:#202733!important;}
#account-member .account-team-icon.expanded:hover{background:#202733!important;color:#fff!important;}
#account-member .account-team-details{padding:12px 0 6px!important;border:0!important;background:transparent!important;display:flex;flex-direction:column;gap:10px;}
#account-member .account-team-details[hidden]{display:none!important;}
#account-member .member-permissions,#account-member .member-tag-permissions,#account-member .member-billing-history{display:flex;flex-direction:column;gap:9px;padding:14px!important;background:#f1f3f6;border:0!important;border-radius:7px;}
#account-member .member-billing-history strong{font-size:13px;}
/* v324.2 */
#account-member .member-permissions,#account-member .member-tag-permissions,#account-member .member-billing-history{background-color:#f8f9fa!important;border:1px solid #dce1e8!important;}
body[data-builder-permission-preview="viewer"] #brick-library,body[data-builder-permission-preview="viewer"] #ai-open,body[data-builder-permission-preview="viewer"] #save-template-button,body[data-builder-permission-preview="viewer"] #new-template-button,body[data-builder-permission-preview="viewer"] #new-message-button{display:none!important;}
/* v324.3: hide inaccessible controls entirely, rather than dimming them. */
body[data-builder-permission-preview="viewer"] .preview-width-control,
body[data-builder-permission-preview="viewer"] .preview-color-control,
body[data-builder-permission-preview="viewer"] #new-template-button,
body[data-builder-permission-preview="viewer"] #new-message-button,
body[data-builder-permission-preview="viewer"] #save-template-button,
body[data-builder-permission-preview="viewer"] #ai-open,
body[data-builder-permission-preview="viewer"] #brick-library,
body[data-builder-permission-preview="viewer"] #undo-history-ui {display:none!important;}
body[data-builder-permission-preview="viewer"][data-builder-can-test-send="false"] #test-open,
body[data-builder-permission-preview="editor"][data-builder-can-test-send="false"] #test-open,
body[data-builder-permission-preview="viewer"][data-builder-can-generate-preview="false"] #generate-preview-open,
body[data-builder-permission-preview="editor"][data-builder-can-generate-preview="false"] #generate-preview-open,
body[data-builder-permission-preview="viewer"] #export-open:not(.permission-allowed-export),
body[data-builder-permission-preview="editor"][data-builder-can-send-esp="false"] #export-send-to,
body[data-builder-permission-preview="viewer"] #export-send-to,
body[data-builder-permission-preview="viewer"][data-builder-can-export-copy="false"] #export-copy,
body[data-builder-permission-preview="viewer"][data-builder-can-export-download="false"] #export-download {display:none!important;}
/* v324.4: permitted Viewer actions must not inherit old disabled visual styling. */
body[data-builder-permission-preview="viewer"][data-builder-can-test-send="true"] #test-open,
body[data-builder-permission-preview="viewer"] #export-open.permission-allowed-export {opacity:1!important;cursor:pointer!important;pointer-events:auto!important;}
#account-member .account-ai-reset-note {font-size:12px;color:#667085;margin:9px 0 0;}
/* v325.11: hide all board comment indicators when Viewer comments are disabled */
body[data-builder-permission-preview="viewer"][data-builder-can-comment="false"] #canvas .comment-indicator,
body[data-builder-permission-preview="viewer"][data-builder-can-comment="false"] .comment-indicator,
body[data-builder-permission-preview="viewer"][data-builder-can-comment="false"] .review-comment-dot {display:none!important}
/* v325.30: keep the header logout hidden for visitors despite button display rules. */
#header-signout[hidden]{display:none!important}
/* v325.53 embedded payment in existing Account dialog */
#account-stripe-payment{padding:16px 0;border-top:1px solid #e5e7eb;margin-top:14px}
#account-stripe-element{margin:14px 0;min-height:80px}
#account-stripe-error{color:#b42318;font-size:13px}
/* v325.59: feedback belongs to the plan-change flow, not the account notice */
#account-plan-change-status:not(:empty){font-size:13px;line-height:1.5;margin:12px 0 0;padding:11px 13px;background:#eef3f9;border-radius:7px;color:#26374a}
#account-plan-change-status[data-state="error"]{background:#fff0f0;color:#a52323}
#account-plan-change-status[data-state="success"]{background:#ecf8f0;color:#176339}
#account-plan-change-confirm:disabled{opacity:.65;cursor:wait}
/* v325.62 plan-change and team role controls */
#account-plan-change-actions:not([hidden]){display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
#account-plan-change-status{width:100%;margin:0;text-align:left;}
.account-team-role-button{appearance:none;background:transparent;border:0;padding:0;color:var(--skin-blue-dark,#2765ab);font:inherit;text-decoration:underline;cursor:pointer;}
.account-team-role-button:hover{text-decoration:none;}
/* v325.63: Free-only signup; plan changes are single-purpose. */
#account-signup-form > .account-plan-chooser{display:none!important;}
#account-guest.account-changing-plan #account-signup-form > .account-plan-chooser{display:none!important;}
#account-guest:not(.account-changing-plan) #account-payment-preview{display:none!important;}
#account-plan-change-actions:not([hidden]){display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
/* v325.64: Back action and role sort controls */
.account-plan-change-buttons{display:flex;align-items:center;justify-content:flex-end;gap:10px}
#account-plan-change-back{padding:9px 18px;border:1px solid #cbd1db;background:#fff;border-radius:7px;cursor:pointer}
#account-plan-change-actions #account-plan-change-status{width:100%;text-align:right}
#account-member .account-team-role-heading{display:flex;align-items:center;justify-content:space-between;gap:3px}
/* v325.76 workspace selector */
#account-workspace-picker{margin-top:12px;max-width:430px}#account-workspace-picker label{display:block;font-size:12px;margin-bottom:5px}#account-workspace-select{width:100%;min-height:36px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;padding:7px;font-size:13px}#account-workspace-summary{font-size:12px;color:#657184;margin-top:6px;line-height:1.5}
/* v325.79: workspace choices */
#account-workspace-picker{max-width:none;margin:14px 0 18px}
.account-workspace-heading{font-size:12px;margin-bottom:8px}
.account-workspace-list{background:#f1f3f6;border-radius:8px;padding:12px 16px;display:flex;flex-direction:column;gap:14px}
.account-workspace-option{display:flex!important;align-items:flex-start;gap:10px;cursor:pointer;margin:0!important}
.account-workspace-option input{margin:3px 0 0;flex-shrink:0;accent-color:#2675d6}
.account-workspace-option-content{display:flex;flex-direction:column;gap:4px;min-width:0}
.account-workspace-option-content strong{font-size:13px;font-weight:600}
.account-workspace-meta{font-size:12px;color:#66717e;line-height:1.5}
.account-workspace-current{font-size:11px;color:#66717e;font-weight:400}
.account-workspace-actions{display:flex;justify-content:flex-end;margin-top:10px}
.account-workspace-actions button:disabled{opacity:.45;cursor:not-allowed}
/* v325.80: keep workspace action inside gray option box */
#account-workspace-options{display:flex;flex-direction:column;gap:14px}
.account-workspace-list .account-workspace-actions{margin-top:14px}
.account-workspace-list .account-workspace-actions .account-primary{background:var(--skin-button-ink,#202733);color:#fff;border-color:var(--skin-button-ink,#202733)}
/* v325.81: heading inside gray workspace box */
.account-workspace-list .account-workspace-heading{font-size:16px;font-weight:600;margin-bottom:2px;line-height:1.4}
/* v325.82: workspace action, and viewer library delete affordances */
#account-workspace-picker .account-workspace-actions #account-workspace-go:not(:disabled){background:var(--skin-button-ink,#202733)!important;border-color:var(--skin-button-ink,#202733)!important;color:#fff!important;cursor:pointer}
#account-workspace-picker .account-workspace-actions #account-workspace-go:not(:disabled):hover{background:#343e4d!important;border-color:#343e4d!important;color:#fff!important}
body[data-builder-permission-preview="viewer"] #saved-message-list .saved-template-delete,
body[data-builder-permission-preview="viewer"] #saved-template-list .saved-template-delete,
body[data-builder-permission-preview="viewer"] #brick-library-list .brick-library-delete{display:none!important}
/* v325.84: workspace action disabled state matches the existing ink primary buttons. */
#account-workspace-picker .account-workspace-actions #account-workspace-go:disabled{background:var(--skin-button-ink,#202733)!important;border-color:var(--skin-button-ink,#202733)!important;color:#fff!important;opacity:.4!important;cursor:not-allowed!important;pointer-events:none!important}
/* v325.90 — subaccount per-file visibility */
#account-member .member-file-permissions{background:#f8f9fa;border:1px solid #dce1e8;border-radius:7px;padding:14px;display:flex;flex-direction:column;gap:9px;min-width:0}
.member-file-head,.member-file-tools,.member-file-sort,.member-file-search-modes{display:flex;align-items:center;gap:9px}.member-file-head{justify-content:space-between}.member-file-head strong{font-size:13px}.member-file-tools button{border:0;background:transparent;cursor:pointer;font-size:18px;padding:2px 5px}.member-file-permissions p{margin:0!important;font-size:12px}.member-file-search[hidden]{display:none}.member-file-search input[type=search]{width:100%;box-sizing:border-box;padding:7px}.member-file-search-modes{margin-top:6px;font-size:12px}.member-file-sort{font-size:12px;flex-wrap:wrap}.member-file-sort button{background:none;border:0;cursor:pointer;font-size:12px;padding:3px}.member-file-sort button:hover{text-decoration:underline}.member-file-list{max-height:250px;overflow:auto}.member-file-line{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);gap:12px;padding:9px 0;border-top:1px solid #dce1e8;font-size:12px}.member-file-name{display:flex;align-items:flex-start;gap:7px;min-width:0}.member-file-name-text,.member-file-meta{display:flex;flex-direction:column;gap:3px;min-width:0}.member-file-name-text span{overflow-wrap:anywhere}.member-file-name-text small,.member-file-meta small{color:#68717e;font-size:11px;overflow-wrap:anywhere}
/* v325.90.1: match library controls and keep sort choices right-aligned */
#account-member .member-file-tools{gap:3px}
#account-member .member-file-tools .library-view-button{width:30px;height:30px;min-width:30px;padding:0;border:1px solid transparent;border-radius:5px;background:transparent;color:#667085;display:inline-flex;align-items:center;justify-content:center;font-size:inherit}
#account-member .member-file-tools .library-view-button svg{width:16px;height:16px;display:block}
#account-member .member-file-tools .library-view-button:hover:not(.active){background:#eaf2ff;color:#202733}
#account-member .member-file-tools .library-view-button.active{background:#202733;color:#fff;border-color:#202733}
#account-member .member-file-sort.library-sort-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;margin:8px 0 12px;font-size:11px}
#account-member .member-file-sort .library-sort-choices{display:flex;justify-content:flex-end;flex:1;gap:2px}
#account-member .member-file-sort .library-sort-choices button{font:inherit;border:0;border-radius:4px;background:transparent;color:#202733;padding:5px 6px;text-decoration:none;cursor:pointer}
#account-member .member-file-sort .library-sort-choices button.active{background:#202733;color:#fff}
#account-member .member-file-sort .library-sort-choices button:not(.active):hover{background:#eaf2ff;text-decoration:none}
#account-member .member-file-search .library-search-input{width:100%;height:34px;padding:6px 10px;border:1px solid #cdd4df;border-radius:6px;background:#fff;font-size:13px}
#account-member .member-file-search .library-search-modes{display:flex;gap:12px;margin:8px 0 3px;font-size:11px}
#account-member .member-file-search .library-search-modes label{display:inline-flex;align-items:center;gap:3px}
#account-member .member-file-search .library-search-modes input{margin:0;accent-color:#202733}
#account-member .account-team-column-sort button{width:30px;height:30px;padding:0;border-radius:5px}
#account-member .account-team-column-sort button svg{width:16px;height:16px}
/* v325.90.2: match left-panel default outlined toolbar buttons */
#account-member .member-file-tools .library-view-button:not(.active){border-color:var(--skin-border,#cdd4df);background:#fff;color:var(--skin-ink,#202733)}
#account-member .member-file-tools .library-view-button:hover:not(.active){background:#eaf2ff}
/* v325.90.3 */
#account-member .member-file-sort.library-sort-row {margin-bottom:0;}
.member-file-name > input {margin:0;width:15px;height:15px;}
/* v325.91 */
#account-member .member-permissions-options{display:grid;grid-template-columns:1fr;gap:9px}
#account-member .member-permissions-viewer .member-permissions-options{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(3,auto)}
#account-member .member-file-line{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) auto;align-items:center}
#account-member .member-file-hidden-label{font-size:10px;font-weight:700;letter-spacing:.04em;color:#596373;white-space:nowrap}
#account-member .member-file-hidden-label[hidden]{display:none}
/* v325.91.1: HIDDEN is an overlay, never a third grid column. */
#account-member .member-file-line {
position:relative;
grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
}
#account-member .member-file-meta { padding-right:66px; }
#account-member .member-file-hidden-label {
position:absolute;right:0;top:50%;transform:translateY(-50%);
pointer-events:none;
}
/* v325.92.2: unified workspace cards */
#account-workspace-picker .account-workspace-list{display:block;background:transparent;padding:0}
#account-workspace-options{display:block}
.workspace-grid-heading{font-size:14px;font-weight:600;margin:12px 0}
.workspace-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.workspace-card{border:1px solid #cbd1d8;border-radius:8px;padding:14px;display:flex;flex-direction:column;min-height:172px;gap:10px;background:#fff}
.workspace-card.is-current{border:2px solid var(--skin-button-ink,#202733);padding:13px}
.workspace-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.workspace-card-top strong{font-size:14px;overflow-wrap:anywhere}
.workspace-rename{border:0;background:transparent;cursor:pointer;font-size:18px;color:#5d6671}
.workspace-name-input{width:100%;min-width:0;padding:5px;border:1px solid #cbd1d8;border-radius:4px}
.workspace-card-role{font-size:12px;color:#66717e}
.workspace-card-counts{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:12px;color:#5c6570}
.workspace-card-footer{margin-top:auto;font-size:12px;color:#657184}
.workspace-card-footer .account-primary{font-size:12px;padding:8px 12px;background:var(--skin-button-ink,#202733);color:#fff;border:0;border-radius:5px;cursor:pointer}
.workspace-grid-divider{border:0;border-top:1px solid #d7dce2;margin:20px 0}
@media(max-width:600px){.workspace-card-grid{grid-template-columns:1fr}}
/* v325.92.2a workspace refinements */
.account-member-top{margin-bottom:0}
.workspace-card{background-color:#f1f3f6;border-color:#f1f3f6;border-width:2px;padding:13px}
.workspace-card.is-current{background-color:#fff}
.workspace-card-footer{display:flex;justify-content:flex-end;align-items:center}
.workspace-card-footer .account-primary{background:var(--skin-button-ink,#202733);border:1px solid var(--skin-button-ink,#202733);color:#fff}
.workspace-rename{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid #cbd1d8;border-radius:5px;background:#fff;color:#5d6671;cursor:pointer;padding:0}
.workspace-rename:hover{border-color:var(--skin-button-ink,#202733);color:var(--skin-button-ink,#202733)}
.workspace-rename:focus-visible{outline:2px solid var(--skin-button-ink,#202733);outline-offset:2px}
.workspace-rename:active,.workspace-rename.is-active{background:var(--skin-button-ink,#202733);border-color:var(--skin-button-ink,#202733);color:#fff}
/* v325.92.3e: Supabase account collaborations */
#account-member .account-collaborations-panel{background:#f1f3f6;border-radius:8px;padding:18px;margin:0 0 20px}
#account-member .account-collaborations-panel[hidden]{display:none!important}
.account-collaborations-panel .account-section-heading{margin:0 0 16px}
.account-collab-list-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(85px,1fr) 36px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #d9dfe7;font-size:13px}
.account-collab-list-row:last-child{border-bottom:0}
.account-collab-list-row>span{min-width:0;overflow-wrap:anywhere}
.account-collab-open{width:30px;height:30px;display:grid;place-items:center;border:1px solid #c9d1dc;background:#fff;border-radius:5px;cursor:pointer;color:#34475e}
.account-collab-open:hover{border-color:#2389de;color:#2389de;background:#eaf5ff}
.account-collab-open svg{width:16px;height:16px}
.account-collab-name{display:flex;align-items:center;gap:6px}
.account-collab-indicator{display:inline-block;flex:0 0 auto;font-size:14px}
.account-collab-indicator.owner{color:#c18b10}
.account-collab-indicator.pending{color:#b25b1e}
.account-collab-error{font-size:12px;color:#9b3434}
/* v325.92.3g: sortable collaboration headings */
.account-collab-list-head{font-size:12px;font-weight:600;padding:0 0 9px;border-bottom:1px solid #cbd1d8}
.account-collab-head-cell{display:flex;align-items:center;gap:8px;min-width:0}
.account-collab-sort-controls{display:inline-flex;align-items:center;gap:4px}
.account-collab-sort-button{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;padding:0;border:1px solid #cbd1d8;border-radius:4px;background:#fff;color:#68727f;cursor:pointer;font-size:15px;font-weight:500;line-height:1}
.account-collab-sort-button:hover{border-color:#2389de;background:#eaf5ff;color:#2389de}
.account-collab-sort-button.is-active{border-color:var(--skin-button-ink,#202733);background:var(--skin-button-ink,#202733);color:#fff}
/* v325.92.3h UI refinements */
.account-collab-head-cell{justify-content:space-between}
.account-collab-sort-controls{margin-left:auto;justify-content:flex-end}
.account-collab-sort-button{font-size:0}
.account-collab-sort-button svg{display:block;width:16px;height:16px}
.document-bar-left{gap:8px}
.document-info-type{font-weight:600;padding-bottom:7px;margin-bottom:7px;border-bottom:1px solid #e0e4e9}
.document-tags-link{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;padding:3px;color:#2864ad}
#review-toolbar-toggle.review-stop-active{color:#d23b3b}
.rich-text-toolbar{flex-direction:column;align-items:stretch;min-width:310px;gap:6px}
.rich-text-toolbar .rich-row{display:flex;align-items:center;gap:4px;width:100%}
.rich-text-toolbar .rich-row-styles .rich-color{margin-left:auto}
.rich-text-toolbar .rich-row-link .rich-link{width:100%;display:flex}
.rich-text-toolbar .rich-row-link .rich-link input{flex:1;min-width:75px}
.rich-text-toolbar .rich-row-remove{justify-content:flex-end}
.rich-text-toolbar .rich-row-remove button[data-rich=remove]{background:var(--skin-button-ink,#202733);border-color:var(--skin-button-ink,#202733);color:#fff;padding:6px 13px}
.rich-text-toolbar .rich-row-remove button[data-rich=remove]:hover{background:#485366;border-color:#485366}
#rich-saved-url{display:inline-flex;align-items:center;justify-content:center}
/* v325.92.3i-2 — ownership request controls */
.review-collab-pending,.review-collab-pending-owner{font-size:12px;line-height:18px;margin-top:8px}
.review-collab-transfer-actions{display:flex;gap:8px;margin-top:8px}
.review-collab-transfer-actions button{min-height:30px;padding:5px 12px;border:1px solid #cbd5e1;border-radius:5px;background:#fff;color:#25354a;cursor:pointer;font-size:12px}
.review-collab-transfer-actions button:hover{border-color:#2475dc;background:#edf5ff}
.review-collab-transfer-transfer{background:#263c59!important;color:#fff!important;border-color:#263c59!important}
.review-collab-transfer-transfer:hover{background:#3d577a!important}
/* v325.92.3i-4 — owner-only pending transfer indicator */
.account-collab-indicator.pending{color:#c62828;font-size:14px;font-weight:800;line-height:1}
/* v325.92.3i-6 — document toolbar and RTE controls */
body.document-template #message-template-association .document-template-label{display:none!important}
#message-template-association .document-info-toggle,
#message-template-association .document-tags-link:not(.review-stop-active){color:#53667c!important}
#message-template-association .document-info-toggle:hover,
#message-template-association .document-tags-link:not(.review-stop-active):hover{color:#2864ad!important;background:rgba(255,255,255,.35);border-radius:4px}
.rich-text-toolbar #rich-link-type,.rich-text-toolbar #rich-link-value{box-sizing:border-box;height:34px;border:1px solid #d6dbe4;border-radius:6px;background:#fff;color:var(--skin-ink,#202733);font:inherit;font-size:12px;padding:6px 9px;outline:none}
.rich-text-toolbar #rich-link-type{width:82px;flex:0 0 82px;cursor:pointer;padding-right:4px}
.rich-text-toolbar #rich-link-value{flex:1 1 auto;width:auto;min-width:75px}
.rich-text-toolbar #rich-link-type:focus,.rich-text-toolbar #rich-link-value:focus{border-color:var(--skin-blue,#2563eb);box-shadow:0 0 0 2px rgba(37,99,235,.12)}
/* v325.92.3j-3: match review comments dialog to board comments */
.review-comments-modal .comments-header [data-close]{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#f0f2f5;color:#000;font:700 24px/1 Arial,Helvetica,sans-serif;cursor:pointer}
.review-comments-modal .comments-header [data-close]:hover{background:#e1e5eb}
.review-comments-modal .comments-compose-actions [data-submit]{min-height:34px;padding:7px 15px;border-radius:8px;background:var(--skin-button-ink,#202733)!important;border:1px solid var(--skin-button-ink,#202733)!important;color:#fff!important;font-size:13px;font-weight:400;cursor:pointer}
.review-comments-modal .comments-compose-actions [data-cancel]{min-height:34px;padding:7px 15px;border-radius:8px;background:#fff;border:1px solid #cbd5e1;color:#202733;font-size:13px;font-weight:400;cursor:pointer}
/* v325.92.3j-5: fixed toolbar controls and independently scrollable document tabs */
.canvas-scroll .template-tabs{display:flex!important;align-items:stretch!important;gap:0!important;overflow:hidden!important;padding:0 12px!important;height:45px!important;min-height:45px!important;background:#fff!important;isolation:isolate}
.canvas-scroll .template-tabs .template-ai-actions{position:relative;z-index:3;flex:0 0 auto;display:flex;align-items:center;padding:0 10px 0 0;background:#fff;box-shadow:5px 0 7px -7px #64748b}
.canvas-scroll .template-tabs .template-ai-actions #ai-open{margin:0!important;align-self:center!important;flex:0 0 33px!important;width:33px!important;height:33px!important}
.canvas-scroll .template-tabs .template-tab-list{position:relative;z-index:1;display:flex!important;flex:1 1 0!important;min-width:0!important;width:0!important;height:45px!important;align-self:stretch!important;align-items:flex-end!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;gap:4px!important;padding:0!important;margin:0!important}
.canvas-scroll .template-tabs .template-tab-list .template-tab{flex:0 0 auto!important;align-self:flex-end!important}
.canvas-scroll .template-tabs .template-tab-actions{position:relative;z-index:3;flex:0 0 auto!important;display:flex!important;align-items:center!important;align-self:stretch!important;height:45px!important;min-height:45px!important;padding:0 0 0 10px!important;margin:0!important;background:#fff;box-shadow:-5px 0 7px -7px #64748b}
.canvas-scroll .template-tabs .template-tab-actions .preview-nav-button{align-self:center!important}
/* The comment thread alone scrolls; title and composer stay accessible. */
.comments-modal .comments-panel{min-height:0!important;max-height:min(85vh,760px)!important;overflow:hidden!important}
.comments-modal .comments-panel #comments-thread,
.comments-modal .comments-panel [data-thread]{display:block;flex:1 1 auto;min-height:0!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior:contain}
.comments-modal .comments-header,.comments-modal .comments-compose-actions,.comments-modal textarea{flex-shrink:0}
/* v325.92.3j-6: fixed tab-bar controls have solid backgrounds without separator shadows. */
.canvas-scroll .template-tabs .template-ai-actions,
.canvas-scroll .template-tabs .template-tab-actions{box-shadow:none!important;filter:none!important;background:#fff!important}
/* v325.92.3j-9 — fixed palette header and current workspace strip */
#palette-view > .palette-top-third{flex:0 0 120px;height:120px;min-height:120px;max-height:120px;box-sizing:border-box;justify-content:space-between}
#palette-view > .palette-top-third > .builder-brand-row{align-self:stretch;flex:0 0 auto;margin-top:0}
#palette-view > .palette-workspace-indicator{flex:0 0 auto;box-sizing:border-box;background:#f1f3f6;padding:8px 16px;font-size:12px;font-weight:600;line-height:18px;color:#202733;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v325.92.3j-12: Group membership removal uses a text link; other rows retain delete icon. */
.test-send-card .ts-rec-row.ts-selected .ts-trash-button{width:auto;min-width:52px;border:0;background:transparent;color:#2563eb;font-size:12px;font-weight:500;padding:5px 2px;}
.test-send-card .ts-rec-row.ts-selected .ts-trash-button:hover{text-decoration:underline;background:transparent;}