:root {
  --bg: #e8eef5;
  --panel: rgba(248,251,253,.96);
  --white: #fff;
  --line: #cfdbe7;
  --line-strong: #aebfd0;
  --text: #1b2a3c;
  --muted: #66778c;
  --muted-2: #8b99aa;
  --accent: #2b88bd;
  --accent-dark: #1f6f9e;
  --accent-soft: #e5f1f7;
  --green: #1f9a59;
  --red: #c84c4c;
  --shadow: 0 28px 70px rgba(35,67,99,.10);
  --shadow-soft: 0 10px 26px rgba(35,67,99,.07);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: linear-gradient(145deg,#dde6ef 0%,#edf2f7 45%,#e6edf4 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.page-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 4%, rgba(67,137,181,.16), transparent 24%),
    radial-gradient(circle at 94% 16%, rgba(72,157,151,.11), transparent 20%),
    radial-gradient(circle at 58% 100%, rgba(199,166,103,.08), transparent 26%);
}
.app-shell {
  position: relative;
  z-index: 1;
  width: min(1460px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 32px;
}
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 3px 4px 20px;
}
.eyebrow {
  margin-bottom: 5px;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
h1,h2,p { margin: 0; }
h1 {
  color: #122033;
  font-size: clamp(25px, 2.3vw, 32px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.035em;
}
.topbar p {
  margin-top: 7px;
  max-width: 650px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  color: #65788f;
  font-size: 11px;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}
.status-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fba70;
  box-shadow: 0 0 0 4px rgba(47,186,112,.11);
}
.workspace {
  display: grid;
  grid-template-columns: minmax(390px, 560px) minmax(540px, 1fr);
  gap: 20px;
  align-items: start;
}
.panel {
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.editor-panel, .preview-panel { padding: 24px; }
.preview-panel { position: sticky; top: 16px; }
.section-head {
  margin-bottom: 17px;
}
.section-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.section-head h2 {
  color: #17263a;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.section-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field-wide { grid-column: 1 / -1; }
.field > span {
  color: #42546c;
  font-size: 11.5px;
  font-weight: 600;
}
.field em {
  color: #8d9bac;
  font-style: normal;
  font-weight: 500;
}
input[type="text"], input[type="email"], textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: 0;
  background: #fbfdff;
  color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease;
}
input[type="text"], input[type="email"] {
  height: 47px;
  padding: 0 13px;
}
input::placeholder { color: #9aa9ba; }
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: #91cbed;
  box-shadow: 0 0 0 4px rgba(37,143,202,.10);
}
.section-divider {
  height: 1px;
  margin: 24px 0;
  background: var(--line);
}
.segmented {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #f4f8fb;
}
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 8px;
  color: #708197;
  font-size: 10.5px;
  font-weight: 550;
  transition: .15s ease;
}
.segmented input:checked + span {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: 0 3px 10px rgba(35,67,99,.09);
}
.selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.links-selection-bar { margin-top: -2px; }
.selection-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.selection-count strong { color: var(--accent-dark); font-size: 14px; font-weight: 600; }
.ghost-btn {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #65778e;
  font-size: 10.5px;
  font-weight: 550;
  cursor: pointer;
  transition: .15s ease;
}
.ghost-btn:hover { border-color: var(--line-strong); color: #24364c; }
.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.choice-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: #43566e;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease, opacity .14s ease;
  user-select: none;
}
.choice-chip:hover { transform: translateY(-1px); border-color: #b9d9ec; color: var(--accent-dark); }
.choice-chip.active {
  border-color: #93caea;
  background: var(--accent-soft);
  color: #176e9f;
}
.choice-chip.disabled { opacity: .42; cursor: not-allowed; transform: none; }
.choice-chip input { position: absolute; opacity: 0; pointer-events: none; }
.field-note {
  margin-top: 10px;
  color: #8b9aab;
  font-size: 10.5px;
  line-height: 1.55;
}
.quick-link-groups {
  display: grid;
  gap: 15px;
}
.quick-group {
  display: grid;
  gap: 8px;
}
.quick-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6e8096;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.quick-group-title::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #edf2f6;
}
.toggle-list { display: grid; gap: 9px; }
.toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.toggle-row > div { flex: 1; display: grid; gap: 3px; }
.toggle-row strong { font-size: 12px; }
.toggle-row small { color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch {
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #d5e0e9;
  position: relative;
  transition: .18s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.13);
  transition: .18s ease;
}
.toggle-row input:checked + .switch { background: linear-gradient(135deg,#48b0e8,#258fca); }
.toggle-row input:checked + .switch::after { left: 21px; }
.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.client-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.client-badges span {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #7b8ba0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mail-stage {
  overflow: hidden;
  border: 1px solid #e4edf4;
  border-radius: 18px;
  background: #f6f9fb;
  box-shadow: 0 16px 38px rgba(35,67,99,.07);
}
.mock-mail-toolbar {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid #e6edf3;
  background: #fff;
  color: #718196;
  font-size: 11px;
  font-weight: 500;
}
.mock-mail-toolbar i { width: 8px; height: 8px; border-radius: 50%; background: #d3dde6; }
.mock-mail-toolbar span { margin-left: 6px; }
.mock-mail-body {
  min-height: 450px;
  padding: 26px;
  overflow: hidden;
  background: #fff;
}
.signature-preview-shell { width: 100%; overflow: hidden; }
.signature-preview {
  width: 600px;
  transform-origin: top left;
  will-change: transform;
}
.validation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  margin-top: 10px;
}
.validation-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 9px;
  background: #fff7e9;
  color: #9b6a13;
  font-size: 10.5px;
  font-weight: 600;
}
.validation-badge.ready { background: #ebf8f0; color: #237a49; }
.validation-note { color: #8a99aa; font-size: 10px; }
.action-bar { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.btn {
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #26384d;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: 0 8px 18px rgba(35,67,99,.08); }
.btn-primary { border-color: transparent; color: #fff; background: linear-gradient(145deg,#3aa8e3,#237fb6); box-shadow: 0 12px 22px rgba(35,127,182,.20); }
.toast { min-height: 18px; margin-top: 7px; color: var(--green); font-size: 11px; font-weight: 650; opacity: 0; transition: .18s ease; }
.toast.show { opacity: 1; }
.code-box {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.code-box summary { padding: 13px 14px; cursor: pointer; color: #52677f; font-size: 11px; font-weight: 750; }
#htmlOutput {
  min-height: 260px;
  resize: vertical;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px;
  background: #fbfdff;
  color: #41566c;
  font: 10px/1.6 "SFMono-Regular", Consolas, monospace;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4px 0;
  color: #7c8ca0;
  font-size: 10px;
}

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-panel { position: static; }
}
@media (max-width: 720px) {
  .app-shell { width: min(100% - 18px, 1460px); padding-top: 15px; }
  .topbar { flex-direction: column; padding-inline: 1px; }
  .status-pill { align-self: flex-start; }
  .editor-panel, .preview-panel { padding: 17px; border-radius: 18px; }
  .section-head-row, .preview-head { flex-direction: column; }
  .segmented { width: 100%; }
  .segmented label { flex: 1; }
  .segmented span { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .mock-mail-body { min-height: 350px; padding: 18px 12px; }
  .validation-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .action-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .btn-primary { grid-column: 1 / -1; }
  footer { flex-direction: column; }
}

/* v5 control polish */
.editor-panel .choice-chip,
.editor-panel .ghost-btn,
.editor-panel .segmented span {
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
.editor-panel .choice-chip.active {
  box-shadow: inset 0 0 0 1px rgba(37,143,202,.04);
}
@media (max-width: 720px) {
  .chip-grid { gap: 6px; }
  .choice-chip { min-height: 30px; padding: 0 9px; font-size: 10px; }
  .ghost-btn { height: 29px; padding: 0 9px; font-size: 10px; }
  .segmented span { min-height: 29px; padding: 0 9px; font-size: 10px; }
  .action-bar { gap: 7px; }
  .btn { height: 38px; padding: 0 11px; font-size: 10px; }
  .mock-mail-body { padding-top: 14px; }
}
@media (max-width: 430px) {
  .editor-panel, .preview-panel { padding: 14px; }
  .topbar h1 { font-size: 24px; }
  .section-head h2 { font-size: 16px; }
  .choice-chip { min-height: 29px; padding-inline: 8px; }
  .mock-mail-body { padding-left: 8px; padding-right: 8px; }
}

/* v7 compact admin choice buttons */
.editor-panel .chip-grid { gap: 5px; }
.editor-panel .choice-chip {
  min-height: 30px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
}
.editor-panel .choice-chip.active {
  background: #eef7fd;
  border-color: #91c9e8;
  color: #176e9f;
}
.editor-panel .quick-group-title { font-weight: 500; }
.editor-panel .ghost-btn {
  height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
}
.editor-panel .segmented span {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 500;
}
@media (max-width: 720px) {
  .editor-panel .chip-grid { gap: 5px; }
  .editor-panel .choice-chip { min-height: 29px; padding: 0 8px; font-size: 10px; }
}
@media (max-width: 430px) {
  .editor-panel .choice-chip { min-height: 28px; padding: 0 7px; font-size: 9.5px; }
}


/* v8 final balance + typography controls */
.panel {
  border: 1px solid rgba(183,198,213,.72);
  background: linear-gradient(180deg, rgba(251,253,255,.97), rgba(246,250,252,.96));
  box-shadow: 0 24px 58px rgba(46,69,94,.12);
}
.editor-panel {
  background: linear-gradient(180deg, rgba(248,251,253,.98), rgba(243,248,251,.97));
}
.preview-panel {
  background: linear-gradient(180deg, rgba(250,252,254,.98), rgba(246,249,252,.98));
}
.mail-stage {
  border-color: #cedae5;
  background: #eef3f7;
  box-shadow: 0 18px 40px rgba(41,65,91,.10);
}
.mock-mail-toolbar { background: #f7fafc; border-bottom-color: #d9e3eb; }
.mock-mail-body { background: #fff; }
.status-pill { background: rgba(248,252,250,.9); border-color: #cddbd6; }

.signature-typebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid #ccd9e5;
  border-radius: 15px;
  background: linear-gradient(135deg,#f2f7fa,#edf5f5);
}
.typebar-copy { display: grid; gap: 4px; min-width: 0; }
.typebar-copy strong { color: #31465a; font-size: 11.5px; font-weight: 600; }
.typebar-copy span { color: #76879a; font-size: 10px; line-height: 1.45; }
.typebar-controls { display: flex; gap: 8px; flex: 0 0 auto; }
.mini-field { display: grid; gap: 4px; }
.mini-field > span { color: #6d7f92; font-size: 9.5px; font-weight: 500; }
.mini-field select {
  height: 31px;
  min-width: 114px;
  padding: 0 28px 0 9px;
  border: 1px solid #c9d6e2;
  border-radius: 9px;
  outline: 0;
  background-color: #fff;
  color: #34485d;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}
.mini-field select:focus { border-color: #84b9d7; box-shadow: 0 0 0 3px rgba(43,136,189,.08); }

/* Smaller, lighter admin chips — signature buttons are unaffected */
.editor-panel .chip-grid { gap: 5px; }
.editor-panel .choice-chip {
  min-height: 27px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 9.75px;
  font-weight: 500;
  background: #f9fbfd;
  border-color: #cfdbe6;
}
.editor-panel .choice-chip:hover { background: #f0f6fa; }
.editor-panel .choice-chip.active {
  background: #dfeef6;
  border-color: #91bdd5;
  color: #1e6f9a;
  box-shadow: none;
}
.editor-panel .ghost-btn {
  height: 27px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 500;
  background: #f9fbfd;
}
.editor-panel .segmented { background: #e8eef3; border-color: #cbd8e3; }
.editor-panel .segmented span {
  min-height: 27px;
  padding: 0 9px;
  font-size: 9.5px;
  font-weight: 500;
}
.editor-panel .segmented input:checked + span { background: #fff; color: #236f9a; }
.btn { font-weight: 500; }
.btn-primary { font-weight: 600; background: linear-gradient(145deg,#3c9acb,#287dac); }
.validation-badge { font-weight: 500; }

@media (max-width: 720px) {
  .signature-typebar { align-items: stretch; flex-direction: column; gap: 10px; }
  .typebar-controls { width: 100%; }
  .mini-field { flex: 1; }
  .mini-field select { width: 100%; min-width: 0; }
  .editor-panel .choice-chip { min-height: 27px; padding: 0 7px; font-size: 9.5px; }
}
@media (max-width: 430px) {
  .typebar-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .app-shell { width: calc(100% - 12px); }
  .editor-panel, .preview-panel { padding: 12px; }
  .action-bar { grid-template-columns: 1fr 1fr; }
  .btn { min-width: 0; }
}


/* v9 — final visual refinement */
:root {
  --slate: #3f4d5c;
  --slate-dark: #303943;
  --teal: #557f80;
  --teal-soft: #e7f0ef;
  --sand: #c39a62;
  --sand-soft: #f4ede3;
  --steel: #71889b;
}
body {
  background:
    radial-gradient(circle at 5% 3%, rgba(68,126,168,.16), transparent 25%),
    radial-gradient(circle at 96% 10%, rgba(85,127,128,.13), transparent 22%),
    radial-gradient(circle at 70% 94%, rgba(195,154,98,.10), transparent 26%),
    linear-gradient(145deg,#dfe7ee 0%,#edf2f5 46%,#e4eaee 100%);
}
.page-glow {
  background:
    linear-gradient(90deg, rgba(63,77,92,.035), transparent 18%, transparent 82%, rgba(85,127,128,.04)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.72), transparent 38%);
}
.app-shell { width: min(1420px, calc(100% - 32px)); }
.workspace {
  grid-template-columns: minmax(360px, 485px) minmax(560px, 1fr);
  gap: 22px;
}
.topbar {
  position: relative;
  padding-bottom: 18px;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 86px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--teal), var(--sand));
}
.status-pill {
  background: var(--slate-dark);
  border-color: var(--slate-dark);
  color: #f1f5f8;
  box-shadow: 0 12px 26px rgba(48,57,67,.14);
}
.status-pill span { background: #55c987; box-shadow: 0 0 0 4px rgba(85,201,135,.14); }
.editor-panel {
  padding: 21px;
  background: linear-gradient(180deg, rgba(249,251,252,.98), rgba(243,247,249,.98));
}
.preview-panel {
  background: linear-gradient(180deg, rgba(249,252,253,.99), rgba(243,248,249,.98));
  border-color: rgba(162,183,194,.78);
}
.section-head h2 { color: var(--slate-dark); font-weight: 600; }
.section-divider { background: linear-gradient(90deg, #c9d5df, #dce4e9 72%, rgba(195,154,98,.35)); }
.form-grid {
  max-width: 430px;
  gap: 11px;
}
.field { gap: 6px; }
.field > span { font-size: 10.75px; font-weight: 550; color: #495a6c; }
input[type="text"], input[type="email"] {
  height: 42px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 12px;
  background: #fcfdfe;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: #82b2c8;
  box-shadow: 0 0 0 3px rgba(85,127,128,.10);
}

.signature-typebar {
  margin-top: 16px;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-color: #c6d4dc;
  background: linear-gradient(135deg,#eef4f6 0%,#edf3f2 52%,#f5f0e8 100%);
}
.typebar-copy strong { color: var(--slate-dark); font-weight: 600; }
.type-control-grid { display: grid; gap: 8px; }
.type-control-row {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) repeat(3, 92px);
  gap: 7px;
  align-items: end;
  padding: 9px 10px;
  border: 1px solid rgba(183,198,208,.72);
  border-radius: 11px;
  background: rgba(255,255,255,.68);
}
.type-control-row:nth-child(2) { border-left: 3px solid rgba(85,127,128,.62); }
.type-control-row:nth-child(3) { border-left: 3px solid rgba(113,136,155,.62); }
.type-control-row:nth-child(4) { border-left: 3px solid rgba(195,154,98,.72); }
.type-control-label {
  align-self: center;
  color: #435365;
  font-size: 10.5px;
  font-weight: 550;
}
.mini-field > span { font-size: 8.75px; color: #718090; }
.mini-field select {
  min-width: 0;
  width: 100%;
  height: 29px;
  padding: 0 23px 0 8px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 500;
}

.quick-group-title { color: var(--teal); }
.editor-panel .choice-chip {
  min-height: 26px;
  padding: 0 7px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 450;
}
.editor-panel .choice-chip.active {
  background: #e7f2f6;
  border-color: #8eb9cb;
  color: #255f7b;
}
.editor-panel .ghost-btn {
  height: 26px;
  font-size: 9px;
  font-weight: 500;
}
.editor-panel .segmented span {
  min-height: 26px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 500;
}
.toggle-row { background: rgba(255,255,255,.72); border-color: #cdd9e2; }
.toggle-row strong { font-weight: 550; color: #394a5c; }
.toggle-row input:checked + .switch { background: linear-gradient(135deg,#4a91b8,#557f80); }
.mail-stage { border-color: #c8d5dd; }
.mock-mail-toolbar { background: #f4f7f8; color: #596a7b; }
.client-badges span:nth-child(2) { border-color: #cbd7df; color: var(--slate); }
.client-badges span:nth-child(3) { border-color: #c9dbd8; color: var(--teal); }
.btn-primary { background: linear-gradient(145deg,#3e93be,#376f8f); }
.code-box { border-color: #cbd8df; }
footer { color: #687786; }
footer span:last-child { color: var(--teal); }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .form-grid { max-width: none; }
}
@media (max-width: 720px) {
  .app-shell { width: calc(100% - 14px); }
  .editor-panel, .preview-panel { padding: 14px; }
  .type-control-row {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .type-control-label { grid-column: 1 / -1; }
  .form-grid { gap: 10px; }
  input[type="text"], input[type="email"] { height: 40px; }
  .mock-mail-body { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 430px) {
  .signature-typebar { padding: 10px; }
  .type-control-row { padding: 8px; }
  .mini-field select { font-size: 9px; }
  .action-bar { gap: 6px; }
}


/* v11 — final polish: utility buttons + restrained color accents */
#clearIndustries,
#clearLinks {
  background: #f7eeec;
  border-color: #e5cbc6;
  color: #8b554f;
}
#clearIndustries:hover,
#clearLinks:hover {
  background: #f3e6e3;
  border-color: #dcbab4;
  color: #744640;
}
#classicLinks {
  background: #e7f2f0;
  border-color: #bdd8d3;
  color: #416f6c;
}
#classicLinks:hover {
  background: #dcecea;
  border-color: #a9cbc5;
  color: #345c59;
}
.button-control-row {
  background: linear-gradient(90deg, rgba(255,255,255,.78), rgba(241,247,249,.82));
}
.selection-count strong { color: #2d708f; }
.quick-group:nth-child(2) .quick-group-title { color: #596f85; }
.quick-group:nth-child(3) .quick-group-title { color: #7a6650; }

@media (max-width: 720px) {
  #clearIndustries,
  #clearLinks,
  #classicLinks { min-height: 28px; }
}


/* v12 — typography sizes + custom quick-link colors */
.button-control-row {
  grid-template-columns: minmax(96px,1fr) 102px 70px 70px 88px;
  align-items: end;
}
.color-field input[type="color"] {
  width: 100%;
  height: 29px;
  padding: 3px;
  border: 1px solid #c8d5dd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 1px; }
.color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.color-field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }
@media (max-width: 720px) {
  .button-control-row { grid-template-columns: 1fr 1fr; }
  .button-control-row .type-control-label { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
  .button-control-row { grid-template-columns: 1fr 1fr; }
  .color-field input[type="color"] { height: 31px; }
}


/* v13 — header logo + truly responsive typography controls */
.topbar {
  gap: 18px;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.header-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
}
.header-copy { min-width: 0; }
.workspace > * { min-width: 0; }
.editor-panel,
.preview-panel,
.signature-typebar,
.type-control-grid,
.type-control-row,
.mini-field { min-width: 0; }

/* keep left column comfortable without sacrificing preview */
.workspace {
  grid-template-columns: minmax(410px, 510px) minmax(0, 1fr);
}

.type-control-row {
  grid-template-columns: minmax(82px, 1.08fr) repeat(3, minmax(68px, 1fr));
  gap: 6px;
}
.type-control-row > * { min-width: 0; }
.mini-field select {
  min-width: 0;
  max-width: 100%;
}
.button-control-row {
  grid-template-columns:
    minmax(82px, 1.15fr)
    minmax(78px, 1fr)
    minmax(48px, .62fr)
    minmax(48px, .62fr)
    minmax(70px, .9fr);
  gap: 6px;
}
.color-field input[type="color"] { min-width: 0; }

@media (max-width: 1240px) {
  .workspace { grid-template-columns: minmax(400px, 480px) minmax(0, 1fr); }
  .type-control-row {
    grid-template-columns: minmax(76px, 1fr) repeat(3, minmax(64px, 1fr));
  }
  .button-control-row {
    grid-template-columns: minmax(76px,1fr) minmax(72px,1fr) 46px 46px minmax(66px,.9fr);
  }
}
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .editor-panel { max-width: 760px; width: 100%; }
  .form-grid { max-width: 560px; }
  .type-control-row {
    grid-template-columns: minmax(110px,1.1fr) repeat(3,minmax(100px,1fr));
  }
  .button-control-row {
    grid-template-columns: minmax(110px,1.1fr) minmax(110px,1fr) 72px 72px minmax(96px,.9fr);
  }
}
@media (max-width: 760px) {
  .header-brand { gap: 10px; }
  .header-logo { width: 48px; height: 48px; }
  .type-control-row,
  .button-control-row {
    grid-template-columns: 1fr 1fr;
  }
  .type-control-label { grid-column: 1 / -1; }
  .editor-panel { max-width: none; }
  .form-grid { max-width: none; }
}
@media (max-width: 430px) {
  .header-logo { width: 42px; height: 42px; }
  .header-brand { align-items: flex-start; }
  .type-control-row,
  .button-control-row { grid-template-columns: 1fr; }
  .type-control-label { grid-column: auto; }
}