/* Compact editing surfaces shared by all three browser tools. */
.tool-workspace { grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr); gap: 22px; }
.tool-controls { padding: 24px; }
.tool-panel-heading { margin-bottom: 20px; padding-bottom: 18px; }
.tool-controls fieldset { margin-bottom: 18px; padding-bottom: 18px; }
.tool-preview-shell { overflow: visible; }
.tool-preview-bar { border-radius: 16px 16px 0 0; }
.tool-action-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid #e6e6e9; background: #fff;
}
.tool-action-bar > :last-child { margin-left: auto; }
.tool-action-label { font-size: 12px; font-weight: 550; color: #676770; margin: 0 5px 0 2px; }
.tool-icon-button, .tool-segment button, .tool-format-choice {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 40px; min-height: 40px; padding: 8px 11px;
  border: 1px solid #dedce4; border-radius: 9px; background: #fff;
  color: #3c3b42; font: inherit; font-size: 12px; cursor: pointer;
}
.tool-icon-button:hover, .tool-segment button:hover { border-color: #a695bd; background: #f8f5fb; }
.tool-icon-button svg, .tool-format-choice svg { width: 19px; height: 19px; flex: 0 0 auto; }
.tool-segment { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #e8e6ec; border-radius: 11px; background: #f7f6f9; }
.tool-segment button { border: 0; background: transparent; }
.tool-segment button[aria-pressed="true"] { background: #ebe4f5; color: #613d94; box-shadow: 0 1px 4px #3e2c591a; }
.tool-page .tool-action-bar select { width: auto; min-height: 40px; padding: 7px 31px 7px 12px; font-size: 12px; }
.tool-action-bar .tool-layout-toggle { width: 40px; height: 40px; min-height: 40px; border-color: #dedce4; background: #fff; }
.tool-action-bar .tool-layout-toggle svg { width: 27px; height: 19px; }
.tool-action-bar .tool-layout-row { gap: 8px; }
.tool-action-bar .tool-layout-row > span { font-size: 11px; }
.tool-swatch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.tool-swatch-bar label { display: inline-grid; place-items: center; margin: 0; width: 38px; height: 38px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.tool-swatch-bar label:hover { background: #f5f3f8; }
.tool-swatch-bar label:has(input:checked) { border-color: #7851b4; background: #f4effa; }
.tool-swatch-bar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tool-swatch-bar label:focus-within { outline: 2px solid #7851b4; outline-offset: 2px; }
.tool-swatch-bar .tool-swatch { width: 22px; height: 22px; border-color: #b7b5bd; }
.tool-swatch-bar .tool-custom-swatch { background: conic-gradient(#c676a9, #7851b4, #538e8d, #e2b862, #c676a9); }
.tool-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.tool-swatches-panel { padding: 10px 13px; border-bottom: 1px solid #e6e6e9; background: #fff; }
.tool-swatches-panel .tool-color-group + .tool-color-group { padding-top: 7px; }
.tool-swatches-panel .tool-field-label { font-size: 12px; margin-bottom: 4px; }
.tool-swatches-panel .tool-custom-color { margin: 10px 0 3px; padding: 13px; border-radius: 10px; background: #f7f6f9; }
.tool-swatches-panel .tool-custom-color label { font-size: 12px; }
.tool-swatches-panel .tool-color-group-secondary { margin-top: 0; border-top: 0; }
.tool-swatches-panel .tool-color-options { gap: 4px; }
.tool-swatches-panel .tool-color-options label { position: relative; display: inline-grid; place-items: center; width: 39px; height: 39px; min-height: 39px; padding: 4px; font-size: 0; gap: 0; }
.tool-swatches-panel .tool-color-options label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tool-swatches-panel .tool-color-options label:focus-within { outline: 2px solid #7851b4; outline-offset: 2px; }
.tool-swatches-panel .tool-swatch { width: 23px; height: 23px; }
.tool-swatches-panel .tool-color-options label:has(input[value="custom"]) { display: inline-flex; width: auto; min-width: 117px; gap: 7px; padding: 4px 9px; font-size: 11px; font-weight: 550; }
.tool-swatches-panel .tool-color-options label:has(input[value="custom"]) .tool-swatch { position: relative; flex: 0 0 23px; }
.tool-custom-plus { position: absolute; right: -6px; bottom: -6px; width: 16px; height: 16px; overflow: visible; pointer-events: none; }
.tool-swatches-panel .tool-rgb-fields { margin-top: 7px; }
#review-card-form .tool-controls { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
.tool-downloads { gap: 8px; }
.tool-downloads .tool-button { min-height: 42px; padding: 10px 13px; font-size: 12px; }
.tool-preview-tools { gap: 8px; }
.tool-zoom-controls button { min-height: 36px; min-width: 36px; }
.tool-photo-select button { min-height: 36px; }
.tool-copy-section { padding-block: 46px; }
.tool-copy-grid { gap: 50px; }
.tool-copy p + p { margin-top: 10px; }
.tool-copy ol li { margin-bottom: 10px; }

/* Email signature editor. */
.signature-identity { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.signature-identity .tool-field:first-child { grid-column: 1 / -1; }
#signature-form .tool-advanced { margin-top: 17px; padding-top: 19px; border-top: 1px solid #eaeaec; }
.signature-preview-wrap { min-height: 215px; display: grid; align-items: center; padding: 18px; background: #f6f6f7; }
.signature-paper { width: 100%; min-height: 170px; padding: 22px; border: 1px solid #e6e6e9; border-radius: 10px; background: #fff; box-shadow: 0 8px 25px #2020240b; overflow-x: auto; }
.signature-paper table { max-width: 100%; }
.signature-paper img { max-width: 88px; }
.signature-layouts label { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; margin: 0; padding: 5px 7px; border-radius: 8px; cursor: pointer; font-size: 11px; color: #4b4a52; }
.signature-layouts label:has(input:checked) { background: #ebe4f5; color: #613d94; box-shadow: 0 1px 4px #3e2c591a; }
.signature-layouts label:focus-within { outline: 2px solid #7851b4; outline-offset: 2px; }
.signature-layouts input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.signature-layouts svg { width: 16px; height: 16px; }
.signature-toolbar { gap: 5px 6px; padding: 7px 10px; }
.signature-toolbar .signature-swatches { margin-left: auto; }
.signature-swatches label { width: 34px; height: 34px; }
.signature-swatches .tool-swatch { width: 20px; height: 20px; }
.signature-swatches .signature-custom-option { display: inline-flex; width: auto; min-width: 117px; height: 39px; min-height: 39px; gap: 7px; padding: 4px 9px; border-color: #d2d1d8; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 550; }
.signature-swatches .signature-custom-option .tool-swatch { position: relative; flex: 0 0 23px; width: 23px; height: 23px; }
.signature-custom-color { display: none; padding: 13px; border-bottom: 1px solid #e6e6e9; background: #fff; }
#signature-form:has(#signature-custom-radio:checked) .signature-custom-color { display: block; }
.signature-custom-color-inner { padding: 13px; border-radius: 10px; background: #f7f6f9; }
.signature-custom-color .tool-rgb-fields { margin-top: 7px; }
.signature-action-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px; background: #fff; border-top: 1px solid #e6e6e9; border-radius: 0 0 16px 16px; }
.signature-action-row .tool-button:first-child { flex: 1 1 auto; }
.signature-steps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; color: #66666e; font-size: 12px; }
.signature-steps li { display: inline-flex; align-items: center; gap: 7px; }
.signature-steps svg { width: 17px; height: 17px; color: #7851b4; }
.signature-hint { padding: 12px 17px; font-size: 12px; line-height: 1.5; color: #66666e; border-top: 1px solid #e6e6e9; background: #fff; }

/* Two direct photo targets before the comparison canvas becomes available. */
.comparison-canvas-wrap { min-height: 500px; }
.comparison-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; min-height: 500px; }
.comparison-drop { position: relative; min-width: 0; min-height: 500px; border: 2px dashed #bfb3d6; border-radius: 11px; overflow: hidden; background: #faf9fc; }
.comparison-drop.is-over { border-color: #7851b4; background: #eee9f7; }
.comparison-drop-label { position: absolute; inset: 0; z-index: 2; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 7px; margin: 0 !important; cursor: pointer; text-align: center; font-size: 14px !important; }
.comparison-drop-label svg { width: 27px; height: 27px; color: #7851b4; }
.comparison-drop-label strong { font-size: 15px; font-weight: 600; color: #28262e; }
.comparison-drop-label > span:last-child { font-size: 12px; font-weight: 400; color: #686572; }
.comparison-number { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #7851b4; color: #fff; font-size: 12px; }
.comparison-drop img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; }
.comparison-drop:has(img:not([hidden])) .comparison-drop-label { justify-content: flex-end; padding: 15px; background: linear-gradient(transparent 60%, #17121bb0); }
.comparison-drop:has(img:not([hidden])) .comparison-drop-label > :not(strong) { display: none; }
.comparison-drop:has(img:not([hidden])) .comparison-drop-label strong { color: #fff; font-size: 12px; }
.comparison-drop .tool-error { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; padding: 6px; background: #fff; border-radius: 5px; }
.comparison-drop:focus-within { outline: 2px solid #7851b4; outline-offset: 3px; }
.comparison-canvas-wrap canvas[hidden], .comparison-stage[hidden] { display: none !important; }
.comparison-toolbar .tool-button { min-height: 40px; padding: 8px 11px; font-size: 12px; }
.comparison-toolbar .tool-button svg { width: 17px; height: 17px; }
.comparison-photo-tab { display: inline-flex; align-items: center; border: 1px solid #d2d1d8; border-radius: 8px; overflow: hidden; }
.tool-photo-select .comparison-photo-tab > button { border: 0; border-radius: 0; }
.tool-photo-select .comparison-photo-tab > button:first-child { padding-inline: 12px; }
.tool-photo-select .comparison-photo-tab > button[aria-pressed="true"] { background: #f4effa; }
.tool-photo-select .comparison-photo-tab .comparison-remove { min-width: 34px; padding: 6px; border-left: 1px solid #dedce4; color: #65616c; }
.tool-photo-select .comparison-photo-tab .comparison-remove:hover { background: #f8eaf1; color: #8a355c; }
.comparison-remove svg { width: 16px; height: 16px; }
.comparison-remove[hidden] { display: none !important; }
#comparison-form { display: flex; flex-direction: column; gap: 18px; }
#comparison-form .tool-preview { order: 0; position: static; width: 100%; }
#comparison-form .tool-preview-shell { display: flex; flex-direction: column; }
#comparison-form .tool-preview-bar { order: 0; }
#comparison-form .comparison-canvas-wrap { order: 1; }
#comparison-form .comparison-toolbar { order: 2; border-top: 1px solid #e6e6e9; }
#comparison-form .tool-preview-tools { order: 3; }
#comparison-form .tool-preview-note { order: 4; }
#comparison-form .tool-controls { order: 1; width: 100%; padding: 18px 22px; }
#comparison-form .tool-advanced-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
#comparison-form .tool-advanced-body > .tool-check,
#comparison-form .tool-advanced-body > .tool-two-fields { grid-column: 1 / -1; }
#comparison-form .tool-jump { display: none; }

@media (max-width: 850px) {
  .tool-workspace { grid-template-columns: 1fr; }
  #review-card-form .tool-controls { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 580px) {
  .tool-action-bar { padding: 9px; }
  .tool-action-bar > :last-child { margin-left: 0; }
  .tool-page .tool-action-bar select { width: auto; max-width: 165px; }
  .tool-action-bar .tool-layout-row > span { display: none; }
  .signature-identity { grid-template-columns: 1fr; gap: 0; }
  .signature-preview-wrap { padding: 12px; min-height: 190px; }
  .signature-paper { padding: 16px; min-height: 155px; }
  .signature-layouts label span { display: none; }
  .signature-toolbar .signature-swatches { margin-left: 0; }
  .comparison-stage { min-height: 250px; gap: 6px; }
  .comparison-canvas-wrap { min-height: 250px; }
  .comparison-drop, .comparison-drop img { min-height: 250px; }
  .comparison-drop-label strong { font-size: 13px; }
  .comparison-drop-label > span:last-child { font-size: 11px; }
  .comparison-toolbar .tool-action-label { display: none; }
  #comparison-form .tool-advanced-body { display: block; }
}