/* nexpoint Signatur · Version 10
   One application shell, shared controls and three focused steps. */
.signature-app {
  --sg-surface:var(--nxp-surface,#fff); --sg-soft:var(--nxp-surface-soft,#f5f6f8);
  --sg-text:var(--nxp-text,#20242c); --sg-muted:var(--nxp-muted,#667085);
  --sg-line:var(--nxp-border,#e3e6eb); --sg-accent:var(--nxp-lime,#d0d953);
  font-family:Arial,Helvetica,sans-serif; font-size: .9375rem; line-height:1.5;
  color:var(--sg-text); min-height:65vh;
}
html[data-theme="dark"] .signature-app, body[data-theme="dark"] .signature-app {
  --sg-surface:#191c21; --sg-soft:#20242b; --sg-text:#f2f4f7; --sg-muted:#acb4c2; --sg-line:#343a44;
}
.signature-app *, .signature-app *::before, .signature-app *::after { box-sizing:border-box; }
.signature-app [hidden] { display:none !important; }
.signature-app-shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:24px 0 32px; }
.signature-app .nxp-container { width:100%; max-width:none; margin:0; padding:0; }
.signature-app .nxp-panel { border:1px solid var(--sg-line) !important; border-radius:14px !important; background:var(--sg-surface) !important; box-shadow:none; }
.signature-app h1, .signature-app h2, .signature-app h3, .signature-app p { margin:0; }
.signature-app h1 { font-size:1.75rem; font-weight:700; letter-spacing:-.035em; line-height:1.2; }
.signature-app h2, .signature-app .nxp-title-sm { font-size:1.25rem !important; font-weight:700; letter-spacing:-.025em !important; line-height:1.25 !important; }
.signature-app h3 { font-size:1rem; line-height:1.35; font-weight:700; letter-spacing:0; }
.signature-app button, .signature-app input, .signature-app select, .signature-app textarea { font-family:inherit; }
.signature-app .nxp-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 16px; border:1px solid var(--sg-line) !important; border-radius:8px !important; background:var(--sg-surface) !important; color:var(--sg-text) !important; font-size:.875rem; font-weight:600 !important; line-height:1.3; text-decoration:none; box-shadow:none; cursor:pointer; white-space:normal; }
.signature-app .nxp-btn:hover { background:var(--sg-soft) !important; border-color:var(--sg-line) !important; transform:none; }
.signature-app .nxp-btn-primary { background:var(--sg-accent) !important; color:#131600 !important; border-color:var(--sg-accent) !important; }
.signature-app .nxp-btn-primary:hover { filter:brightness(.96); background:var(--sg-accent) !important; border-color:var(--sg-accent) !important; }
.signature-app .nxp-btn-ghost { border-color:transparent !important; background:transparent !important; padding-left:0; }
.signature-app :is(button,a,summary,[data-layout-card]):focus-visible { outline:2px solid var(--sg-accent); outline-offset:3px; }
.signature-app-header { padding-bottom:18px; }
.signature-breadcrumb { display:inline-flex; align-items:center; gap:7px; color:var(--sg-muted); text-decoration:none; font-size:.75rem; margin-bottom:12px; }
.signature-breadcrumb:hover, .signature-support-line a:hover { text-decoration:underline; }
.signature-app-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.signature-app-heading p { margin-top:5px; font-size:.875rem; color:var(--sg-muted); }
.signature-app-label-pill { color:var(--sg-muted); border:1px solid var(--sg-line); border-radius:6px; padding:5px 10px; font-size:.75rem; white-space:nowrap; }
.signature-flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:0; margin:0 0 24px; border-bottom:1px solid var(--sg-line); scroll-margin-top:96px; }
.signature-flow button { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:8px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:0; background:transparent; color:var(--sg-muted); font:inherit; font-size:.875rem; cursor:pointer; }
.signature-flow button strong { font-weight:600; }
.signature-flow button > span { display:grid; place-items:center; width:23px; height:23px; border:1px solid var(--sg-line); border-radius:50%; font-size:.75rem; font-weight:600; }
.signature-flow button.is-active { border-bottom-color:var(--sg-accent); color:var(--sg-text); }
.signature-flow button.is-active > span { background:var(--sg-accent) !important; color:#131600 !important; border-color:var(--sg-accent) !important; }
.signature-flow button.is-complete > span { border-color:var(--sg-muted); color:var(--sg-text); }
.signature-section-title { margin-bottom:16px; }
.signature-section-title p { margin-top:4px; font-size:.8125rem; color:var(--sg-muted); }
.signature-selection-workspace { display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; align-items:start; }
.signature-template-grid { display:grid; grid-template-columns:1fr; gap:6px; }
.signature-template-card { display:block; position:relative; min-width:0; min-height:52px; padding:9px 12px; border:1px solid transparent; border-radius:9px; background:transparent; cursor:pointer; transition:background .12s,border-color .12s; }
.signature-template-card:hover { background:var(--sg-soft); }
.signature-template-card.is-active { background:var(--sg-surface); border-color:var(--sg-line); box-shadow:0 1px 3px #00000008; }
.signature-template-card input { position:absolute; width:1px; height:1px; opacity:0; }
.template-card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.template-card-head > span:first-child { display:grid; gap:1px; min-width:0; }
.template-name { color:var(--sg-text); font-size:.875rem; font-weight:600; line-height:1.35; }
.template-short { color:var(--sg-muted); font-size:.75rem; line-height:1.4; }
.template-check { display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; border:1px solid var(--sg-line); border-radius:50%; font-size:0; }
.is-active .template-check { background:var(--sg-accent); border-color:var(--sg-accent); }
.is-active .template-check::after { content:'✓'; font-size:11px; font-weight:700; color:#131600; }
.signature-design-browser { min-width:0; border:1px solid var(--sg-line); border-radius:14px; background:var(--sg-surface); overflow:hidden; }
.signature-design-browser-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 20px; height:7rem; }
.signature-design-browser-head > div:first-child { min-width:0; }
.signature-design-kicker { display:block; line-height:1.2; color:var(--sg-muted); font-size:.75rem; font-weight:500; }
.signature-design-browser-head h3 { margin-top:3px; font-size:1.0625rem; }
.signature-design-browser-head p { color:var(--sg-muted); font-size:.75rem; line-height:1.4; margin-top:3px; height:2.8em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.signature-design-controls, .signature-design-dialog-footer > div { display:flex; align-items:center; gap:6px; }
.signature-design-tools { flex-shrink:0; }
.signature-design-arrow, .signature-design-zoom, .signature-design-dialog-close { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:36px; border:1px solid var(--sg-line); border-radius:7px; background:var(--sg-surface); color:var(--sg-text); font-size:.75rem; font-weight:500; cursor:pointer; }
.signature-design-arrow { width:36px; font-size:1rem; }
.signature-design-zoom, .signature-design-dialog-close { padding:0 10px; }
.signature-design-arrow:hover, .signature-design-zoom:hover { background:var(--sg-soft); }
.signature-design-stage { display:flex; align-items:center; justify-content:center; height:294px; padding:24px; overflow:hidden; border-block:1px solid var(--sg-line); background:#eef0f3; }
.signature-design-sheet-wrap { position:relative; flex-shrink:0; }
.signature-design-sheet { position:absolute; top:0; left:0; width:max-content; max-width:none; padding:20px; background:#fff; border-radius:6px; color:#171722; box-shadow:0 2px 12px #1d293911; transform-origin:top left; }
.signature-design-stage a, .signature-design-dialog-content a { pointer-events:none; }
.signature-design-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:70px; padding:12px 20px; }
.signature-design-footer > span { color:var(--sg-muted); font-size:.75rem; }
.signature-design-continue { flex-shrink:0; }
.signature-design-dialog { width:min(900px,calc(100vw - 32px)); max-width:none; height:min(600px,calc(100dvh - 40px)); max-height:calc(100dvh - 40px); padding:0; border:1px solid var(--sg-line); border-radius:14px; background:var(--sg-surface); color:var(--sg-text); overflow:hidden; }
.signature-design-dialog[open] { display:flex; flex-direction:column; }
.signature-design-dialog::backdrop { background:#0c111bcc; }
.signature-design-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px; border-bottom:1px solid var(--sg-line); }
.signature-design-dialog-head h2 { margin:3px 0; font-size:1.125rem !important; }
.signature-design-dialog-head p { color:var(--sg-muted); font-size:.8125rem; }
.signature-design-dialog-content { display:flex; align-items:center; flex:1; min-height:0; overflow:auto; padding:24px; background:#fff; }
.signature-design-dialog-sheet { flex-shrink:0; width:max-content; margin:auto; color:#171722; }
.signature-design-dialog-footer { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-top:1px solid var(--sg-line); font-size:.8125rem; }
.signature-design-dialog-swipe { display:none; }
.signature-plain-sample { margin:0; width:420px; max-width:100%; color:#171722; font:14px/1.6 Arial,Helvetica,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; text-align:left; }
.signature-design-sheet .signature-plain-sample, .signature-design-dialog-sheet .signature-plain-sample { max-width:none; }
.signature-builder { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:20px; align-items:start; }
.signature-builder > * { min-width:0; }
.signature-app .signature-form { padding:22px !important; }
.signature-section-head { padding-bottom:16px; border-bottom:1px solid var(--sg-line); margin-bottom:4px; }
.signature-section-head .nxp-badge { display:none; }
.signature-section-head p { font-size:.8125rem; color:var(--sg-muted); margin-top:4px; }
.signature-form form { display:block; }
.signature-form-section { border:0; border-bottom:1px solid var(--sg-line); border-radius:0; background:transparent; }
.signature-form-section > summary { color:var(--sg-text) !important; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 0; list-style:none; cursor:pointer; font-size:.875rem; }
.signature-form-section > summary::-webkit-details-marker { display:none; }
.signature-form-section > summary b { display:none; }
.signature-form-section > summary strong { font-weight:600; }
.signature-form-section > summary::after { content:'+'; font-size:1.125rem; font-weight:400; color:var(--sg-muted); }
.signature-form-section[open] > summary::after { content:'−'; }
.signature-form-section-body { padding:0 0 18px; }
.signature-field-grid, .signature-color-row, .signature-mobile-setup { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }
.signature-field-grid-compact { margin-top:14px; }
.signature-form label, .signature-app-label { display:grid; gap:6px; color:var(--sg-text); font-size:.8125rem; font-weight:500; }
.signature-app :is(.signature-form,.signature-app-label) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) { width:100%; min-width:0; min-height:42px; margin:0; padding:10px 11px; border:1px solid var(--sg-line) !important; border-radius:7px !important; background:var(--sg-surface) !important; color:var(--sg-text) !important; font-size:.875rem; line-height:1.3; font-weight:400; }
.signature-app input::placeholder, .signature-app textarea::placeholder { color:var(--sg-muted); opacity:.75; }
.signature-app :is(input,textarea,select):focus-visible { outline:2px solid var(--sg-accent) !important; outline-offset:2px !important; }
.signature-form textarea { resize:vertical; }
.signature-form input[type="color"] { padding:4px !important; height:42px; }
.signature-logo-source-grid { display:grid; gap:10px; }
.signature-logo-drop { position:relative; display:grid; grid-template-columns:32px 1fr; align-items:center; column-gap:12px; min-height:82px; padding:14px; border:1px dashed var(--sg-line); border-radius:8px; background:var(--sg-soft); cursor:pointer; }
.signature-logo-drop-icon { grid-row:1/3; display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:var(--sg-surface); font-size:20px; font-weight:400; }
.signature-logo-drop strong { font-size:.8125rem; font-weight:600; }
.signature-logo-drop > span:last-of-type { font-size:.75rem; color:var(--sg-muted); }
.signature-logo-drop.is-dragover { border-color:var(--sg-accent); }
.signature-logo-drop.is-uploading { opacity:.6; pointer-events:none; }
.signature-logo-source-preview { position:absolute; right:12px; top:12px; width:55px; height:55px; padding:4px; object-fit:contain; background:#fff; border-radius:6px; }
.signature-logo-drop:has(.signature-logo-source-preview:not([hidden])) { padding-right:80px; }
.signature-logo-url-block, .signature-advanced { font-size:.75rem; color:var(--sg-muted); }
.signature-logo-url-block summary, .signature-advanced summary { cursor:pointer; }
.signature-logo-url-block label { margin-top:10px; }
.signature-logo-status { display:flex; gap:5px; color:var(--sg-muted); font-size:.75rem; margin-top:8px; }
.signature-logo-status.is-error { color:#c26b58; }
.signature-color-row { margin-top:14px; }
.signature-advanced { margin-top:14px; }
.signature-toggle-grid, .signature-option-stack { display:grid; gap:10px; margin-top:12px; }
.signature-toggle { display:flex !important; align-items:center; gap:10px !important; position:relative; min-height:34px; cursor:pointer; }
.signature-toggle input { position:absolute; width:1px; height:1px; opacity:0; }
.signature-toggle-switch { flex-shrink:0; width:32px; height:19px; padding:2px; border:1px solid var(--sg-line); border-radius:20px; background:var(--sg-soft); }
.signature-toggle-switch > span { display:block; width:13px; height:13px; border-radius:50%; background:var(--sg-muted); transition:transform .12s; }
.signature-toggle input:checked + .signature-toggle-switch { border-color:var(--sg-accent); background:var(--sg-accent); }
.signature-toggle input:checked + .signature-toggle-switch > span { transform:translateX(13px); background:#171722; }
.signature-toggle input:focus-visible + .signature-toggle-switch { outline:2px solid var(--sg-accent); outline-offset:3px; }
.signature-toggle-copy strong { font-size:.8125rem; font-weight:500; }
.signature-option-card { border:0; padding:0; background:transparent; }
.signature-option-fields, .signature-symbol-grid { margin-top:10px; }
.signature-symbol-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.signature-simple-check { display:flex !important; align-items:center; gap:8px !important; margin-top:12px; }
.signature-simple-check input { width:16px; height:16px; accent-color:var(--sg-accent); }
.signature-flow-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:18px; }
.signature-preview-wrap { position:sticky; top:100px; padding:20px !important; }
.signature-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.signature-preview-head .nxp-badge { display:block; width:fit-content; padding:0; border:0 !important; border-radius:0; background:transparent !important; color:var(--sg-muted) !important; font-size:.75rem !important; font-weight:400; text-transform:none; letter-spacing:0; margin-bottom:4px; }
.signature-preview-head h2 { font-size:1.125rem !important; }
.signature-preview-state { flex-shrink:0; font-size:.75rem; color:var(--sg-muted); padding:3px 7px; border:1px solid var(--sg-line); border-radius:5px; }
.signature-preview-modes { display:flex; align-items:center; justify-content:flex-end; gap:4px; margin-bottom:10px; font-size:.75rem; color:var(--sg-muted); }
.signature-preview-modes button { font-size:.75rem; color:var(--sg-muted); padding:4px 8px; border:1px solid transparent; background:transparent; border-radius:5px; cursor:pointer; }
.signature-preview-modes button.is-active { background:var(--sg-soft); border-color:var(--sg-line); color:var(--sg-text); }
.signature-preview-mail { overflow:hidden; min-height:220px; border:1px solid var(--sg-line); border-radius:9px; background:#fff; padding:0 18px 22px; }
.signature-mail-toolbar { display:flex; align-items:center; justify-content:space-between; padding:10px 18px; margin:0 -18px 22px; background:#fafbfc; border-bottom:1px solid #e6e9ef; color:#667085; }
.signature-mail-toolbar small { font-size:11px; }
.signature-mail-dots { font-size:20px; line-height:10px; letter-spacing:2px; }
.signature-mail-text { font-size:13px; color:#51576a; margin-bottom:12px !important; }
.signature-preview { width:100%; min-width:0; overflow:hidden; }
.signature-preview-mail.is-dark-preview { background:#202124; }
.signature-preview-mail.is-dark-preview .signature-mail-toolbar { background:#292b30; border-bottom-color:#3b3d42; color:#e7e8eb; }
.signature-preview-mail.is-dark-preview .signature-mail-text { color:#e7e8eb; }
body[data-signature-layout="plain"] .signature-preview-modes { display:none; }
body[data-signature-layout="plain"] .signature-preview-mail { background:#fff; }
body[data-signature-layout="plain"] .signature-preview-mail .signature-mail-text { color:#51576a; }
.signature-action-status { padding:10px 12px; border:1px solid var(--sg-line); border-radius:7px; background:var(--sg-soft); color:var(--sg-text); font-size:.8125rem; margin:0 0 14px !important; }
.signature-action-status[data-error="true"] { color:#973e2c; background:#fff4ed; border-color:#ecc1b4; }
.signature-use-question { color:var(--sg-muted); font-size:.75rem; margin-bottom:8px !important; }
.signature-target-picker { position:relative; margin-bottom:18px; }
.signature-target-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--sg-line); border-radius:8px; background:var(--sg-soft); }
.signature-target-tabs button { min-height:38px; padding:8px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--sg-muted); font-size:.8125rem; font-weight:500; cursor:pointer; }
.signature-target-tabs button.is-active { border-color:var(--sg-line); background:var(--sg-surface); color:var(--sg-text); box-shadow:0 1px 3px #00000008; }
#signaturePlainTab { padding-right:34px; }
.signature-tab-help { position:absolute; right:7px; top:7px; z-index:4; }
.signature-tab-help summary { display:grid; place-items:center; width:30px; height:32px; cursor:pointer; list-style:none; color:var(--sg-muted); font-size:11px; }
.signature-tab-help summary::before { content:''; position:absolute; width:16px; height:16px; border:1px solid currentColor; border-radius:50%; }
.signature-tab-help summary::-webkit-details-marker { display:none; }
.signature-help-content { position:absolute; top:39px; right:0; width:280px; max-width:calc(100vw - 64px); padding:14px; border:1px solid var(--sg-line); border-radius:8px; background:var(--sg-surface); color:var(--sg-text); box-shadow:0 8px 28px #00000020; font-size:.8125rem; }
.signature-help-content p { margin-top:7px; }
.signature-app [role="tabpanel"] { margin-top:18px; }
.signature-app .signature-plain-output { width:100%; min-height:190px; height:240px; max-height:380px; padding:20px; border:1px solid var(--sg-line) !important; border-radius:9px !important; background:#fff !important; color:#171722 !important; color-scheme:light; resize:vertical; font:14px/1.6 Arial,Helvetica,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.signature-code-label { display:block; font-size:.75rem; color:var(--sg-muted); margin-bottom:8px; }
.signature-mobile-preview { padding:20px; border:1px solid var(--sg-line); border-radius:9px; background:#fff; color:#171722; }
.signature-mobile-preview pre { margin:0; min-height:150px; font:14px/1.6 Arial,Helvetica,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; }
.signature-export-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:16px; }
.signature-main-copy { min-width:210px; margin:16px 0 0; }
.signature-output-note { color:var(--sg-muted); font-size:.75rem; margin-top:10px !important; }
.signature-plain-instructions, .signature-mobile-instructions { margin-top:24px; padding-top:20px; border-top:1px solid var(--sg-line); }
.signature-plain-instructions h3, .signature-mobile-instructions h3 { margin:0 0 14px; font-size:.875rem; }
.signature-app-label { max-width:360px; }
.signature-mobile-setup .signature-app-label { max-width:none; }
.signature-field-hint { color:var(--sg-muted); font-size:.75rem; font-weight:400; }
.signature-app-steps { margin-top:14px; color:var(--sg-muted); font-size:.8125rem; line-height:1.6; }
.signature-app-steps strong { color:var(--sg-text); font-weight:600; }
.signature-app-steps ol { margin:8px 0 0; padding-left:19px; }
.signature-app-steps li { margin-top:5px; padding-left:3px; }
.signature-app-steps a, .signature-plain-format a { color:inherit; text-decoration:underline; }
.signature-plain-format { margin-top:18px; padding:12px 0; border-top:1px solid var(--sg-line); font-size:.8125rem; }
.signature-plain-format summary { cursor:pointer; color:var(--sg-text); font-weight:500; }
.signature-plain-format p { color:var(--sg-muted); margin-top:10px; }
.signature-plain-format a { display:inline-block; color:var(--sg-muted); font-size:.75rem; margin-top:10px; }
.signature-output-test { border-top:1px solid var(--sg-line); padding-top:16px; color:var(--sg-muted); font-size:.75rem; margin:22px 0 10px !important; }
.signature-output-panels > .nxp-btn-ghost { font-size:.8125rem; }
#signatureDesktopPanel > .signature-app-label { margin-top:24px; padding-top:20px; border-top:1px solid var(--sg-line); }
body[data-signature-step="use"] .signature-builder { display:block; max-width:780px; margin-inline:auto; }
body[data-signature-step="use"] .signature-preview-wrap { position:static; padding:24px !important; }
body[data-signature-step="use"][data-signature-target="plain"] .signature-preview-mail,
body[data-signature-step="use"][data-signature-target="plain"] .signature-preview-modes,
body[data-signature-step="use"][data-signature-target="mobile"] .signature-preview-mail,
body[data-signature-step="use"][data-signature-target="mobile"] .signature-preview-modes { display:none; }
.signature-support-line { display:flex; justify-content:center; flex-wrap:wrap; align-items:center; gap:7px; margin-top:26px; padding:16px 0 0; border-top:1px solid var(--sg-line); font-size:.75rem; color:var(--sg-muted); }
.signature-support-line a { color:var(--sg-text); text-decoration:none; }
@media(max-width:1000px) {
  .signature-selection-workspace { grid-template-columns:220px minmax(0,1fr); gap:16px; }
  .signature-design-browser-head { gap:10px; padding:16px; }
  .signature-design-browser-head p { max-width:260px; }
  .signature-design-zoom { width:36px; padding:0; }
  .signature-design-zoom span:last-child { display:none; }
  .signature-builder { grid-template-columns:minmax(0,1fr); max-width:700px; margin-inline:auto; }
  .signature-preview-wrap { position:static; }
  body[data-signature-step="details"] .signature-preview-wrap { display:block; }
}
@media(max-width:650px) {
  .signature-app-shell { width:calc(100% - 32px); padding-top:18px; padding-bottom:96px; }
  .signature-app-header { padding-bottom:12px; }
  .signature-breadcrumb { margin-bottom:9px; }
  .signature-app h1 { font-size:1.5rem; }
  .signature-app-heading p { max-width:260px; font-size:.8125rem; }
  .signature-app-label-pill { display:none; }
  .signature-flow { margin-bottom:18px; scroll-margin-top:84px; }
  .signature-flow button { font-size:.75rem; gap:6px; min-height:46px; }
  .signature-flow button > span { width:20px; height:20px; font-size:.75rem; }
  .signature-app h2, .signature-app .nxp-title-sm { font-size:1.125rem !important; }
  .signature-section-title { margin-bottom:12px; }
  .signature-section-title p { font-size:.75rem; }
  .signature-selection-workspace { display:flex; flex-direction:column; gap:16px; }
  .signature-layout-options, .signature-design-browser { width:100%; }
  .signature-template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .signature-template-card { min-height:56px; padding:9px 10px; border-color:var(--sg-line); }
  .template-short { font-size:.75rem; }
  .template-name { font-size:.8125rem; }
  .template-check { flex-basis:16px; width:16px; height:16px; }
  .signature-design-browser-head { height:6.25rem; padding:14px; gap:10px; }
  .signature-design-browser-head p { font-size:.75rem; max-width:220px; }
  .signature-design-stage { height:260px; padding:18px; }
  .signature-design-sheet { padding:14px; }
  .signature-design-controls { gap:4px; }
  .signature-design-arrow, .signature-design-zoom { width:32px; min-height:34px; }
  .signature-design-footer, .signature-flow-actions { position:fixed; inset:auto 0 0; z-index:20; margin:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--sg-surface); border-top:1px solid var(--sg-line); box-shadow:0 -4px 20px #0000000c; }
  .signature-design-footer > span { max-width:125px; font-size:.75rem; }
  .signature-design-continue { max-width:215px; font-size:.8125rem !important; }
  .signature-app .signature-form, .signature-preview-wrap, body[data-signature-step="use"] .signature-preview-wrap { padding:16px !important; }
  .signature-builder { gap:16px; }
  .signature-field-grid, .signature-field-grid-compact { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 10px; }
  .signature-mobile-setup { grid-template-columns:1fr; }
  .signature-preview-head { margin-bottom:14px; }
  .signature-app .signature-plain-output { padding:16px; }
  .signature-export-actions { display:grid; grid-template-columns:1fr; }
  .signature-export-actions .nxp-btn, .signature-main-copy { width:100%; }
  .signature-flow-actions .nxp-btn { font-size:.75rem; padding-inline:10px; }
  .signature-flow-actions .nxp-btn-ghost { padding-left:0; }
  .signature-design-dialog { width:calc(100vw - 20px); height:calc(100dvh - 32px); max-height:calc(100dvh - 32px); }
  .signature-design-dialog-head, .signature-design-dialog-footer { padding:14px; }
  .signature-design-dialog-close { width:34px; flex-shrink:0; padding:0; font-size:20px; }
  .signature-design-dialog-close span:first-child { display:none; }
  .signature-design-dialog-swipe { display:block; padding:10px 14px; margin:0 !important; color:var(--sg-muted); background:var(--sg-soft); font-size:.75rem; }
  .signature-design-dialog-content { padding:16px; }
  .signature-support-line { font-size:.75rem; }
}
@media(max-width:360px) {
  .signature-field-grid, .signature-field-grid-compact, .signature-color-row { grid-template-columns:1fr; }
  .template-short { font-size:.75rem; }
  .signature-design-footer > span { display:none; }
  .signature-design-footer .nxp-btn { width:100%; max-width:none; }
}
@media(prefers-reduced-motion:reduce) { .signature-app *, .signature-app *::before, .signature-app *::after { transition:none !important; scroll-behavior:auto !important; } }
/* Restore the three-step signature flow with the new header and available width. */
.n7 .signature-app-shell{width:100%;max-width:none;margin:0;padding:0}.n7 .signature-app-header{padding:0 0 24px}.n7 .signature-app-heading h1{font-size:30px;letter-spacing:-.025em}.n7 .signature-app-heading p{font-size:15px;color:#625b6c;margin-top:8px}.n7 .signature-flow{margin-bottom:28px}.n7 .signature-flow button{font-size:14px;min-height:52px}.n7 .signature-flow button[aria-current=step]{color:#000}.n7 .signature-design-step{padding:28px;background:#fff;border:1px solid #dfdce5;border-radius:12px}.n7 .signature-section-title{margin-bottom:24px}.n7 .signature-section-title h2{font-size:21px!important}.n7 .signature-section-title p{font-size:14px;margin-top:8px}.n7 .signature-selection-workspace{gap:32px}.n7 .signature-template-card{padding:14px}.n7 .signature-template-grid{gap:10px}.n7 .signature-template-card .template-name{font-size:14px}.n7 .signature-template-card .template-short{font-size:12px}.n7 .signature-more-designs{margin-top:14px}.n7 .signature-more-designs summary{font-size:13px;padding:12px 0}.n7 .signature-more-designs[open]>summary{margin-bottom:8px}.n7 .signature-design-kicker{font-size:12px}.n7 .signature-design-browser h3{font-size:18px}.n7 .signature-design-stage{min-height:240px}.n7 .signature-design-footer{gap:16px}.n7 .signature-builder{gap:32px}.n7 .signature-form,.n7 .signature-preview-wrap{padding:28px}.n7 .signature-form-section-body{padding-top:16px}.n7 .signature-field-grid{grid-template-columns:1fr 1fr;gap:0 16px}.n7 .signature-form-section input{min-height:44px}.n7 .signature-field-grid>label{font-size:14px}.n7 .signature-form-section summary{min-height:48px;font-size:14px}.n7 .signature-preview-state{font-size:12px}.n7 .signature-guided .signature-design-step[hidden],.n7 .signature-guided #generator[hidden]{display:none!important}.n7 .signature-target-tabs button{font-size:14px;min-height:44px}.n7 .signature-plain-output{font-size:15px}.n7 .signature-preview-modes button{min-height:40px}.n7 .signature-flow-actions{margin-top:24px}.n7 .signature-form label{font-size:14px}.n7 .signature-app-steps{font-size:14px}.n7 .signature-app-steps li{font-size:14px}
@media(max-width:800px){.n7 .signature-selection-workspace{grid-template-columns:1fr}.n7 .signature-template-grid{grid-template-columns:1fr 1fr}.n7 .signature-design-browser{min-width:0}.n7 .signature-builder{grid-template-columns:1fr}.n7 .signature-app-heading h1{font-size:26px}.n7 .signature-design-step,.n7 .signature-form,.n7 .signature-preview-wrap{padding:20px}.n7 .signature-field-grid{grid-template-columns:1fr}.n7 .signature-design-stage{min-height:220px}.n7 .signature-design-footer{align-items:stretch;flex-direction:column}.n7 .signature-flow{margin-bottom:24px}.n7 .signature-flow button{font-size:13px}.n7 .signature-app-heading p{font-size:14px}}
/* Responsive preview without relying on viewport measurements to place the sample. */
.n7 .signature-design-sheet-wrap{width:100%!important;height:auto!important;max-width:680px;display:flex;justify-content:center}.n7 .signature-design-sheet{position:static;width:100%;max-width:100%;transform:none!important;padding:20px;overflow:auto}.n7 .signature-design-sheet>table{width:100%!important;max-width:100%}.n7 .signature-design-stage{background:#f6f5f8;min-height:260px;align-items:center}.n7 .signature-template-card:focus-within{outline:3px solid #827499;outline-offset:3px}.n7 dialog:not([open]){display:none!important}.n7 .signature-design-kicker{display:none}.n7 .signature-template-card.is-active{background:#eeebf5;box-shadow:none;border-color:#bab0d7}.n7 .signature-design-controls button{min-width:40px;min-height:40px}.n7 .signature-design-dialog-close{min-height:44px}.n7 .signature-design-footer>span{font-size:13px}.n7 .signature-form-section-body{padding-top:12px}.n7 .signature-logo-drop span,.n7 .signature-field-hint{font-size:12px}.n7 .signature-app .nxp-badge{font-size:12px}
@media(max-width:650px){.n7 .signature-design-stage{height:auto;min-height:220px;padding:16px}.n7 .signature-design-sheet{padding:14px}.n7 .signature-app-shell{padding-bottom:0}.n7 .signature-design-footer,.n7 .signature-flow-actions{position:static;inset:auto;box-shadow:none;border-top:1px solid #dfdce5;padding:16px 0 0;margin-top:16px;background:#fff;flex-direction:column;align-items:stretch}.n7 .signature-design-continue{max-width:none;width:100%}.n7 .signature-flow-actions .nxp-btn{font-size:14px;min-height:44px}.n7 .signature-design-footer>span{max-width:none}.n7 .signature-design-controls button{min-width:40px;min-height:44px}}
.n7 .signature-app{--sg-muted:#625b6c;--sg-text:#000;--sg-line:#dfdce5;--sg-soft:#f6f5f8;--sg-accent:#d0d953;font-family:"Segoe UI",system-ui,-apple-system,sans-serif}