/* Email signature (js/signature.js). The preview is an email, so it stays on white paper in dark mode too. */
.sg2-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 24px; align-items: start; margin-top: 12px; }
.sg2-forms { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sg2-prevwrap { min-width: 0; }
.sg2-edit .sg2-prevwrap { position: sticky; top: 16px; }
.sg2-prevwrap .minihead { margin-top: 12px; }
.sg2-edit .sg2-prevwrap .minihead { margin-top: 0; }
@media (max-width: 1100px) { .sg2-edit { grid-template-columns: minmax(0, 1fr); } .sg2-edit .sg2-prevwrap { position: static; order: -1; } }

/* Photo editor */
.sg2-photoed { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.sg2-crop { width: 112px; height: 112px; border-radius: 50%; flex: none; display: block; object-fit: cover; background: var(--line); }
canvas.sg2-crop { background: transparent; box-shadow: 0 0 0 1px var(--line); }
.sg2-none { display: grid; place-items: center; font: 700 2rem/1 Arial, Helvetica, sans-serif; color: var(--muted); }
.sg2-photoacts { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sg2-photoacts p { margin: 0; }
.sg2-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sg2-sliders { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; font-size: 0.8125rem; color: var(--muted); max-width: 360px; }
.sg2-sliders input[type="range"] { width: 100%; min-height: 32px; accent-color: var(--blue-btn); margin: 0; }
.sg2-fields { margin-top: 4px; }
.sg2-show { border: 0; margin: 12px 0 0; padding: 0; min-width: 0; }
.sg2-show legend { font-size: 0.875rem; font-weight: 600; padding: 0; margin-bottom: 4px; }
.sg2-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0 16px; }
.sg2-show p { margin: 6px 0 0; }

/* Preview: mirrors the email HTML (Arial, #333, round photo, rule, logos, disclaimer) */
.sigp.sg2 { font: 0.8125rem/1.55 Arial, Helvetica, sans-serif; color: #333333; background: #FFFFFF; max-width: 560px; overflow-wrap: anywhere; }
.sg2-off { font-size: 0.875rem; margin-bottom: 14px; }
.sg2-row { display: flex; align-items: center; gap: 18px; }
.sg2-photo { width: 88px; height: 88px; border-radius: 50%; flex: none; object-fit: cover; display: block; }
.sg2-main { min-width: 0; }
.sg2-name { font-size: 1.25rem; line-height: 1.3; font-weight: 700; color: #333333; }
.sg2-role { font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.15em; text-transform: uppercase; color: #8A8A8A; padding-top: 2px; }
.sg2-contact { padding-top: 8px; color: #333333; }
.sg2-contact span { white-space: nowrap; }
.sg2-contact i { font-style: normal; color: #999999; }
.sg2 .sgsep { color: #D0D0D0; font-weight: 400; margin: 0 8px; }
.sg2-addr { font-size: 0.75rem; color: #777777; }
.sg2-web { font-size: 0.75rem; color: #333333; }
.sg2-web span { white-space: nowrap; }
.sg2-rule { height: 0; border-top: 1px solid #E2E2E2; margin-top: 16px; }
.sg2-logos { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.sg2-logos img { height: auto; display: block; }
.sg2-logos .sl-mcp { width: 72px; } .sg2-logos .sl-windoware { width: 96px; } .sg2-logos .sl-bowranda { width: 50px; }
.sg2-disc { margin: 14px 0 0; font-size: 0.6875rem; line-height: 1.45; color: #999999; }
.bmail .sigp.sg2 { background: transparent; }
@media (max-width: 480px) { .sg2-row { gap: 12px; } .sg2-photo { width: 64px; height: 64px; } .sg2-name { font-size: 1.125rem; } .sg2-logos { gap: 16px; } }

/* Email Wizard dark-mode preview */
.bmail.dark .sg2, .bmail.dark .sg2-name, .bmail.dark .sg2-contact, .bmail.dark .sg2-web { color: #E8E8E8; }
.bmail.dark .sg2-role, .bmail.dark .sg2-addr, .bmail.dark .sg2-disc, .bmail.dark .sg2-contact i { color: #B0B0B0; }
.bmail.dark .sg2-rule { border-top-color: #444444; }
.sg2-extra { margin-top: 4px; font-size: 12px; line-height: 18px; color: #555; }