.composer-hero{background:linear-gradient(135deg,#244d40,#183c32);color:#fff;border-radius:20px;padding:30px 34px;margin-bottom:18px;display:flex;justify-content:space-between;gap:30px;align-items:center;position:relative;overflow:hidden}.composer-hero:after{content:"";position:absolute;width:240px;height:240px;border:45px solid #ffffff0d;border-radius:50%;right:-80px;top:-130px}.composer-hero>div{position:relative;z-index:1}.composer-hero h2{font:800 30px/1.15 Manrope;margin:8px 0}.composer-hero p{color:#c4d8d1;max-width:700px;line-height:1.6;margin:0}.composer-sender{flex:0 0 270px;padding:16px 18px;background:#ffffff12;border:1px solid #ffffff1f;border-radius:13px;display:grid;gap:5px}.composer-sender span{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:#a9c8bc}.composer-sender b{font-size:13px}.composer-sender small{color:#b8cdc5;line-height:1.4}
.composer-grid{display:grid;grid-template-columns:minmax(340px,.8fr) minmax(480px,1.3fr);gap:18px;align-items:start}.composer-inputs,.composer-preview{min-height:590px}.composer-inputs label,.email-preview-card label{display:grid;gap:7px;margin-bottom:16px}.composer-inputs label>span,.email-preview-card label>span{font-size:11px;font-weight:800;color:#4e5b55}.composer-inputs input,.composer-inputs textarea,.email-preview-card textarea{width:100%;border:1px solid #d9ded9;border-radius:9px;padding:12px 13px;background:#fafbf9;font:500 13px/1.55 'DM Sans';color:#17221d;resize:vertical}.composer-inputs input:focus,.composer-inputs textarea:focus,.email-preview-card textarea:focus{outline:3px solid #91d2b240;border-color:#54a880}.field-validation-error{font-size:11px;color:#a33d32}.composer-validation{background:#ffe2dc;color:#813e32;padding:11px 13px;border-radius:9px;margin-bottom:15px}.composer-validation ul{margin:0;padding-left:18px}.composer-tip{font-size:11px;line-height:1.5;color:#69746e;background:#f4f4ef;border-radius:9px;padding:11px 13px}.composer-generate{width:100%;margin-top:6px}.composer-preview{position:relative}.composer-empty{min-height:475px;display:grid;place-content:center;text-align:center;max-width:430px;margin:auto;color:#748079}.composer-empty>span{font-size:44px;color:#ff7058}.composer-empty h3{font:800 21px Manrope;color:#17221d;margin:9px 0}.composer-empty p{line-height:1.6}.email-preview-card{border:1px solid #dfe3df;border-radius:12px;overflow:hidden}.email-preview-card>div{display:grid;grid-template-columns:65px 1fr;gap:10px;padding:11px 14px;border-bottom:1px solid #e6e8e4;font-size:12px}.email-preview-card>div span{color:#7a8580}.email-preview-card label{margin:0;padding:14px;background:#f6f6f2}.email-preview-card textarea{min-height:330px;background:#fff}.composer-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.composer-send-note{text-align:right;color:#7a8580;font-size:11px;margin:9px 0 0}
@media(max-width:1000px){.composer-grid{grid-template-columns:1fr}.composer-inputs,.composer-preview{min-height:0}}@media(max-width:650px){.composer-hero{align-items:flex-start;flex-direction:column;padding:24px}.composer-hero h2{font-size:24px}.composer-sender{width:100%;flex-basis:auto}.composer-actions{flex-direction:column}.composer-actions .button{width:100%}}