/* SIZWEB — Email Signature Generator MAX PRO (add-on, requires tools.css) */

.sigHeader{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.sigHeader h1{margin:0; font-size: clamp(22px, 3.2vw, 36px); font-weight: 950; letter-spacing: -.7px}
.sigHeader p{margin:8px 0 0; color: rgba(255,255,255,.72); font-weight: 650; line-height:1.65; max-width: 92ch}

.sigGrid{display:grid; gap:14px}
@media (min-width: 1024px){.sigGrid{grid-template-columns: 1.1fr .9fr; align-items:start}}

/* ✅ prevent horizontal overflow in CSS Grid */
.sigGrid,
.preview,
.previewBox{ min-width: 0; }

.panel{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background:
    radial-gradient(900px 240px at 12% 0%, rgba(227,6,19,.10), transparent 60%),
    rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.panel h2{margin:0 0 10px; font-size: 16px; font-weight: 950}

.grid2{display:grid; gap:12px}
@media (min-width: 760px){.grid2{grid-template-columns: 1fr 1fr}}

.hr{height:1px; background: rgba(255,255,255,.08); margin: 14px 0}

.segRow{display:flex; gap:10px; flex-wrap:wrap}
.chipBtn{
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight: 950;
  color: rgba(255,255,255,.84);
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.chipBtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18)}
.chipBtn.isActive{border-color: rgba(227,6,19,.45); background: rgba(227,6,19,.14); color:#fff}

.preview{
  position: sticky;
  top: 78px;
  height: fit-content;
  display:grid;
  gap: 12px;
}
.previewBox{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  padding: 14px;
  min-width: 0;
}
.previewFrame{
  width:100%;
  max-width:100%;
  min-height: 260px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: #fff;
  overflow:hidden; /* ✅ */
}
.previewFrame iframe{
  width:100%;
  max-width:100%;
  height: 320px;
  border:0;
  display:block;
}

.kpis{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-weight: 900;
  font-size: 12px;
  color: rgba(255,255,255,.82);
}

.actions{display:flex; gap:10px; flex-wrap:wrap}
.actions .btn{white-space: nowrap}

.codeBox{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(0,0,0,.24);
  padding: 12px;
  overflow:auto;
  max-height: 280px;
  min-width: 0;
}
.codeBox pre{
  margin:0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
  white-space: pre;
}

.fileRow{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between
}
.thumb{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  display:grid; place-items:center; overflow:hidden;
}
.thumb img{width:100%; height:100%; object-fit:cover}

.note{
  color: rgba(255,255,255,.68);
  font-weight: 650;
  line-height: 1.6;
  font-size: 13px;
  margin: 0;
}
.warn{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,202,58,.22);
  background: rgba(255,202,58,.06);
  color: rgba(255,255,255,.82);
  font-weight: 750;
  line-height: 1.65;
  display:none;
}
.warn.show{display:block}

.success{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(64,255,171,.20);
  background: rgba(64,255,171,.06);
  color: rgba(255,255,255,.85);
  font-weight: 750;
  line-height: 1.65;
  display:none;
}
.success.show{display:block}

.smallKey{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);
  font-weight:900;
  font-size:12px;
  color:rgba(255,255,255,.86)
}