/* Staff designer only. Customer previews keep their existing full-screen view. */
html.customer-mode body { margin: 0; }
html:not(.customer-mode):has(.designer-shell),
html:not(.customer-mode) body:has(.designer-shell),
html:not(.customer-mode) #root:has(> .designer-shell) {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
html:not(.customer-mode) .designer-shell,
html:not(.customer-mode) .designer-shell * { box-sizing: border-box; }
html:not(.customer-mode) .designer-shell {
  --designer-green: #285b49;
  --designer-border: #e1ddd3;
  --designer-muted: #80796e;
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  grid-template-rows: 56px minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  background: #f5f4ef;
  color: #302f29;
  overflow: hidden;
}
html:not(.customer-mode) .designer-shell [hidden] { display: none !important; }
html:not(.customer-mode) .designer-shell button:focus-visible,
html:not(.customer-mode) .designer-shell input:focus-visible,
html:not(.customer-mode) .designer-shell select:focus-visible { outline: 2px solid #7c9a83; outline-offset: 2px; }
html:not(.customer-mode) .designer-shell > .app-main-title {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0 20px;
  border-bottom: 1px solid var(--designer-border);
  background: #fffefa;
}
html:not(.customer-mode) .designer-shell .app-main-title::after { display: none; }
html:not(.customer-mode) .designer-shell .app-main-title h1 { grid-column: 2; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
html:not(.customer-mode) .designer-shell #back-workbench {
  grid-column: 1;
  justify-self: start;
  width: auto;
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--designer-border);
  border-radius: 7px;
  padding: 0 11px;
  background: #fffefa;
  color: #625e53;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
html:not(.customer-mode) .designer-shell .language-switch {
  position: static;
  grid-column: 3;
  justify-self: end;
  gap: 2px;
  border: 1px solid #e0dcd2;
  border-radius: 7px;
  padding: 3px;
  background: #f4f3ee;
  box-shadow: none;
  transform: none;
}
html:not(.customer-mode) .designer-shell .language-switch button { min-width: 34px; height: 26px; border-radius: 4px; padding: 0 8px; font-size: 11px; font-weight: 500; }
html:not(.customer-mode) .designer-shell .language-switch button.active { background: #fff; color: #285b49; box-shadow: 0 1px 4px #252b2012; }
html:not(.customer-mode) .designer-shell > .panel {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-right: 1px solid var(--designer-border);
  border-bottom: 0;
  background: #f7f6f2;
  overflow: hidden;
}
html:not(.customer-mode) .designer-shell .designer-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; padding: 20px 18px 14px; }
html:not(.customer-mode) .designer-shell .designer-panel-heading > div { display: grid; gap: 5px; min-width: 0; }
html:not(.customer-mode) .designer-shell .designer-panel-heading small { color: #968c7a; font-size: 9px; font-weight: 600; letter-spacing: .12em; }
html:not(.customer-mode) .designer-shell .designer-panel-heading strong { color: #3b4035; font-size: 18px; font-weight: 650; }
html:not(.customer-mode) .designer-shell #designer-panel-toggle { display: none; }
html:not(.customer-mode) .designer-shell .panel-tabs {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  margin: 0 14px 12px;
  padding: 4px;
  border: 1px solid #e4dfd4;
  border-radius: 9px;
  background: #eeede7;
  overflow: visible;
}
html:not(.customer-mode) .designer-shell .panel-tabs button { min-width: 0; height: 36px; border: 0; border-radius: 6px; padding: 4px; color: #797266; font-size: 12px; font-weight: 500; white-space: normal; line-height: 1.2; }
html:not(.customer-mode) .designer-shell .panel-tabs button.active { background: #fffefa; color: #2b5946; box-shadow: 0 1px 5px #30271510; font-weight: 650; }
html:not(.customer-mode) .designer-shell #panel-content {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding: 0 14px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d1ccbf transparent;
  -webkit-overflow-scrolling: touch;
}
html:not(.customer-mode) .designer-shell #panel-content :is(section, form, label, .control-group, .frame-support-editor, .frame-merge-editor) { min-width: 0; max-width: 100%; }
html:not(.customer-mode) .designer-shell #panel-content :is(input, select, textarea) { min-width: 0; max-width: 100%; font-family: inherit; }
html:not(.customer-mode) .designer-shell .structure-list,
html:not(.customer-mode) .designer-shell .parts-list,
html:not(.customer-mode) .designer-shell .color-list,
html:not(.customer-mode) .designer-shell .space-panel { min-width: 0; gap: 13px; }
html:not(.customer-mode) .designer-shell .segment-row,
html:not(.customer-mode) .designer-shell .structure-block,
html:not(.customer-mode) .designer-shell .parts-block,
html:not(.customer-mode) .designer-shell .frame-merge-editor,
html:not(.customer-mode) .designer-shell .frame-support-editor { min-width: 0; gap: 10px; padding: 13px; border: 1px solid #e4ded2; border-radius: 10px; background: #fffefa; }
html:not(.customer-mode) .designer-shell .structure-block > .segment-row { border: 0; border-radius: 0; padding: 0; background: transparent; }
html:not(.customer-mode) .designer-shell .segment-row > span,
html:not(.customer-mode) .designer-shell .structure-label,
html:not(.customer-mode) .designer-shell .parts-label,
html:not(.customer-mode) .designer-shell .group-title { color: #635d52; font-size: 12px; font-weight: 600; line-height: 1.5; }
html:not(.customer-mode) .designer-shell .structure-list .segmented { grid-template-columns: repeat(auto-fit, minmax(49px, 1fr)); gap: 5px; }
html:not(.customer-mode) .designer-shell .segmented button,
html:not(.customer-mode) .designer-shell .depth-add-actions button,
html:not(.customer-mode) .designer-shell .type-button { min-width: 0; min-height: 35px; border: 1px solid #ddd8cc; border-radius: 6px; background: #fff; color: #665f52; font-size: 12px; font-weight: 500; }
html:not(.customer-mode) .designer-shell .segmented button.active,
html:not(.customer-mode) .designer-shell .type-button.active { border-color: #6e8a72; background: #e9f1e9; color: #2b5946; font-weight: 650; }
html:not(.customer-mode) .designer-shell .custom-dimension { grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
html:not(.customer-mode) .designer-shell .custom-dimension input { width: 100%; height: 36px; border: 1px solid #ddd8cc; border-radius: 6px; padding: 0 9px; font-size: 13px; font-weight: 500; }
html:not(.customer-mode) .designer-shell .custom-dimension button { min-width: 58px; height: 36px; padding: 0 10px; border: 1px solid #bccbbd; border-radius: 6px; background: #eaf1e8; color: #365c42; font-size: 12px; }
html:not(.customer-mode) .designer-shell .dimension-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #e4ded2;
  border-radius: 10px;
  background: #fffefa;
}
html:not(.customer-mode) .designer-shell .dimension-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html:not(.customer-mode) .designer-shell .dimension-panel-heading strong { color: #635d52; font-size: 12px; font-weight: 600; }
html:not(.customer-mode) .designer-shell .dimension-panel-heading > span { color: #968a78; font-size: 10px; }
html:not(.customer-mode) .designer-shell .dimension-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
html:not(.customer-mode) .designer-shell .dimension-field { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(0, 176px); align-content: start; column-gap: 10px; row-gap: 6px; min-width: 0; }
html:not(.customer-mode) .designer-shell .dimension-field + .dimension-field { border-top: 1px solid #ece8de; padding-top: 8px; }
html:not(.customer-mode) .designer-shell .dimension-field-heading { display: grid; align-self: center; gap: 1px; min-width: 0; }
html:not(.customer-mode) .designer-shell .dimension-field-heading label { color: #3b493b; font-size: 14px; font-weight: 600; line-height: 18px; }
html:not(.customer-mode) .designer-shell .dimension-field-heading > span { color: #938976; font-size: 10px; line-height: 14px; white-space: nowrap; }
html:not(.customer-mode) .designer-shell .dimension-editor { display: grid; grid-template-columns: minmax(0, 1fr) 52px; align-items: center; gap: 6px; min-width: 0; }
html:not(.customer-mode) .designer-shell .dimension-editor input {
  width: 100%;
  height: 36px;
  min-width: 0;
  border: 1px solid #d9d4c8;
  border-radius: 6px;
  padding: 0 5px;
  background: #fff;
  color: #2f4638;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
html:not(.customer-mode) .designer-shell .dimension-editor input::-webkit-inner-spin-button,
html:not(.customer-mode) .designer-shell .dimension-editor input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
html:not(.customer-mode) .designer-shell .dimension-presets { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; min-width: 0; }
html:not(.customer-mode) .designer-shell .dimension-presets button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid #e1ddd3;
  border-radius: 6px;
  padding: 0;
  background: #fff;
  color: #776d5c;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
html:not(.customer-mode) .designer-shell .dimension-presets button:hover:not(:disabled) { border-color: #9bad96; background: #f3f6ef; }
html:not(.customer-mode) .designer-shell .dimension-presets button.active { border-color: #6e8a72; background: #e9f1e9; color: #2b5946; font-weight: 650; }
html:not(.customer-mode) .designer-shell .dimension-editor button { width: 100%; min-width: 0; min-height: 36px; border: 1px solid #bccbbd; border-radius: 6px; padding: 0 5px; background: #eaf1e8; color: #365c42; font-size: 12px; font-weight: 600; cursor: pointer; }
html:not(.customer-mode) .designer-shell .dimension-editor button:hover:not(:disabled) { border-color: #6d8b73; background: #e1ecdf; }
html:not(.customer-mode) .designer-shell .dimension-field.is-disabled { opacity: .55; }
html:not(.customer-mode) .designer-shell .dimension-field :disabled { cursor: not-allowed; }
html:not(.customer-mode) .designer-shell .dimension-guidance { min-width: 0; border-top: 1px solid #ece8de; padding-top: 6px; color: #968a78; font-size: 10px; line-height: 1.4; }
html:not(.customer-mode) .designer-shell .dimension-guidance summary { width: fit-content; color: #7e7565; cursor: pointer; }
html:not(.customer-mode) .designer-shell .dimension-guidance p { display: grid; gap: 3px; margin: 9px 0 0; }
html:not(.customer-mode) .designer-shell .dimension-guidance strong { color: #635d52; font-weight: 600; }
html:not(.customer-mode) .designer-shell .cable-port-help { color: #968a78; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
html:not(.customer-mode) .designer-shell .structure-reference-hit,
html:not(.customer-mode) .designer-shell .base-thumb { border-color: #e4ded4; border-radius: 7px; background-color: #fcfbf7; }
html:not(.customer-mode) .designer-shell .structure-reference-hit.active,
html:not(.customer-mode) .designer-shell .base-thumb.active { border-color: #6d8b73; box-shadow: inset 0 0 0 1px #6d8b73; background-color: #f0f4ec; }
html:not(.customer-mode) .designer-shell .base-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html:not(.customer-mode) .designer-shell .base-thumb { min-width: 0; gap: 4px; padding: 7px 5px 8px; }
html:not(.customer-mode) .designer-shell .base-thumbnail-stage { display: grid; place-items: center; width: 100%; height: 60px; }
html:not(.customer-mode) .designer-shell .base-thumbnail-image { display: block; width: 100%; height: 60px; object-fit: contain; pointer-events: none; }
html:not(.customer-mode) .designer-shell .base-thumbnail-label { color: #625e53; font-size: 11px; line-height: 1.4; }
html:not(.customer-mode) .designer-shell .base-thumb.active .base-thumbnail-label { color: #285b49; font-weight: 650; }
html:not(.customer-mode) .designer-shell .parts-block { grid-template-columns: minmax(0, 1fr); }
html:not(.customer-mode) .designer-shell .door-reference-panel { width: 100%; min-width: 0; grid-template-columns: repeat(auto-fit, 64px); justify-content: space-between; }
html:not(.customer-mode) .designer-shell .stepper { min-width: 0; border-color: #e1dbcf; border-radius: 8px; background: #fffefa; }
html:not(.customer-mode) .designer-shell .stepper-controls { grid-template-columns: 34px minmax(0, 1fr) 34px; }
html:not(.customer-mode) .designer-shell .stepper-controls button { width: 34px; height: 34px; border-color: #ddd6c8; }
html:not(.customer-mode) .designer-shell .frame-support-form { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; gap: 10px; }
html:not(.customer-mode) .designer-shell .frame-support-form label { min-width: 0; overflow-wrap: anywhere; }
html:not(.customer-mode) .designer-shell .frame-support-form input,
html:not(.customer-mode) .designer-shell .frame-support-form select { width: 100%; min-width: 0; font-size: 12px; }
html:not(.customer-mode) .designer-shell .frame-support-form > button { grid-column: 1 / -1; width: 100%; min-width: 0; }
html:not(.customer-mode) .designer-shell .frame-support-row { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
html:not(.customer-mode) .designer-shell .frame-support-row strong { min-width: 0; overflow-wrap: anywhere; }
html:not(.customer-mode) .designer-shell .color-list .color-scope-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; overflow: visible; }
html:not(.customer-mode) .designer-shell .color-list .color-scope-tabs button { min-width: 0; height: 40px; border: 1px solid #dfd8cb; border-radius: 7px; font-size: 13px; font-weight: 500; }
html:not(.customer-mode) .designer-shell .color-list .color-scope-tabs button.active { background: var(--designer-green); border-color: var(--designer-green); color: #fff; }
html:not(.customer-mode) .designer-shell .color-current { margin-top: 4px; color: #6a6357; font-size: 13px; }
html:not(.customer-mode) .designer-shell .color-group-title { color: #6d6659; font-size: 13px; }
html:not(.customer-mode) .designer-shell .color-list .color-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
html:not(.customer-mode) .designer-shell .color-tile { border-radius: 7px; border-width: 2px; }
html:not(.customer-mode) .designer-shell .color-tile.active { border-color: #3d6245; box-shadow: inset 0 0 0 2px #ffffffe8, 0 0 0 1px #3d6245; }
html:not(.customer-mode) .designer-shell > .workspace {
  grid-column: 2;
  grid-row: 2;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background: #f5f4ef;
}
html:not(.customer-mode) .designer-shell .topbar {
  z-index: 21;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  min-width: 0;
  padding: 11px 18px;
  border-bottom: 1px solid var(--designer-border);
  background: #fbfaf6;
  backdrop-filter: none;
}
html:not(.customer-mode) .designer-shell #view-tools { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; gap: 8px; overflow: visible; padding: 0; }
html:not(.customer-mode) .designer-shell #view-tools > .icon-button,
html:not(.customer-mode) .designer-shell #view-tools .download-menu-wrap > .icon-button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; width: 60px; height: 54px; min-width: 44px; padding: 6px 5px; border: 1px solid #dcd8cd; border-radius: 10px; background: #fffefa; color: #666359; box-shadow: 0 1px 2px #312b1c06; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; }
html:not(.customer-mode) .designer-shell .designer-tool-label { font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
html:not(.customer-mode) .designer-shell #view-tools .view-icon { flex: 0 0 auto; width: 21px; height: 21px; }
html:not(.customer-mode) .designer-shell #view-tools .icon-button.active { border-color: #7d9e85; background: #e8f1e8; color: #285b49; box-shadow: inset 0 0 0 1px #7d9e8529; }
html:not(.customer-mode) .designer-shell #view-tools .icon-button:disabled { color: #b9b4a8; border-color: #e9e5dc; background: #f4f2ed; box-shadow: none; }
html:not(.customer-mode) .designer-shell #view-tools .icon-button:active:not(:disabled) { background: #e3ecdf; border-color: #7d9e85; }
@media (hover: hover) {
  html:not(.customer-mode) .designer-shell #view-tools .icon-button:hover:not(:disabled) { background: #f0f4ec; border-color: #a4b49d; color: #285b49; }
  html:not(.customer-mode) .designer-shell #view-tools .icon-button.active:hover:not(:disabled) { background: #dfebdf; border-color: #6d9177; }
  html:not(.customer-mode) .designer-shell #view-tools #delete-cell:not(.restore):hover:not(:disabled) { background: #fbefec; border-color: #d3a39b; color: #9c4c40; }
}
html:not(.customer-mode) .designer-shell .topbar .price-block { grid-column: auto; width: auto; min-width: 0; display: grid; justify-items: end; align-content: center; gap: 3px; margin: 0; }
html:not(.customer-mode) .designer-shell .price-block > span { color: #998e7d; font-size: 10px; }
html:not(.customer-mode) .designer-shell .price-block strong { font-size: 22px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
html:not(.customer-mode) .designer-shell .price-value-row { min-width: 0; gap: 6px; }
html:not(.customer-mode) .designer-shell .price-block .price-exchange-rate { max-width: 180px; font-size: 9px; }
html:not(.customer-mode) .designer-shell .topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; width: auto; margin: 0; }
html:not(.customer-mode) .designer-shell .topbar-actions .action-button { min-width: 66px; min-height: 40px; border: 1px solid #dbd5c8; border-radius: 7px; padding: 0 14px; font-size: 12px; font-weight: 500; white-space: nowrap; }
html:not(.customer-mode) .designer-shell #export-config { color: #fff; background: var(--designer-green); border-color: var(--designer-green); }
html:not(.customer-mode) .designer-shell #reset-config { background: #fffefa; color: #817869; }
html:not(.customer-mode) .designer-shell .download-menu:not([hidden]) { position: absolute; top: calc(100% + 9px); right: 0; left: auto; z-index: 28; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: 286px; max-width: 300px; padding: 8px; border-color: #ded7ca; border-radius: 11px; background: #fffefa; transform: none; box-shadow: 0 12px 36px #29261d24; }
html:not(.customer-mode) .designer-shell .download-menu-item { width: auto; min-width: 0; min-height: 78px; padding: 12px 8px; gap: 7px; border: 1px solid #e9e3d8; border-radius: 7px; background: #fbfaf6; color: #5d6254; font-size: 12px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
html:not(.customer-mode) .designer-shell .download-menu-item::before { display: none; }
.product-package-progress { box-sizing: border-box; width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px; border: 1px solid #ded7ca; border-radius: 18px; background: #fffefa; color: #272d27; box-shadow: 0 20px 70px #29261d30; }
.product-package-progress::backdrop { background: #262e2655; }
.product-package-progress h2 { margin: 0 0 14px; font-size: 22px; }
.product-package-progress p { font-size: 14px; line-height: 1.7; }
.product-package-progress [role="status"] { display: block; margin: 20px 0; color: #245c48; font-size: 16px; }
.product-package-progress .product-package-hint { margin-bottom: 0; color: #777a70; font-size: 12px; }
html:not(.customer-mode) .designer-shell .download-menu-item:hover:not(:disabled) { border-color: #a4b29b; background: #f0f5eb; }
html:not(.customer-mode) .designer-shell .generate-menu { max-height: calc(100dvh - 190px); overflow-y: auto; background: #fffefa; border-color: #ded7ca; box-shadow: 0 12px 36px #29261d24; }
html:not(.customer-mode) .designer-shell .scene { min-width: 0; min-height: 0; height: 100%; background: #f5f4ef; }
html:not(.customer-mode) .designer-shell .scene canvas { min-width: 0; min-height: 0; }
html:not(.customer-mode) .designer-shell .summary-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 12px 18px; max-height: none; padding: 13px 18px; overflow: visible; border-top: 1px solid var(--designer-border); background: #fffefa; backdrop-filter: none; }
html:not(.customer-mode) .designer-shell .summary-bar > div { display: grid; min-width: 0; gap: 5px; }
html:not(.customer-mode) .designer-shell .summary-bar span { font-size: 10px; line-height: 1.35; color: #968b7a; }
html:not(.customer-mode) .designer-shell .summary-bar strong { color: #524f43; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
html:not(.customer-mode) .designer-shell .summary-bar .crate-summary-item strong { color: #886c3e; }
@media (min-width: 701px) and (max-width: 1100px) {
  html:not(.customer-mode) .designer-shell { grid-template-columns: 320px minmax(0, 1fr); }
  html:not(.customer-mode) .designer-shell .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 10px 12px; }
  html:not(.customer-mode) .designer-shell #view-tools { grid-column: 1 / -1; }
  html:not(.customer-mode) .designer-shell .topbar .price-block { justify-items: start; }
  html:not(.customer-mode) .designer-shell .summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 10px 12px; }
}
@media (max-width: 700px) {
  html:not(.customer-mode) .designer-shell { --designer-panel-height: clamp(220px, 36dvh, 340px); grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px minmax(0, 1fr) var(--designer-panel-height); }
  html:not(.customer-mode) .designer-shell.is-panel-expanded { --designer-panel-height: min(56dvh, 480px, calc(100dvh - 300px)); }
  html:not(.customer-mode) .designer-shell.is-panel-expanded:has(.dimension-panel) { --designer-panel-height: min(52dvh, 460px, calc(100dvh - 320px)); }
  html:not(.customer-mode) .designer-shell > .app-main-title { grid-column: 1; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 0; padding: 0 10px; }
  html:not(.customer-mode) .designer-shell .app-main-title h1 { font-size: 13px; }
  html:not(.customer-mode) .designer-shell #back-workbench { min-height: 32px; padding: 0 7px; font-size: 10px; }
  html:not(.customer-mode) .designer-shell .language-switch { gap: 0; padding: 2px; }
  html:not(.customer-mode) .designer-shell .language-switch button { min-width: 29px; height: 25px; padding: 0 5px; font-size: 10px; }
  html:not(.customer-mode) .designer-shell > .workspace { grid-column: 1; grid-row: 2; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  html:not(.customer-mode) .designer-shell > .panel { grid-column: 1; grid-row: 3; min-height: 0; border: 1px solid #dcd8cd; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -3px 16px #2b251410; }
  html:not(.customer-mode) .designer-shell .designer-panel-heading { min-height: 36px; padding: 4px 12px; }
  html:not(.customer-mode) .designer-shell .designer-panel-heading > div { display: flex; align-items: baseline; gap: 8px; }
  html:not(.customer-mode) .designer-shell .designer-panel-heading small { font-size: 8px; }
  html:not(.customer-mode) .designer-shell .designer-panel-heading strong { font-size: 13px; }
  html:not(.customer-mode) .designer-shell #designer-panel-toggle:not([hidden]) { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; border: 0; border-radius: 5px; padding: 0 4px; background: transparent; color: #7d7769; font-size: 11px; white-space: nowrap; }
  html:not(.customer-mode) .designer-shell .panel-tabs { display: flex; flex-wrap: nowrap; margin: 0 10px 6px; gap: 3px; padding: 3px; overflow: visible; }
  html:not(.customer-mode) .designer-shell .panel-tabs button { flex: 1 1 0; min-width: 0; height: 32px; padding: 2px; font-size: 12px; line-height: 1.1; overflow-wrap: anywhere; }
  html:not(.customer-mode) .designer-shell #panel-content { min-height: 0; padding: 0 10px max(12px, env(safe-area-inset-bottom)); gap: 12px; }
  html:not(.customer-mode) .designer-shell #panel-content:has(.dimension-panel) > #module-selection-status { display: none; }
  html:not(.customer-mode) .designer-shell .segment-row,
  html:not(.customer-mode) .designer-shell .structure-block,
  html:not(.customer-mode) .designer-shell .parts-block { padding: 12px; }
  html:not(.customer-mode) .designer-shell .custom-dimension input,
  html:not(.customer-mode) .designer-shell .frame-support-form input,
  html:not(.customer-mode) .designer-shell .frame-support-form select { font-size: 16px; }
  html:not(.customer-mode) .designer-shell .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 7px 10px 8px; }
  html:not(.customer-mode) .designer-shell #view-tools { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; width: 100%; overflow: visible; }
  html:not(.customer-mode) .designer-shell #view-tools > .icon-button,
  html:not(.customer-mode) .designer-shell #view-tools .download-menu-wrap > .icon-button { width: 100%; min-width: 0; height: 52px; min-height: 48px; padding-inline: 2px; }
  html:not(.customer-mode) .designer-shell .designer-tool-label { font-size: 10px; }
  html:not(.customer-mode) .designer-shell .topbar .price-block { grid-column: 1; width: auto; align-items: start; justify-items: start; gap: 2px; }
  html:not(.customer-mode) .designer-shell .price-block > span { font-size: 9px; }
  html:not(.customer-mode) .designer-shell .price-block strong { font-size: 19px; }
  html:not(.customer-mode) .designer-shell .price-block .price-exchange-rate { max-width: 145px; font-size: 8px; text-align: left; }
  html:not(.customer-mode) .designer-shell .topbar-actions { grid-column: 2; display: flex; width: auto; margin: 0; gap: 6px; }
  html:not(.customer-mode) .designer-shell .topbar-actions .action-button { width: auto; min-width: 56px; min-height: 38px; padding: 0 10px; font-size: 12px; }
  html:not(.customer-mode) .designer-shell .download-menu:not([hidden]) { position: fixed; top: 116px; left: 10px; right: auto; width: min(300px, calc(100vw - 20px)); max-height: calc(100dvh - 120px); overflow-y: auto; }
  html:not(.customer-mode) .designer-shell .generate-menu { position: fixed; top: 151px; right: 10px; left: auto; width: min(300px, calc(100vw - 20px)); max-height: calc(100dvh - 171px); }
  html:not(.customer-mode) .designer-shell .scene { min-height: 0; height: 100%; }
  html:not(.customer-mode) .designer-shell .summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 10px; padding: 7px 10px; max-height: none; overflow: visible; }
  html:not(.customer-mode) .designer-shell .summary-bar > div { gap: 2px; }
  html:not(.customer-mode) .designer-shell .summary-bar span { font-size: 9px; }
  html:not(.customer-mode) .designer-shell .summary-bar strong { font-size: 10px; line-height: 1.35; white-space: normal; overflow: visible; }
  html:not(.customer-mode) .designer-shell .color-list .color-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  html:not(.customer-mode) .designer-shell > .app-main-title { padding: 0 7px; }
  html:not(.customer-mode) .designer-shell .app-main-title h1 { font-size: 11px; }
  html:not(.customer-mode) .designer-shell #back-workbench { max-width: 108px; padding: 0 5px; font-size: 9px; }
  html:not(.customer-mode) .designer-shell .topbar { padding-inline: 8px; }
  html:not(.customer-mode) .designer-shell .topbar-actions .action-button { min-width: 50px; padding: 0 8px; font-size: 11px; }
  html:not(.customer-mode) .designer-shell .price-block strong { font-size: 17px; }
  html:not(.customer-mode) .designer-shell .designer-panel-heading small { font-size: 7px; letter-spacing: .07em; }
  html:not(.customer-mode) .designer-shell .designer-panel-heading strong { font-size: 12px; }
  html:not(.customer-mode) .designer-shell .designer-panel-heading > div { gap: 5px; }
}
@media (max-width: 700px) and (max-height: 640px) {
  html:not(.customer-mode) .designer-shell { --designer-panel-height: clamp(108px, min(34dvh, calc(100dvh - 330px)), 220px); }
  html:not(.customer-mode) .designer-shell.is-panel-expanded { --designer-panel-height: min(56dvh, 480px, calc(100dvh - 300px)); }
  html:not(.customer-mode) .designer-shell .designer-panel-heading { min-height: 37px; padding-block: 5px; }
  html:not(.customer-mode) .designer-shell .panel-tabs { margin-bottom: 6px; }
  html:not(.customer-mode) .designer-shell .panel-tabs button { height: 30px; }
}
@media (min-width: 701px) and (max-height: 500px) {
  html:not(.customer-mode) .designer-shell { grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: 44px minmax(0, 1fr); }
  html:not(.customer-mode) .designer-shell > .app-main-title { padding-inline: 12px; }
  html:not(.customer-mode) .designer-shell .app-main-title h1 { font-size: 14px; }
  html:not(.customer-mode) .designer-shell .designer-panel-heading { padding: 12px 14px 9px; }
  html:not(.customer-mode) .designer-shell .designer-panel-heading strong { font-size: 15px; }
  html:not(.customer-mode) .designer-shell .panel-tabs { margin-bottom: 9px; }
  html:not(.customer-mode) .designer-shell .panel-tabs button { height: 31px; }
  html:not(.customer-mode) .designer-shell .topbar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; padding: 6px 8px; }
  html:not(.customer-mode) .designer-shell #view-tools { grid-column: auto; gap: 4px; }
  html:not(.customer-mode) .designer-shell #view-tools > .icon-button,
  html:not(.customer-mode) .designer-shell #view-tools .download-menu-wrap > .icon-button { width: 44px; min-width: 44px; height: 44px; gap: 2px; padding: 3px 2px; }
  html:not(.customer-mode) .designer-shell .designer-tool-label { font-size: 9px; }
  html:not(.customer-mode) .designer-shell .topbar .price-block { justify-items: end; }
  html:not(.customer-mode) .designer-shell .price-block strong { font-size: 18px; }
  html:not(.customer-mode) .designer-shell .topbar-actions { gap: 5px; }
  html:not(.customer-mode) .designer-shell .topbar-actions .action-button { min-width: 50px; min-height: 36px; padding-inline: 8px; font-size: 11px; }
  html:not(.customer-mode) .designer-shell .summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 7px 10px; }
  html:not(.customer-mode) .designer-shell .summary-bar > div { gap: 1px; }
  html:not(.customer-mode) .designer-shell .summary-bar span { font-size: 9px; }
  html:not(.customer-mode) .designer-shell .summary-bar strong { font-size: 10px; line-height: 1.35; }
  html:not(.customer-mode) .designer-shell .generate-menu,
  html:not(.customer-mode) .designer-shell .download-menu:not([hidden]) { position: fixed; top: 108px; right: 10px; left: auto; max-height: calc(100dvh - 120px); overflow-y: auto; }
}