/* Email signature generator (/tools/email-signature) */
.es{margin:8px 0 36px;display:grid;gap:22px}
@media(min-width:980px){.es{width:min(1180px,calc(100vw - 56px));position:relative;left:50%;transform:translateX(-50%);grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
  .es-side{position:sticky;top:104px}}
.es-form{display:flex;flex-direction:column;gap:14px}
.es fieldset{border:1px solid #dce6f5;border-radius:12px;padding:14px 16px 16px;background:#fff;margin:0}
.es legend{font-weight:750;color:#0b2b56;padding:0 6px;font-size:15px}
.es-field{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:13px;color:#425a79;font-weight:600}
.es-field input,.es-field textarea,.es-social input,.es-row select{border:1px solid #c8d6ea;border-radius:7px;padding:9px 11px;font-size:15px;color:#0b2b56;background:#fff;font-weight:400;min-width:0}
.es-field textarea{resize:vertical;font-family:inherit}
.es input:focus,.es textarea:focus,.es select:focus{outline:2px solid #0866ff;outline-offset:1px;border-color:#0866ff}
.es-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.es-hint{font-size:12.5px;color:#677991;line-height:1.55;margin:8px 0 0}
.es-socials{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.es-social{display:flex;align-items:center;gap:8px}.es-social input{flex:1;padding:7px 10px;font-size:14px}
.es-templates{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.es-templates button,.es-how-tabs button{border:1px solid #c8d6ea;background:#fff;border-radius:8px;padding:9px 6px;font-weight:650;color:#314b70;cursor:pointer;font-size:14px}
.es-templates button.on,.es-how-tabs button.on{border-color:#0866ff;background:#eaf2ff;color:#0866ff}
.es-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:14px;font-size:13px;color:#425a79;font-weight:600}
.es-row label{display:flex;align-items:center;gap:6px}.es-row select{padding:6px 8px;font-size:14px}
.es-colors{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.es-colors button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #c8d6ea;cursor:pointer}
.es-colors button.on{box-shadow:0 0 0 2px #0b2b56}
.es-colors input[type=color]{width:34px;height:28px;padding:0;border:1px solid #c8d6ea;border-radius:6px;background:#fff;cursor:pointer}
.es-check{display:flex;gap:8px;align-items:center;margin-top:14px;font-size:14px;color:#314b70;cursor:pointer}
.es-side{display:flex;flex-direction:column;gap:16px}
.es-preview-box{border:1px solid #dce6f5;border-radius:12px;padding:16px;background:#fff;box-shadow:0 10px 25px #075beb0a}
.es-label{margin:0 0 10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#677991}
.es-mail{border:1px solid #e3ebf6;border-radius:10px;padding:16px;background:#fff;overflow-x:auto}
.es-mail-lines{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}.es-mail-lines span{height:8px;border-radius:9px;background:#eef3f9}.es-mail-lines .short{width:60%}
.es-preview{color:#374151}.es-preview img{max-width:none}.es-preview a{text-decoration:none}
.es-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.es-actions .decode-button,.es-secondary{display:inline-flex;align-items:center;gap:7px}
.es-secondary{padding:10px 14px;border-radius:8px;border:1px solid #c8d6ea;background:#fff;color:#0b2b56;font-weight:650;cursor:pointer}
.es-secondary:hover{border-color:#0866ff;color:#0866ff}
.es-link{margin-left:auto;display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:#677991;font-size:13px;cursor:pointer;text-decoration:underline}
.es-msg{margin:10px 0 0;padding:9px 12px;border-radius:8px;font-size:14px}.es-msg.ok{background:#e7f7ec;color:#17692e}.es-msg.err{background:#fff1f1;color:#9b1c1c}
.es-how{border:1px solid #dce6f5;border-radius:12px;padding:16px;background:#fff}
.es-how h3{margin:0 0 10px;font-size:17px}.es-how-tabs{display:flex;gap:8px}
.es-how ol{margin:12px 0 0;padding-left:20px;color:#314b70;line-height:1.7;font-size:14.5px}
.es-cta{display:flex;gap:14px;padding:18px;border-radius:12px;background:linear-gradient(135deg,#0b2b56,#0d3f80);color:#fff}
.es-cta svg{flex-shrink:0;color:#b5ff4a}.es-cta h3{margin:0 0 6px;font-size:17px;color:#fff}.es-cta p{margin:0 0 12px;color:#d7e4f7;line-height:1.6;font-size:14.5px}
@media(max-width:600px){.es-two,.es-socials{grid-template-columns:1fr}.es-templates{grid-template-columns:repeat(2,1fr)}.es-link{margin-left:0}.es-cta{flex-direction:column}}
.es-or{display:flex;align-items:center;gap:10px;margin:12px 0 8px;color:#8aa0bd;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.es-or:before,.es-or:after{content:"";flex:1;height:1px;background:#e3ebf6}
.es-upload{width:100%;justify-content:center}
.es-uploaded{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px;border:1px solid #bfe6ca;border-radius:10px;background:#f3fbf5}
.es-uploaded img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#fff;border:1px solid #e3ebf6;flex-shrink:0}
.es-uploaded div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:13px;color:#17692e}
.es-uploaded code{font-size:11.5px;color:#425a79;overflow-wrap:anywhere}
.es-spin{animation:es-spin 1s linear infinite}@keyframes es-spin{to{transform:rotate(360deg)}}
.es-html-note{display:flex;gap:6px;align-items:flex-start}.es-html-note svg{flex-shrink:0;margin-top:2px}
@media(max-width:600px){.es-uploaded{flex-wrap:wrap}}