.compose-steps{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 24px}.compose-steps span{padding:9px 14px;border-radius:8px;background:#eef0f2;color:#53606c}.compose-steps .active{background:#16394b;color:white}.compose-layout{display:grid;grid-template-columns:minmax(300px,1fr) minmax(300px,1fr);gap:26px;align-items:start}.compose-toolbar,.compose-preview-heading{display:flex;gap:15px;justify-content:space-between;align-items:center}.compose-toolbar h2{margin:4px 0 16px}.compose-preview{position:sticky;top:18px;min-width:0}.compose-preview iframe{width:100%;height:76vh;border:1px solid #d9dfe4;border-radius:8px;background:#eee}.compose-preview-heading h2{font-size:18px}.compose-preview-heading span{font-size:12px;max-width:55%}.compose-editor textarea{resize:vertical}.compose-editor details{margin:16px 0}.compose-editor summary{cursor:pointer;font-weight:600}.compose-check{display:flex;align-items:center;gap:10px}.compose-check input,.compose-contact input{width:20px;min-width:20px;height:20px;margin:0}.compose-drop{border:1px dashed #8ba5b6;padding:18px;border-radius:10px;text-align:center;cursor:pointer;background:#f8fafb}.compose-drop small{display:block;margin-top:8px}.compose-drop input{max-width:100%}.compose-drop.dragover{background:#e2eff4}.compose-attachment{display:flex;align-items:center;gap:5px;padding:10px 0;border-bottom:1px solid #e5e8eb}.compose-attachment span{flex:1;overflow-wrap:anywhere;min-width:0;font-size:13px}.compose-attachment button{font-size:11px;padding:7px}.compose-recipient{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-bottom:1px solid #e5e8eb}.compose-recipient p{margin:5px 0;font-size:13px}.compose-matches{max-height:340px;overflow:auto;margin-bottom:20px}.compose-contact{display:flex;align-items:center;gap:12px;padding:13px;border-bottom:1px solid #e5e8eb;cursor:pointer}.compose-contact:hover{background:#eef5f8}.compose-contact small{display:block;font-weight:normal;white-space:pre-line;color:#52616b}.template-image{max-width:180px;max-height:95px;object-fit:contain;margin:12px 0}.compose-sender textarea{margin-top:12px}@media(max-width:1000px){.compose-layout{grid-template-columns:1fr}.compose-preview{position:static}.compose-preview iframe{height:65vh}}@media(max-width:540px){.compose-toolbar{align-items:flex-start;flex-wrap:wrap}.compose-steps{gap:6px}.compose-steps span{font-size:12px;padding:8px}.compose-layout{gap:14px}}

.compose-fields{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:18px 0 10px}.compose-fields span{font-size:12px;color:#52616b}.compose-fields button{font-size:12px;padding:6px 9px;background:#edf4f7}.compose-content-tools{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:12px 0 20px}.compose-content-tools label{flex:1;min-width:190px}.compose-content-tools button{margin-bottom:12px}

.compose-preview iframe{display:block;height:auto!important;aspect-ratio:210/310;max-height:76vh;min-height:360px}.compose-preview{position:static}@media(max-width:540px){.compose-preview iframe{min-height:0;max-height:none;aspect-ratio:210/315}}

.compose-page-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.compose-page-controls span{text-align:center;font-size:14px}.compose-preview iframe{aspect-ratio:210/297}@media(max-width:540px){.compose-preview iframe{aspect-ratio:210/297}}

.compose-page-controls{justify-content:center}.compose-page-controls button[hidden]{display:none}