/* ====== 34 邮件签名生成器 · 信纸米白 + 墨绿 ====== */
.tsk.esg{
  --tsk-bg:#f7f4ec;
  --tsk-card:#ffffff;
  --tsk-card-2:#fbf9f3;
  --tsk-ink:#1c2521;
  --tsk-sub:#5a6660;
  --tsk-faint:#919a93;
  --tsk-line:#e6e0d1;
  --tsk-line-2:#f2eee3;
  --tsk-brand:#0f7b6c;
  --tsk-brand-2:#0a5d51;
  --tsk-brand-soft:#e6f2ef;
  --tsk-brand-ink:#0b6357;
  --tsk-gold:#b48a3c;
  --tsk-gold-soft:#f7eeda;
  --tsk-shadow-sm:0 1px 2px rgba(28,37,33,.06),0 8px 20px rgba(28,37,33,.05);
  --tsk-shadow:0 2px 6px rgba(28,37,33,.08),0 20px 44px rgba(28,37,33,.09);
  background:
    radial-gradient(720px 320px at 100% -10%, rgba(15,123,108,.10), transparent 62%),
    linear-gradient(180deg,#f7f4ec 0%,#f4f0e5 100%);
}
:root[data-theme="dark"] .tsk.esg{
  --tsk-bg:#121512;
  --tsk-card:#1a1f1b;
  --tsk-card-2:#212721;
  --tsk-ink:#eef0ea;
  --tsk-sub:#b3bbb2;
  --tsk-faint:#7f887f;
  --tsk-line:#333a32;
  --tsk-line-2:#272d26;
  --tsk-brand:#4fbba8;
  --tsk-brand-2:#6fd2c1;
  --tsk-brand-soft:rgba(79,187,168,.13);
  --tsk-brand-ink:#7cd8c7;
  --tsk-gold:#e0bc74;
  --tsk-gold-soft:rgba(224,188,116,.13);
  --tsk-shadow-sm:0 1px 2px rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.3);
  --tsk-shadow:0 2px 6px rgba(0,0,0,.55),0 20px 44px rgba(0,0,0,.4);
  background:
    radial-gradient(720px 320px at 100% -10%, rgba(79,187,168,.12), transparent 62%),
    linear-gradient(180deg,#121512 0%,#141813 100%);
}

/* ---------- 首屏 ---------- */
.esg-hero{display:grid;grid-template-columns:minmax(0,1fr) 394px;gap:30px;padding:30px 0 24px;align-items:stretch;}
.esg-hero-l{display:flex;flex-direction:column;}
.esg-hero-l>.tsk-hs{flex:1 1 auto;}
.esg-hero-l .tsk-h1 b{color:var(--tsk-brand-ink);}
.esg-hero-r{align-self:start;}

.esg-picker{
  background:var(--tsk-card);
  border:1px solid var(--tsk-line);
  border-radius:14px;
  box-shadow:var(--tsk-shadow);
  overflow:hidden;
}
.esg-picker-hd{padding:15px 17px 11px;border-bottom:1px dashed var(--tsk-line);}
.esg-picker-hd b{display:block;font-size:13.5px;font-weight:800;color:var(--tsk-ink);}
.esg-picker-hd small{display:block;margin-top:2px;font-size:10.5px;color:var(--tsk-faint);}
.esg-tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:13px 15px 5px;}
.esg-tpl{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 5px 9px;border-radius:9px;cursor:pointer;
  border:1.5px solid var(--tsk-line);background:var(--tsk-card-2);
  color:var(--tsk-sub);transition:.15s;
}
.esg-tpl:hover{border-color:var(--tsk-brand);}
.esg-tpl.on{border-color:var(--tsk-brand);background:var(--tsk-brand-soft);color:var(--tsk-brand-ink);}
.esg-tpl b{font-size:11px;font-weight:800;line-height:1.3;}
.esg-tpl small{font-size:9.5px;color:var(--tsk-faint);}
.esg-tpl-demo{
  width:100%;height:38px;border-radius:5px;background:var(--tsk-card);
  border:1px solid var(--tsk-line);padding:7px 6px;display:flex;
  flex-direction:column;gap:3px;justify-content:center;position:relative;overflow:hidden;
}
.esg-tpl-demo i{display:block;height:3px;border-radius:2px;background:#c7d1cb;}
.esg-tpl-demo i:nth-child(1){width:62%;background:#5f6b64;}
.esg-tpl-demo i:nth-child(2){width:48%;}
.esg-tpl-demo i:nth-child(3){width:80%;}
.esg-tpl-demo.line i:nth-child(3){margin-top:3px;}
.esg-tpl-demo.block{padding-left:12px;}
.esg-tpl-demo.block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--tsk-brand);}
.esg-tpl-demo.card{border-radius:4px;box-shadow:0 2px 6px rgba(28,37,33,.12);}
.esg-tpl.is-card.on .esg-tpl-demo{box-shadow:0 3px 8px rgba(15,123,108,.18);}
.esg-go{
  display:block;width:calc(100% - 30px);margin:10px 15px 0;height:38px;border-radius:8px;cursor:pointer;
  border:0;background:linear-gradient(135deg,var(--tsk-brand),var(--tsk-brand-2));
  color:#fff;font:800 12.5px/1 var(--tsk-font);
  box-shadow:0 8px 18px rgba(15,123,108,.24);
}
.esg-go:hover{filter:brightness(1.07);}
.esg-picker-note{padding:10px 17px 14px;font-size:10px;line-height:1.7;color:var(--tsk-faint);}

