:root {
  color-scheme: light;
  --bg: #eef3f8;
  --surface: #ffffff;
  --surface-soft: #f5f8fb;
  --ink: #142437;
  --muted: #667789;
  --line: #d8e1ea;
  --line-strong: #bdcad7;
  --nav: #173650;
  --nav-soft: #1c405d;
  --accent: #147d92;
  --accent-hover: #0f6d80;
  --success: #23865e;
  --shadow: 0 18px 50px rgba(27, 53, 79, .13);
  --radius: 14px;
  --header-height: 64px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; display: grid; grid-template-rows: var(--header-height) auto minmax(0, 1fr); }
.topbar { display: flex; align-items: center; gap: 24px; padding: 0 22px; background: var(--nav); color: #fff; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; border: 1px solid #39708b; border-radius: 10px; display: grid; place-items: center; background: #102f48; color: #69d0dd; font-weight: 900; }
.brand strong { display: block; font-size: 14px; letter-spacing: .11em; }
.brand small { display: block; color: #adc0d2; font-size: 11px; margin-top: 2px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-actions a { color: #c6d4df; text-decoration: none; font-size: 13px; }

.button { border-radius: 10px; border: 1px solid transparent; padding: 11px 15px; font-weight: 700; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button-primary:hover { background: var(--accent-hover); }
.button-secondary { background: var(--surface-soft); border-color: var(--line-strong); color: var(--ink); }
.button-wide { width: 100%; }

.system-tabs { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 1px; padding: 10px 14px; background: var(--nav); border-top: 1px solid rgba(255,255,255,.08); overflow-x: auto; }
.system-tab { min-width: 180px; padding: 11px 13px; text-align: left; color: #b9c9d6; background: var(--nav-soft); border: 1px solid #345a75; border-radius: 11px; cursor: pointer; }
.system-tab strong { display: block; color: inherit; font-size: 12px; }
.system-tab span { display: block; font-size: 10px; color: #8fa9bc; margin-top: 3px; }
.system-tab.is-active { color: #fff; border-color: #4eb5c4; background: #215c70; box-shadow: inset 3px 0 #62d0db; }

.workspace { min-height: 0; display: grid; grid-template-columns: 320px minmax(520px, 1fr) 310px; }
.panel { min-width: 0; background: var(--surface); }
.panel-left { border-right: 1px solid var(--line); }
.panel-right { border-left: 0; }
.panel-scroll { height: 100%; overflow: auto; padding: 24px 20px; }
.section-heading > span, .result-label, .lead-head span { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; font-weight: 800; }
.section-heading h1 { font-size: 22px; margin: 8px 0 7px; }
.section-heading p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 22px; }
.parameters-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field span { color: var(--muted); font-size: 11px; }
.field input, .field select { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; background: #f9fbfc; color: var(--ink); padding: 11px 12px; outline: none; }
.field input:focus, .field select:focus, .lead-card input:focus, .lead-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20,125,146,.11); }
.panel-actions { margin-top: 18px; }

.stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: 52px minmax(420px, 1fr) 190px; background: #e9f0f6; }
.stage-toolbar { display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.stage-toolbar > strong { margin-right: auto; font-size: 12px; color: var(--muted); }
.toolbar-group { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.tool-button { border: 0; border-radius: 6px; background: transparent; color: var(--muted); padding: 7px 9px; cursor: pointer; font-size: 11px; }
.tool-button.is-active { color: var(--ink); background: #dce9f1; }
.canvas-host { position: relative; min-height: 0; overflow: hidden; background-color: #f8fbfd; background-image: linear-gradient(rgba(35,85,119,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(35,85,119,.07) 1px,transparent 1px); background-size: 20px 20px; }
.canvas-host.no-grid { background-image: none; }
#assemblyCanvas { display: block; width: 100%; height: 100%; }
.canvas-info { position: absolute; top: 14px; left: 14px; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.92); box-shadow: 0 8px 22px rgba(28,56,82,.1); pointer-events: none; }
.canvas-info strong { font-size: 12px; }
.canvas-info span { color: var(--muted); font-size: 10px; }
.results-table { min-height: 0; background: var(--surface); border-top: 1px solid var(--line); }
.results-tabs { height: 44px; display: flex; align-items: end; gap: 20px; padding: 0 15px; border-bottom: 1px solid var(--line); }
.results-tabs button { height: 44px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.results-tabs button.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.empty-state { height: calc(100% - 44px); display: grid; place-content: center; gap: 5px; text-align: center; padding: 20px; }
.empty-state strong { font-size: 13px; }
.empty-state span { color: var(--muted); font-size: 11px; }

.result-card { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 28px 22px 22px; }
.result-price { display: block; font-size: 42px; letter-spacing: -.04em; margin: 11px 0 5px; }
.result-meta { margin: 0; color: var(--muted); font-size: 11px; }
.result-action { align-self: center; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-action p { margin: 0 0 15px; font-size: 13px; line-height: 1.55; }
.result-action small { display: block; margin-top: 9px; text-align: center; color: var(--muted); font-size: 10px; }
.result-footer { align-self: end; display: grid; gap: 7px; padding-top: 20px; }
.result-footer span { color: var(--muted); font-size: 11px; }
.link-button { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; text-align: left; font-weight: 700; font-size: 12px; }

.lead-dialog { width: min(480px, calc(100% - 28px)); border: 0; padding: 0; border-radius: 16px; box-shadow: var(--shadow); }
.lead-dialog::backdrop { background: rgba(12,35,54,.65); }
.lead-card { display: grid; gap: 14px; padding: 23px; }
.lead-head { display: flex; align-items: start; gap: 16px; }
.lead-head h2 { margin: 6px 0 0; }
.dialog-close { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 25px; cursor: pointer; }
.lead-card > p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.lead-card label { display: grid; gap: 6px; }
.lead-card label span { color: var(--muted); font-size: 11px; }
.lead-card input, .lead-card textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 12px; outline: none; resize: vertical; }
.form-message { min-height: 18px; color: var(--success); font-size: 11px; text-align: center; }

@media (max-width: 1150px) {
  .workspace { grid-template-columns: 290px minmax(460px, 1fr); }
  .panel-right { display: none; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .topbar { min-height: 64px; padding: 10px 12px; }
  .brand small, .topbar-actions > a { display: none; }
  .system-tabs { grid-template-columns: repeat(4, 180px); }
  .workspace { display: block; }
  .panel-left { border-right: 0; }
  .panel-scroll { padding: 20px 14px; }
  .stage { grid-template-rows: 52px 520px 190px; }
}

/* Fixed application shell with independent panel scrolling */
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  overscroll-behavior: none;
}

.app-shell {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: var(--header-height) auto minmax(0, 1fr);
}

.topbar,
.system-tabs {
  position: relative;
  z-index: 10;
  min-width: 0;
}

.workspace {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.panel-left,
.panel-right,
.stage {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.panel-left .panel-scroll {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.panel-right {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.result-card {
  min-height: 100%;
}

.stage {
  grid-template-rows: 52px minmax(0, 1fr) 190px;
}

.stage-toolbar,
.canvas-host,
.results-table {
  min-width: 0;
  min-height: 0;
}

.panel-left .panel-scroll,
.panel-right {
  scrollbar-width: thin;
  scrollbar-color: #a9bac7 #edf3f7;
}

.panel-left .panel-scroll::-webkit-scrollbar,
.panel-right::-webkit-scrollbar {
  width: 10px;
}

.panel-left .panel-scroll::-webkit-scrollbar-track,
.panel-right::-webkit-scrollbar-track {
  background: #edf3f7;
}

.panel-left .panel-scroll::-webkit-scrollbar-thumb,
.panel-right::-webkit-scrollbar-thumb {
  background: #a9bac7;
  border: 2px solid #edf3f7;
  border-radius: 999px;
}

@media (max-width: 760px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    overscroll-behavior: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .workspace,
  .panel-left,
  .panel-right,
  .stage {
    height: auto;
    overflow: visible;
  }

  .panel-left .panel-scroll,
  .panel-right {
    height: auto;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .stage {
    grid-template-rows: 52px 520px 190px;
  }
}

/* Canvas Core 1.0 */
.canvas-host {
  position: relative;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: #f8fbfd;
}
#assemblyCanvas {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  box-shadow: none;
  cursor: grab;
  touch-action: none;
}
#assemblyCanvas.is-panning { cursor: grabbing; }
#assemblyCanvas.has-hover:not(.is-panning) { cursor: pointer; }
.canvas-tooltip {
  position: absolute;
  z-index: 20;
  max-width: 240px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(20, 36, 55, .96);
  color: #fff;
  font-size: 11px;
  line-height: 1.35;
  box-shadow: 0 8px 22px rgba(20, 36, 55, .18);
  pointer-events: none;
}
.canvas-tooltip[hidden] { display: none; }

/* LRSP bracing selector */
.bracing-field {
  align-content: start;
}

.bracing-card {
  width: 100%;
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #f9fbfc;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.bracing-card:hover {
  border-color: var(--accent);
  background: #f2f8fa;
}

.bracing-card-title {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

.bracing-card-row {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 11px;
  line-height: 1.35;
}

.bracing-card-row b {
  color: var(--accent);
}

.bracing-card-action {
  padding-top: 3px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.bracing-dialog {
  width: min(1040px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  border: 0;
  padding: 0;
  border-radius: 17px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.bracing-dialog::backdrop {
  background: rgba(12, 35, 54, .68);
}

.bracing-dialog-card {
  display: grid;
  grid-template-rows: auto auto minmax(230px, 1fr) auto auto;
  max-height: calc(100dvh - 28px);
  overflow: auto;
}

.bracing-dialog-head {
  display: flex;
  align-items: start;
  gap: 18px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.bracing-dialog-head > div {
  min-width: 0;
}

.bracing-dialog-head span {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 800;
}

.bracing-dialog-head h2 {
  margin: 6px 0 0;
  font-size: 22px;
}

.bracing-choice-section {
  padding: 15px 18px;
}

.bracing-choice-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.bracing-choice-heading strong {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.bracing-choice-heading span {
  color: var(--muted);
  font-size: 11px;
}

.bracing-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 8px;
}

.bracing-option {
  min-height: 70px;
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-size: 10px;
  line-height: 1.35;
}

.bracing-option:hover {
  border-color: var(--accent);
}

.bracing-option.is-active {
  border-color: var(--accent);
  background: #e7f3f5;
  box-shadow: inset 0 0 0 1px rgba(20, 125, 146, .14);
}

.bracing-option-number {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dce9f1;
  color: var(--accent);
  font-weight: 900;
}

.bracing-option.is-active .bracing-option-number {
  background: var(--accent);
  color: #fff;
}

.bracing-preview-section {
  min-height: 230px;
  margin: 0 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfd;
}

#bracingPreview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 230px;
}

.bracing-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 15px 18px 18px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .bracing-options {
    grid-template-columns: 1fr 1fr;
  }

  .bracing-dialog-card {
    grid-template-rows: auto auto 260px auto auto;
  }

  .bracing-choice-heading {
    display: grid;
    gap: 3px;
  }
}

@media (max-width: 480px) {
  .bracing-options {
    grid-template-columns: 1fr;
  }
}

/* Miniature bracing scheme in the parameter card */
.bracing-card-preview {
  display: block;
  height: 132px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fbfd;
}

.bracing-card-preview canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.bracing-card-summary {
  display: grid;
  gap: 5px;
}

.bracing-card-summary > span {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 7px;
  font-size: 10px;
  line-height: 1.3;
}

.bracing-card-summary b {
  color: var(--accent);
}

/* Graphical previews for all Face/Back variants */
.bracing-option {
  min-height: 126px;
  grid-template-columns: 1fr;
  grid-template-rows: 76px auto;
  align-items: stretch;
  gap: 7px;
}

.bracing-option-preview {
  display: block;
  width: 100%;
  height: 76px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fbfd;
  pointer-events: none;
}

.bracing-option-content {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 8px;
  align-items: center;
}

.bracing-option.is-active .bracing-option-preview {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(20, 125, 146, .12);
}

@media (max-width: 760px) {
  .bracing-option {
    min-height: 118px;
    grid-template-rows: 68px auto;
  }

  .bracing-option-preview {
    height: 68px;
  }
}

/* LRSP bracing selector: icon-only choices */
.bracing-option {
  min-height: 88px;
  display: block;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  cursor: pointer;
}

.bracing-option-preview {
  display: block;
  width: 100%;
  height: 74px;
  border: 0;
  border-radius: 6px;
  background: #f8fbfd;
  pointer-events: none;
}

.bracing-option-number,
.bracing-option-content {
  display: none;
}

.bracing-option.is-active {
  border-color: var(--accent);
  background: #e7f3f5;
  box-shadow: inset 0 0 0 1px rgba(20, 125, 146, .18);
}

.bracing-option.is-active .bracing-option-preview {
  border: 1px solid var(--accent);
}

.bracing-card-preview {
  height: 150px;
}

.bracing-card-preview canvas {
  width: 100%;
  height: 100%;
}

/* LRSP variant selector: compact image-only rows */
.bracing-dialog-card {
  grid-template-rows:
    auto
    auto
    minmax(250px, 1fr)
    auto
    auto;
}

.bracing-choice-section {
  padding: 10px 16px;
}

.bracing-choice-heading {
  display: none;
}

.bracing-options {
  grid-template-columns:
    repeat(4, minmax(130px, 1fr));
  gap: 10px;
}

.bracing-option {
  min-height: 104px;
  aspect-ratio: 1.55 / 1;
  padding: 5px;
  display: grid;
  place-items: stretch;
  overflow: hidden;
}

.bracing-option-preview {
  width: 100%;
  height: 100%;
  min-height: 90px;
  object-fit: contain;
  border-radius: 6px;
}

.bracing-preview-section {
  min-height: 250px;
  margin: 2px 16px;
}

#bracingPreview {
  min-height: 250px;
}

@media (max-width: 760px) {
  .bracing-options {
    grid-template-columns: 1fr 1fr;
  }

  .bracing-option {
    min-height: 96px;
    aspect-ratio: 1.6 / 1;
  }

  .bracing-option-preview {
    min-height: 82px;
  }

  .bracing-preview-section,
  #bracingPreview {
    min-height: 230px;
  }
}

@media (max-width: 480px) {
  .bracing-options {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .bracing-option {
    min-height: 86px;
    padding: 4px;
  }

  .bracing-option-preview {
    min-height: 74px;
  }
}

/* LRSP selector refinements */
.bracing-card-summary {
  display: none;
}

.bracing-card-preview {
  height: 165px;
}

.bracing-option {
  min-height: 178px;
  aspect-ratio: 1.7 / 1;
  padding: 6px;
}

.bracing-option-preview {
  min-height: 164px;
  height: 100%;
}

.canvas-info {
  display: none;
}

@media (max-width: 760px) {
  .bracing-option {
    min-height: 150px;
  }

  .bracing-option-preview {
    min-height: 136px;
  }
}

@media (max-width: 480px) {
  .bracing-option {
    min-height: 125px;
  }

  .bracing-option-preview {
    min-height: 113px;
  }
}

/* LRSP selector layout: fit in one desktop screen */
.bracing-dialog {
  width: min(1040px, calc(100% - 24px));
  height: min(760px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

.bracing-dialog-card {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
  display: grid;
  grid-template-rows:
    auto
    112px
    minmax(190px, 1fr)
    112px
    auto;
}

.bracing-dialog-head {
  padding: 14px 18px 12px;
}

.bracing-dialog-head h2 {
  font-size: 19px;
}

.bracing-choice-section {
  min-width: 0;
  min-height: 0;
  padding: 8px 14px;
  overflow: hidden;
}

.bracing-options {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
}

.bracing-option {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  padding: 4px;
  display: block;
  overflow: hidden;
}

.bracing-option-preview {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 6px;
}

.bracing-preview-section {
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0 14px;
  overflow: hidden;
}

#bracingPreview {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.bracing-dialog-actions {
  padding: 10px 14px 12px;
}

@media (max-height: 720px) and (min-width: 761px) {
  .bracing-dialog {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .bracing-dialog-card {
    grid-template-rows:
      auto
      94px
      minmax(150px, 1fr)
      94px
      auto;
  }

  .bracing-dialog-head {
    padding: 10px 14px 8px;
  }

  .bracing-dialog-head h2 {
    margin-top: 3px;
    font-size: 17px;
  }

  .bracing-choice-section {
    padding: 6px 12px;
  }

  .bracing-preview-section {
    margin: 0 12px;
  }

  .bracing-dialog-actions {
    padding: 7px 12px 9px;
  }
}

@media (max-width: 760px) {
  .bracing-dialog {
    height: auto;
    max-height: calc(100dvh - 20px);
    overflow: auto;
  }

  .bracing-dialog-card {
    height: auto;
    max-height: none;
    overflow: visible;
    grid-template-rows:
      auto
      auto
      230px
      auto
      auto;
  }

  .bracing-options {
    height: auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, 92px);
  }

  .bracing-option {
    height: 92px;
  }

  .bracing-preview-section {
    height: 230px;
  }
}

/* LRSP selector: maximum readable option thumbnails */
.bracing-dialog {
  width: min(1180px, calc(100% - 20px));
  height: min(790px, calc(100dvh - 18px));
  max-height: calc(100dvh - 18px);
}

.bracing-dialog-card {
  grid-template-rows:
    auto
    138px
    minmax(205px, 1fr)
    138px
    auto;
}

.bracing-dialog-head {
  padding: 11px 16px 9px;
}

.bracing-dialog-head h2 {
  margin-top: 3px;
  font-size: 18px;
}

.bracing-choice-section {
  padding: 6px 12px;
}

.bracing-options {
  gap: 7px;
}

.bracing-option {
  padding: 3px;
  border-radius: 8px;
}

.bracing-option-preview {
  border-radius: 5px;
}

.bracing-preview-section {
  margin: 0 12px;
}

.bracing-dialog-actions {
  padding: 8px 12px 10px;
}

@media (max-height: 740px) and (min-width: 761px) {
  .bracing-dialog {
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
  }

  .bracing-dialog-card {
    grid-template-rows:
      auto
      118px
      minmax(170px, 1fr)
      118px
      auto;
  }

  .bracing-dialog-head {
    padding: 8px 12px 6px;
  }

  .bracing-dialog-actions {
    padding: 6px 10px 7px;
  }
}

@media (max-width: 980px) and (min-width: 761px) {
  .bracing-dialog {
    width: calc(100% - 12px);
  }

  .bracing-dialog-card {
    grid-template-rows:
      auto
      122px
      minmax(180px, 1fr)
      122px
      auto;
  }

  .bracing-options {
    gap: 5px;
  }
}

/* LRSP selector: narrower window, larger drawings */
.bracing-dialog {
  width: min(920px, calc(100% - 20px));
  height: min(790px, calc(100dvh - 18px));
}

.bracing-dialog-card {
  grid-template-rows:
    auto
    142px
    minmax(210px, 1fr)
    142px
    auto;
}

.bracing-choice-section {
  padding: 5px 10px;
}

.bracing-options {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.bracing-option {
  padding: 1px;
  border-radius: 7px;
}

.bracing-option-preview {
  border-radius: 5px;
}

.bracing-preview-section {
  margin: 0 10px;
}

@media (max-height: 740px) and (min-width: 761px) {
  .bracing-dialog-card {
    grid-template-rows:
      auto
      122px
      minmax(174px, 1fr)
      122px
      auto;
  }
}

@media (max-width: 940px) and (min-width: 761px) {
  .bracing-dialog {
    width: calc(100% - 12px);
  }

  .bracing-dialog-card {
    grid-template-rows:
      auto
      126px
      minmax(180px, 1fr)
      126px
      auto;
  }

  .bracing-choice-section {
    padding-inline: 7px;
  }

  .bracing-options {
    gap: 4px;
  }
}

/* LRSP specification */
.specification {
  height: calc(100% - 44px);
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface);
}

.specification-head,
.specification-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    72px
    34px;
  gap: 8px;
  align-items: center;
}

.specification-head {
  padding: 9px 15px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.specification-head span:last-child {
  grid-column: 2 / 4;
  text-align: right;
}

.specification-body {
  min-height: 0;
  overflow: auto;
}

.specification-row {
  min-height: 34px;
  padding: 6px 15px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.specification-row:last-child {
  border-bottom: 0;
}

.specification-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.specification-quantity {
  text-align: right;
  font-size: 12px;
}

.specification-unit {
  color: var(--muted);
  font-size: 10px;
}

.specification-row[data-specification-key="frame-ladder"]
  .specification-name {
  color: #c76500;
}

.specification-row[data-specification-key="frame-plain"]
  .specification-name {
  color: #0038c7;
}

.specification-row[data-specification-key="diagonal"]
  .specification-name {
  color: #d4006a;
}

.specification-row[data-specification-key="horizontal"]
  .specification-name,
.specification-row[data-specification-key^="support"]
  .specification-name {
  color: #087225;
}

.specification-note {
  padding: 8px 15px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

.result-price {
  font-size: 34px;
}

/* Specification step 2: full-height table and shared page scroll */
.calculator-main,
.calculator-workspace,
.workspace-grid,
.workspace-center,
.workspace-right,
.stage,
.stage-body,
.result-panel,
.specification {
  min-height: 0;
  height: auto;
  max-height: none;
}

.calculator-main,
.calculator-workspace {
  overflow: visible;
}

.workspace-grid {
  align-items: start;
}

.workspace-center,
.workspace-right {
  overflow: visible;
}

.stage {
  min-height: 620px;
}

.stage-body,
.canvas-host {
  min-height: 540px;
  height: 540px;
}

.result-panel {
  display: block;
}

.specification {
  display: block;
  height: auto;
  min-height: 0;
}

.specification-body {
  overflow: visible;
  max-height: none;
}

.specification-head,
.specification-row {
  grid-template-columns:
    minmax(150px, 1fr)
    88px
    104px
    104px;
  gap: 10px;
}

.specification-head {
  position: static;
}

.specification-head span {
  text-align: right;
}

.specification-head span:first-child {
  text-align: left;
}

.specification-row {
  min-height: 42px;
}

.specification-quantity,
.specification-unit-price,
.specification-row-price {
  text-align: right;
  white-space: nowrap;
}

.specification-unit {
  display: none;
}

.specification-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .specification-head,
  .specification-row {
    grid-template-columns:
      minmax(130px, 1fr)
      78px
      94px
      94px;
    gap: 7px;
  }
}

@media (max-width: 760px) {
  .stage {
    min-height: 480px;
  }

  .stage-body,
  .canvas-host {
    min-height: 420px;
    height: 420px;
  }

  .specification {
    overflow-x: auto;
  }

  .specification-head,
  .specification-row {
    min-width: 560px;
  }
}


/* Specification: four independent columns */
.specification-head,
.specification-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr)
    92px
    118px
    118px;
  column-gap: 12px;
  align-items: center;
}

.specification-head > span:nth-child(1),
.specification-row > span:nth-child(1) {
  grid-column: 1;
}

.specification-head > span:nth-child(2),
.specification-row > span:nth-child(2) {
  grid-column: 2;
}

.specification-head > span:nth-child(3),
.specification-row > span:nth-child(3) {
  grid-column: 3;
}

.specification-head > span:nth-child(4),
.specification-row > span:nth-child(4) {
  grid-column: 4;
}

.specification-quantity,
.specification-unit-price,
.specification-row-price {
  text-align: right;
  white-space: nowrap;
}

.specification-row-price {
  font-weight: 800;
}

.specification-unit {
  display: none;
}

@media (max-width: 1180px) {
  .specification-head,
  .specification-row {
    grid-template-columns:
      minmax(150px, 1fr)
      82px
      104px
      104px;
    column-gap: 8px;
  }
}

/* FINAL central layout:
   fixed Canvas above specification,
   one shared scrollbar for the whole center column. */

.workspace {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

/* Left and right columns keep their own behavior. */
.panel-left,
.panel-right {
  height: 100%;
  min-height: 0;
}

.panel-left {
  overflow: hidden;
}

.panel-left .panel-scroll {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.panel-right {
  overflow: hidden;
}

/* The actual middle column. */
.stage {
  display: grid !important;
  grid-template-rows:
    52px
    540px
    auto !important;
  align-content: start !important;

  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: #e9f0f6;
}

/* Controls remain visible while the center column scrolls. */
.stage-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;

  height: 52px;
  min-height: 52px;
  max-height: 52px;

  background: var(--surface);
}

/* Canvas has a strict, fixed height. */
.canvas-host {
  grid-row: 2;

  width: 100% !important;
  height: 540px !important;
  min-height: 540px !important;
  max-height: 540px !important;

  align-self: start;
  overflow: hidden !important;
  flex: none !important;
}

/* Prevent Canvas itself from expanding its parent. */
.canvas-host canvas,
#schemeCanvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

/* Specification is a normal block immediately below Canvas. */
.results-table {
  grid-row: 3;

  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: max-content !important;
  max-height: none !important;

  overflow: visible !important;
  align-self: start;

  border-top: 1px solid var(--line);
  background: var(--surface);
}

.results-tabs {
  position: static !important;
}

.specification {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: max-content !important;
  max-height: none !important;
  overflow: visible !important;
}

.specification-body {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: max-content !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Keep four independent columns. */
.specification-head,
.specification-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 1fr)
    92px
    118px
    118px;
  column-gap: 12px;
  align-items: center;
}

/* Header sticks inside the shared center scrollbar. */
.specification-head {
  position: sticky !important;
  top: 52px;
  z-index: 9;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
}

.specification-quantity,
.specification-unit-price,
.specification-row-price {
  text-align: right;
  white-space: nowrap;
}

.specification-row-price {
  font-weight: 800;
}

/* Neutralize older conflicting rules. */
.calculator-main,
.calculator-workspace,
.workspace-grid,
.workspace-center,
.workspace-right,
.stage-body,
.result-panel {
  min-height: 0;
}

.workspace-center,
.workspace-right,
.stage-body,
.result-panel {
  height: auto;
  max-height: none;
}

/* Short desktop screens. */
@media (max-height: 760px) and (min-width: 761px) {
  .stage {
    grid-template-rows:
      52px
      470px
      auto !important;
  }

  .canvas-host {
    height: 470px !important;
    min-height: 470px !important;
    max-height: 470px !important;
  }
}

/* Mobile uses normal page scrolling. */
@media (max-width: 760px) {
  html,
  body,
  .app-shell,
  .workspace {
    height: auto !important;
    overflow: visible !important;
  }

  .stage {
    height: auto !important;
    overflow: visible !important;
    grid-template-rows:
      52px
      420px
      auto !important;
  }

  .stage-toolbar,
  .specification-head {
    position: static !important;
  }

  .canvas-host {
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
  }

  .specification {
    overflow-x: auto !important;
  }

  .specification-head,
  .specification-row {
    min-width: 590px;
  }
}

/* Identical scrollbars for left and center columns */
.panel-left .panel-scroll,
.stage {
  scrollbar-width: thin;
  scrollbar-color: #a9bac7 #edf3f7;
}

.panel-left .panel-scroll::-webkit-scrollbar,
.stage::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.panel-left .panel-scroll::-webkit-scrollbar-track,
.stage::-webkit-scrollbar-track {
  background: #edf3f7;
}

.panel-left .panel-scroll::-webkit-scrollbar-thumb,
.stage::-webkit-scrollbar-thumb {
  background: #a9bac7;
  border: 2px solid #edf3f7;
  border-radius: 999px;
}

.panel-left .panel-scroll::-webkit-scrollbar-thumb:hover,
.stage::-webkit-scrollbar-thumb:hover {
  background: #8fa5b5;
}

.panel-left .panel-scroll::-webkit-scrollbar-corner,
.stage::-webkit-scrollbar-corner {
  background: #edf3f7;
}


/* Lead request submission */
.lead-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.lead-card.is-submitting {
  cursor: wait;
}

.form-message[data-type="success"] {
  color: #087225;
}

.form-message[data-type="error"] {
  color: #b42318;
}


.lead-contact-hint {
  margin: -4px 0 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.lead-card input:user-invalid {
  border-color: #b42318;
  box-shadow:
    0 0 0 2px
    rgba(180, 35, 24, .08);
}

.lead-card input:user-valid:not(:placeholder-shown) {
  border-color: #7aa88a;
}


/* Compact lead form without internal scroll */
.lead-dialog {
  width: min(500px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

.lead-card {
  width: 100%;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  padding: 16px;
}

#leadForm {
  display: grid;
  gap: 9px;
  overflow: visible;
}

.lead-card > p {
  margin: 4px 0 8px;
  font-size: 12px;
  line-height: 1.35;
}

.lead-card label {
  gap: 4px;
}

.lead-card label > span {
  font-size: 11px;
}

.lead-card input,
.lead-card textarea {
  min-height: 36px;
  padding: 7px 9px;
}

.lead-card textarea {
  min-height: 66px;
  max-height: 78px;
  resize: vertical;
}

.lead-contact-hint {
  margin: -2px 0 0;
  font-size: 10px;
  line-height: 1.3;
}

.lead-card menu,
.lead-actions {
  margin: 2px 0 0;
  padding: 0;
  gap: 8px;
}

.form-message {
  min-height: 16px;
  margin: 0;
  font-size: 11px;
}

@media (max-height: 620px) {
  .lead-card {
    padding: 10px 12px;
  }

  #leadForm {
    gap: 6px;
  }

  .lead-card textarea {
    min-height: 48px;
    max-height: 56px;
  }
}

/* ==========================================================
   Пользовательский калькулятор:
   схема + шапка спецификации + минимум две строки.
   ========================================================== */

.stage {
  display: grid !important;
  grid-template-rows:
    52px
    clamp(280px, calc(100dvh - 480px), 420px)
    auto !important;
  align-content: start !important;

  height: 100% !important;
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.stage-toolbar {
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 20;

  height: 52px;
  min-height: 52px;
  max-height: 52px;

  background: var(--surface);
}

.canvas-host {
  grid-row: 2;

  width: 100% !important;
  height:
    clamp(
      280px,
      calc(100dvh - 480px),
      420px
    ) !important;
  min-height: 280px !important;
  max-height: 420px !important;

  overflow: hidden !important;
  align-self: start;
}

.canvas-host canvas,
#assemblyCanvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

.results-table {
  grid-row: 3;

  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: max-content !important;
  max-height: none !important;

  overflow: visible !important;
  align-self: start;

  border-top: 1px solid var(--line);
  background: var(--surface);
}

.results-tabs {
  position: static !important;
  justify-content: flex-start;
}

.results-tabs button {
  cursor: pointer;
}

.specification,
.specification-body {
  width: 100% !important;
  height: auto !important;
  min-height: max-content !important;
  max-height: none !important;
  overflow: visible !important;
}

.specification-head {
  position: sticky !important;
  top: 52px;
  z-index: 19;

  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
}

@media (max-height: 760px) and (min-width: 901px) {
  .stage {
    grid-template-rows:
      52px
      280px
      auto !important;
  }

  .canvas-host {
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
}

@media (max-width: 900px) {
  .stage {
    height: auto !important;
    overflow: visible !important;

    grid-template-rows:
      52px
      300px
      auto !important;
  }

  .stage-toolbar,
  .specification-head {
    position: static !important;
  }

  .canvas-host {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
}

/* ==========================================================
   Перемещаемая граница между схемой и спецификацией.
   По умолчанию используется ранее утверждённая высота.
   При перетаскивании JS задаёт --canvas-panel-height.
   ========================================================== */

.stage {
  grid-template-rows:
    52px
    var(
      --canvas-panel-height,
      clamp(280px, calc(100dvh - 480px), 420px)
    )
    10px
    auto !important;
}

.canvas-host {
  height:
    var(
      --canvas-panel-height,
      clamp(280px, calc(100dvh - 480px), 420px)
    ) !important;

  min-height: 0 !important;
  max-height: none !important;
}

.canvas-spec-splitter {
  grid-row: 3;

  position: relative;
  z-index: 18;

  display: grid;
  place-items: center;

  width: 100%;
  height: 10px;
  min-height: 10px;

  cursor: row-resize;
  touch-action: none;
  user-select: none;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.canvas-spec-splitter span {
  display: block;

  width: 44px;
  height: 3px;

  border-radius: 999px;
  background: var(--muted);

  opacity: .55;
  transition:
    width .15s ease,
    opacity .15s ease,
    background .15s ease;
}

.canvas-spec-splitter:hover span,
.canvas-spec-splitter:focus-visible span,
.is-resizing-canvas
.canvas-spec-splitter span {
  width: 64px;
  opacity: 1;
  background: #1565c0;
}

.canvas-spec-splitter:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: -2px;
}

.results-table {
  grid-row: 4;
}

.is-resizing-canvas {
  cursor: row-resize !important;
}

.is-resizing-canvas * {
  cursor: row-resize !important;
  user-select: none !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  .stage {
    grid-template-rows:
      52px
      var(
        --canvas-panel-height,
        280px
      )
      10px
      auto !important;
  }

  .canvas-host {
    height:
      var(
        --canvas-panel-height,
        280px
      ) !important;
  }
}

@media (max-width: 900px) {
  .stage {
    grid-template-rows:
      52px
      var(
        --canvas-panel-height,
        300px
      )
      10px
      auto !important;
  }

  .canvas-host {
    height:
      var(
        --canvas-panel-height,
        300px
      ) !important;
  }
}
#assemblyCanvas {
    border: 2px solid transparent;
    transition: border-color .15s ease;
}

#assemblyCanvas.is-active {
    border-color: #1565c0;
}

.tool-button[hidden]{display:none!important;}


/* BUILD 25: единая изометрия и компактная правая колонка */
.stage-toolbar { justify-content: flex-end; }
.stage-toolbar > strong { margin-right: auto; }
.toolbar-group-canvas { margin-left: auto; }

.panel-right {
  padding: 16px;
  background: #edf3f7;
  overflow-x: hidden;
  overflow-y: auto;
}
.result-sidebar {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.result-summary-card,
.result-request-card,
.result-image-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(27,53,79,.07);
}
.result-summary-card {
  flex: 0 0 auto;
  min-height: 128px;
  padding: 17px;
}
.result-price {
  margin: 8px 0 4px;
  font-size: clamp(30px,3vw,40px);
  line-height: 1;
  overflow-wrap: anywhere;
}
.result-meta { line-height: 1.4; }
.result-request-card {
  flex: 0 0 auto;
  min-height: 170px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.result-request-card p {
  margin: 0 0 13px;
  font-size: 12px;
  line-height: 1.5;
}
.result-request-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}
.result-image-card { flex: 0 0 auto; padding: 10px; }
.result-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed #9eb2c2;
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(20,125,146,.035),rgba(35,85,119,.08));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: #7890a2;
  text-align: center;
}
.result-image-placeholder svg {
  width: min(45%,112px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .72;
}
.result-image-placeholder span {
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
}
@media (max-height:760px) and (min-width:1151px) {
  .panel-right { padding: 10px; }
  .result-sidebar { gap: 8px; }
  .result-summary-card { min-height: 102px; padding: 12px; }
  .result-request-card { min-height: 138px; padding: 12px; }
  .result-request-card p { margin-bottom: 8px; line-height: 1.35; }
  .result-price { font-size: 30px; }
}
@media (max-width:1150px) {
  .panel-right { display:none; }
}


/* ==========================================================
   BUILD 26 — правая колонка без пустого пространства.
   Верхние два блока компактные, изображение заполняет остаток.
   ========================================================== */

.panel-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.result-sidebar {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows:
    auto
    auto
    minmax(0, 1fr);
  gap: 12px;
}

.result-summary-card {
  min-height: 0;
  padding: 16px 17px;
}

.result-request-card {
  min-height: 0;
  padding: 15px 17px;
}

.result-image-card {
  min-height: 0;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.result-image-placeholder {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}

/*
 * Будущее реальное изображение можно поместить
 * внутрь .result-image-card с этим классом.
 */
.result-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

@media (max-height: 760px) and (min-width: 1151px) {
  .result-sidebar {
    gap: 8px;
  }

  .result-summary-card {
    min-height: 0;
    padding: 10px 12px;
  }

  .result-request-card {
    min-height: 0;
    padding: 10px 12px;
  }

  .result-request-card p {
    margin-bottom: 7px;
  }
}


/* BUILD 42 — переключатель вида только для rad_lsph */
.toolbar-group-views[hidden] {
  display: none !important;
}

.toolbar-group-views {
  margin-left: auto;
}

.toolbar-group-views +
.toolbar-group-canvas {
  margin-left: 0;
}

@media (max-width: 760px) {
  .stage-toolbar {
    flex-wrap: wrap;
  }

  .toolbar-group-views {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .toolbar-group-views .tool-button {
    flex: 1 1 0;
  }
}


.checkbox-field {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.checkbox-field input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #147d92;
}

.checkbox-field span {
  margin: 0;
}


/* ==========================================================
   BUILD 58 — mobile native page scroll + bounded specification.
   Desktop layout is intentionally untouched.
   ========================================================== */
@media (max-width: 760px) {
  html {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  body {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
  }

  .app-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .system-tabs {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .workspace,
  .panel,
  .panel-left,
  .panel-left .panel-scroll,
  .stage,
  .results-table {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
  }

  .workspace,
  .panel,
  .panel-left,
  .panel-left .panel-scroll {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
    touch-action: pan-y !important;
  }

  .parameters-form,
  #parametersForm,
  .field,
  .field-full,
  .panel-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    touch-action: pan-y !important;
  }

  .stage {
    overflow: visible !important;
    overscroll-behavior: auto !important;
    grid-template-rows:
      auto
      420px
      10px
      auto !important;
  }

  .canvas-host {
    width: 100% !important;
    max-width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }

  #assemblyCanvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    touch-action: pan-y !important;
  }

  .canvas-spec-splitter {
    width: 100% !important;
    max-width: 100% !important;
    touch-action: pan-y !important;
    cursor: default !important;
  }

  .results-table {
    overflow: hidden !important;
  }

  .results-tabs {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* The viewport-sized wrapper never grows with the 590px table. */
  .specification {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Only this inner layer is allowed to be wider than the screen. */
  .specification-body {
    box-sizing: border-box !important;
    display: block !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .specification-head,
  .specification-row {
    box-sizing: border-box !important;
    width: 590px !important;
    min-width: 590px !important;
    max-width: 590px !important;
  }
}


/* BUILD 62 — mobile canvas activation.
   Inactive: vertical page scroll. Active after tap: pan + pinch zoom. */
@media (max-width: 760px) {
  #assemblyCanvas {
    touch-action: pan-y !important;
  }

  #assemblyCanvas.is-active {
    touch-action: none !important;
  }
}


/* ==========================================================
   BUILD 63 — phone landscape keeps the portrait mobile layout.
   Only coarse-pointer landscape phones with small screen height.
   ========================================================== */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  html {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    overscroll-behavior: auto !important;
    touch-action: pan-y !important;
  }

  /*
   * Keep a portrait-width calculator even when the phone is rotated.
   * Free horizontal space simply remains at the sides.
   */
  .app-shell {
    display: block !important;
    width: min(430px, 100vw) !important;
    max-width: 430px !important;
    height: auto !important;
    min-height: 100dvh !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .topbar {
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  .brand small,
  .topbar-actions > a {
    display: none !important;
  }

  .system-tabs {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(4, 180px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .workspace {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .panel,
  .panel-left,
  .panel-left .panel-scroll,
  .stage,
  .results-table {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .panel-left {
    border-right: 0 !important;
    overflow: visible !important;
  }

  .panel-left .panel-scroll {
    padding: 20px 14px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    touch-action: pan-y !important;
  }

  .stage {
    overflow: visible !important;
    grid-template-rows:
      auto
      420px
      10px
      auto !important;
  }

  .stage-toolbar,
  .specification-head {
    position: static !important;
  }

  .canvas-host {
    width: 100% !important;
    max-width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    overflow: hidden !important;
  }

  #assemblyCanvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
  }

  .results-table {
    overflow: hidden !important;
  }

  .results-tabs {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .specification {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .specification-body {
    display: block !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .specification-head,
  .specification-row {
    box-sizing: border-box !important;
    width: 590px !important;
    min-width: 590px !important;
    max-width: 590px !important;
  }
}

/* Mobile numeric fields: arrow-only input. */
.mobile-number-stepper {
  position: relative;
  min-width: 0;
}

.mobile-number-arrows {
  display: none;
}

@media (max-width: 760px) {
  .mobile-number-stepper > input[type="number"] {
    padding-right: 44px;
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .mobile-number-stepper > input[type="number"]::-webkit-inner-spin-button,
  .mobile-number-stepper > input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .mobile-number-arrows {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 38px;
    display: grid;
    grid-template-rows: 1fr 1fr;
    overflow: hidden;
    border-left: 1px solid var(--line-strong);
    border-radius: 0 9px 9px 0;
    background: #f9fbfc;
  }

  .mobile-number-arrow {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
  }

  .mobile-number-arrow + .mobile-number-arrow {
    border-top: 1px solid var(--line);
  }

  .mobile-number-arrow:active {
    background: #e8f0f5;
    color: var(--ink);
  }
}


/* STEP 8: SEO/content block in calculator parameter panel */
.calculator-seo-panel {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(31, 61, 82, .14);
}

.calculator-seo-panel h2 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
}

.calculator-seo-panel p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.calculator-seo-links {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.calculator-seo-links a {
  display: block;
  padding: 9px 11px;
  border: 1px solid rgba(31, 61, 82, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
  color: var(--accent, #235577);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.calculator-seo-links a:hover,
.calculator-seo-links a:focus-visible {
  text-decoration: underline;
}