.segmented { grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); }
.format-pill { overflow-wrap:normal; word-break:normal; }
.ux-icon { width:40px;min-width:40px;height:40px;display:inline-grid;place-items:center;padding:6px;border:1px solid #c9d4ce;border-radius:4px;background:#fff;color:#235d45;cursor:pointer; }
.ux-icon:hover,.ux-icon[aria-pressed=true] { background:#e2eee7;border-color:#216347; }
.ux-icon:disabled { opacity:.4;cursor:default; }
.ux-icon:focus-visible,.ux-sign-tools select:focus-visible { outline:2px solid #216347;outline-offset:2px; }
.ux-alignment { display:flex;gap:4px; }
.ux-alignment .ux-icon { flex:1; }
.ux-sign-tools { display:flex;gap:8px;align-items:center;padding:10px 12px;background:#fff;border-bottom:1px solid #d1dad5; }
.ux-sign-tools label { display:grid;gap:3px;flex:1;min-width:0;font-size:11px;font-weight:700; }
.ux-sign-tools select { width:100%;min-width:0;min-height:36px;font:inherit;font-size:13px;color:#213a2d;background:#fff;border:1px solid #c9d4ce;border-radius:4px; }
.preview-text-hit { pointer-events:all; }
.preview-text-block:hover .preview-text-hit,.preview-text-block:focus .preview-text-hit { fill:#267a4b;fill-opacity:.12;stroke:#267a4b;stroke-width:2; }
.preview-symbol:focus,.preview-symbol:hover { filter:drop-shadow(0 0 3px #216347); }
#previewLabel [role=button] { cursor:text; }
#previewLabel [role=button]:hover,#previewLabel [role=button]:focus { outline:1px dashed currentColor;outline-offset:2px; }
.ux-mobile-preview { display:none; }
.order-intro { padding-top:28px;padding-bottom:28px; }
.order-intro h1 { font-size:32px;line-height:1.15; }
@media(max-width:1000px){
  .customizer-layout,.sign-builder-layout { display:flex;flex-direction:column;align-items:stretch; }
  .customizer-layout>.builder-panel,.sign-builder-layout>.sign-builder-panel { order:1; }
  .customizer-layout>.preview-panel,.sign-builder-layout>.sign-preview-panel { order:2;position:static;max-height:none;overflow:visible; }
  .ux-mobile-preview { display:block;position:sticky;top:var(--ux-header-height,70px);z-index:14;order:0;min-width:0;background:#eef2ef;border:1px solid #c3d0c8;box-shadow:0 4px 12px #192a2020; }
  .ux-preview-header { display:flex;align-items:center;justify-content:space-between;gap:10px;height:38px;padding:2px 10px;background:#fff; }
  .ux-preview-header strong { font-size:12px; }
  .ux-preview-header .ux-icon { width:32px;min-width:32px;height:32px;border:0; }
  .ux-mobile-preview.is-collapsed>.live-preview-sticky,.ux-mobile-preview.is-collapsed>.sign-preview-stage,.ux-mobile-preview.is-collapsed>.ux-sign-tools { display:none; }
  .ux-mobile-preview>.live-preview-sticky { position:static;border:0;box-shadow:none; }
  .ux-mobile-preview .preview-stage { min-height:0;height:24dvh;max-height:230px;padding:12px;gap:5px; }
  .ux-mobile-preview .preview-label { min-height:var(--preview-height,72px);max-height:17dvh; }
  .ux-mobile-preview .quote-box { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ux-mobile-preview .quote-box>div { display:block;padding:7px 8px;min-width:0;border-bottom:0; }
  .ux-mobile-preview .quote-box span { font-size:9px;line-height:1.3; }
  .ux-mobile-preview .quote-box strong { display:block;font-size:15px;line-height:1.5; }
  .ux-mobile-preview .sign-preview-stage { min-height:0;height:24dvh;max-height:240px;padding:8px;overflow:visible;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr); }
  .ux-mobile-preview #signPreviewSvg { width:min(100%,calc(var(--sign-preview-ratio,1) * min(224px,calc(24dvh - 16px))))!important;min-height:0;max-height:none; }
  .ux-mobile-preview .preview-inspector { position:fixed;left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto;max-height:32dvh;z-index:30; }
  .ux-sign-tools { padding:6px 8px;gap:6px; }
  .ux-sign-tools label { font-size:10px; }
  .ux-sign-tools select { font-size:14px; }
  .sign-builder-panel { padding:0; }
}
@media(max-width:620px){
  .site-header { grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:'brand toggle action' 'nav nav nav';gap:6px;padding:10px; }
  .site-header .brand { gap:5px;font-size:12px; }
  .site-header .brand-mark { width:27px;height:27px; }
  .site-header .brand span:last-child { font-size:12px; }
  .site-header .header-action { width:auto;max-width:75px;font-size:11px;padding:8px; }
  .site-header .nav-toggle { min-width:36px;width:36px;padding:8px; }
  .segmented { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ux-sign-tools label { max-width:calc(100% - 90px); }
}