.comparison-preview {
  padding: 10px;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  overflow: auto;
  background: #edf3fb;
}

/* Quick Start owns a single-purpose measurement surface. */
.quick-measurement-surface {
  --quick-measure-blue:#1761ff;
  position:fixed;
  z-index:92;
  left:0;
  right:0;
  bottom:0;
  min-height:174px;
  padding:18px 22px;
  display:grid;
  grid-template-columns:minmax(220px,1.35fr) minmax(210px,.8fr) minmax(210px,.8fr) auto;
  align-items:center;
  gap:18px;
  border-top:1px solid #bed0e8;
  background:rgba(255,255,255,.98);
  box-shadow:0 -18px 42px rgba(4,25,58,.2);
  color:#102644;
}
.quick-measurement-surface[hidden] { display:none; }
.quick-measurement-kicker { display:block; margin-bottom:5px; color:var(--quick-measure-blue); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.quick-measurement-copy h2 { margin:0 0 6px; color:#0a213f; font-size:21px; line-height:1.15; }
.quick-measurement-copy p { margin:0; max-width:520px; color:#52647e; font-size:12px; line-height:1.45; }
.quick-measurement-dimension { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.quick-measurement-dimension label { display:grid; gap:5px; margin:0; color:#40516d; font-size:10px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.quick-measurement-dimension input { width:100%; min-height:46px; padding:8px 10px; border:1px solid #aebfd8; border-radius:9px; background:#f9fbff; color:#102644; font-size:17px; font-weight:800; }
.quick-measurement-progress { min-width:0; display:grid; grid-template-columns:30px minmax(18px,1fr) 30px; align-items:center; gap:6px; }
.quick-measurement-progress i { height:3px; background:#c8d4e5; }
.quick-measurement-progress strong { grid-column:1 / -1; margin-top:5px; color:#40516d; font-size:11px; line-height:1.3; text-align:center; }
.quick-measurement-dot { width:30px; height:30px; display:grid; place-items:center; border:2px solid #aebfd8; border-radius:50%; background:#fff; color:#61718a; font-size:12px; font-weight:900; }
.quick-measurement-dot.done { border-color:#0d965b; background:#0d965b; color:#fff; }
.quick-measurement-actions { min-width:150px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quick-measurement-actions button { min-height:42px; padding:0 12px; border:1px solid #9bb8ff; border-radius:8px; background:#f4f7ff; color:#1748b8; font-size:11px; font-weight:900; }
.quick-measurement-actions .quick-measurement-precision { grid-column:1 / -1; border-color:var(--quick-measure-blue); color:var(--quick-measure-blue); }
.quick-measurement-actions .quick-measurement-precision[aria-pressed="true"] { background:var(--quick-measure-blue); color:#fff; }
.quick-measurement-actions .quick-measurement-accept { border-color:#0d965b; background:#0d965b; color:#fff; }
.quick-measurement-actions .quick-measurement-accept:disabled { border-color:#cad5e5; background:#dce4ef; color:#6b7890; opacity:1; }
.quick-measurement-actions .quick-measurement-cancel { border-color:#ccd6e5; background:#fff; color:#52647e; }

body.quick-reference-focus { --quick-measure-height:174px; overflow:hidden; }
body.quick-reference-focus header,
body.quick-reference-focus .studio-stagebar,
body.quick-reference-focus .tool-rail,
body.quick-reference-focus .studio-expert-tools,
body.quick-reference-focus .studio-editor,
body.quick-reference-focus .workflow-coach,
body.quick-reference-focus .comparison-mobile-actions,
body.quick-reference-focus .comparison-side-column,
body.quick-reference-focus .comparison-resizer,
body.quick-reference-focus .reference-marking-bar,
body.quick-reference-focus #studioZoomPill { display:none !important; }
body.quick-reference-focus main.app {
  position:fixed;
  inset:0 0 var(--quick-measure-height);
  z-index:60;
  width:100vw;
  height:auto !important;
  display:block;
  overflow:hidden;
  background:#101b2b;
}
body.quick-reference-focus .preview-wrap.comparison-preview {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border-radius:0;
}
body.quick-reference-focus .comparison-grid { display:block; width:100%; height:100%; min-height:0; }
body.quick-reference-focus .comparison-grid > .master {
  width:100%;
  height:100%;
  margin:0;
  border:0;
  border-radius:0;
  grid-template-rows:minmax(0,1fr);
}
body.quick-reference-focus .comparison-card-head,
body.quick-reference-focus #masterVariantCanvas,
body.quick-reference-focus .comparison-card.master .comparison-ai-result { display:none !important; }
body.quick-reference-focus .comparison-canvas-stage,
body.quick-reference-focus .canvas-shell { width:100%; height:100% !important; touch-action:none !important; }
body.quick-reference-focus #mockupCanvas { max-width:100% !important; max-height:100% !important; touch-action:none !important; }

@media (max-width:700px) {
  body.quick-reference-focus { --quick-measure-height:238px; }
  .quick-measurement-surface {
    min-height:238px;
    padding:12px;
    grid-template-columns:minmax(0,1fr) minmax(128px,.72fr);
    grid-template-rows:auto auto auto;
    gap:9px 12px;
  }
  .quick-measurement-copy { grid-column:1 / -1; }
  .quick-measurement-copy h2 { font-size:17px; }
  .quick-measurement-copy p { font-size:11px; }
  .quick-measurement-dimension { grid-column:1; grid-row:2; }
  .quick-measurement-dimension input { min-height:42px; font-size:16px; }
  .quick-measurement-progress { grid-column:2; grid-row:2; }
  .quick-measurement-actions { grid-column:1 / -1; grid-row:3; min-width:0; grid-template-columns:1.35fr 1fr 1fr; }
  .quick-measurement-actions .quick-measurement-precision { grid-column:auto; }
  .quick-measurement-actions button { min-height:40px; padding:0 7px; font-size:10px; }
}

.comparison-mobile-actions { display:none; }
.mobile-compare-signs-button { display:none; }

.comparison-grid {
  min-width: 0;
  min-height: 650px;
  display: grid;
  grid-template-columns: minmax(260px, 2fr) 10px minmax(320px, 1fr);
  gap: 0;
}

.comparison-grid.comparison-focus { grid-template-columns: minmax(220px, 1fr) 10px minmax(520px, 4fr); }
.comparison-grid > .master { margin-right: 5px; }
.comparison-grid > .comparison-side-column { margin-left: 5px; }
.comparison-grid.comparisons-hidden { grid-template-columns: minmax(0, 1fr) !important; }
.comparison-grid.comparisons-hidden > .master { margin-right: 0; }
.comparison-grid.comparisons-hidden > .comparison-resizer,
.comparison-grid.comparisons-hidden > .comparison-side-column { display: none; }

.comparison-resizer { position: relative; min-height: 0; cursor: col-resize; touch-action: none; outline: none; }
.comparison-resizer::before { content: ""; position: absolute; inset: 0 4px; border-radius: 999px; background: #a9bad1; transition: background .15s, box-shadow .15s; }
.comparison-resizer:hover::before,.comparison-resizer:focus-visible::before,.comparison-resizer.dragging::before { background: #1761ff; box-shadow: 0 0 0 3px rgba(23,97,255,.16); }
.comparison-resizer[aria-disabled="true"] { cursor: default; opacity: .45; }

.comparison-side-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 34px repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.comparison-grid.comparison-focus .comparison-side-column { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:72px minmax(0,1fr); }
.comparison-grid.comparison-focus .comparison-side-toolbar { grid-column:1 / -1; }

.comparison-side-toolbar { min-width:0; display:grid; grid-template-rows:34px; gap:4px; }
.comparison-side-toolbar-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.comparison-side-toolbar button { min-height: 32px; padding: 0 12px; border-color: #1761ff; background: #1761ff; color: #fff; font-size: 9px; font-weight: 900; }
.comparison-side-toolbar .email-design-button { width:100%; display:flex; align-items:center; justify-content:center; gap:6px; border-color:#0d8450; background:#0d965b; }
.comparison-side-toolbar .email-design-button .material-symbols-rounded { font-size:16px; }
.comparison-side-toolbar small { color: #61738c; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

.comparison-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #c9d5e6;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(18, 43, 78, .08);
}

.comparison-card.master { border: 2px solid #1761ff; }
.comparison-card.master.reference-marking { grid-template-rows: 44px 40px minmax(0, 1fr); }
.reference-marking-bar { min-width: 0; padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #e1b64d; background: #fff3b0; color: #513b00; font-size: 11px; }
.reference-marking-bar[hidden] { display: none; }
.reference-marking-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-marking-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.reference-marking-bar button { flex: 0 0 auto; min-height: 28px; padding: 0 10px; border: 1px solid #9c7400; border-radius: 6px; background: #fff; color: #684d00; font-size: 10px; font-weight: 700; }
.reference-marking-bar button[hidden] { display: none; }
#referenceMarkingAccept { border-color: #087443; background: #0d965b; color: #fff; }
.reference-precision-button { display:none; }
.reference-precision-button[aria-pressed="true"] { border-color:#1761ff; background:#1761ff; color:#fff; }
.reference-precision-loupe { position:fixed; z-index:95; width:132px; height:132px; overflow:visible; border:4px solid #fff; border-radius:50%; background:#0b1728; box-shadow:0 8px 30px rgba(0,0,0,.46),0 0 0 2px #1761ff; pointer-events:none; transform:translateZ(0); }
.reference-precision-loupe[hidden] { display:none; }
.reference-precision-loupe canvas { display:block; width:100%; height:100%; border-radius:50%; image-rendering:auto; }
.reference-precision-loupe::before,.reference-precision-loupe::after { content:""; position:absolute; z-index:2; left:50%; top:50%; background:#ffde00; box-shadow:0 0 0 1px rgba(0,0,0,.72); transform:translate(-50%,-50%); }
.reference-precision-loupe::before { width:2px; height:34px; }
.reference-precision-loupe::after { width:34px; height:2px; }
.reference-precision-loupe span { position:absolute; left:50%; bottom:-31px; width:max-content; max-width:180px; padding:5px 8px; transform:translateX(-50%); border-radius:12px; background:#071427; color:#fff; font-size:10px; font-weight:800; white-space:nowrap; }
.comparison-card-head { position: static; z-index: auto; top: auto; padding: 4px 8px; display: grid; grid-template-columns: minmax(74px, .7fr) minmax(125px, 1.15fr) auto; grid-template-rows: 34px; align-items: center; gap: 7px; border-bottom: 1px solid #dce5f1; background: #fff; }
.comparison-card-title { min-width: 0; }
.comparison-card-title strong { display: block; color: #163356; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comparison-card-title small { display: block; margin-top: 2px; color: #6a7890; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.comparison-type-select { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5px; color: #6a7890; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.comparison-type-select select { width: 100%; min-width: 0; height: 29px; padding: 0 22px 0 6px; border: 1px solid #b9c8dd; border-radius: 6px; background: #f7faff; color: #18304f; font-size: 9px; font-weight: 800; }
.comparison-card-actions { min-width:0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.comparison-estimate { min-height: 27px; padding: 4px 7px; border: 1px solid #93c6a6; border-radius: 8px; background: #edfff2; color: #075d2b; font-size: 9px; font-weight: 900; white-space: nowrap; cursor:pointer; }
.comparison-card .use-as-master-button { min-height:27px; padding:0 7px; border:1px solid #1761ff; border-radius:7px; background:#eef4ff; color:#0b4bd4; font-size:8px; font-weight:900; }
.comparison-card .use-as-master-button:hover,.comparison-card .use-as-master-button:focus-visible { background:#1761ff; color:#fff; }
.master-promotion-toast { position:absolute; z-index:25; top:58px; left:50%; max-width:min(420px,calc(100% - 28px)); padding:9px 13px; transform:translateX(-50%); border:1px solid #087443; border-radius:9px; background:#0d965b; box-shadow:0 8px 24px rgba(4,51,31,.26); color:#fff; font-size:11px; font-weight:800; text-align:center; }
.master-promotion-toast[hidden] { display:none; }
.comparison-canvas-stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #dce8f6; }

.comparison-card .canvas-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.comparison-card #mockupCanvas,
.comparison-display-canvas,
.comparison-variant-overlay {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 0;
  background: #dce8f6;
}

.comparison-variant-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.comparison-variant-overlay[hidden] { display: none; }
.master-scale-notation { position:absolute; left:10px; bottom:10px; z-index:4; width:96px; height:36px; padding:3px 5px; box-sizing:content-box; border:1px solid rgba(16,29,46,.58); border-radius:3px; background:rgba(255,255,255,.92); box-shadow:0 2px 10px rgba(0,0,0,.2); pointer-events:auto; transform-origin:left bottom; }
.master-scale-notation svg { display:block; width:100%; height:100%; overflow:visible; }
.master-scale-notation.estimated { border:2px solid #f2aa00; }
.master-scale-notation.estimated::after { content:"!"; position:absolute; top:-7px; right:-7px; width:15px; height:15px; display:grid; place-items:center; border-radius:50%; background:#f2aa00; color:#231700; font:900 10px/1 sans-serif; }

.comparison-card .canvas-zoom-pill { right: 8px; bottom: 7px; transform: scale(.82); transform-origin: right bottom; }
.comparison-ai-result { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: contain; background: #0b1421; }
.comparison-ai-result[hidden] { display: none; }

.asm-dialog {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid #b8c7dc;
  border-radius: 14px;
  color: #172033;
  box-shadow: 0 24px 80px rgba(9, 25, 48, .3);
}
.asm-dialog::backdrop { background: rgba(3, 16, 35, .62); }
.asm-dialog-head { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d8e1ed; }
.asm-dialog-head h2 { margin: 0; font-size: 17px; }
.asm-dialog-head button { min-height: 32px; }
.asm-dialog-body { padding: 16px; overflow: auto; }
.asm-field { display: grid; gap: 6px; margin-bottom: 12px; font-size: 11px; font-weight: 800; }
.asm-field textarea { min-height: 92px; resize: vertical; }
.asm-prompt-chips { margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 7px; }
.asm-prompt-chips button { min-height: 30px; font-size: 9px; }
.ai-view-render-card { margin:0 0 12px; padding:11px; display:grid; grid-template-columns:minmax(180px,1fr) minmax(150px,.7fr) auto; align-items:end; gap:10px; border:1px solid #9bb8ff; border-radius:10px; background:#f3f7ff; }
.ai-view-render-card h3 { margin:0 0 4px; color:#143465; font-size:13px; }
.ai-view-render-card p { margin:0; color:#566a87; font-size:10px; line-height:1.4; }
.ai-view-render-card .asm-field { margin:0; }
.ai-view-render-card select { min-height:36px; }
.ai-view-render-card button { min-height:36px; padding:0 12px; border:1px solid #1761ff; border-radius:8px; background:#1761ff; color:#fff; font-size:10px; font-weight:900; white-space:nowrap; }
.asm-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.asm-dialog-status { min-height: 20px; margin: 10px 0; color: #53657f; font-size: 11px; }
.asm-dialog-status.error { color: #b42318; }
.asm-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.asm-before-after figure { margin: 0; padding: 8px; border: 1px solid #d6e0ec; border-radius: 10px; background: #f7f9fc; }
.asm-before-after figcaption { margin-bottom: 6px; color: #53657f; font-size: 10px; font-weight: 800; }
.asm-before-after img { display: block; width: 100%; max-height: 330px; object-fit: contain; background: #dce8f6; }
.asm-logo-analysis { margin-top: 12px; padding: 12px; border: 1px solid #d6e0ec; border-radius: 10px; background: #f7f9fc; font-size: 11px; }
.asm-logo-analysis[hidden] { display: none; }
.asm-logo-analysis dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; }
.asm-logo-analysis dt { color: #60708a; }
.asm-logo-analysis dd { margin: 0; font-weight: 800; }
.production-vector-panel,.letterfab-billing-card { margin-top:14px; padding:14px; border:1px solid #b8c8e3; border-radius:12px; background:#f7f9fd; }
.production-vector-panel h3,.letterfab-billing-card h3 { margin:0 0 6px; }
.production-vector-panel > p,.letterfab-billing-card > p { margin:7px 0; }
.production-vector-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-top:12px; }
.production-vector-card { display:grid; gap:9px; padding:12px; border:1px solid #cad5e8; border-radius:10px; background:#fff; }
.production-vector-card.selected { border-color:#1761ff; box-shadow:0 0 0 2px rgba(23,97,255,.12); }
.production-vector-preview { width:100%; height:180px; object-fit:contain; border:1px solid #e0e6ef; background:linear-gradient(45deg,#f2f4f8 25%,transparent 25%),linear-gradient(-45deg,#f2f4f8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f2f4f8 75%),linear-gradient(-45deg,transparent 75%,#f2f4f8 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.production-vector-meta { margin:0; color:#53627a; font-size:12px; }
.production-vector-warning { margin:0; color:#8b4b00; }
.production-vector-actions { display:flex; flex-wrap:wrap; gap:7px; }
.production-vector-actions button { flex:1 1 120px; }
.vector-selection-dialog { width:min(920px,calc(100vw - 24px)); }
.vector-selection-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0; }
.vector-selection-toolbar strong { margin-left:auto; color:#263b5a; font-size:12px; }
.vector-selection-stage { height:min(58vh,560px); min-height:300px; overflow:hidden; border:1px solid #c8d4e6; border-radius:12px; background:linear-gradient(45deg,#f2f4f8 25%,transparent 25%),linear-gradient(-45deg,#f2f4f8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f2f4f8 75%),linear-gradient(-45deg,transparent 75%,#f2f4f8 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
#vectorSelectionPreview { display:block; width:100%; height:100%; }
#vectorSelectionPreview [data-vector-component] { cursor:pointer; transition:opacity .12s ease, filter .12s ease, stroke-width .12s ease; }
#vectorSelectionPreview [data-vector-component].selected { opacity:.88; filter:drop-shadow(0 0 2px rgba(23,97,255,.75)); stroke:#1761ff; stroke-width:2; vector-effect:non-scaling-stroke; }
#vectorSelectionPreview [data-vector-component]:not(.selected) { opacity:.12; stroke:#667085; stroke-width:1; vector-effect:non-scaling-stroke; }
#vectorSelectionPreview [data-vector-component]:focus-visible { outline:none; stroke:#ff8a00; stroke-width:4; }
@media (max-width:640px) {
  .vector-selection-stage { min-height:240px; height:48vh; }
  .vector-selection-toolbar strong { flex-basis:100%; margin-left:0; }
}
.letterfab-billing-card button { margin-top:6px; }

.estimate-comparison-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.estimate-warning { padding:9px 10px; border:1px solid #e8b84d; border-radius:8px; background:#fff7dc; color:#704800; font-weight:800; }
.estimate-comparison-table th,.estimate-comparison-table td { padding: 9px; border: 1px solid #d7e0ec; text-align: left; vertical-align: top; }
.estimate-comparison-table th { background: #edf3fb; color: #24405f; }
.estimate-comparison-table td:last-child { font-weight: 900; color: #075d2b; }
.estimate-access-dialog { width:min(900px, calc(100vw - 28px)); }
.estimate-access-dialog .asm-dialog-body { display:grid; gap:14px; }
.estimate-access-privacy { color:#5b6d87; font-size:11px; }
.estimate-access-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.estimate-access-result { display:grid; gap:5px; padding:12px; border:1px solid #a8c8b4; border-radius:10px; background:#effdf3; color:#173d25; }
.estimate-access-result span { font-size:11px; }
.estimate-access-result strong { font-size:19px; }
.fulfillment-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.fulfillment-choice-grid article { display:flex; flex-direction:column; min-width:0; padding:14px; border:1px solid #d4dfed; border-radius:10px; background:#f9fbfe; }
.fulfillment-choice-grid h4 { margin:0 0 7px; color:#102c51; font-size:14px; }
.fulfillment-choice-grid p { flex:1; margin:0 0 12px; color:#53657f; font-size:11px; line-height:1.5; }
.fulfillment-choice-grid button,.fulfillment-detail button,#estimateAccessSend { min-height:38px; border:1px solid #0e56d8; border-radius:8px; background:#1464e7; color:#fff; font-size:11px; font-weight:800; }
.fulfillment-choice-grid button:disabled { border-color:#c9d3e0; background:#e5eaf1; color:#75849a; }
.fulfillment-detail { margin-top:12px; padding:12px; border:1px solid #cbd8e8; border-radius:10px; background:#fff; }
.fulfillment-detail .asm-field { margin-bottom:9px; }
@media (max-width:700px) {
  .estimate-access-results,.fulfillment-choice-grid { grid-template-columns:1fr; }
  .estimate-access-dialog { max-height:calc(100dvh - 20px); }
  .ai-view-render-card { grid-template-columns:1fr; align-items:stretch; }
}
.pricing-profile-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 10px; }
.pricing-profile-card { padding: 11px; border: 1px solid #d7e0ec; border-radius: 9px; background: #fafcff; }
.pricing-profile-card h3 { margin: 0 0 8px; font-size: 12px; }
.pricing-profile-card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; font-size: 9px; }
.pricing-profile-card dd { margin: 0; font-weight: 800; }
.admin-section-rule { margin: 22px 0; border: 0; border-top: 1px solid #d7e0ec; }
.admin-template-editor { display: grid; grid-template-columns: minmax(190px, .65fr) minmax(320px, 1.35fr); gap: 14px; align-items: start; }
.admin-template-fields { min-width: 0; }
#adminTemplatePointStatus { min-height: 30px; color: #53657f; font-size: 10px; }
#adminTemplateCanvas { display: block; width: 100%; max-height: 410px; object-fit: contain; border: 2px dashed #8aa1bd; border-radius: 8px; background: #dce8f6; cursor: crosshair; box-sizing: border-box; }
.admin-template-list { margin-top: 16px; display: grid; gap: 9px; }
.admin-template-card { display: grid; grid-template-columns: 120px 1fr; gap: 11px; align-items: center; padding: 9px; border: 1px solid #d7e0ec; border-radius: 9px; background: #fafcff; }
.admin-template-card img { width: 120px; height: 72px; object-fit: cover; border-radius: 5px; background: #dce8f6; }
.admin-template-card > div { display: grid; gap: 5px; }
.admin-template-card span { color: #53657f; font-size: 10px; }
.admin-template-card button.danger { color: #a11b13; border-color: #e0aaa5; }
.history-dialog { width: min(920px, calc(100vw - 28px)); }
.history-toolbar,.commercial-settings-grid,.trade-account-admin { display:grid; gap:12px; }
.history-toolbar { grid-template-columns:minmax(220px,1fr) auto; align-items:end; }
.commercial-settings-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin:12px 0 18px; }
.trade-account-admin { grid-template-columns:minmax(240px,2fr) repeat(4,minmax(120px,1fr)) auto; align-items:end; padding:14px; border:1px solid #ccd6e8; border-radius:12px; background:#f7f9fd; }
.trade-account-admin p { grid-column:1 / -1; margin:0; }
.account-preferences-dialog { width:min(520px,calc(100vw - 28px)); }
.account-preference-card { padding:14px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; align-items:start; border:1px solid #cbd8e8; border-radius:10px; background:#f7faff; color:#203b60; }
.account-preference-card input { margin-top:3px; }
.account-preference-card span { display:grid; gap:4px; }
.account-preference-card strong { font-size:13px; }
.account-preference-card small { color:#586b86; font-size:11px; line-height:1.45; }
.history-account-state { margin:10px 0; color:#526177; }
.history-version-list { display:grid; gap:10px; }
.history-version-card { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:12px; align-items:center; padding:12px; border:1px solid #d8dfeb; border-radius:12px; background:#fff; }
.history-version-card strong,.history-version-card span { display:block; }
.history-version-card span { margin-top:3px; color:#65738a; font-size:.86rem; }
.history-version-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.history-version-actions button { padding:7px 9px; }
.history-version-actions button.danger,.history-toolbar button.danger { color:#a11b13; border-color:#e0aaa5; }
.account-workspace-body { display:grid; gap:22px; }
.account-workspace-section { min-width:0; scroll-margin-top:12px; }
.account-workspace-section + .account-workspace-section { padding-top:22px; border-top:2px solid #d8e1ed; }
.account-workspace-section > h3 { margin:0 0 10px; color:#18304f; font-size:15px; }
.account-workspace-section > p:first-of-type { color:#53657f; line-height:1.45; }

@media (max-width: 1050px) {
  .comparison-grid { grid-template-columns: minmax(260px, 1.7fr) 10px minmax(300px, 1fr); }
  .asm-before-after { grid-template-columns: 1fr; }
  .pricing-profile-grid { grid-template-columns: 1fr; }
  .admin-template-editor { grid-template-columns: 1fr; }
  .history-toolbar,.history-version-card,.trade-account-admin { grid-template-columns:1fr; }
  .history-version-actions { justify-content:flex-start; }
  .trade-account-admin p { grid-column:auto; }
}

@media (max-width: 820px) {
  .comparison-preview { overflow: hidden; }
  .comparison-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .comparison-grid.comparison-focus { grid-template-columns: minmax(0, 1fr) !important; }
  .comparison-resizer { display: none; }
  .comparison-grid > .master,.comparison-grid > .comparison-side-column { margin-inline: 0; }
  .comparison-side-column { grid-template-rows: 72px repeat(2, minmax(0, 1fr)); }
  .comparison-grid.comparison-focus .comparison-side-column { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:72px minmax(0,1fr); }
}

/* Nine-step prospect workflow. Loaded after the legacy studio shell so it can
   improve navigation without changing canvas or measurement geometry. */
.studio-stagebar[data-workflow-guide] { height:64px; padding:5px 14px 4px 18px; gap:14px; }
.studio-stagebar[data-workflow-guide] .stage-track { flex:1 1 auto; align-self:stretch; min-width:810px; }
.studio-stagebar[data-workflow-guide] .stage-item { flex:1 1 0; width:auto; min-width:78px; color:#73829b; font:700 10px/1.15 Inter,system-ui,sans-serif; }
.studio-stagebar[data-workflow-guide] button.stage-item { min-height:52px; padding:1px 3px 0; border-radius:8px; }
.studio-stagebar[data-workflow-guide] button.stage-item:hover { background:#f4f7ff; }
.studio-stagebar[data-workflow-guide] button.stage-item:focus-visible { outline:3px solid rgba(23,97,255,.32); outline-offset:1px; }
.studio-stagebar[data-workflow-guide] .stage-item::before { display:none; }
.studio-stagebar[data-workflow-guide] .stage-item:not(:last-child)::after { top:15px; left:calc(50% + 19px); width:calc(100% - 38px); height:3px; border-radius:3px; background:#d5dfec; }
.studio-stagebar[data-workflow-guide] .stage-dot { width:30px; height:30px; margin:0 auto 4px; border:2px solid #c9d4e2; background:#fff; color:#65758d; font-size:11px; font-weight:900; }
.studio-stagebar[data-workflow-guide] .stage-item.done .stage-dot,
.studio-stagebar[data-workflow-guide] .stage-item.current .stage-dot { border-color:#1761ff; background:#1761ff; color:#fff; }
.guided-workflow-enabled.workflow-card-hidden .studio-stagebar[data-workflow-guide] .stage-item.current .stage-dot { border-color:#c9d4e2; background:#fff; color:#65758d; }
.guided-workflow-enabled.workflow-card-hidden .studio-stagebar[data-workflow-guide] .stage-item.current .stage-label { color:#34445f; }
.guided-workflow-enabled.workflow-card-hidden .studio-stagebar[data-workflow-guide] .stage-item.current::before { display:none; }
.studio-stagebar[data-workflow-guide] .stage-label { display:block; color:inherit; white-space:nowrap; }
.studio-stagebar[data-workflow-guide] .stage-item.done .stage-label,
.studio-stagebar[data-workflow-guide] .stage-item.current .stage-label { color:#4d58ff; }
.studio-stagebar[data-workflow-guide] .stage-check { display:none; font-size:20px; line-height:1; }
.studio-stagebar[data-workflow-guide] .stage-item.done .stage-check { display:block; }
.studio-stagebar[data-workflow-guide] .stage-item.done .stage-number { display:none; }
.workflow-help-open { position:fixed; z-index:44; right:14px; bottom:14px; min-height:36px; padding:0 13px; display:flex; align-items:center; gap:6px; border:1px solid #1761ff; border-radius:18px; background:#1761ff; color:#fff; font-size:10px; font-weight:900; box-shadow:0 8px 24px rgba(9,43,102,.28); }
.workflow-help-open[hidden] { display:none !important; }
.workflow-help-open .material-symbols-rounded { font-size:17px; }
.save-resume-button { min-height:34px; padding:0 12px; display:flex; align-items:center; gap:6px; border:1px solid #0b7447; border-radius:8px; background:#0d965b; color:#fff; font-size:10px; font-weight:800; box-shadow:0 4px 12px rgba(5,90,52,.18); }
.save-resume-button .material-symbols-rounded { font-size:17px; }
.save-resume-button.saving { opacity:.7; pointer-events:none; }
.save-resume-button.saved { background:#075f3a; }
.mobile-save-resume-button { display:none; }
.workflow-coach { position:fixed; z-index:45; right:12px; bottom:12px; width:clamp(299px,26vw,351px); height:auto; min-height:0; max-height:min(49.4vh,390px); padding:10px; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:8px; overflow:hidden; border:1px solid rgba(185,132,0,.7); border-radius:13px; background:rgba(255,242,166,.62); box-shadow:0 10px 28px rgba(91,62,0,.2); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:.8; transition:opacity .15s ease,background .15s ease; animation:workflow-help-in .2s ease-out; }
.workflow-coach:hover,.workflow-coach:focus-within { opacity:1; background:rgba(255,242,166,.96); }
.workflow-coach[hidden] { display:none !important; }
.workflow-coach-copy { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(48px,1fr) auto auto auto; gap:5px; overflow:hidden; color:#3f3500; font:400 11px/1.25 Inter,system-ui,sans-serif; }
.workflow-coach-head { min-width:0; padding-right:28px; display:flex; align-items:center; gap:4px; cursor:move; touch-action:none; user-select:none; }
.workflow-coach-head strong { min-width:0; display:block; overflow:hidden; color:#2c2500; font:500 12px/1.2 Inter,system-ui,sans-serif; white-space:nowrap; text-overflow:ellipsis; }
.workflow-coach-grip { flex:0 0 22px; width:22px; min-height:22px; padding:0; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:#735900; cursor:grab; box-shadow:none; touch-action:none; }
.workflow-coach-grip:active { cursor:grabbing; }
.workflow-coach-grip .material-symbols-rounded { font-size:18px; }
.workflow-coach-conversation { min-height:48px; overflow:auto; display:flex; flex-direction:column; gap:5px; padding:1px 3px 1px 0; }
.workflow-chat-bubble { width:fit-content; max-width:94%; margin:0; padding:6px 7px; border-radius:9px 9px 9px 3px; background:#fffdf2; color:#312800; box-shadow:0 1px 0 rgba(91,62,0,.18); font-size:11px; font-weight:400; line-height:1.25; white-space:pre-line; }
.workflow-chat-bubble.user { align-self:flex-end; border-radius:11px 11px 3px 11px; background:#1761ff; color:#fff; }
.workflow-coach-quick { display:flex; flex-wrap:wrap; gap:4px; }
.workflow-coach-quick button { min-height:22px; padding:3px 5px; border:1px solid #a97900; border-radius:11px; background:#fff8cf; color:#563d00; font-size:8px; font-weight:400; }
.workflow-coach-ask { display:grid; gap:4px; }
.workflow-coach-ask label { font-size:9.75px; font-weight:400; }
.workflow-coach-ask > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
.workflow-coach-ask input { min-width:0; min-height:32px; padding:5px 8px; border:2px solid #a97900; border-radius:7px; background:#fffef7; color:#2c2500; font-size:12px; font-weight:400; }
.workflow-coach-ask button { min-height:32px; padding:0 9px; border:2px solid #1761ff; border-radius:7px; background:#1761ff; color:#fff; font-size:10.5px; font-weight:400; }
.workflow-coach-ask button:disabled { opacity:.55; }
.workflow-coach-ai-status { margin:0; color:#665000; font-size:9px; font-weight:400; line-height:1.25; }
.workflow-coach-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; white-space:nowrap; }
.workflow-coach-actions button { min-width:36px; min-height:36px; padding:0 9px; display:inline-flex; align-items:center; justify-content:center; border:2px solid #9b7a18; border-radius:8px; background:#fffdf2; color:#1748b8; font-size:11px; font-weight:500; }
.workflow-coach-actions button .material-symbols-rounded { font-size:18px; }
.workflow-coach-actions button:last-child { border-color:#1761ff; background:#1761ff; color:#fff; }
.workflow-coach-actions button:disabled { opacity:.42; cursor:not-allowed; }
.workflow-coach-actions span { color:#5c4d00; font-size:13.5px; font-weight:400; }
.workflow-coach-close { position:absolute; top:10px; right:10px; width:36px; min-height:36px; padding:0; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#5c4d00; box-shadow:none; }
.workflow-coach-close:hover,.workflow-coach-close:focus-visible { background:#ffd84d; color:#3d2a00; }
.workflow-coach-close .material-symbols-rounded { font-size:22.5px; }
@keyframes workflow-help-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.studio-stagebar[data-workflow-guide] .studio-metrics { display:none; }
body[data-guide-step="design"] [data-comparison-card="editable"] { box-shadow:0 0 0 3px rgba(23,97,255,.2); }
body[data-guide-step="email-order"] [data-email-design] { box-shadow:0 0 0 3px rgba(23,97,255,.22); }
body[data-guide-step="production"] #productionVectorPanel { box-shadow:0 0 0 3px rgba(23,97,255,.22); }

@media (max-width:1080px) { .workflow-coach { width:clamp(299px,33.8vw,338px); } }

@media (max-width:820px) {
  body.guided-workflow-enabled #mobileStepIndicator,
  body.guided-workflow-enabled .guided-design-form > .eyebrow,
  body.guided-workflow-enabled .workflow-card > .eyebrow,
  body.guided-workflow-enabled [data-step-panel] [data-next-step] { display:none !important; }
  .studio-stagebar[data-workflow-guide] { display:flex !important; height:64px; padding:4px 8px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .studio-stagebar[data-workflow-guide]::-webkit-scrollbar { display:none; }
  .studio-stagebar[data-workflow-guide] .stage-track { flex:0 0 870px; }
  .studio-stagebar[data-workflow-guide] .stage-item { min-width:92px; touch-action:pan-x; -webkit-tap-highlight-color:transparent; }
  .studio-stagebar[data-workflow-guide] .stage-dot,
  .studio-stagebar[data-workflow-guide] .stage-label { pointer-events:none; }
  .workflow-coach { left:auto; right:8px; bottom:8px; width:min(351px,calc(100vw - 16px)); height:auto; max-height:min(49.4dvh,390px); padding:10px; }
  .workflow-coach-actions { min-width:0; justify-content:space-between; gap:6px; }
  .workflow-coach-actions button { min-height:36px; padding:0 8px; font-size:10.5px; }
  .workflow-coach-actions span { font-size:10.5px; }
  .workflow-coach-ask button { padding:0 7px; font-size:9.75px; }
  .workflow-help-open { right:10px; bottom:10px; }
  .save-resume-button { min-height:34px; padding:0 8px; border-radius:7px; font-size:9px; }
  .workflow-coach-copy { font-size:11px; }
  main.app { height:calc(100dvh - 122px); }

  /* A phone gets one real workspace, not a squeezed desktop comparison grid. */
  body { height:100dvh; overflow:hidden; }
  main.app {
    height:calc(100dvh - 122px) !important;
    min-height:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr);
    gap:0 !important;
    overflow:hidden !important;
  }
  .preview-wrap.comparison-preview {
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:6px;
    display:grid;
    grid-template-rows:46px minmax(0,1fr);
    gap:6px;
    overflow:hidden;
    border-radius:0;
  }
  .comparison-mobile-actions { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:4px; }
  .comparison-mobile-actions button { flex:1 1 0; min-height:34px; padding:0 6px; font-size:8px; }
  .comparison-mobile-actions .mobile-save-resume-button { display:flex; justify-content:center; }
  .comparison-mobile-actions .mobile-compare-signs-button,
  .comparison-mobile-actions .mobile-estimate-button { display:inline-flex; align-items:center; justify-content:center; }
  .comparison-mobile-actions .mobile-estimate-button { border:1px solid #0b7447; border-radius:7px; background:#fff; color:#075f3a; font-weight:900; }
  .comparison-grid,
  .comparison-grid.comparison-focus {
    width:100%;
    min-width:0;
    min-height:0;
    height:100%;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr);
    overflow:hidden;
  }
  .comparison-grid > .master { width:100%; min-width:0; height:100%; margin:0; }
  .comparison-grid:not(.comparison-focus) > .comparison-side-column,
  .comparison-grid:not(.comparison-focus) > .comparison-resizer { display:none; }
  .comparison-card { grid-template-rows:46px minmax(0,1fr); border-radius:10px; }
  .comparison-card-head { grid-template-columns:minmax(64px,.6fr) minmax(112px,1fr) auto; grid-template-rows:36px; padding:4px 6px; gap:4px; }
  .comparison-card-actions { min-width:0; overflow:hidden; }
  .comparison-card .canvas-shell { width:100%; height:100% !important; min-height:0; }
  .comparison-card #mockupCanvas,
  .comparison-display-canvas,
  .comparison-variant-overlay {
    display:block;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
  }
  body.mobile-workspace-surface-open main.app {
    grid-template-rows:clamp(225px,39dvh,350px) minmax(0,1fr);
    overflow:auto !important;
  }
  body.mobile-workspace-surface-open .preview-wrap.comparison-preview {
    grid-row:1;
  }
  body.mobile-workspace-surface-open main.app > [data-step-panel]:not([hidden]) {
    grid-row:2;
    height:100% !important;
    min-height:0 !important;
    overflow:auto !important;
  }
  .comparison-grid.comparison-focus {
    grid-template-rows:minmax(150px,.34fr) minmax(250px,.66fr);
    overflow:auto;
    gap:6px;
  }
  .comparison-grid.comparison-focus > .comparison-side-column {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:58px minmax(185px,1fr);
    gap:5px;
  }
  .comparison-grid.comparison-focus .comparison-side-toolbar { grid-column:1 / -1; grid-template-rows:28px 28px; }
  .comparison-grid.comparison-focus .comparison-side-primary-actions { grid-template-columns:1fr; }
  .comparison-grid.comparison-focus .comparison-side-primary-actions .save-resume-button { display:none; }
  .comparison-grid.comparison-focus .comparison-card:not(.master) { grid-template-rows:58px minmax(0,1fr); }
  .comparison-grid.comparison-focus .comparison-card:not(.master) .comparison-card-head { grid-template-columns:minmax(0,.75fr) minmax(90px,1.25fr); grid-template-rows:26px 24px; }
  .comparison-grid.comparison-focus .comparison-card:not(.master) .comparison-card-actions { grid-column:1 / -1; }
  .comparison-grid.comparison-focus .comparison-card:not(.master) .comparison-card-actions { gap:3px; }
  .comparison-grid.comparison-focus .comparison-card:not(.master) .comparison-card-actions button { min-height:25px; padding-inline:4px; font-size:7px; }
  .comparison-grid.comparison-focus .comparison-card:not(.master) .use-as-master-button { font-size:0; }
  .comparison-grid.comparison-focus .comparison-card:not(.master) .use-as-master-button::after { content:"Choose Sign"; font-size:7px; }
  .master-promotion-toast { position:fixed; top:10px; z-index:90; font-size:10px; }

  /* Reference placement becomes a focused, scroll-free touch surface. */
  body.mobile-reference-focus header,
  body.mobile-reference-focus .studio-stagebar,
  body.mobile-reference-focus .comparison-mobile-actions,
  body.mobile-reference-focus .save-resume-button { display:none !important; }
  body.mobile-reference-focus main.app {
    position:fixed;
    inset:0;
    z-index:60;
    width:100vw;
    height:100dvh !important;
    grid-template-rows:minmax(0,1fr) !important;
    background:#101b2b;
  }
  body.mobile-reference-focus .preview-wrap.comparison-preview { padding:0; grid-template-rows:minmax(0,1fr); }
  body.mobile-reference-focus .comparison-grid { display:block; height:100%; }
  body.mobile-reference-focus .comparison-grid > .master { height:100%; border:0; border-radius:0; grid-template-rows:58px minmax(0,1fr); }
  body.mobile-reference-focus .comparison-card-head,
  body.mobile-reference-focus .comparison-side-column,
  body.mobile-reference-focus .comparison-resizer { display:none !important; }
  body.mobile-reference-focus #masterVariantCanvas,
  body.mobile-reference-focus .comparison-card.master .comparison-ai-result { display:none !important; }
  body.mobile-reference-focus .reference-marking-bar { min-height:58px; padding:7px 10px; font-size:12px; }
  body.mobile-reference-focus .reference-marking-bar span { white-space:normal; line-height:1.25; }
  body.mobile-reference-focus .reference-marking-bar button { min-height:38px; padding:0 12px; font-size:11px; }
  body.mobile-reference-focus .reference-precision-button:not([hidden]) { display:inline-flex; align-items:center; justify-content:center; }
  body.mobile-reference-focus.reference-loupe-active .reference-marking-bar { opacity:.72; }
  body.mobile-reference-focus .comparison-canvas-stage,
  body.mobile-reference-focus .canvas-shell,
  body.mobile-reference-focus #mockupCanvas { touch-action:none !important; }
}

/* Quick Start's compact panel must reserve canvas space after mobile overrides. */
body.quick-reference-focus.mobile-reference-focus main.app {
  inset:0 0 var(--quick-measure-height) !important;
  height:auto !important;
}
body.quick-reference-focus.mobile-reference-focus .preview-wrap.comparison-preview {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
}
body.quick-reference-focus.mobile-reference-focus .comparison-grid > .master {
  grid-template-rows:minmax(0,1fr);
}
body.quick-reference-focus.mobile-reference-focus .reference-marking-bar {
  display:none !important;
}