/* ---------- 工作区 ---------- */
.esg-work{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:16px;align-items:start;margin-top:6px;}
.esg-form{overflow:hidden;}
.esg-form-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--tsk-line);
  background:linear-gradient(180deg,var(--tsk-card),var(--tsk-card-2));
}
.esg-form-hd span{font:800 10.5px/1.6 var(--tsk-num);color:var(--tsk-brand-ink);background:var(--tsk-brand-soft);padding:4px 9px;border-radius:99px;}
.esg-form-body{padding:15px 20px 17px;}
.esg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.esg-field{display:block;margin-bottom:10px;}
.esg-field>span{display:block;margin-bottom:5px;font-size:11px;font-weight:800;color:var(--tsk-sub);}
.esg-field>span em{font-style:normal;color:var(--tsk-bad);}
.esg-field input,.esg-field select{
  width:100%;height:37px;padding:0 11px;
  border:1.5px solid var(--tsk-line);border-radius:7px;
  background:var(--tsk-card-2);color:var(--tsk-ink);
  font:600 13px/37px var(--tsk-font);outline:none;transition:.15s;
}
.esg-field input[type="url"]{font-size:12px;}
.esg-field input:focus{border-color:var(--tsk-brand);background:var(--tsk-card);box-shadow:0 0 0 3px var(--tsk-brand-soft);}
.esg-err{display:none;margin-top:4px;font-size:10.5px;font-style:normal;font-weight:700;color:var(--tsk-bad);}
.esg-field.bad input{border-color:var(--tsk-bad);box-shadow:0 0 0 3px var(--tsk-bad-soft);}
.esg-field.bad .esg-err{display:block;}
.esg-color{display:flex;gap:7px;align-items:center;}
.esg-color input[type="color"]{width:44px;height:37px;padding:3px;border-radius:7px;flex:none;cursor:pointer;}
.esg-color input[type="text"]{flex:1;font-family:var(--tsk-num);text-transform:uppercase;}
.esg-seg{display:flex;gap:5px;}
.esg-seg button{
  flex:1;height:37px;border-radius:7px;cursor:pointer;
  border:1.5px solid var(--tsk-line);background:var(--tsk-card-2);
  color:var(--tsk-sub);font:700 11.5px/1 var(--tsk-font);transition:.15s;
}
.esg-seg button.on{background:var(--tsk-brand);border-color:var(--tsk-brand);color:#fff;}
.esg-form-tip{margin:4px 0 0;font-size:10.5px;color:var(--tsk-faint);}
.esg-form-tip em{font-style:normal;color:var(--tsk-bad);}

/* ---------- 邮件预览 ---------- */
.esg-preview-col{position:sticky;top:14px;}
.esg-mail{
  border:1px solid var(--tsk-line);border-radius:13px;overflow:hidden;
  background:var(--tsk-card);box-shadow:var(--tsk-shadow);
  transition:background .2s;
}
.esg-mail-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 13px;background:var(--tsk-card-2);
  border-bottom:1px solid var(--tsk-line);
}
.esg-mail-bar span{width:8px;height:8px;border-radius:50%;background:#d3b98a;}
.esg-mail-bar span:nth-child(2){background:#9fbfa8;}
.esg-mail-bar span:nth-child(3){background:#c7c2b0;}
.esg-mail-bar b{margin-left:7px;font:700 10px/1 var(--tsk-num);letter-spacing:.14em;color:var(--tsk-faint);}
.esg-mail-meta{padding:11px 15px;border-bottom:1px solid var(--tsk-line-2);}
.esg-mail-meta p{margin:0 0 3px;font-size:11px;color:var(--tsk-sub);}
.esg-mail-meta p b{display:inline-block;min-width:38px;color:var(--tsk-faint);font-weight:700;}
.esg-mail-body{padding:15px;min-height:210px;background:#fdfdfb;}
.esg-mail-text{margin:0 0 18px;font-size:11.5px;line-height:1.9;color:#7c857c;}
.esg-mail[data-bg="dark"]{background:#182019;}
.esg-mail[data-bg="dark"] .esg-mail-bar{background:#111713;border-color:#2b352c;}
.esg-mail[data-bg="dark"] .esg-mail-meta{border-color:#2b352c;}
.esg-mail[data-bg="dark"] .esg-mail-meta p{color:#9fb3a5;}
.esg-mail[data-bg="dark"] .esg-mail-body{background:#1e2720;}
.esg-mail[data-bg="dark"] .esg-mail-text{color:#8fa295;}
.esg-mail[data-bg="dark"] .esg-sig{background:#fff;border-radius:6px;padding:13px;}

/* 预览中的签名容器（HTML 由 JS 内联样式生成） */
.esg-sig{max-width:480px;overflow:hidden;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;}
.esg-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.esg-act{
  height:33px;padding:0 13px;border-radius:7px;cursor:pointer;
  border:1px solid var(--tsk-line);background:var(--tsk-card);
  color:var(--tsk-sub);font:700 11.5px/1 var(--tsk-font);transition:.14s;
}
.esg-act:hover{border-color:var(--tsk-brand);color:var(--tsk-brand-ink);}
.esg-act.is-main{background:var(--tsk-brand);border-color:var(--tsk-brand);color:#fff;}
.esg-act.is-main:hover{filter:brightness(1.07);color:#fff;}
.esg-action-note{margin-top:9px;font-size:10.5px;line-height:1.7;color:var(--tsk-faint);}

/* ---------- 清单 ---------- */
.esg-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.esg-check{
  position:relative;padding:16px 18px 15px 42px;
  border:1px solid var(--tsk-line);border-radius:10px;
  background:var(--tsk-card);box-shadow:var(--tsk-shadow-sm);
}
.esg-check::before{
  content:"✓";position:absolute;left:15px;top:15px;
  width:19px;height:19px;border-radius:50%;
  background:var(--tsk-brand-soft);color:var(--tsk-brand-ink);
  font:800 10px/19px var(--tsk-font);text-align:center;
}
.esg-check b{display:block;font-size:13px;font-weight:800;color:var(--tsk-ink);}
.esg-check span{display:block;margin-top:4px;font-size:12px;line-height:1.8;color:var(--tsk-sub);}

/* ---------- Toast ---------- */
.esg-toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,16px);
  z-index:9999;max-width:86vw;padding:10px 20px;border-radius:99px;
  background:var(--tsk-ink);color:var(--tsk-bg);
  font-size:13px;font-weight:700;text-align:center;
  opacity:0;pointer-events:none;transition:.24s;box-shadow:var(--tsk-shadow);
}
.esg-toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .esg-work{grid-template-columns:1fr;}
  .esg-preview-col{position:static;}
}
@media (max-width:900px){
  .esg-hero{grid-template-columns:1fr;gap:22px;}
  .esg-checks{grid-template-columns:1fr;}
  .esg-grid2{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .esg-tpl-grid{grid-template-columns:1fr;}
  .esg-form-body{padding:14px 15px;}
}

/* ---------- 键盘可访问 ---------- */
.tsk.esg button:focus-visible,
.tsk.esg input:focus-visible,
.tsk.esg select:focus-visible,
.tsk.esg textarea:focus-visible{
  outline:2px solid var(--tsk-brand);
  outline-offset:2px;
}
.esg-tpl:active,
.esg-go:active,
.esg-act:active{transform:translateY(1px);}
.esg-mail-bar b{text-transform:uppercase;}
.esg-sig img{max-width:100%;height:auto;}
.esg-sig a{text-decoration:none;}

/* ---------- 深色下的邮件预览补充 ---------- */
:root[data-theme="dark"] .tsk.esg .esg-mail-text{color:#9fb0a2;}
:root[data-theme="dark"] .tsk.esg .esg-tpl-demo{background:#20261f;border-color:#333a32;}
:root[data-theme="dark"] .tsk.esg .esg-tpl-demo i{background:#4d584d;}
:root[data-theme="dark"] .tsk.esg .esg-tpl-demo i:nth-child(1){background:#8fa08f;}

/* ---------- 打印 ---------- */
@media print{
  .tsk.esg .esg-hero,
  .tsk.esg .esg-form,
  .tsk.esg .esg-actions,
  .tsk.esg .esg-action-note,
  .tsk.esg .esg-checks,
  .tsk.esg .esg-toast,
  .tsk.esg .tskb,
  .tsk.esg .tsk-crumb,
  .tsk.esg .tsk-foot{display:none!important;}
  .tsk.esg{background:#fff!important;}
  .tsk.esg .esg-work{display:block;margin:0;}
  .tsk.esg .esg-preview-col{position:static;}
  .tsk.esg .esg-mail{border:0;box-shadow:none;}
  .tsk.esg .esg-mail-bar,
  .tsk.esg .esg-mail-meta,
  .tsk.esg .esg-mail-text{display:none;}
  .tsk.esg .esg-mail-body{padding:0;min-height:0;background:#fff;}
  .tsk.esg .esg-sig{max-width:none;}
}