.template-builder{--builder-accent: #b48d38;--builder-accent-soft: #faf6ee;--builder-border: #e2e8f0;--builder-canvas-bg: #eef1f6;--builder-inspector-width: 340px;--builder-layer-width: 240px;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.template-builder__shell{display:flex;min-height:calc(100vh - 12rem);border:1px solid var(--builder-border);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #0f172a0f,0 8px 24px #0f172a0a}.template-builder__layers{width:var(--builder-layer-width);flex-shrink:0;border-right:1px solid var(--builder-border);background:#fafbfc;display:flex;flex-direction:column}.template-builder__layers-header{padding:.875rem 1rem;border-bottom:1px solid var(--builder-border);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b}.template-builder__layers-body{flex:1;overflow-y:auto;padding:.5rem}.builder-layer-list{min-height:0}.builder-layer-canvas,.builder-layer-sortable{display:flex;flex-direction:column;gap:.25rem}.template-builder__layer-empty{padding:1.5rem 1rem;text-align:center;font-size:.8125rem;color:#94a3b8;line-height:1.5}.template-builder__stage{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--builder-canvas-bg)}.template-builder__stage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.625rem 1rem;background:#fff;border-bottom:1px solid var(--builder-border);font-size:.8125rem;color:#64748b}.template-builder__stage-toolbar-meta{flex:1 1 auto;min-width:8rem}.template-builder__stage-toolbar-hint{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.template-builder__preview-bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding:.75rem 1rem;background:#fff;border-bottom:1px solid var(--builder-border)}.template-builder__device-toggle{display:inline-flex;align-items:center;gap:.5rem}.template-builder__device-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:0;border-radius:.375rem;background:transparent;color:#94a3b8;cursor:pointer;transition:color .15s ease,background-color .15s ease}.template-builder__device-btn svg{width:1.125rem;height:1.125rem}.template-builder__device-btn:hover,.template-builder__device-btn.is-active{color:#334155;background:#f1f5f9}.template-builder__device-switch{position:relative;width:2.5rem;height:1.375rem;padding:0;border:0;border-radius:999px;background:#cbd5e1;cursor:pointer;transition:background-color .15s ease}.template-builder__device-switch:hover{background:#94a3b8}.template-builder__device-switch-thumb{position:absolute;top:.1875rem;left:.1875rem;width:1rem;height:1rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0f172a26;transition:transform .15s ease}.template-builder__device-switch-thumb.is-mobile{transform:translate(1.125rem)}.template-builder__test-send{display:flex;align-items:center;gap:.75rem;flex:1 1 auto;justify-content:flex-end;min-width:min(100%,20rem)}.template-builder__test-send-label{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;white-space:nowrap}.template-builder__test-send-field{display:flex;align-items:center;gap:.375rem;flex:1 1 16rem;max-width:22rem;padding:.25rem .25rem .25rem .875rem;background:#f8fafc;border:1px solid var(--builder-border);border-radius:999px;transition:border-color .15s ease,box-shadow .15s ease}.template-builder__test-send-field:focus-within{border-color:var(--builder-accent);box-shadow:0 0 0 3px #b48d3826;background:#fff}.template-builder__test-send-input{flex:1 1 auto;min-width:0;border:0;background:transparent;font-size:.875rem;color:#0f172a;outline:none}.template-builder__test-send-input::-moz-placeholder{color:#94a3b8}.template-builder__test-send-input::placeholder{color:#94a3b8}.template-builder__test-send-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:2rem;height:2rem;padding:0;border:0;border-radius:50%;background:var(--builder-accent);color:#fff;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.template-builder__test-send-btn svg{width:1rem;height:1rem}.template-builder__test-send-btn:hover:not(:disabled){background:#9a7630}.template-builder__test-send-btn:disabled{opacity:.45;cursor:not-allowed}.template-builder__stage-toolbar strong{color:#334155;font-weight:600}.template-builder__history-toolbar{display:inline-flex;align-items:center;gap:.15rem;padding:.2rem;background:#f1f5f9;border:1px solid var(--builder-border);border-radius:.5rem;flex-shrink:0}.template-builder__history-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:0;border-radius:.35rem;background:transparent;color:#334155;cursor:pointer;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.template-builder__history-btn svg{width:1.125rem;height:1.125rem}.template-builder__history-btn:hover:not(:disabled),.template-builder__history-btn:focus-visible:not(:disabled){background:#fff;color:#0f172a;outline:none;box-shadow:0 0 0 2px #b48d3840}.template-builder__history-btn:disabled{opacity:.35;cursor:not-allowed}.template-builder__canvas-scroll{flex:1;overflow:auto;padding:2rem 1.5rem;display:flex;justify-content:center;align-items:flex-start}.template-builder__canvas-drop{width:100%;max-width:640px;min-height:480px;position:relative;transition:max-width .2s ease}.template-builder__canvas-drop.is-mobile-preview{max-width:375px}.template-builder__canvas-drop.is-dragging{outline:2px dashed var(--builder-accent);outline-offset:8px;border-radius:8px}.template-builder__email-frame{background:#fff;border-radius:4px;box-shadow:0 4px 6px #0f172a0a,0 20px 50px #0f172a1f;overflow:hidden;margin:0 auto}.template-builder__email-frame iframe{display:block;width:100%;min-height:720px;border:0}.template-builder__empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:2rem;text-align:center;color:#64748b;font-size:.9375rem;pointer-events:none}.template-builder__empty-state svg{width:3rem;height:3rem;color:#cbd5e1}.builder-layer{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;margin-bottom:.25rem;border:1px solid transparent;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .12s,box-shadow .12s}.builder-layer:hover{border-color:var(--builder-border)}.builder-layer.is-selected{border-color:var(--builder-accent);background:var(--builder-accent-soft);box-shadow:0 0 0 1px var(--builder-accent)}.builder-layer-handle{cursor:grab;color:#94a3b8;font-size:.875rem;line-height:1;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:.125rem}.builder-layer-icon{width:1.75rem;height:1.75rem;border-radius:4px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.625rem;font-weight:700;color:#64748b;text-transform:uppercase}.builder-layer.is-selected .builder-layer-icon{background:var(--builder-accent);color:#fff}.builder-layer-label{flex:1;min-width:0;font-size:.8125rem;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.builder-layer-remove{opacity:0;color:#ef4444;font-size:1.125rem;line-height:1;padding:0 .25rem;border:none;background:none;cursor:pointer}.builder-layer:hover .builder-layer-remove,.builder-layer.is-selected .builder-layer-remove{opacity:1}.builder-layer-ghost{opacity:.45}.template-builder__inspector{width:var(--builder-inspector-width);flex-shrink:0;border-left:1px solid var(--builder-border);background:#fff;display:flex;flex-direction:column}.template-builder__tabs{display:flex;border-bottom:1px solid var(--builder-border);background:#fafbfc}.template-builder__tab{flex:1;padding:.75rem .5rem;font-size:.75rem;font-weight:600;color:#64748b;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .12s,border-color .12s;white-space:nowrap}.template-builder__tab:hover{color:#334155}.template-builder__tab.is-active{color:var(--builder-accent);border-bottom-color:var(--builder-accent);background:#fff}.template-builder__panel{flex:1;overflow-y:auto;padding:1rem}.template-builder__section-title{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin-bottom:.75rem}.template-builder__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.25rem}.template-builder__tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:.75rem .375rem;border:1px solid var(--builder-border);border-radius:8px;background:#fff;color:#475569;font-size:.6875rem;font-weight:500;text-align:center;cursor:grab;transition:border-color .12s,background .12s,transform .12s;line-height:1.2}.template-builder__tile:hover{border-color:var(--builder-accent);background:var(--builder-accent-soft);color:#334155;transform:translateY(-1px)}.template-builder__tile:active{cursor:grabbing}.template-builder__tile-icon{width:1.5rem;height:1.5rem;color:#64748b}.template-builder__tile:hover .template-builder__tile-icon{color:var(--builder-accent)}.template-builder__props-empty{padding:2rem .5rem;text-align:center;font-size:.875rem;color:#94a3b8;line-height:1.6}.template-builder__props-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--builder-border)}.template-builder__props-badge{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .5rem;border-radius:4px;background:var(--builder-accent-soft);color:var(--builder-accent)}.template-builder__props-title{font-size:.9375rem;font-weight:600;color:#1e293b}.template-builder__block-editor{display:flex;flex-direction:column;gap:1rem}.template-builder__block-content-card{display:flex;gap:.75rem;padding:.75rem;border:1px solid var(--builder-border);border-radius:8px;background:#fafbfc}.template-builder__block-content-card__media{flex-shrink:0;width:4.5rem;height:4.5rem;border-radius:6px;overflow:hidden;background:#e2e8f0}.template-builder__block-content-card__img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.template-builder__block-content-card__body{flex:1;min-width:0}.template-builder__block-content-card__type{display:inline-block;font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--builder-accent);margin-bottom:.25rem}.template-builder__block-content-card__text{margin:0;font-size:.8125rem;line-height:1.45;color:#334155;word-break:break-word}.template-builder__edit-grid-title{margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8}.template-builder__edit-grid{display:flex;flex-direction:column;gap:1rem}.builder-props-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem}.builder-props-section--stacked{display:flex;flex-direction:column;gap:.75rem}.builder-props-field{display:flex;flex-direction:column;gap:.25rem;min-width:0}.builder-props-field--full{grid-column:1 / -1}.builder-props-field .label{margin-bottom:0}.builder-props-card{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border:1px solid var(--builder-border);border-radius:8px;background:#fff}.builder-props-hint{margin:0;font-size:.75rem;color:#94a3b8;line-height:1.45}.builder-layer:focus-visible{outline:2px solid var(--builder-accent);outline-offset:1px}.builder-settings{display:flex;flex-direction:column;gap:.875rem}.builder-settings__card{padding:.875rem;border:1px solid var(--builder-border);border-radius:8px;background:#fafbfc}.builder-settings__card-title{margin:0 0 .75rem;font-size:.8125rem;font-weight:700;color:#0f172a}.builder-settings__field{display:flex;flex-direction:column;gap:.5rem}.builder-settings__label{font-size:.75rem;font-weight:600;color:#475569}.builder-settings__hint{margin:0;font-size:.6875rem;color:#94a3b8;line-height:1.45}.builder-settings__range{width:100%;height:4px;accent-color:var(--builder-accent);cursor:pointer}.builder-settings__width-row{display:flex;align-items:center;gap:.5rem}.builder-settings__width-input{flex:1;display:flex;align-items:center;gap:.375rem}.builder-settings__width-input .input{text-align:center}.builder-settings__unit{font-size:.75rem;font-weight:600;color:#64748b;flex-shrink:0}.builder-settings__step-btn{flex-shrink:0;width:2rem;height:2rem;border:1px solid var(--builder-border);border-radius:6px;background:#fff;color:#334155;font-size:1rem;line-height:1;cursor:pointer;transition:background .12s,border-color .12s}.builder-settings__step-btn:hover{background:var(--builder-accent-soft);border-color:var(--builder-accent)}.builder-settings__color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.builder-settings__color-field{display:flex;flex-direction:column;gap:.375rem;min-width:0}.builder-settings__color-input{display:flex;align-items:center;gap:.375rem}.builder-settings__color-input input[type=color]{flex-shrink:0;width:2rem;height:2rem;padding:0;border:1px solid var(--builder-border);border-radius:4px;cursor:pointer;background:none}.builder-settings__color-input .input{flex:1;min-width:0;font-size:.75rem;font-family:ui-monospace,monospace}.builder-settings__color-input--compact{flex:0 0 auto}.builder-settings__typo-row{display:grid;grid-template-columns:auto 1fr 1fr;align-items:center;gap:.5rem;margin-bottom:.75rem}.builder-settings__typo-label{font-size:.75rem;font-weight:600;color:#475569}.builder-settings__size-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-bottom:.75rem}.builder-settings__size-field{display:flex;flex-direction:column;gap:.25rem;min-width:0}.builder-settings__size-field .input{font-size:.75rem;padding-left:.375rem;padding-right:.375rem}.builder-settings__line-height{display:flex;gap:.375rem}.builder-settings__line-btn{flex:1;display:flex;align-items:center;justify-content:center;min-height:2.5rem;padding:.375rem;border:1px solid var(--builder-border);border-radius:6px;background:#fff;cursor:pointer;transition:border-color .12s,background .12s}.builder-settings__line-btn:hover{border-color:#cbd5e1;background:#f8fafc}.builder-settings__line-btn.is-active{border-color:var(--builder-accent);background:var(--builder-accent-soft)}.builder-settings__line-icon{font-size:.875rem;font-weight:700;color:#334155;line-height:1.2}.builder-settings__apply-btn{width:100%;margin-top:.25rem;padding:.625rem .75rem;font-size:.75rem;font-weight:600;color:#334155;background:#fff;border:1px solid var(--builder-border);border-radius:6px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}.builder-settings__apply-btn:hover{background:var(--builder-accent-soft);border-color:var(--builder-accent);color:#0f172a}@media (max-width: 1200px){.template-builder__layers{display:none}}@media (max-width: 900px){.template-builder__shell{flex-direction:column}.template-builder__inspector{width:100%;max-height:360px;border-left:none;border-top:1px solid var(--builder-border)}}