/* ============================================================
   Email Signature Generator — Deep AI Consulting
   Brand tokens mirror the main site (paper / ink / teal).
   ============================================================ */
:root{
  --paper:#faf8f4; --paper-2:#f1ede4; --ink:#16181c; --ink-soft:#454a52;
  --ink-faint:#8b8f97; --line:#e4ded2; --teal:#0e6e63; --teal-deep:#0a544b;
  --teal-soft:#d4e8e3; --amber:#c98a2b;
  --fd:"Fraunces",Georgia,serif; --fb:"Hanken Grotesk",system-ui,sans-serif;
  --fm:"JetBrains Mono",monospace;
  --maxw:1140px; --radius:14px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--fb); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-deep)}

/* ---------- top bar ---------- */
.sig-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.25rem,4vw,3rem); border-bottom:1px solid var(--line);
}
.sig-top__brand img{height:34px; width:auto; display:block}
.sig-top__back{font-size:.9rem; text-decoration:none; color:var(--ink-soft)}
.sig-top__back:hover{color:var(--teal-deep)}

/* ---------- layout ---------- */
.sig-wrap{max-width:var(--maxw); margin:0 auto; padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,3rem) 4rem}
.sig-intro{max-width:640px; margin-bottom:2rem}
.sig-eyebrow{
  font-family:var(--fm); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-deep); margin:0 0 .5rem
}
.sig-intro h1{font-family:var(--fd); font-weight:560; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.05; margin:0 0 .6rem}
.sig-sub{color:var(--ink-soft); font-size:1.02rem; margin:0}

.sig-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start}
@media (max-width:880px){ .sig-grid{grid-template-columns:1fr} }

.sig-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; box-shadow:0 22px 50px -34px rgba(22,24,28,.4)
}
.sig-panel__label{
  font-family:var(--fm); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 .8rem
}

/* ---------- form ---------- */
.sig-form{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.sig-field{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.sig-field--full{grid-column:1 / -1}
.sig-field label{font-size:.82rem; font-weight:600; color:var(--ink-soft)}
.sig-opt{font-weight:400; color:var(--ink-faint)}
.sig-field input,.sig-field textarea,.sig-field select{
  font:inherit; font-size:.92rem; color:var(--ink);
  padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); width:100%; transition:border-color .15s var(--ease), box-shadow .15s var(--ease)
}
.sig-field input:focus,.sig-field textarea:focus,.sig-field select:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)
}
.sig-field textarea{resize:vertical}
.sig-hint{font-size:.76rem; color:var(--ink-faint); margin:.35rem 0 0}
.sig-hint--warn{color:var(--amber)}
.sig-hint--warn strong{color:#9a6a1a}

.sig-tabs{display:inline-flex; gap:.25rem; background:var(--paper-2); padding:.2rem; border-radius:9px; margin-bottom:.5rem}
.sig-tab{
  font:inherit; font-size:.8rem; font-weight:600; color:var(--ink-soft);
  border:0; background:transparent; padding:.35rem .7rem; border-radius:7px; cursor:pointer
}
.sig-tab.is-active{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.08)}

.sig-socials{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
@media (max-width:520px){ .sig-socials{grid-template-columns:1fr} .sig-form{grid-template-columns:1fr} }

.sig-accent{display:flex; align-items:center; gap:.6rem}
.sig-accent input[type=color]{width:46px; height:38px; padding:2px; border-radius:9px; cursor:pointer}
.sig-accent__hex{font-family:var(--fm); font-size:.85rem; color:var(--ink-soft)}

/* ---------- preview ---------- */
.sig-preview-col{position:sticky; top:1rem}
@media (max-width:880px){ .sig-preview-col{position:static} }
.sig-stage{
  background:
    linear-gradient(45deg,#eef0f2 25%,transparent 25%,transparent 75%,#eef0f2 75%) 0 0/22px 22px,
    linear-gradient(45deg,#eef0f2 25%,#f7f8f9 25%,#f7f8f9 75%,#eef0f2 75%) 11px 11px/22px 22px,
    #f7f8f9;
  border:1px solid var(--line); border-radius:12px; padding:1.4rem; overflow:auto
}
.sig-stage__inner{background:#fff; display:inline-block; min-width:1px}

/* ---------- export / gate ---------- */
.sig-export{margin-top:1.1rem}
.sig-gate{background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:1.1rem}
.sig-gate__h{font-family:var(--fd); font-weight:560; font-size:1.15rem; margin:0 0 .3rem}
.sig-gate__p{font-size:.86rem; color:var(--ink-soft); margin:0 0 .8rem}
.sig-gate__form{display:flex; gap:.5rem}
.sig-gate__form input{
  flex:1; min-width:0; font:inherit; font-size:.92rem; padding:.65rem .75rem;
  border:1px solid var(--line); border-radius:10px; background:#fff
}
.sig-gate__form input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft)}
.sig-gate__form button{
  font:inherit; font-weight:600; font-size:.92rem; color:#fff; background:var(--teal);
  border:0; border-radius:10px; padding:.65rem 1.1rem; cursor:pointer; white-space:nowrap;
  transition:background .15s var(--ease)
}
.sig-gate__form button:hover{background:var(--teal-deep)}
.sig-gate__form button:disabled{opacity:.6; cursor:default}
.sig-gate__msg{font-size:.82rem; margin:.6rem 0 0; min-height:1em}
.sig-gate__msg[data-state=error]{color:#b42318}
.sig-gate__msg[data-state=success]{color:var(--teal-deep)}

.sig-actions__ok{font-weight:600; color:var(--teal-deep); margin:0 0 .6rem}
.sig-actions__btns{display:flex; gap:.6rem; flex-wrap:wrap}
.sig-btn{
  font:inherit; font-weight:600; font-size:.92rem; cursor:pointer;
  padding:.65rem 1.1rem; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink);
  transition:transform .12s var(--ease), background .15s var(--ease)
}
.sig-btn:hover{background:var(--paper-2)}
.sig-btn:active{transform:scale(.98)}
.sig-btn--primary{background:var(--teal); color:#fff; border-color:var(--teal)}
.sig-btn--primary:hover{background:var(--teal-deep)}
.sig-actions__hint{font-size:.8rem; color:var(--ink-faint); margin:.7rem 0 0}

/* ---------- how-to + footer ---------- */
.sig-how{max-width:720px; margin:3rem auto 0; padding-top:2rem; border-top:1px solid var(--line)}
.sig-how h2{font-family:var(--fd); font-weight:560; font-size:1.4rem; margin:0 0 .8rem}
.sig-how ol{padding-left:1.2rem; color:var(--ink-soft)}
.sig-how li{margin:.4rem 0}
.sig-how code{font-family:var(--fm); font-size:.85em; background:var(--paper-2); padding:.1em .35em; border-radius:5px}
.sig-how__note{font-size:.85rem; color:var(--ink-faint); margin-top:1rem}
.sig-foot{max-width:var(--maxw); margin:3rem auto 0; padding:1.5rem clamp(1.25rem,4vw,3rem); border-top:1px solid var(--line); font-size:.85rem; color:var(--ink-faint)}
.sig-foot a{color:var(--ink-soft)}