:root {
  --chrome: #eeeeee;
  --chrome-dark: #d8d8d8;
  --chrome-line: #a9a9a9;
  --button: #f6f6f6;
  --button-edge: #9a9a9a;
  --button-active: #d8edf8;
  --ink: #202020;
  --muted: #6d6d6d;
  --grid: #b6b6b6;
  --grid-strong: #797979;
  --cursor: #ff2aff;
  font-family: Tahoma, "MS Sans Serif", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

[hidden],
.hidden-workbench {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #ffffff;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: default;
}

.classic-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 18px;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.classic-top {
  display: grid;
  grid-template-rows: 24px 21px auto;
  min-width: 0;
  background: var(--chrome);
  border-bottom: 1px solid #777;
}

.window-title {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 24px;
  padding: 0 7px 0 4px;
  color: #606060;
  font-size: 13px;
  background: #f8f8f8;
  border-bottom: 1px solid #dadada;
}

.app-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #e60000;
  border: 1px solid #300;
}

.app-icon::before,
.app-icon::after {
  position: absolute;
  content: "";
  border: 1px solid #111;
}

.app-icon::before {
  inset: 2px 5px 5px 2px;
}

.app-icon::after {
  inset: 5px 2px 2px 5px;
}

.classic-menu {
  display: flex;
  align-items: center;
  height: 21px;
  padding: 0 4px;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
}

.classic-menu button {
  min-width: 0;
  height: 19px;
  padding: 0 8px;
  color: #333;
  font-size: 13px;
  background: transparent;
  border: 1px solid transparent;
}

.classic-menu button:hover {
  background: #e3edf7;
  border-color: #8aa7c5;
}

.classic-menu-panel {
  position: absolute;
  top: 43px;
  left: 0;
  z-index: 9;
  display: grid;
  width: 164px;
  padding: 2px;
  font-size: 12px;
  background: var(--chrome);
  border: 1px solid #777;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #9a9a9a;
}

.classic-menu-panel button {
  height: 22px;
  padding: 2px 18px 2px 8px;
  color: #111;
  text-align: left;
  background: transparent;
  border: 0;
}

.classic-menu-panel button:hover {
  color: #ffffff;
  background: #0a65c7;
}

.toolbar-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 2px 3px 3px;
  overflow: visible;
  background: var(--chrome);
}

.toolbar-row {
  display: flex;
  gap: 2px;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  min-width: 0;
  min-height: 22px;
  overflow: visible;
}

.toolbar-row::-webkit-scrollbar {
  display: none;
}

.toolbar-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 280px;
  padding: 4px 7px;
  color: #111111;
  font-size: 12px;
  line-height: 1.25;
  pointer-events: none;
  background: #fffce8;
  border: 1px solid #777777;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}

.toolbar-group {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 2px;
  align-items: center;
}

.toolbar-group.is-hidden {
  display: none;
}

.toolbar-sep {
  display: inline-block;
  flex: 0 0 auto;
  width: 4px;
  height: 23px;
  margin: 0 2px;
  border-left: 1px solid #8c8c8c;
  border-right: 1px solid #ffffff;
}

.mini-tool {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  color: #111;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  background: var(--button);
  border: 1px solid var(--button-edge);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #c7c7c7;
}

.mini-tool:hover,
.mini-tool.active {
  background: var(--button-active);
}

.mini-tool:active {
  box-shadow:
    inset -1px -1px 0 #ffffff,
    inset 1px 1px 0 #9f9f9f;
}

.text-tool {
  width: auto;
  min-width: 24px;
  padding: 0 4px;
  font-size: 14px;
}

.catalog-icon-tool {
  overflow: hidden;
}

.catalog-toolbar-svg {
  display: block;
  width: 21px;
  height: 21px;
}

.file-tool input {
  display: none;
}

.original-tool {
  overflow: hidden;
}

.original-tool img {
  display: block;
  width: 21px;
  height: 21px;
  image-rendering: auto;
  pointer-events: none;
}

.original-tool.text-fallback {
  font-size: 10px;
}

.material-set-tool {
  position: relative;
  overflow: visible;
  font-size: 0;
  text-shadow: none;
}

.material-single-tool {
  position: relative;
  overflow: visible;
  font-size: 0;
  text-shadow: none;
}

.material-single-swatch {
  display: block;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--material-color);
  box-shadow:
    inset 0 0 0 1px rgba(20, 30, 40, 0.18),
    0 1px 2px rgba(15, 25, 40, 0.18);
}

.material-set-swatch {
  display: block;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--set-a) 0 50%, var(--set-c) 50% 100%) top / 100% 50% no-repeat,
    linear-gradient(to right, var(--set-b) 0 50%, var(--set-d) 50% 100%) bottom / 100% 50% no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(20, 30, 40, 0.16),
    0 1px 2px rgba(15, 25, 40, 0.18);
}

.color-red {
  background: #f50000;
}

.color-green {
  background: #00d420;
}

.color-blue {
  background: #0018d6;
}

.color-yellow {
  background: #ffe12c;
}

.color-black {
  background: #050505;
}

.color-white {
  background: #ffffff;
}

.red-part {
  color: #e00000;
}

.blue-part {
  color: #0018d6;
}

.magenta-part {
  color: var(--cursor);
}

.classic-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
}

#sceneCanvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
  outline: 0;
}

body.space-pan #sceneCanvas {
  cursor: grab;
}

body.space-pan #sceneCanvas:active {
  cursor: grabbing;
}

.floating-hud {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
}

.floating-hud span {
  min-height: 18px;
  padding: 2px 5px;
  color: #333;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #cfcfcf;
}

#performanceStats {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.part-list-window {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: grid;
  grid-template-rows: 22px auto minmax(0, 1fr);
  width: min(940px, calc(100vw - 28px));
  max-height: min(360px, calc(100vh - 170px));
  color: #111;
  font-size: 12px;
  background: var(--chrome);
  border: 1px solid #6f6f6f;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #9a9a9a;
}

.part-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  padding: 2px 3px 2px 6px;
  color: #ffffff;
  background: #245a9b;
}

.window-button {
  width: 17px;
  height: 17px;
  padding: 0;
  color: #111;
  line-height: 1;
  background: var(--button);
  border: 1px solid var(--button-edge);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #c7c7c7;
}

.part-list-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 27px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--chrome-line);
}

.part-list-toolbar button {
  min-width: 44px;
  height: 20px;
  padding: 1px 8px;
  background: var(--button);
  border: 1px solid var(--button-edge);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #c7c7c7;
}

.part-list-toolbar button.active {
  background: var(--button-active);
  box-shadow:
    inset 1px 1px 0 #8b8b8b,
    inset -1px -1px 0 #ffffff;
}

.part-list-summary {
  margin-left: auto;
  white-space: nowrap;
}

.inventory-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  min-height: 24px;
  padding: 3px 6px;
  font-size: 12px;
  background: #f6f6f6;
  border-bottom: 1px solid var(--chrome-line);
}

.inventory-summary strong {
  font-weight: 700;
}

.inventory-summary.has-missing {
  background: #fff1d6;
}

.part-row-missing td {
  background: #fff8ea;
}

.part-row-complete td {
  background: #f7fff4;
}

.part-list-scroll {
  min-height: 0;
  overflow: auto;
  background: #ffffff;
}

.part-list-window table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.part-list-window th,
.part-list-window td {
  padding: 3px 5px;
  text-align: left;
  white-space: nowrap;
  border-right: 1px solid #d0d0d0;
  border-bottom: 1px solid #e0e0e0;
}

.part-list-window th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 400;
  background: #eeeeee;
  box-shadow: inset 1px 1px 0 #ffffff;
}

.part-total-separator td {
  color: #333333;
  font-family: "Courier New", monospace;
  background: #f7f7f7;
}

.part-total-row td {
  font-weight: 700;
  background: #eeeeee;
  border-top: 1px solid #888888;
}

.article-cell {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.material-chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: #444;
}

.material-chip::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  content: "";
  background: var(--chip-color);
  border: 1px solid #555;
}

.material-window {
  right: auto;
  bottom: auto;
  top: 18px;
  left: 14px;
  grid-template-rows: 22px minmax(0, 1fr);
  width: 270px;
  max-height: 310px;
}

.material-list {
  display: grid;
  gap: 2px;
  padding: 6px;
  overflow: auto;
  background: #ffffff;
}

.material-row {
  display: grid;
  grid-template-columns: 20px 1fr 72px;
  gap: 6px;
  align-items: center;
  min-height: 24px;
  padding: 2px 4px;
  border: 1px solid transparent;
}

.material-row.active {
  background: #d8edf8;
  border-color: #8aa7c5;
}

.material-swatch {
  width: 16px;
  height: 16px;
  background: var(--swatch);
  border: 1px solid #555;
}

.material-row input {
  width: 100%;
  min-width: 0;
  height: 20px;
  padding: 0 3px;
  border: 1px solid #aaa;
}

.order-window {
  right: 24px;
  bottom: 24px;
  width: min(780px, calc(100vw - 48px));
  max-height: min(560px, calc(100vh - 150px));
}

.order-document {
  min-height: 0;
  padding: 10px;
  overflow: auto;
  background: #8b8b8b;
}

.order-page {
  width: min(700px, 100%);
  min-height: 520px;
  padding: 28px;
  margin: 0 auto;
  color: #111;
  background: #ffffff;
  border: 1px solid #555;
}

.order-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 16px;
  align-items: start;
  margin-bottom: 24px;
}

.order-address {
  font-size: 12px;
  line-height: 1.45;
}

.order-head strong {
  display: block;
  font-size: 22px;
}

.order-head span {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.order-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}

.order-addresses div {
  min-height: 112px;
}

.order-addresses strong {
  display: block;
  margin-bottom: 8px;
  font-weight: 400;
}

.order-addresses span {
  display: block;
  height: 18px;
  border-bottom: 1px solid #777;
}

.order-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.order-page th,
.order-page td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid #cfcfcf;
}

.order-page th:nth-child(1),
.order-page th:nth-child(4),
.order-page th:nth-child(5),
.order-page th:nth-child(6),
.order-page td:nth-child(1),
.order-page td:nth-child(4),
.order-page td:nth-child(5),
.order-page td:nth-child(6) {
  text-align: right;
}

.order-page tfoot td {
  font-weight: 700;
  border-top: 2px solid #555;
}

.classic-dialog {
  position: absolute;
  top: 80px;
  left: 50%;
  z-index: 7;
  width: 245px;
  color: #111;
  font-size: 12px;
  background: var(--chrome);
  border: 1px solid #6f6f6f;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #9a9a9a;
  transform: translateX(-50%);
}

.classic-dialog form {
  display: grid;
  grid-template-rows: 22px auto auto;
  margin: 0;
}

.dialog-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.dialog-body label {
  display: flex;
  gap: 5px;
  align-items: center;
}

.dialog-body label.stacked {
  display: grid;
  gap: 3px;
  align-items: start;
}

.dialog-body input[type="text"],
.dialog-body select {
  min-width: 0;
  height: 20px;
}

.dialog-body input[readonly] {
  color: #333;
  background: #eeeeee;
}

.dialog-body input[type="number"] {
  width: 74px;
  height: 20px;
}

.dialog-body fieldset {
  display: grid;
  gap: 3px;
  padding: 8px;
  margin: 0 0 4px;
  border: 1px solid #9b9b9b;
}

.dialog-body legend {
  padding: 0 4px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 7px 10px 10px;
}

.dialog-actions button {
  min-width: 68px;
  height: 22px;
  background: var(--button);
  border: 1px solid var(--button-edge);
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #c7c7c7;
}

.panel-dialog {
  width: 300px;
}

.part-edit-dialog {
  top: 105px;
  width: 310px;
}

.element-dialog {
  top: 76px;
  width: 330px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.element-dialog .dialog-body {
  max-height: min(68vh, 510px);
  overflow: auto;
}

.statusbar {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto auto 48px;
  gap: 0;
  align-items: center;
  min-width: 0;
  height: 18px;
  color: #333;
  font-size: 12px;
  background: var(--chrome);
  border-top: 1px solid var(--chrome-line);
}

.statusbar span {
  height: 100%;
  min-width: 0;
  padding: 1px 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-right: 1px solid var(--chrome-line);
  box-shadow: inset 1px 1px 0 #ffffff;
}

.modern-shell {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  color: #18212f;
  font-family: "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at 22% -10%, rgba(65, 132, 225, 0.14), transparent 32%),
    linear-gradient(180deg, #f7faff 0%, #eef3f8 100%);
}

.modern-top {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 10px 18px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(139, 152, 174, 0.22);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(28, 45, 74, 0.14);
}

.brand-lockup {
  display: flex;
  align-items: center;
  min-width: 186px;
  height: 38px;
}

.brand-logo {
  display: block;
  width: auto;
  height: 34px;
  max-width: 180px;
  object-fit: contain;
}

.project-nav,
.top-actions,
.viewport-toolbar,
.tool-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.project-nav {
  justify-content: flex-start;
  color: #526071;
  font-size: 13px;
}

.project-nav button,
.soft-button,
.primary-button,
.tool-chip,
.icon-button,
.link-button,
.danger-button {
  height: 34px;
  padding: 0 13px;
  color: #1c2637;
  font-weight: 600;
  background: #ffffff;
  border: 1px solid rgba(138, 150, 170, 0.28);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 35, 55, 0.05);
}

.project-nav button:hover,
.soft-button:hover,
.tool-chip:hover,
.icon-button:hover,
.link-button:hover {
  background: #f4f8ff;
  border-color: rgba(64, 125, 220, 0.34);
}

#projectSummary {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  color: #101827;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#importState {
  padding: 4px 9px;
  color: #26784d;
  background: #edf9f2;
  border-radius: 999px;
}

.top-actions {
  justify-content: flex-end;
}

.primary-button {
  color: #ffffff;
  background: #1967d2;
  border-color: #1967d2;
}

.primary-button:hover {
  background: #1259bd;
}

.modern-menu-panel {
  top: 58px;
  left: 225px;
  width: 210px;
  padding: 6px;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #ffffff;
  border: 1px solid rgba(138, 150, 170, 0.35);
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(23, 40, 68, 0.18);
}

.modern-menu-panel button {
  height: 32px;
  border-radius: 7px;
}

.modern-menu-panel button:hover {
  color: #102033;
  background: #eef5ff;
}

.expert-toolbar {
  grid-column: 1 / -1;
  display: block;
  align-items: stretch;
  min-width: 0;
}

.expert-toolbar-head {
  display: grid;
  align-content: center;
  min-width: 150px;
  padding: 7px 11px;
  color: #526071;
  background: #ffffff;
  border: 1px solid rgba(138, 150, 170, 0.24);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20, 35, 55, 0.04);
}

.expert-toolbar-head strong {
  color: #253247;
  font-size: 12px;
  line-height: 1.2;
}

.expert-toolbar-head span {
  color: #738096;
  font-size: 11px;
}

.modern-shell .toolbar-stack {
  min-width: 0;
  padding: 8px 10px;
  overflow: visible;
  background: linear-gradient(180deg, #f8fbff, #f3f6fa);
  border: 1px solid rgba(138, 150, 170, 0.24);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.modern-shell .toolbar-row {
  gap: 4px;
  min-height: 28px;
  overflow: visible;
  padding: 2px 0;
}

.modern-shell .toolbar-group {
  gap: 4px;
}

.toolbar-row-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 62px;
  height: 26px;
  padding-right: 6px;
  color: #526071;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.modern-shell .toolbar-sep {
  width: 1px;
  height: 26px;
  margin: 0 5px;
  background: rgba(120, 135, 158, 0.28);
  border: 0;
}

.modern-shell .mini-tool {
  width: 26px;
  height: 26px;
  min-width: 26px;
  color: #1b2638;
  font-size: 12px;
  background: linear-gradient(180deg, #ffffff, #edf3fb);
  border: 1px solid rgba(112, 130, 156, 0.30);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(22, 39, 66, 0.08);
}

.modern-shell .mini-tool:hover,
.modern-shell .mini-tool.active {
  background: linear-gradient(180deg, #eef6ff, #dcecff);
  border-color: rgba(40, 105, 210, 0.42);
}

.modern-shell .mini-tool:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(22, 39, 66, 0.16);
}

.modern-shell .original-tool img {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.modern-shell .material-set-swatch {
  width: 20px;
  height: 20px;
}

.modern-shell .material-single-swatch {
  width: 20px;
  height: 20px;
}

.modern-shell .text-tool {
  width: auto;
  min-width: 30px;
  padding: 0 6px;
  font-size: 12px;
}

.modern-shell .catalog-toolbar-svg {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.builder-main {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) 306px;
  gap: 14px;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.left-panel,
.right-panel,
.viewport-card {
  min-width: 0;
  min-height: 0;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(139, 152, 174, 0.22);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(28, 45, 74, 0.10);
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

.right-panel {
  overflow-y: auto;
}

.panel-head,
.side-card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.panel-head strong,
.side-card-head strong {
  font-size: 17px;
}

.panel-head span,
.side-card-head span,
.library-search,
.build-status-lines {
  color: #657186;
  font-size: 12px;
}

.library-search {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  background: #f7f9fc;
  border: 1px solid rgba(138, 150, 170, 0.24);
  border-radius: 10px;
}

.catalog-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.catalog-tabs button {
  height: 32px;
  padding: 0 8px;
  color: #526071;
  font-weight: 700;
  background: #f7f9fc;
  border: 1px solid transparent;
  border-radius: 8px;
}

.catalog-tabs button.active,
.catalog-tabs button:hover {
  color: #1559c5;
  background: #eef5ff;
  border-color: rgba(64, 125, 220, 0.25);
}

.palette-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
}

.palette-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  text-align: left;
  background: #ffffff;
  border: 1px solid rgba(138, 150, 170, 0.22);
  border-radius: 11px;
}

.palette-item:hover,
.palette-item.active {
  background: #f2f7ff;
  border-color: rgba(38, 105, 210, 0.35);
}

.part-glyph {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #1559c5;
  font-weight: 800;
  background: linear-gradient(180deg, #eef6ff, #dcecff);
  border-radius: 10px;
}

.palette-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.palette-copy strong {
  overflow: hidden;
  color: #172133;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.palette-copy span,
.palette-meta {
  overflow: hidden;
  color: #69768a;
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.palette-meta {
  display: none;
}

.center-column {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.viewport-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  flex: 1 1 auto;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
}

.viewport-toolbar {
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid rgba(138, 150, 170, 0.18);
}

.tool-strip {
  flex-wrap: wrap;
}

.tool-chip.active,
.tool-chip[data-modern-command="ID_EDIT_SLCT"].active,
.icon-button.active {
  color: #0d5dcc;
  background: #eaf3ff;
  border-color: rgba(64, 125, 220, 0.34);
}

.modern-shell .classic-stage {
  min-height: 260px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.94)),
    #ffffff;
  border: 0;
}

.modern-shell #sceneCanvas {
  background: #ffffff;
}

.modern-shell .floating-hud {
  top: auto;
  bottom: 12px;
  left: 12px;
  opacity: 1;
}

.modern-shell .floating-hud span {
  min-height: 25px;
  padding: 5px 9px;
  color: #2a3548;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(138, 150, 170, 0.25);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(28, 45, 74, 0.08);
}

.modern-shell .statusbar {
  display: flex;
  gap: 18px;
  height: 42px;
  padding: 0 14px;
  color: #526071;
  font-size: 12px;
  background: #ffffff;
  border-top: 1px solid rgba(138, 150, 170, 0.18);
}

.modern-shell .statusbar span {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.side-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid rgba(138, 150, 170, 0.22);
  border-radius: 14px;
}

.empty-inspector {
  display: grid;
  place-items: center;
  min-height: 92px;
  color: #69768a;
  background: #f7f9fc;
  border: 1px dashed rgba(138, 150, 170, 0.38);
  border-radius: 10px;
}

.modern-inspector-form {
  display: grid;
  gap: 10px;
}

.modern-inspector-form label {
  display: grid;
  gap: 5px;
  color: #5a6678;
  font-size: 12px;
  font-weight: 700;
}

.modern-inspector-form input,
.modern-inspector-form select {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 9px;
  color: #172133;
  background: #f8fafc;
  border: 1px solid rgba(138, 150, 170, 0.30);
  border-radius: 8px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.form-grid:nth-of-type(2) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.danger-button {
  color: #b42318;
  background: #fff4f2;
  border-color: rgba(180, 35, 24, 0.18);
}

.parts-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.parts-metrics span {
  padding: 9px;
  color: #5a6678;
  font-size: 12px;
  background: #f7f9fc;
  border-radius: 9px;
}

.parts-metrics strong {
  display: block;
  color: #172133;
  font-size: 18px;
}

.modern-parts-list {
  display: grid;
  gap: 6px;
}

.modern-part-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 30px;
  padding: 0 4px;
  text-align: left;
  background: transparent;
  border: 0;
}

.modern-part-row span:nth-child(2) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.modern-part-dot {
  width: 10px;
  height: 10px;
  background: var(--chip-color);
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 50%;
}

.modern-parts-empty {
  color: #69768a;
  font-size: 12px;
}

.link-button {
  justify-self: start;
  color: #1559c5;
  background: #eef5ff;
  border-color: transparent;
}

.build-status-lines {
  display: grid;
  gap: 6px;
}

.modern-shell .part-list-window,
.modern-shell .classic-dialog {
  border: 1px solid rgba(138, 150, 170, 0.30);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(28, 45, 74, 0.18);
}

.modern-shell .part-list-title {
  height: 34px;
  padding: 0 8px 0 12px;
  color: #172133;
  font-weight: 700;
  background: #f8fafc;
  border-bottom: 1px solid rgba(138, 150, 170, 0.22);
  border-radius: 12px 12px 0 0;
}

@media print {
  body {
    overflow: visible;
  }

  .classic-top,
  .classic-stage > canvas,
  .floating-hud,
  .part-list-window:not(.order-window),
  .classic-dialog,
  .statusbar {
    display: none !important;
  }

  .classic-shell,
  .classic-stage,
  .order-window,
  .order-document {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .order-window .part-list-title,
  .order-window .part-list-toolbar {
    display: none !important;
  }

  .order-page {
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
  }
}

@media (max-width: 1180px) {
  .modern-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-lockup,
  .project-nav,
  .top-actions,
  .expert-toolbar {
    grid-column: 1;
  }

  .project-nav,
  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .expert-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .modern-shell {
    padding: 8px;
  }

  .modern-top,
  .builder-main {
    grid-template-columns: 1fr;
  }

  .right-panel {
    display: none;
  }
}

/* 2026 builder workspace redesign */
.modern-shell {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 100dvh;
  padding: 10px;
  background: #edf2f7;
}

.modern-top {
  grid-template-columns: auto minmax(180px, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 8px 16px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(27, 43, 65, 0.08);
}

.brand-lockup {
  min-width: 154px;
  height: 34px;
}

.brand-logo {
  height: 30px;
  max-width: 154px;
}

.project-nav,
.top-actions {
  gap: 6px;
}

.project-nav button,
.soft-button,
.primary-button,
.tool-chip,
.icon-button,
.link-button,
.danger-button {
  height: 32px;
  padding: 0 11px;
  border-color: #d8e0ea;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(20, 35, 55, 0.04);
}

.tools-toggle.active {
  color: #0f5fc8;
  background: #eaf3ff;
  border-color: #a8c8f3;
}

.expert-toolbar {
  grid-column: 1 / -1;
  max-height: 118px;
  overflow: auto;
}

.modern-shell .toolbar-stack {
  padding: 5px 8px;
  background: #f6f8fb;
  border-color: #dce3ec;
  border-radius: 7px;
}

.modern-shell .toolbar-row {
  min-height: 26px;
  padding: 1px 0;
}

.modern-shell .mini-tool {
  width: 25px;
  min-width: 25px;
  height: 25px;
  border-radius: 5px;
}

.modern-menu-panel {
  top: 50px;
  left: 176px;
  border-radius: 7px;
}

.builder-main {
  grid-template-columns: minmax(238px, 272px) minmax(500px, 1fr) minmax(270px, 304px);
  gap: 10px;
}

.left-panel,
.right-panel,
.viewport-card {
  background: #ffffff;
  border: 1px solid #dce3ec;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(27, 43, 65, 0.07);
}

.left-panel,
.right-panel {
  gap: 10px;
  padding: 12px;
}

.library-head > div,
.side-card-head > div {
  display: grid;
  gap: 2px;
}

.panel-head strong,
.side-card-head strong {
  color: #162135;
  font-size: 15px;
}

.library-search {
  position: relative;
  gap: 9px;
  height: 36px;
  padding: 0 10px;
  background: #f7f9fc;
  border-color: #dce3ec;
  border-radius: 7px;
}

.library-search > span {
  position: relative;
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  color: transparent;
}

.library-search > span::before {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
  border: 1.5px solid #617087;
  border-radius: 50%;
  content: "";
}

.library-search > span::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 6px;
  height: 1.5px;
  background: #617087;
  transform: rotate(45deg);
  transform-origin: right center;
  content: "";
}

.library-search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  color: #172133;
  font: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

.library-search:focus-within {
  background: #ffffff;
  border-color: #80ace5;
  box-shadow: 0 0 0 3px rgba(48, 117, 209, 0.12);
}

.catalog-tabs {
  grid-template-columns: 1fr;
  gap: 4px;
}

.catalog-tabs button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  height: auto;
  padding: 5px 7px;
  overflow: visible;
  text-align: left;
  white-space: normal;
  background: transparent;
  border-radius: 6px;
}

.catalog-tabs button.active,
.catalog-tabs button:hover {
  color: #125dbf;
  background: #eaf3ff;
  border-color: transparent;
}

.catalog-tab-visual,
.part-visual {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f3f6fa;
  border: 1px solid #e0e6ee;
  border-radius: 6px;
}

.catalog-tab-visual {
  width: 34px;
  height: 34px;
}

.catalog-tab-copy {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}

.catalog-tab-copy strong {
  overflow: hidden;
  color: #263244;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-tab-copy small {
  overflow: hidden;
  margin-top: 3px;
  color: #7a8798;
  font-size: 9.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-tabs button.active .catalog-tab-copy strong,
.catalog-tabs button:hover .catalog-tab-copy strong {
  color: #125dbf;
}

.catalog-tab-count {
  min-width: 21px;
  padding: 2px 5px;
  color: #738095;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  background: #edf1f6;
  border-radius: 9px;
}

.catalog-tab-visual::before,
.catalog-tab-visual::after,
.catalog-tab-visual > span::before,
.part-visual::before,
.part-visual::after,
.part-visual > span::before,
.part-visual > span::after {
  position: absolute;
  content: "";
}

.catalog-tab-visual-standard::before,
.part-visual-tube::before,
.part-visual-alu::before,
.part-visual-bolt::before {
  top: 14px;
  left: 5px;
  width: 26px;
  height: 8px;
  background: linear-gradient(180deg, #54a7ff 0%, #0b67c8 48%, #074b9b 100%);
  border-radius: 8px;
  box-shadow: 0 2px 3px rgba(17, 76, 142, 0.22);
  transform: rotate(-18deg);
}

.catalog-tab-visual-standard::after,
.part-visual-tube::after {
  top: 17px;
  left: 4px;
  width: 8px;
  height: 8px;
  background: #171b22;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.catalog-tab-visual-front::before,
.part-visual-panel::before,
.part-visual-wood::before {
  inset: 6px;
  background: linear-gradient(145deg, #59a8ff 0%, #176fc7 58%, #07509d 100%);
  border-radius: 4px;
  clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.42), 0 2px 4px rgba(30, 76, 126, 0.22);
  transform: rotate(-5deg);
}

.catalog-tab-visual-front::after,
.part-visual-panel::after,
.part-visual-wood::after {
  right: 8px;
  bottom: 6px;
  left: 8px;
  height: 3px;
  background: #084883;
  border-radius: 0 0 3px 3px;
  opacity: 0.7;
  transform: rotate(-5deg);
}

.catalog-tab-visual-mobile::before,
.part-visual-wheel::before {
  inset: 6px;
  background: #252b33;
  border: 6px solid #11151a;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #596575, 0 2px 4px rgba(20, 27, 36, 0.28);
}

.catalog-tab-visual-mobile::after,
.part-visual-wheel::after {
  inset: 14px;
  background: #2783db;
  border: 2px solid #b9c8d9;
  border-radius: 50%;
}

.catalog-tab-visual-fun::before,
.part-visual-slide::before {
  top: 5px;
  left: 8px;
  width: 18px;
  height: 24px;
  border-right: 6px solid #ef3e35;
  border-bottom: 6px solid #ef3e35;
  border-radius: 0 0 14px;
  filter: drop-shadow(0 2px 1px rgba(128, 24, 19, 0.18));
  transform: rotate(24deg);
}

.catalog-tab-visual-fun::after,
.part-visual-slide::after {
  right: 4px;
  bottom: 6px;
  width: 14px;
  height: 5px;
  background: #c92620;
  border-radius: 4px;
}

.catalog-tab-visual-furniture::before,
.part-visual-wood::before {
  background: linear-gradient(145deg, #ffd95b 0%, #e8a421 100%);
}

.catalog-tab-visual-textile::before,
.part-visual-textile::before,
.part-visual-lattice::before {
  inset: 6px;
  background-color: #168c55;
  background-image: linear-gradient(rgba(255, 255, 255, 0.62) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.62) 1px, transparent 1px);
  background-size: 5px 5px;
  border: 2px solid #126b43;
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(20, 90, 58, 0.2);
}

.catalog-tab-visual-advanced::before,
.part-visual-alu::before,
.part-visual-bolt::before {
  background: linear-gradient(180deg, #e8edf2 0%, #9da8b5 47%, #65717f 100%);
}

.catalog-tab-visual-advanced::after,
.part-visual-alu::after,
.part-visual-bolt::after {
  top: 10px;
  right: 7px;
  width: 7px;
  height: 14px;
  background: #333b45;
  border-radius: 2px;
  transform: rotate(-18deg);
}

.palette-list {
  gap: 5px;
  padding: 1px 4px 8px 0;
}

.palette-item {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 9px;
  min-height: 58px;
  padding: 6px;
  border-color: #e0e6ee;
  border-radius: 7px;
}

.palette-item:hover,
.palette-item.active {
  background: #f0f6ff;
  border-color: #9dbfe9;
  box-shadow: inset 3px 0 0 #2473d4;
}

.part-visual {
  width: 44px;
  height: 44px;
}

.palette-item.has-product-image {
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 76px;
}

.palette-item.has-product-image .palette-copy strong {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.15;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.part-visual-product {
  width: 56px;
  height: 56px;
  padding: 2px;
  background: #fff;
}

.part-visual-product img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.part-visual-tube::before,
.part-visual-alu::before,
.part-visual-bolt::before {
  top: 17px;
  left: 5px;
  width: 34px;
  height: 10px;
}

.part-visual-tube::after {
  top: 18px;
  left: 4px;
  width: 10px;
  height: 10px;
}

.part-visual-panel::before,
.part-visual-wood::before {
  inset: 7px;
}

.part-visual-hole-panel > span::before {
  top: 14px;
  left: 14px;
  width: 4px;
  height: 4px;
  background: #f4f8fc;
  border-radius: 50%;
  box-shadow: 6px 0 #f4f8fc, 12px 0 #f4f8fc, 0 6px #f4f8fc, 6px 6px #f4f8fc, 12px 6px #f4f8fc, 0 12px #f4f8fc, 6px 12px #f4f8fc, 12px 12px #f4f8fc;
  transform: rotate(-5deg);
}

.part-visual-connector::before,
.part-visual-adapter::before,
.part-visual-connector::after,
.part-visual-adapter::after {
  top: 18px;
  left: 7px;
  width: 30px;
  height: 10px;
  background: linear-gradient(180deg, #424a54 0%, #171b20 65%, #0c0f13 100%);
  border-radius: 8px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.part-visual-connector::after,
.part-visual-adapter::after {
  transform: rotate(90deg);
}

.part-visual-connector > span::before,
.part-visual-adapter > span::before {
  top: 15px;
  left: 15px;
  width: 14px;
  height: 14px;
  background: #171b20;
  border-radius: 50%;
}

.part-visual-pool::before {
  top: 9px;
  right: 5px;
  bottom: 8px;
  left: 5px;
  background: linear-gradient(180deg, #4db9ed 0 30%, #168bd0 31% 100%);
  border: 4px solid #1268a9;
  border-top-width: 3px;
  border-radius: 6px 6px 10px 10px;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}

.part-visual-roof::before {
  top: 8px;
  left: 9px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #ef4339 0 49%, #f5ca22 50% 100%);
  border-radius: 3px;
  box-shadow: 3px 3px 0 #b8241e;
  transform: rotate(45deg) skew(-8deg, -8deg);
}

.part-visual-bag::before {
  top: 10px;
  left: 10px;
  width: 24px;
  height: 26px;
  background: linear-gradient(180deg, #38b878, #0d814a);
  border-radius: 3px 3px 8px 8px;
  box-shadow: 0 2px 3px rgba(20, 90, 58, 0.2);
}

.part-visual-bag::after {
  top: 6px;
  left: 15px;
  width: 14px;
  height: 12px;
  border: 3px solid #17633f;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.part-visual-screw::before {
  top: 8px;
  left: 14px;
  width: 16px;
  height: 16px;
  background: #20262e;
  border-radius: 50%;
  box-shadow: 0 13px 0 -5px #303843;
}

.part-visual-screw::after {
  top: 15px;
  left: 17px;
  width: 10px;
  height: 2px;
  background: #747f8c;
}

.palette-copy strong {
  font-size: 12.5px;
}

.palette-copy span {
  font-size: 10.5px;
}

.palette-product-meta {
  overflow: hidden;
  color: #46556a;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.palette-color-note {
  display:block;
  margin-top:3px;
  color:#657484;
  font-size:10px;
  line-height:1.45;
}

.part-visual-unavailable {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7a8591;
  font-size:9px;
  text-align:center;
}

.palette-empty {
  margin: 8px 4px;
  color: #6c788b;
  font-size: 12px;
  line-height: 1.45;
}

.viewport-card {
  min-height: 420px;
}

.viewport-toolbar {
  min-height: 49px;
  padding: 8px 10px;
  background: #fbfcfe;
}

.tool-strip {
  gap: 6px;
}

.build-chip {
  color: #ffffff;
  background: #ef3f36;
  border-color: #ef3f36;
}

.build-chip:hover,
.build-chip.active {
  color: #ffffff;
  background: #d92f28;
  border-color: #d92f28;
}

.modern-shell .classic-stage {
  min-height: 340px;
}

.modern-shell .statusbar {
  height: 32px;
  gap: 14px;
  padding: 0 10px;
  background: #fbfcfe;
}

.right-panel {
  gap: 0;
  padding: 2px 12px;
  scrollbar-width: thin;
}

.side-card {
  gap: 10px;
  padding: 14px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e2e7ee;
  border-radius: 0;
}

.side-card:last-child {
  border-bottom: 0;
}

.empty-inspector {
  min-height: 78px;
  border-radius: 7px;
}

.inventory-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.inventory-metrics span {
  min-width: 0;
  padding: 8px 5px;
  color: #637084;
  font-size: 10px;
  text-align: center;
  background: #f5f7fa;
  border-radius: 6px;
}

.inventory-metrics strong {
  display: block;
  color: #172133;
  font-size: 17px;
}

.inventory-metrics .missing-metric strong {
  color: #c43830;
}

.parts-metrics span {
  border-radius: 6px;
}

.link-button {
  padding: 0;
  color: #155fc2;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.modern-shell .floating-hud span {
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(28, 45, 74, 0.07);
}

@media (max-width: 1400px) {
  .builder-main {
    grid-template-columns: 224px minmax(460px, 1fr) 266px;
  }

  .top-actions .soft-button {
    padding: 0 9px;
  }
}

@media (max-width: 1120px) {
  .modern-top {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .top-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .builder-main {
    grid-template-columns: 220px minmax(460px, 1fr);
  }

  .right-panel {
    display: none;
  }
}

@media (max-width: 760px) {
  .modern-shell {
    height: auto;
    min-height: 100dvh;
    overflow: auto;
    padding: 6px;
  }

  .modern-top {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .brand-lockup,
  .project-nav,
  .top-actions,
  .expert-toolbar {
    grid-column: 1;
  }

  .project-nav,
  .top-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .builder-main {
    grid-template-columns: 1fr;
    height: auto;
  }

  .left-panel {
    max-height: 242px;
  }

  .catalog-tabs {
    display: flex;
    overflow-x: auto;
  }

  .catalog-tabs button {
    flex: 0 0 auto;
  }

  .palette-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .palette-item {
    flex: 0 0 210px;
  }

  .viewport-card {
    min-height: 520px;
  }

  .tool-strip {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* Customer workspace — one accessible layout at every screen size. */
:root {
  --quadro-red: #e30613;
  --quadro-red-dark: #bc0010;
  --quadro-red-light: #fff0f1;
  --workspace-line: #e2e3e6;
  --workspace-muted: #63676e;
}

button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible {
  outline: 3px solid #b9000c;
  outline-offset: 3px;
}
.modern-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  min-height: 0;
  padding: 8px;
  gap: 8px;
  overflow: hidden;
  color: #242629;
  background: #f0f1f2;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 13px;
}
.modern-top {
  grid-template-columns: auto minmax(160px, 1fr) auto;
  grid-template-rows: auto;
  gap: 8px 16px;
  padding: 12px 14px;
  border-color: var(--workspace-line);
  box-shadow: none;
}
.brand-lockup { grid-column: 1; min-width: 130px; height: auto; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-logo { height: 28px; max-width: 136px; }
.version-badge { color: #74777c; font-size: 9px; letter-spacing: 0.07em; padding-left: 35px; }
.project-nav { grid-column: 2; flex-wrap: wrap; gap: 3px 7px; overflow: visible; }
.project-nav #menuFile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 7px; line-height: 1; white-space: nowrap; }
.project-menu-chevron { display: block; flex: 0 0 14px; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.project-nav #menuFile[aria-expanded="true"] .project-menu-chevron { transform: rotate(180deg); }
.project-nav .project-name {
  max-width: 230px;
  padding: 0 6px;
  border-color: transparent;
  box-shadow: none;
  text-align: left;
  font-weight: 600;
}
.project-name::after { content: " ✎"; font-size: 13px; color: #84878d; }
.save-status { flex: 1 0 100%; padding-left: 7px; color: #607269; font-size: 11px; }
.top-actions { grid-column: 3; gap: 5px; flex-wrap: nowrap; overflow: visible; padding: 0; }
.history-button { min-width: 34px; padding: 0; font-size: 24px; font-weight: 400; line-height: 1; }
.primary-button, .primary-button:hover, .build-chip.active, .build-chip.active:hover {
  color: white;
  background: var(--quadro-red);
  border-color: var(--quadro-red);
}
.primary-button:hover { background: var(--quadro-red-dark); border-color: var(--quadro-red-dark); }
.soft-button:hover, .project-nav button:hover, .icon-button:hover {
  background: #f5f5f6;
  border-color: #c5c7cb;
}
.tools-toggle.active { color: var(--quadro-red-dark); background: var(--quadro-red-light); border-color: #f0acb2; }
.modern-menu-panel { left: 154px; top: calc(100% - 6px); width: 258px; z-index: 70; padding: 7px; }
.modern-menu-panel button { min-height: 38px; height: auto; padding: 7px 10px; }
.modern-menu-panel button:hover { color: var(--quadro-red-dark); background: var(--quadro-red-light); }
.project-menu-link { display: flex; align-items: center; min-height: 38px; padding: 7px 10px; border-radius: 7px; color: #242629; text-decoration: none; font-size: 12px; }
.project-menu-link:hover { color: var(--quadro-red-dark); background: var(--quadro-red-light); }
.expert-toolbar { grid-column: 1 / -1; max-height: 146px; }
.builder-main { grid-template-columns: 258px minmax(0, 1fr) 286px; height: 100%; gap: 8px; }
.left-panel, .right-panel, .viewport-card { border-color: var(--workspace-line); box-shadow: none; }
.left-panel { display: flex; gap: 12px; padding: 14px 12px; max-height: none; }
.right-panel { display: flex; padding: 0 14px; }
.panel-head strong, .side-card-head strong { color: #242629; font-size: 14px; font-weight: 650; }
.library-head { flex-shrink: 0; }
.library-head > div { gap: 4px; }
.library-head span { font-size: 11px; }
.library-search { height: 38px; min-height: 38px; background: #fafafa; border-color: var(--workspace-line); }
.library-search:focus-within { border-color: var(--quadro-red); box-shadow: 0 0 0 3px #e3061312; }
.catalog-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; flex-shrink: 0; }
.catalog-tabs button { grid-template-columns: 1fr; padding: 7px 5px; min-height: 36px; text-align: center; background: #f5f5f6; }
.catalog-tab-visual, .catalog-tab-count, .catalog-tab-copy small { display: none; }
.catalog-tab-copy strong { color: #555a62; font-size: 11.5px; font-weight: 600; }
.catalog-tabs button.active, .catalog-tabs button:hover { background: var(--quadro-red-light); color: var(--quadro-red-dark); border-color: #f4c7cb; }
.catalog-tabs button.active .catalog-tab-copy strong, .catalog-tabs button:hover .catalog-tab-copy strong { color: var(--quadro-red-dark); }
.palette-list { display: grid; grid-template-columns: 1fr; align-content: start; gap: 7px; overflow-x: hidden; overflow-y: auto; min-height: 0; }
.palette-item { flex: none; border-color: var(--workspace-line); }
.palette-item:hover, .palette-item.active { border-color: #ef9ba3; background: #fff5f5; box-shadow: inset 3px 0 0 var(--quadro-red); }
.palette-item .palette-copy strong { line-height: 1.3; font-size: 12px; white-space: normal; }
.palette-copy span, .palette-product-meta { font-size: 10.5px; color: #686e76; }
.part-visual-product { border-color: #ededee; }
.viewport-card { position: relative; min-height: 0; }
.modern-shell .classic-stage { min-height: 0; }
.viewport-toolbar { min-height: 54px; padding: 10px; gap: 8px; background: #fff; border-color: var(--workspace-line); }
.tool-strip { flex-wrap: nowrap; gap: 3px; padding: 3px; background: #f3f3f4; border-radius: 8px; }
.tool-chip { height: 34px; padding: 0 11px; font-size: 12px; background: transparent; border-color: transparent; box-shadow: none; }
.tool-chip:hover, .build-chip:hover { color: #242629; background: #e8e8eb; border-color: transparent; }
.build-chip { color: #242629; background: transparent; border-color: transparent; }
.tool-chip.active, .tool-chip[data-modern-command="ID_EDIT_SLCT"].active, .icon-button.active {
  color: var(--quadro-red-dark);
  background: #fff;
  border-color: #e8c2c5;
  box-shadow: 0 1px 3px #2525250d;
}
.tool-chip.build-chip.active { color: #fff; background: var(--quadro-red); border-color: var(--quadro-red); }
.fit-view-button { font-size: 11px; height: 32px; padding: 0 9px; white-space: nowrap; }
.modern-shell .floating-hud { bottom: 12px; left: 12px; right: 12px; gap: 5px; flex-wrap: wrap; }
.modern-shell .floating-hud span { font-size: 10px; padding: 4px 7px; background: #ffffffdf; border-color: #e5e5e5; box-shadow: none; }
body:not(.show-diagnostics) #performanceStats,
body:not(.show-diagnostics) .developer-detail,
body:not(.show-diagnostics) #selectionState { display: none; }
.modern-shell .statusbar { justify-content: flex-start; gap: 8px; min-width: 0; height: 34px; background: #fff; border-color: var(--workspace-line); font-size: 11px; }
.modern-shell .statusbar #modeState { flex-shrink: 0; color: #3d4146; font-weight: 650; }
.modern-shell .statusbar #importState { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #60646c; background: none; min-width: 0; }
.status-help { flex-shrink: 0; margin-left: auto; padding: 5px 0 5px 8px; color: #535861; background: none; border: 0; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.builder-welcome { position: absolute; z-index: 2; top: 44%; left: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 40px)); padding: 28px; background: #ffffffed; border: 1px solid #e8e8eb; border-radius: 16px; box-shadow: 0 14px 50px #242a3710; }
.welcome-eyebrow { color: var(--quadro-red); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; }
.builder-welcome h1 { margin: 10px 0; font-size: clamp(23px, 2vw, 29px); line-height: 1.16; letter-spacing: -0.035em; font-weight: 650; }
.builder-welcome p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--workspace-muted); }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 16px; }
.welcome-actions button { height: 38px; }
.welcome-note { display: block; color: #85888e; font-size: 10.5px; line-height: 1.5; }
.build-hint { position: absolute; z-index: 2; bottom: 49px; left: 12px; max-width: calc(100% - 24px); padding: 8px 11px; color: #555a62; text-align: left; font-size: 11px; line-height: 1.4; background: #ffffffee; border: 1px solid #e5e5e7; border-radius: 7px; box-shadow: 0 3px 14px #242a3708; }
.build-hint.is-delete-hint { color: #a9000b; border-color: #efb1b6; background: #fff5f5ee; }
.build-help { position: absolute; z-index: 25; right: 12px; bottom: 42px; width: min(390px, calc(100% - 24px)); max-height: calc(100% - 60px); padding: 20px; overflow-y: auto; background: #fff; border: 1px solid #d9dbdf; border-radius: 10px; box-shadow: 0 12px 44px #20252e26; }
.build-help strong { font-size: 16px; }
.build-help p { line-height: 1.6; font-size: 12px; color: #646971; }
.side-card { padding: 18px 0; gap: 12px; border-color: var(--workspace-line); }
.empty-inspector { padding: 17px 13px; min-height: 95px; font-size: 12px; line-height: 1.65; color: #777d85; text-align: center; background: #f8f8f9; border-color: #e2e3e6; }
.modern-inspector-form { gap: 12px; }
.modern-inspector-form label { color: #666c73; font-size: 11px; }
.modern-inspector-form input, .modern-inspector-form select { height: 34px; border-color: #dddfe3; border-radius: 5px; font-size: 12px; }
.field-hint { margin-top: 2px; color: #898e95; font-size: 10px; }
.danger-button { color: var(--quadro-red-dark); background: #fff; border-color: #f0d6d9; font-size: 12px; }
.danger-button:hover { background: var(--quadro-red-light); }
.link-button { color: var(--quadro-red-dark); font-size: 12px; padding: 0; background: transparent; border-color: transparent; }
.link-button:hover { color: var(--quadro-red-dark); background: transparent; border-color: transparent; text-decoration: underline; }
.panel-explanation { margin: 0; color: #747a82; font-size: 11px; line-height: 1.6; }
.inventory-metrics span, .parts-metrics span { background: #f5f5f6; color: #676c73; }
.modern-part-row { font-size: 11px; gap: 7px; }
.modern-parts-empty { color: #777d85; line-height: 1.6; font-size: 12px; }
.workspace-navigation, .drawer-close, .drawer-heading { display: none; }
.panel-backdrop { position: fixed; inset: 0; z-index: 35; background: #1c202745; border: 0; }
.modern-shell .part-list-window { position: fixed; left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); z-index: 65; width: min(1040px, calc(100vw - 40px)); max-height: calc(100dvh - 48px); grid-template-rows: auto auto auto minmax(0, 1fr); background: #fff; }
.modern-shell .part-list-title { min-height: 42px; height: auto; border-color: var(--workspace-line); background: #f7f7f8; }
.modern-shell .window-button { width: 30px; height: 30px; border: 0; border-radius: 5px; background: transparent; box-shadow: none; font-size: 19px; }
.part-list-toolbar { padding: 10px; gap: 6px; background: #fff; border-color: var(--workspace-line); }
.part-list-toolbar button { height: 30px; padding: 3px 9px; border: 1px solid #dedfe3; border-radius: 5px; background: #f7f7f8; box-shadow: none; font-size: 11px; }
.inventory-summary { padding: 10px; line-height: 1.7; }
.part-list-scroll { max-height: min(430px, 45dvh); overflow: auto; }
.part-list-scroll table { min-width: 780px; }
.modern-shell .part-list-window table { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 12px; }
.modern-shell .part-list-window th, .modern-shell .part-list-window td { padding: 10px 12px; border-right: 0; border-bottom: 1px solid #ececef; color: #545a62; vertical-align: middle; }
.modern-shell .part-list-window th { padding-top: 12px; padding-bottom: 12px; color: #717780; background: #f7f7f8; font-size: 10px; font-weight: 600; box-shadow: none; }
.modern-shell .part-row-missing td, .modern-shell .part-row-complete td { background: #fff; }
.modern-shell .part-row-missing td:first-child { box-shadow: inset 2px 0 #f3c1c5; }
.modern-shell .part-list-window tbody tr:hover td { background: #fbfbfc; }
.modern-shell .part-list-window .part-total-row td { background: #f5f5f7; font-weight: 650; color: #2c3037; border-top: 1px solid #d7d9df; border-bottom: 0; }
.modern-shell .part-list-window .part-total-separator { display: none; }
.modern-shell .part-list-window .article-cell { display: grid; gap: 4px; line-height: 1.35; }
.modern-shell .part-list-window .article-cell strong { color: #383d45; font-size: 11.5px; font-weight: 600; }
.modern-shell .part-list-window .material-chip { color: #838891; font-size: 10.5px; line-height: 1.4; }
.modern-shell .part-list-window .material-chip::before { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; border-color: #0002; }
.modern-shell .inventory-summary, .modern-shell .inventory-summary.has-missing { background: #fafafa; border-color: var(--workspace-line); color: #737982; }
.modern-shell .inventory-summary strong { color: #4c525c; }
.modern-shell .part-list-window td.part-missing-value { color: var(--quadro-red-dark); font-weight: 600; }
.modern-shell .part-list-window td:first-child, .modern-shell .part-list-window th:first-child { width: 190px; min-width: 170px; max-width: 230px; white-space: normal; }
.modern-shell .part-list-window td:nth-child(2), .modern-shell .part-list-window th:nth-child(2) { min-width: 54px; padding-right: 8px; padding-left: 8px; text-align: right; }
.modern-shell .material-window, .modern-shell .order-window { grid-template-rows: auto auto minmax(0, 1fr); }
.modern-shell .classic-dialog { position: fixed; z-index: 75; max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; }

@media (max-width: 1350px) {
  .builder-main { grid-template-columns: 228px minmax(0, 1fr) 260px; }
  .modern-top { gap: 8px 10px; }
  .top-actions { gap: 4px; }
  .top-actions .soft-button { padding: 0 8px; }
  .top-actions .history-button { padding: 0; }
  .tool-chip { padding: 0 8px; }
  .fit-view-button { padding: 0 7px; }
  .viewport-toolbar { gap: 4px; padding: 8px; }
}

@media (max-width: 1120px) {
  .modern-top { grid-template-columns: auto minmax(150px, 1fr) auto; padding: 10px 12px; }
  .brand-lockup { grid-column: 1; min-width: 115px; }
  .brand-logo { height: 26px; max-width: 122px; }
  .project-nav { grid-column: 2; flex-wrap: wrap; }
  .top-actions { grid-column: 3; justify-content: flex-end; flex-wrap: nowrap; }
  .expert-toolbar { grid-column: 1 / -1; }
  .builder-main { grid-template-columns: 230px minmax(0, 1fr); }
  .right-panel { display: none; position: fixed; z-index: 40; top: 12px; right: 12px; bottom: 68px; width: 340px; max-width: calc(100vw - 24px); padding: 0 18px 18px; border-color: #dcdee1; border-radius: 10px; box-shadow: 0 12px 50px #14182130; }
  .right-panel.drawer-open { display: flex; }
  .right-panel .side-card { display: none; }
  .right-panel .side-card.detail-active { display: grid; }
  .right-panel .side-card-head > strong { display: none; }
  .right-panel .side-card-head { min-height: 0; }
  .right-panel .inventory-card .side-card-head strong { display: none; }
  .drawer-heading { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--workspace-line); }
  .drawer-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #4c5158; font-size: 26px; background: #f5f5f6; border: 0; border-radius: 6px; }
  .library-head .drawer-close { display: none; }
  .workspace-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); z-index: 45; min-height: 46px; padding: 4px; gap: 4px; background: #fff; border: 1px solid var(--workspace-line); border-radius: 8px; }
  .workspace-navigation button { min-height: 36px; padding: 7px 8px; color: #646a72; background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 12px; font-weight: 600; }
  .workspace-navigation button.active { color: var(--quadro-red-dark); background: var(--quadro-red-light); border-color: #f8cbd0; }
  .workspace-navigation .library-navigation { display: none; }
}

@media (max-width: 900px) and (min-width: 761px) {
  .modern-top { grid-template-columns: auto minmax(0, 1fr); }
  .top-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .builder-main { grid-template-columns: 212px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .modern-shell { height: 100dvh; min-height: 0; padding: 5px; gap: 5px; overflow: hidden; }
  .modern-top { grid-template-columns: auto minmax(0, 1fr); padding: 8px; gap: 7px 10px; }
  .brand-lockup { grid-column: 1; min-width: 100px; }
  .brand-logo { height: 24px; max-width: 113px; }
  .version-badge { font-size: 8px; padding-left: 30px; }
  .project-nav { grid-column: 2; flex-wrap: wrap; justify-content: flex-end; gap: 1px 4px; overflow: visible; }
  .project-nav #menuFile { height: 28px; padding: 0 6px; font-size: 11px; }
  .project-nav .project-name { height: 28px; flex: 1; min-width: 0; font-size: 11px; }
  .save-status { font-size: 10px; padding-left: 0; text-align: right; }
  .top-actions { grid-column: 1 / -1; justify-content: space-between; gap: 4px; overflow: visible; }
  .top-actions button { min-height: 34px; height: 34px; padding: 0 8px; font-size: 11px; white-space: nowrap; }
  .top-actions .history-button { width: 31px; min-width: 31px; padding: 0; font-size: 23px; }
  .top-actions .primary-button { flex: 1; }
  .top-actions .model-library-trigger { display: none; }
  .modern-menu-panel { top: calc(100% - 3px); left: auto; right: 5px; max-width: calc(100vw - 20px); }
  .expert-toolbar { grid-column: 1 / -1; max-height: 108px; }
  .builder-main { grid-template-columns: minmax(0, 1fr); height: 100%; }
  .left-panel { display: none; position: fixed; z-index: 40; top: 10px; right: 10px; bottom: 75px; width: 360px; max-width: calc(100vw - 20px); max-height: none; padding: 14px; border-radius: 10px; box-shadow: 0 12px 50px #14182130; }
  .left-panel.drawer-open { display: flex; }
  .library-head .drawer-close { display: grid; }
  .catalog-tabs { display: grid; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-tabs button { flex: none; min-height: 38px; }
  .palette-list { display: grid; overflow-x: hidden; overflow-y: auto; grid-template-columns: 1fr; padding-right: 3px; }
  .palette-item { flex: none; }
  .right-panel { top: 10px; right: 10px; bottom: 75px; width: 360px; max-width: calc(100vw - 20px); }
  .viewport-card { min-height: 0; }
  .viewport-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; padding: 6px; min-height: 0; }
  .tool-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding: 2px; gap: 2px; }
  .tool-chip { padding: 0 4px; height: 35px; font-size: 11px; white-space: nowrap; }
  .fit-view-button { padding: 0 7px; font-size: 10px; height: 32px; }
  .modern-shell .classic-stage { min-height: 0; }
  .modern-shell .statusbar { gap: 7px; height: 33px; padding: 0 8px; font-size: 10px; }
  .status-help { font-size: 10px; }
  .builder-welcome { top: 45%; padding: 23px 20px; width: calc(100% - 30px); max-width: 410px; }
  .builder-welcome h1 { font-size: 25px; }
  .builder-welcome p { font-size: 12px; }
  .welcome-actions { margin: 18px 0 12px; }
  .welcome-actions button { padding: 0 10px; font-size: 12px; }
  .welcome-note { font-size: 10px; }
  .build-hint { bottom: 48px; left: 9px; max-width: calc(100% - 18px); font-size: 10px; padding: 6px 8px; }
  .modern-shell .floating-hud { left: 9px; bottom: 10px; }
  .workspace-navigation { grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 57px; gap: 1px; padding: 3px; padding-bottom: max(3px, env(safe-area-inset-bottom)); }
  .workspace-navigation .library-navigation { display: block; }
  .workspace-navigation button { min-width: 0; padding: 8px 1px; font-size: 9px; word-break: normal; }
  .modern-shell .part-list-window { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  .part-list-toolbar { padding: 7px; gap: 5px; }
  .part-list-toolbar button { font-size: 10px; min-height: 30px; padding: 3px 7px; }
  .part-list-summary { margin-left: 0; width: 100%; font-size: 10px; white-space: normal; }
  .inventory-summary { gap: 3px 12px; padding: 7px; font-size: 10px; }
  .part-list-scroll { max-height: 43dvh; }
  .modern-shell .part-list-window th, .modern-shell .part-list-window td { padding: 9px 8px; }
  .modern-shell .part-list-window td:first-child, .modern-shell .part-list-window th:first-child { width: 170px; min-width: 170px; max-width: 170px; }
}

@media (max-width: 460px) {
  .viewport-toolbar { grid-template-columns: 1fr; }
  .fit-view-button { justify-self: end; height: 27px; }
}
@media (max-height: 650px) and (max-width: 760px) {
  .builder-welcome { padding: 17px; }
  .builder-welcome h1 { font-size: 21px; }
  .welcome-note { display: none; }
  .welcome-actions { margin-bottom: 0; }
  .fit-view-button { height: 24px; }
}
@media print {
  .workspace-navigation, .left-panel, .right-panel, .builder-welcome, .build-hint, .build-help, .viewport-toolbar, .panel-backdrop { display: none !important; }
}
.price-estimate-note { margin:0; padding:9px 12px; font-size:11px; line-height:1.5; color:#626a71; background:#fafbfc; border-bottom:1px solid #e8ebee; }
.classic-stage[aria-busy="true"]::after { content:"Dein Entwurf wird geöffnet …"; position:absolute; inset:0; z-index:200; display:grid; place-items:center; background:#fffffff0; color:#bf1429; font:600 18px system-ui; }
/* The inventory workspace is a native modal, outside the canvas and its drawers. */
.automatic-connector-inspector { display: grid; gap: 10px; padding: 14px; border: 1px solid #e6e7eb; border-radius: 10px; background: #fafafb; }
.automatic-connector-inspector[hidden] { display: none; }
.automatic-connector-inspector img { width: 90px; height: 90px; object-fit: contain; justify-self: center; }
.automatic-connector-inspector strong { font-size: 14px; line-height: 1.45; }
.automatic-connector-inspector span, .automatic-connector-inspector p { font-size: 12px; color: #727983; line-height: 1.6; margin: 0; }
.inventory-journey {
  --ij-red: #e30613; --ij-ink: #26282e; --ij-muted: #65717e; --ij-line: #e5e9ed;
  width: min(1160px, calc(100vw - 48px)); max-width: none; height: min(900px, calc(100dvh - 48px)); max-height: none;
  margin: auto; padding: 0; color: var(--ij-ink); background: #fff; border: 1px solid #dcdfe3; border-radius: 18px;
  box-shadow: 0 28px 100px #20263140; font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 13px;
}
.inventory-journey[open] { display: flex; flex-direction: column; }
.inventory-journey::backdrop { background: #22293675; backdrop-filter: blur(3px); }
.inventory-journey *, .inventory-journey *::before, .inventory-journey *::after { box-sizing: border-box; }
.inventory-journey [hidden] { display: none !important; }
.inventory-journey button, .inventory-journey input, .inventory-journey select { font: inherit; }
.inventory-journey button, .inventory-journey a { -webkit-tap-highlight-color: transparent; }
.inventory-journey button, .inventory-journey select { cursor: pointer; }
.inventory-journey button:focus-visible, .inventory-journey a:focus-visible, .inventory-journey input:focus-visible, .inventory-journey select:focus-visible, .inventory-journey summary:focus-visible { outline: 3px solid #e3061350; outline-offset: 2px; }
.inventory-journey button:disabled { opacity: .5; cursor: wait; }
.ij-header { display: flex; flex: none; justify-content: space-between; gap: 24px; padding: 28px 32px 22px; border-bottom: 1px solid var(--ij-line); }
.ij-eyebrow { color: var(--ij-red); font-size: 10px; font-weight: 750; letter-spacing: .1em; }
.ij-header h2 { margin: 8px 0; font-size: 27px; line-height: 1.2; letter-spacing: -.035em; font-weight: 650; }
.ij-header p { margin: 0; line-height: 1.55; color: var(--ij-muted); }
.ij-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: 1px solid #e4e8ec; border-radius: 12px; background: #fff; color: #4b5663; line-height: 0; }
.ij-close svg { display: block; width: 20px; height: 20px; flex: none; pointer-events: none; }
.ij-close:hover { background: #e9ebee; }
.ij-workspace { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.ij-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 32px 18px; flex: none; }
.ij-totals > div { display: grid; gap: 7px; padding: 17px 19px; background: #f5f7f9; border: 1px solid #edf0f3; border-radius: 12px; }
.ij-totals .ij-owned-total { background: #fff; border-color: #dce3e9; }
.ij-totals .ij-covered-total { background: #f0f7f3; border-color: #e0eee5; }
.ij-covered-total strong { color: #236644; }
.ij-totals strong { font-size: 27px; line-height: 1.15; letter-spacing: -.035em; font-weight: 650; font-variant-numeric: tabular-nums; }
.ij-totals span { font-weight: 600; font-size: 12px; }
.ij-totals small { font-size: 10px; line-height: 1.5; color: var(--ij-muted); }
.ij-totals .ij-missing-total { background: #fff3f3; border-color: #f4dddd; }
.ij-missing-total strong { color: #cc0612; }
.ij-color-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -5px 32px 16px; padding: 11px 14px; border: 1px solid #eadfc6; border-radius: 7px; background: #fffaf0; flex: none; }
.ij-color-notice p { margin: 0; color: #7a6b4a; font-size: 11px; line-height: 1.55; }
.ij-color-notice button { padding: 6px 0; color: #775b26; border: 0; background: none; font-size: 11px; font-weight: 650; white-space: nowrap; }
.ij-tabs { display: flex; gap: 5px; margin: 0 32px; padding: 4px; background: #f1f3f5; border: 1px solid #e9ecef; border-radius: 11px; flex: none; }
.ij-tabs button { flex: 1; border: 1px solid transparent; border-radius: 8px; padding: 10px 12px; color: #606b78; background: none; font-weight: 600; white-space: nowrap; }
.ij-tabs button[aria-selected="true"] { color: #c60814; border-color: #e9e4e5; background: #fff; box-shadow: 0 2px 4px #1c273409; }
.ij-filters { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, 210px); gap: 12px; margin: 18px 32px 10px; flex: none; }
.ij-filters input, .ij-filters select { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #dce0e5; border-radius: 7px; color: #515762; background: #fff; }
.ij-filters input::placeholder { color: #9196a0; }
.ij-content { overflow: auto; flex: 1; min-height: 0; padding: 0 32px 24px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.ij-content:focus { outline: none; }
.ij-row-count { margin: 7px 0 15px; color: var(--ij-muted); font-size: 11px; line-height: 1.55; }
.ij-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
.ij-table thead th { position: sticky; top: 0; z-index: 1; padding: 11px 8px; background: #fafafb; color: #717780; font-size: 10px; font-weight: 600; border-bottom: 1px solid var(--ij-line); text-align: center; }
.ij-table thead th:first-child { text-align: left; width: 47%; padding-left: 12px; }
.ij-table tbody th, .ij-table tbody td { height: 75px; padding: 12px 8px; border-bottom: 1px solid #eeeff2; text-align: center; }
.ij-table tbody th { text-align: left; padding-left: 12px; font-weight: 400; }
.ij-product-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ij-product-identity > div { min-width: 0; }
.ij-product-identity strong { display: block; color: #353941; font-size: 12px; line-height: 1.45; font-weight: 600; }
.ij-product-image { width: 48px; height: 48px; object-fit: contain; flex: none; }
.ij-product-detail { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 4px; color: #8a8f99; font-size: 10px; line-height: 1.4; }
.ij-item-purchase, .ij-item-blocked { display: block; margin-top: 6px; font-size: 10px; line-height: 1.5; }
.ij-item-purchase { color: #547365; }
.ij-item-blocked { color: #947856; }
.ij-color-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1px solid #0002; flex: none; }
.ij-stock-input { width: 68px; height: 36px; padding: 5px 4px 5px 8px; text-align: center; border: 1px solid #dce0e5; border-radius: 6px; background: #fff; color: #333a42; font-variant-numeric: tabular-nums; }
.ij-table td { font-variant-numeric: tabular-nums; font-size: 13px; }
.ij-missing-cell { color: #cc0612; font-weight: 650; }
.ij-row-missing th { box-shadow: inset 2px 0 #efbcc0; }
.ij-table .ij-assignment-row td { height: auto; padding: 12px; background: #fffcf5; text-align: left; }
.ij-color-form { display: flex; align-items: end; gap: 10px; }
.ij-color-form p { flex: 1; align-self: center; margin: 0; color: #8a7957; font-size: 11px; line-height: 1.5; }
.ij-color-form label { display: grid; gap: 5px; color: #867858; font-size: 10px; }
.ij-color-form select, .ij-color-form input { min-height: 35px; max-width: 150px; padding: 5px 8px; border: 1px solid #e2dacb; border-radius: 6px; background: #fff; color: #5f5a51; }
.ij-color-form input { width: 70px; }
.ij-color-form button { min-height: 35px; padding: 7px 10px; font-size: 11px; }
.ij-primary, .ij-secondary, .ij-load-more { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 15px; border: 1px solid transparent; border-radius: 7px; font-weight: 650; line-height: 1.35; text-align: center; text-decoration: none; }
.ij-primary { color: #fff; background: var(--ij-red); }
.ij-primary:hover { background: #c90510; color: #fff; }
.ij-secondary, .ij-load-more { background: #fff; color: #515863; border-color: #dfe2e7; }
.ij-secondary:hover, .ij-load-more:hover { background: #f7f8fa; }
.ij-load-more { width: 100%; margin-top: 15px; }
.ij-primary[aria-disabled="true"] { background: #e8eaee; color: #8d939d; cursor: default; pointer-events: none; }
.ij-footer { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 32px; border-top: 1px solid var(--ij-line); background: #fafafb; }
.ij-footer > p { margin: 0; color: #858b94; font-size: 11px; line-height: 1.55; }
.ij-footer > div { display: flex; gap: 9px; flex: none; }
.ij-feedback { margin: 0; padding: 12px 32px; background: #f0f7f2; color: #386347; line-height: 1.5; flex: none; }
.ij-feedback.ij-error { background: #fff3f3; color: #ad0713; }
.ij-empty { display: grid; place-items: center; align-content: center; text-align: center; min-height: 195px; padding: 35px 20px; }
.ij-empty > strong { font-size: 19px; letter-spacing: -.02em; font-weight: 600; }
.ij-empty p { max-width: 450px; margin: 12px 0 20px; color: #7b828c; line-height: 1.7; }
.ij-empty-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.ij-section-intro { margin: 20px 0; max-width: 730px; color: #747b85; line-height: 1.7; }
.ij-kit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ij-kit-card { display: flex; flex-direction: column; align-items: stretch; padding: 0; border: 1px solid #e2e7ec; border-radius: 15px; overflow: hidden; background: #fff; }
.ij-kit-visual { display: grid; place-items: center; position: relative; height: 170px; padding: 18px; background: #f7f9fb; border-bottom: 1px solid #edf0f3; }
.ij-kit-visual > .ij-product-image { width: 100%; height: 132px; }
.ij-kit-image-placeholder { color: #c1c8d0; font-size: 24px; letter-spacing: .08em; font-weight: 750; }
.ij-kit-family { position: absolute; top: 11px; left: 11px; padding: 5px 8px; border: 1px solid #e2e7ec; border-radius: 6px; background: #fffffff0; font-size: 10px; font-weight: 650; color: #515d6b; }
.ij-kit-body { display: flex; flex: 1; flex-direction: column; align-items: stretch; gap: 9px; padding: 18px; }
.ij-kit-card h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; }
.ij-kit-card p { margin: 8px 0 0; color: var(--ij-muted); line-height: 1.6; font-size: 11px; }
.ij-kit-count { align-self: start; color: #40634d; font-size: 10px; line-height: 1.5; padding: 5px 8px; border-radius: 6px; background: #f0f6f2; }
.ij-kit-partial { background: #fff6e7; color: #806328; }
.ij-kit-source { color: #727b86; font-size: 10px; line-height: 1.5; }
.ij-kit-source summary { cursor: pointer; }
.ij-kit-controls { display: flex; justify-content: space-between; align-items: end; gap: 9px; width: 100%; margin-top: auto; padding-top: 12px; }
.ij-kit-controls label { display: grid; gap: 6px; font-size: 10px; color: #7a828e; }
.ij-kit-quantity { width: 62px; height: 40px; padding: 7px 9px; border: 1px solid #dce0e5; border-radius: 7px; color: #353b45; }
.ij-kit-controls button { font-size: 11px; padding: 10px; }
.ij-kit-models { width: 100%; font-size: 11px; }
.ij-kit-model-note { display: block; text-align: center; font-size: 10px; color: #7d8792; padding: 9px 0 1px; }
.ij-cart-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; margin: 9px 0 12px; padding: 19px 20px; border: 1px solid #f0d8da; border-radius: 14px; background: #fff8f8; }
.ij-cart-information { display: grid; justify-items: start; gap: 3px; }
.ij-cart-information > .ij-secondary { min-height: 0; padding: 2px 0; border: 0; border-radius: 0; background: none; color: #687483; font-size: 10px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.ij-cart-information > strong { font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.ij-cart-value { color: #84757a; font-size: 11px; line-height: 1.5; }
.ij-cart-check { padding: 2px 0 0; font-size: 10px !important; color: #aa4d58; border: 0; background: none; text-align: left; }
.ij-cart-button { font-size: 11px; }
.ij-cart-blocked { width: 100%; margin-top: 15px; padding: 12px 14px; background: #faf8f4; border: 1px solid #eae4d9; border-radius: 7px; font-size: 11px; color: #7b7478; }
.ij-cart-blocked summary { cursor: pointer; }
.ij-cart-blocked li { margin: 7px 0; line-height: 1.5; }
.ij-shop-note { margin: 15px 0 0; font-size: 10px; line-height: 1.6; color: #9296a0; }
.ij-cart-items, .ij-kit-extras { width: 100%; font-size: 11px; line-height: 1.6; color: #78747a; }
.ij-cart-items summary, .ij-kit-extras summary { cursor: pointer; }
.ij-cart-items li, .ij-kit-extras li { margin: 5px 0; }
.ij-kit-extras { margin-top: 22px; padding: 15px; background: #f7f8fa; border-radius: 7px; }
.ij-choices { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 16px; padding: 40px 32px; overflow: auto; }
.ij-choices > button { display: flex; flex-direction: column; align-items: start; padding: 24px 21px; border: 1px solid #e1e4e8; border-radius: 11px; background: #fff; text-align: left; }
.ij-choices > button:hover { border-color: #e30613; background: #fffafa; }
.ij-choice-number { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 24px; border-radius: 50%; color: #d30a16; background: #ffedef; font-size: 10px; font-weight: 750; }
.ij-choices strong { font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.ij-choices button > span:not(.ij-choice-number) { margin-top: 12px; line-height: 1.7; color: #7b818b; font-size: 12px; }
.ij-choices b { display: block; margin-top: auto; padding-top: 25px; color: #cc0612; font-size: 11px; font-weight: 600; }
.ij-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.inventory-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.inventory-quick-grid > span { display: grid; gap: 4px; padding: 12px; background: #f6f7f9; border-radius: 6px; font-size: 10px; color: #747b85; }
.inventory-quick-grid strong { color: #333943; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inventory-quick-grid > .inventory-quick-missing { background: #fff3f3; }
.inventory-quick-missing strong { color: #d10713; }
.inventory-quick-actions { display: grid; gap: 9px; }
.inventory-quick-actions button { min-height: 36px; width: 100%; }
.ij-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 20px; margin: 10px 0 20px; border: 1px solid #e3e9ee; border-radius: 14px; background: #f8fafc; }
.ij-section-kicker { color: #647386; font-size: 9px; letter-spacing: .09em; font-weight: 700; }
.ij-overview h3, .ij-section-heading h3 { margin: 7px 0; color: #263440; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; font-weight: 650; }
.ij-overview p, .ij-section-heading p { margin: 0; color: var(--ij-muted); font-size: 12px; line-height: 1.65; }
.ij-overview-actions { display: grid; gap: 7px; min-width: 180px; }
.ij-overview-actions button { font-size: 11px; }
.ij-text-action { border: 0; padding: 5px 0; background: none; color: #bb1520; font-weight: 600; line-height: 1.5; }
.ij-coverage { width: 100%; max-width: 420px; height: 7px; margin-top: 16px; border-radius: 8px; overflow: hidden; background: #e7ebef; }
.ij-coverage > span { display: block; height: 100%; border-radius: inherit; background: #3d8860; }
.ij-section-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin: 14px 0 20px; }
.ij-section-heading h3 { margin-top: 0; }
.ij-section-heading p { max-width: 660px; }
.ij-result-count { flex: none; padding: 6px 9px; border-radius: 7px; background: #f0f3f6; color: #667380; font-size: 10px; white-space: nowrap; }
.ij-missing-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ij-missing-card { display: flex; flex-direction: column; padding: 18px; border: 1px solid #e4e8ec; border-radius: 13px; background: #fff; }
.ij-missing-card .ij-product-identity { align-items: start; margin-bottom: 16px; }
.ij-missing-card .ij-product-image { width: 52px; height: 52px; padding: 4px; border: 1px solid #f0f2f4; border-radius: 9px; background: #fafbfc; }
.ij-missing-card .ij-product-identity strong { font-size: 13px; }
.ij-part-equation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.ij-part-equation > div { display: flex; flex-direction: column; gap: 7px; padding: 11px 10px; border: 1px solid #edf0f3; border-radius: 8px; background: #f7f9fa; }
.ij-part-equation span { color: #6b7683; font-size: 10px; line-height: 1.3; }
.ij-part-equation strong { color: #303e4a; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ij-part-equation .ij-part-shortage { background: #fff2f3; border-color: #f6e3e5; }
.ij-part-shortage strong { color: #c20a17; }
.ij-missing-stock { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; color: #707d89; font-size: 10px; }
.ij-missing-stock .ij-stock-input { width: 62px; height: 32px; }
.inventory-journey[data-inventory-view="kits"] .ij-filters { grid-template-columns: 1fr; }
.inventory-journey:not([data-inventory-view="overview"]) .ij-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; }
.inventory-journey:not([data-inventory-view="overview"]) .ij-totals small { display: none; }
.inventory-journey:not([data-inventory-view="overview"]) .ij-totals strong { font-size: 21px; }
.inventory-journey:not([data-inventory-view="overview"]) .ij-totals span { font-size: 10px; }
@media (max-width: 1020px) and (min-width: 761px) {
  .ij-kit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .inventory-journey { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 12px; }
  .ij-header { padding: 20px 18px 17px; gap: 12px; }
  .ij-header h2 { font-size: 22px; }
  .ij-header p { font-size: 11px; }
  .ij-eyebrow { font-size: 8px; letter-spacing: .08em; }
  .ij-close { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
  .ij-totals { grid-template-columns: repeat(2, 1fr); margin: 15px 18px; }
  .ij-totals > div { padding: 10px 13px; gap: 2px; }
  .ij-totals strong { font-size: 22px; }
  .ij-totals span { font-size: 10px; }
  .ij-totals small { display: none; }
  .ij-color-notice { margin: -3px 18px 12px; gap: 8px; padding: 9px 11px; }
  .ij-color-notice p { font-size: 9px; }
  .ij-color-notice button { font-size: 9px; }
  .ij-tabs { margin: 0 18px; gap: 0; justify-content: space-between; }
  .ij-tabs button { font-size: 10px; padding: 9px 0 10px; }
  .ij-filters { margin: 12px 18px 7px; gap: 7px; grid-template-columns: minmax(0, 1fr) 125px; }
  .ij-filters input, .ij-filters select { font-size: 10px; height: 36px; padding: 0 8px; }
  .ij-content { padding: 0 18px 18px; }
  .ij-row-count { font-size: 10px; margin-bottom: 12px; }
  .ij-table, .ij-table tbody { display: block; }
  .ij-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ij-table tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 10px; border: 1px solid #e7e9ed; border-radius: 8px; overflow: hidden; }
  .ij-table tbody th { display: block; grid-column: 1 / -1; min-height: 58px; height: auto; padding: 12px; border-bottom: 1px solid #eceef1; }
  .ij-table tbody td { display: flex; flex-direction: column; justify-content: space-between; gap: 7px; height: 78px; padding: 10px 3px; border: 0; font-size: 14px; }
  .ij-table tbody td::before { content: attr(data-label); color: #838994; font-size: 9px; font-weight: 400; white-space: nowrap; }
  .ij-table tbody td > span { display: grid; place-items: center; height: 32px; }
  .ij-table tbody .ij-assignment-row { display: block; margin-top: -10px; border-top: 0; border-radius: 0 0 8px 8px; }
  .ij-table tbody .ij-assignment-row td { display: block; height: auto; padding: 12px; }
  .ij-table tbody .ij-assignment-row td::before { display: none; }
  .ij-color-form { display: grid; grid-template-columns: minmax(0, 1fr) 58px auto; gap: 9px; }
  .ij-color-form p { grid-column: 1 / -1; font-size: 10px; }
  .ij-color-form select { width: 100%; max-width: none; min-width: 0; font-size: 11px; }
  .ij-color-form input { width: 100%; font-size: 12px; }
  .ij-color-form button { padding: 7px 9px; font-size: 10px; }
  .ij-stock-input { width: 58px; max-width: 100%; height: 32px; padding: 3px; align-self: center; font-size: 13px !important; }
  .ij-product-identity strong { font-size: 12px; }
  .ij-product-detail { font-size: 10px; }
  .ij-product-image { width: 35px; height: 35px; }
  .ij-footer { padding: 13px 18px; gap: 12px; }
  .ij-footer > p { font-size: 9px; }
  .ij-footer > div { gap: 6px; }
  .ij-footer button { padding: 9px 11px; font-size: 11px; }
  .ij-feedback { padding: 10px 18px; font-size: 11px; }
  .ij-kit-list { grid-template-columns: 1fr; }
  .ij-kit-card { padding: 0; }
  .ij-kit-controls button { padding: 11px; }
  .ij-section-intro { font-size: 11px; margin: 16px 0; }
  .ij-cart-summary { grid-template-columns: 1fr; padding: 12px; gap: 9px; }
  .ij-cart-information { grid-template-columns: 1fr; align-items: baseline; gap: 6px; width: 100%; }
  .ij-cart-information > strong { font-size: 16px; }
  .ij-cart-value { justify-self: start; text-align: left; font-size: 10px; }
  .ij-shop-checked { font-size: 10px; line-height: 1.6; }
  .ij-cart-check { grid-column: 1 / -1; }
  .ij-cart-button { width: 100%; font-size: 11px; }
  .ij-choices { grid-template-columns: 1fr; gap: 11px; padding: 20px 18px; align-content: start; }
  .ij-choices > button { display: grid; grid-template-columns: 34px 1fr; gap: 6px 13px; padding: 17px; }
  .ij-choice-number { grid-row: 1 / 4; margin: 0; }
  .ij-choices strong { font-size: 16px; }
  .ij-choices button > span:not(.ij-choice-number) { margin: 0; font-size: 11px; }
  .ij-choices b { grid-column: 2; margin: 0; padding-top: 3px; }
  .ij-empty { min-height: 160px; padding: 22px 8px; }
  .ij-empty > strong { font-size: 17px; }
  .ij-empty p { font-size: 11px; }
  .ij-overview { grid-template-columns: 1fr; padding: 15px; gap: 15px; margin: 8px 0 16px; }
  .ij-overview h3, .ij-section-heading h3 { font-size: 18px; }
  .ij-overview p, .ij-section-heading p { font-size: 11px; }
  .ij-overview-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
  .ij-overview-actions .ij-text-action { grid-column: 1 / -1; }
  .ij-overview-actions button { min-width: 0; padding: 8px; font-size: 10px; }
  .ij-section-heading { gap: 10px; margin: 12px 0 16px; }
  .ij-result-count { font-size: 9px; padding: 6px; }
  .ij-missing-list { grid-template-columns: 1fr; }
  .ij-missing-card { padding: 14px; }
  .ij-missing-card .ij-product-image { width: 46px; height: 46px; }
  .ij-part-equation > div { padding: 10px 8px; }
  .ij-part-equation span { font-size: 9px; }
  .ij-part-equation strong { font-size: 21px; }
}
@media (max-height: 850px) and (min-width: 761px) {
  .ij-header { padding: 15px 28px 14px; }
  .ij-header h2 { font-size: 24px; margin: 6px 0 0; }
  .ij-header p { display: none; }
  .ij-totals { margin: 12px 28px 10px; }
  .ij-totals > div { padding: 10px 16px; gap: 2px; }
  .ij-totals strong { font-size: 24px; }
  .ij-color-notice { margin: 0 28px 9px; padding: 7px 11px; }
  .ij-tabs { margin-right: 28px; margin-left: 28px; }
  .ij-tabs button { padding-top: 9px; padding-bottom: 9px; }
  .ij-filters { margin: 10px 28px 7px; }
  .ij-content { padding-right: 28px; padding-left: 28px; }
  .ij-table tbody th, .ij-table tbody td { height: 66px; padding-top: 9px; padding-bottom: 9px; }
  .ij-row-count { margin-bottom: 10px; }
  .ij-footer { padding: 10px 28px; }
  .ij-kit-visual { height: 136px; padding: 12px; }
  .ij-kit-visual > .ij-product-image { height: 112px; }
  .ij-section-heading { margin: 10px 0 15px; }
}
@media (max-height: 650px) and (max-width: 760px) {
  .ij-header { padding-top: 13px; padding-bottom: 12px; }
  .ij-header p, .ij-eyebrow { display: none; }
  .ij-header h2 { margin: 4px 0; }
  .ij-totals { margin-top: 10px; margin-bottom: 8px; }
  .ij-totals > div { padding: 7px 12px; }
}
@media (min-width: 600px) and (max-width: 760px) {
  .ij-header { padding: 17px 22px 15px; }
  .ij-header h2 { font-size: 23px; margin: 6px 0; }
  .ij-totals { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 13px 22px 12px; }
  .ij-totals > div { padding: 10px 12px; }
  .ij-color-notice { margin: -3px 22px 10px; }
  .ij-color-notice p, .ij-color-notice button { font-size: 10px; }
  .ij-tabs { margin: 0 22px; }
  .ij-tabs button { font-size: 12px; }
  .ij-filters { margin: 12px 22px 8px; }
  .ij-content { padding-right: 22px; padding-left: 22px; }
  .ij-cart-summary { grid-template-columns: minmax(0, 1fr) auto; }
  .ij-cart-information { display: grid; grid-template-columns: 1fr; }
  .ij-cart-value { justify-self: start; text-align: left; }
}
@media print { .inventory-journey { display: none !important; } }
.ij-kit-sku { color: #657180; font-size: 12px; }
.ij-kit-confirmation { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: #455362; }
.ij-kit-confirmation input { flex: 0 0 auto; margin-top: 3px; accent-color: #ed0016; }
.ij-kit-review { margin: 14px 0; padding: 16px; border: 1px solid #e6d8b6; border-radius: 12px; background: #fffaf0; font-size: 13px; line-height: 1.5; }
.ij-kit-review ul { padding-left: 18px; margin: 10px 0; }
.ij-kit-review li + li { margin-top: 8px; }
.ij-kit-review small { display: block; margin-top: 10px; color: #637080; }
.ij-kit-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ij-color-suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 0 12px; color: #526170; font-size: 12px; }
.ij-color-suggestions small { flex-basis: 100%; }
.ij-color-suggestion { padding: 7px 10px; background: #fff; border: 1px solid #ccd6df; border-radius: 8px; color: #273747; cursor: pointer; font: inherit; }
.ij-color-suggestion:hover { border-color: #ed0016; color: #c80013; }
.ij-color-suggestion:focus-visible { outline: 3px solid #ed001633; outline-offset: 2px; }
.ij-pack-details { margin: 16px 0; padding: 14px 16px; border: 1px solid #e0e5ea; border-radius: 12px; background: #fff; font-size: 13px; }
.ij-pack-details summary { cursor: pointer; font-weight: 700; }
.ij-pack-details ul { list-style: none; margin: 12px 0 0; padding: 0; }
.ij-pack-details li { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid #eef1f4; }
.ij-pack-details li span { color: #526170; font-size: 12px; }
/* Keep source quantities and color confirmation readable on narrow screens. */
.ij-color-form { flex-wrap:wrap; }
.ij-color-form .ij-color-capacity, .ij-color-form .ij-color-confirmation { flex-basis:100%; grid-column:1 / -1; }
.ij-color-form .ij-color-confirmation { display:flex; align-items:flex-start; gap:8px; font-size:12px; }
.ij-color-confirmation[hidden] { display:none; }
.ij-color-form .ij-color-confirmation input { width:auto; min-height:0; margin:2px 0 0; flex:none; }
.ij-color-origins { margin-top:10px; font-size:12px; }
.ij-color-origin { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0; }
.ij-color-origin span { min-width:0; }
/* Customer toolbar: compact labels and vector controls, independent of the legacy bitmap strip. */
body[data-customer-tools="modern"] .modern-top { position: relative; z-index: 30; }
body[data-customer-tools="modern"] #expertToolbar { max-height: none; overflow: visible; padding: 0; border: 0; background: transparent; }
.customer-tools-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 52px; padding: 10px 12px; border: 1px solid #e8e8eb; border-radius: 10px; background: #fafafa; }
.customer-tools-colors, .customer-tools-actions, .customer-quick-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.customer-tools-colors { gap: 5px 20px; }
.customer-color-options, .customer-world-options { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
.customer-tools-label { color: #646a71; font-size: 11px; font-weight: 650; white-space: nowrap; }
.customer-world-options { padding-left: 17px; border-left: 1px solid #e3e4e7; }
.customer-quick-colors { gap: 3px; }
.customer-tools-actions { gap: 4px; }
.customer-color-target { margin-left: 2px; font-size: 11px; color: #6e747d; line-height: 1.4; }
.customer-tool-button, .customer-tool-menu > summary { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; gap: 7px; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #454b53; font-size: 12px; font-weight: 550; line-height: 1.35; cursor: pointer; }
.customer-tool-button svg, .customer-tool-menu > summary svg { width: 18px; height: 18px; flex: 0 0 18px; }
.customer-tool-menu > summary svg:last-child { width: 14px; height: 14px; flex-basis: 14px; color: #858991; }
.customer-tool-menu > summary { list-style: none; }
.customer-tool-menu > summary::-webkit-details-marker { display: none; }
.customer-tool-button:hover:not(:disabled), .customer-tool-menu > summary:hover { color: #22282f; background: #eeeeef; }
.customer-tool-menu[open] > summary, .customer-tool-button.active, .customer-step-controls .customer-tool-button[aria-pressed="true"] { color: #ba0010; background: #fff; border-color: #e9b9bd; }
.customer-tool-button:disabled, .selection-action:disabled { opacity: .43; cursor: default; }
.customer-tools-actions > .customer-tool-button kbd { display: none; }
.customer-tool-button kbd { margin-left: auto; padding-left: 10px; font: inherit; font-size: 10px; color: #969aa1; white-space: nowrap; }
.customer-tool-popover { position: fixed; z-index: 80; width: 366px; overflow: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid #dcdee2; border-radius: 13px; background: #fff; box-shadow: 0 12px 36px #23293824, 0 2px 7px #23293808; }
.customer-tool-section + .customer-tool-section { margin-top: 18px; }
.customer-tool-section h3 { margin: 0 0 8px; color: #717680; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.customer-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.customer-tool-grid > .customer-tool-button { justify-content: flex-start; text-align: left; background: #f7f7f8; font-size: 11px; min-width: 0; }
.customer-tool-grid > .customer-tool-button.active { background: #fff2f3; }
.customer-grid-full { grid-column: 1 / -1; }
.customer-tool-note { margin: 9px 0; color: #767d86; font-size: 11px; line-height: 1.55; }
.customer-tool-note:last-child { margin-bottom: 0; }
.customer-tool-danger { color: #c50012; }
.customer-tools-advanced { margin-top: 14px; padding-top: 12px; border-top: 1px solid #eeeef0; }
.customer-tools-advanced > summary { cursor: pointer; color: #626972; font-size: 11px; padding: 2px 0; }
.customer-tools-advanced[open] > summary { margin-bottom: 12px; color: #333b45; }
.customer-step-controls { display: flex; gap: 3px; margin-top: 6px; padding: 3px; border-radius: 7px; background: #f4f4f6; }
.customer-step-controls .customer-tool-button { flex: 1; padding: 5px 2px; min-height: 29px; font-size: 10px; }
.customer-color { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; min-width: 0; padding: 5px 7px; color: #50565f; background: #fff; border: 1px solid #ececef; border-radius: 7px; text-align: left; font-size: 11px; cursor: pointer; }
.customer-color-swatch { position: relative; display: block; flex-shrink: 0; width: 21px; height: 21px; border: 1px solid #00000017; border-radius: 50%; background: var(--tool-color); box-shadow: inset 0 1px 2px #ffffff45; }
.customer-color.active .customer-color-swatch::after { content: ""; position: absolute; inset: -4px; border: 1.5px solid #343d49; border-radius: inherit; }
.customer-color.active { color: #282e36; border-color: #bfc3cb; background: #f9f9fa; }
.customer-color:hover { border-color: #aeb4be; background: #f9f9fa; }
.customer-color-compact { justify-content: center; padding: 5px; min-width: 31px; width: 31px; height: 32px; min-height: 32px; border: 0; background: transparent; }
.customer-color-compact.active { background: transparent; border-color: transparent; }
.customer-colors-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.customer-tools-target { margin: 0 0 16px; color: #424a54; font-size: 12px; font-weight: 600; }
.customer-color-sets { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.customer-color-set { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 34px; padding: 4px 8px 4px 5px; border: 1px solid #e1e3e7; border-radius: 7px; background: #fff; color: #565e68; font-size: 11px; cursor: pointer; }
.customer-set-swatch { display: grid; flex-shrink: 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); width: 24px; height: 24px; border-radius: 50%; overflow: hidden; border: 1px solid #00000013; }
.customer-set-swatch i { display: block; }
.customer-color-set.active { background: #fff2f3; color: #b9000e; border-color: #e4a5ab; }
.customer-color-set:hover { border-color: #aeb4be; }
.customer-tools button:focus-visible, .customer-tools summary:focus-visible, .viewport-selection button:focus-visible { outline: 3px solid #e306133f; outline-offset: 3px; }
body[data-customer-tools="modern"] .viewport-toolbar { display: flex; flex-wrap: wrap; }
.viewport-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-left: 7px; }
.selection-action, .selection-clear { min-height: 32px; padding: 6px 9px; border: 1px solid #dedfe3; border-radius: 7px; font-size: 11px; color: #4c535d; background: #fff; cursor: pointer; white-space: nowrap; }
.selection-action:hover:not(:disabled) { border-color: #bfc4cc; background: #f7f7f8; }
.selection-action.active { color: #b7000f; border-color: #e6adb3; background: #fff5f5; }
.selection-clear { min-height: 29px; padding: 4px 5px; border-color: transparent; background: transparent; color: #727983; }
.selection-clear:hover { color: #b7000f; background: #fff1f2; }
.selection-count { color: #757c85; font-size: 10px; white-space: nowrap; }
.batch-selection-summary { padding: 13px; border: 1px solid #e8d7d9; border-radius: 9px; background: #fff8f8; }
.batch-selection-summary strong { display: block; color: #343941; font-size: 13px; line-height: 1.45; }
.batch-selection-summary p { margin: 7px 0 0; color: #717782; font-size: 11px; line-height: 1.6; }
.selection-actions { padding: 10px; border: 1px solid #e6e8eb; border-radius: 9px; background: #f8f9fa; }
.selection-actions-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.selection-actions-buttons button { min-height: 36px; padding: 7px 10px; border: 1px solid #dce0e5; border-radius: 7px; color: #343b45; background: #fff; font-size: 11px; font-weight: 600; cursor: pointer; }
.selection-actions-buttons button:hover { border-color: #c3c8cf; background: #f3f5f7; }
.selection-actions-buttons button:focus-visible { outline: 3px solid #e306133f; outline-offset: 2px; }
.selection-actions-buttons [data-selection-action="build"] { border-color: #e30613; background: #e30613; color: #fff; }
.selection-actions-buttons button[data-selection-action="build"]:hover { border-color: #b9000c; background: #b9000c; color: #fff; }
.selection-actions p { margin: 8px 0 0; color: #6c7480; font-size: 11px; line-height: 1.55; }
body[data-customer-tools="modern"] .fit-view-button { margin-left: auto; }
@media (max-width: 1450px) { .customer-color-target { display: none; } }
@media (max-width: 1250px) {
  .customer-tools-main { justify-content: flex-start; gap: 7px 14px; padding: 8px; }
  .customer-tools-colors { gap: 7px 14px; }
  .customer-world-options { padding-left: 0; border-left: 0; }
  .customer-tools-actions > .customer-tool-button, .customer-tool-menu > summary { padding: 6px 7px; gap: 5px; font-size: 11px; }
  .viewport-selection { margin-left: 0; }
}
@media (max-width: 760px) {
  .customer-tools-main { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 8px; }
  .customer-tools-colors { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .customer-color-options, .customer-world-options { display: grid; grid-template-columns: 61px minmax(0, 1fr); gap: 6px; align-items: center; }
  .customer-tools-actions { justify-content: space-between; gap: 2px; padding-top: 6px; border-top: 1px solid #e9e9ec; }
  .customer-tools-label { font-size: 10px; }
  .customer-quick-colors { gap: 3px; }
  .customer-color-sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .customer-color-set { flex-direction: column; justify-content: center; gap: 3px; padding: 5px 2px; font-size: 10px; }
  .customer-set-swatch { width: 22px; height: 22px; }
  .customer-tools-actions > .customer-tool-button, .customer-tools-actions > .customer-tool-menu > summary { min-height: 32px; padding: 5px 4px; gap: 3px; font-size: 10px; }
  .customer-tools-actions > .customer-tool-button > svg, .customer-tools-actions > .customer-tool-menu > summary > svg:first-child { display: none; }
  .customer-tools-actions > .customer-tool-menu > summary > svg:last-child { width: 12px; flex-basis: 12px; }
  .customer-color-compact { width: 30px; min-width: 30px; }
  body[data-customer-tools="modern"] .viewport-toolbar { gap: 6px; padding: 7px; }
  body[data-customer-tools="modern"] .tool-strip { width: 100%; }
  .viewport-selection { gap: 4px; }
  .selection-action { min-height: 29px; padding: 5px 7px; font-size: 10px; }
  .selection-clear { font-size: 10px; }
  .selection-count { font-size: 9px; }
  .customer-tool-popover { padding: 14px; }
}
@media (max-width: 370px) {
  .customer-colors-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .customer-color-options, .customer-world-options { grid-template-columns: 1fr; gap: 3px; }
  .selection-count { display: none; }
}
@media print { .customer-tools { display: none !important; } }
.assembly-review{width:min(980px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #e2e6ed;border-radius:22px;color:#24282e;background:#fff;box-shadow:0 28px 90px #1b243330;font:14px/1.55 system-ui,sans-serif;overflow:auto}
.assembly-review::backdrop{background:#18223275;backdrop-filter:blur(5px)}
.ar-progress{padding:16px 30px 30px}.ar-progress progress{width:100%;height:12px;accent-color:#e60012}.ar-pair-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}.ar-pair-filters [aria-pressed=true]{border-color:#577ba2;background:#edf3f8}.ar-pair .ar-method{display:block;width:fit-content;margin:0 0 6px}.ar-pair .ar-next-step{color:#343f4c}.ar-attachments{margin-bottom:28px}.ar-attachments details{font-size:12px;color:#69717a;margin-top:6px}
.ar-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px 4px}.ar-header h2{font-size:27px;line-height:1.2;margin:5px 0 0;letter-spacing:-.7px}.ar-eyebrow{color:#e60012;font-size:11px;font-weight:750;letter-spacing:1.25px;margin:0}.ar-close,.ar-button{border:1px solid #dce2ea;border-radius:9px;padding:9px 13px;background:#fff;color:#303943;font:600 12px/1.4 system-ui,sans-serif;cursor:pointer}.ar-close:hover,.ar-button:hover{background:#f3f5f8}.assembly-review button:focus-visible,.assembly-review summary:focus-visible{outline:3px solid #577ba2;outline-offset:3px}.assembly-review button:disabled{opacity:.45;cursor:default}.ar-intro{padding:0 30px;margin:14px 0 18px;color:#59616e}.ar-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 30px 22px}.ar-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:17px;border:1px solid #e4e8ee;border-radius:13px;background:#f8fafb;font:inherit;cursor:pointer;color:inherit}.ar-card strong{font-size:29px;line-height:1.2;letter-spacing:-1px}.ar-card span{font-size:12px;font-weight:700}.ar-card small{color:#6b7380;font-size:11px}.ar-card.ar-surface{background:#f4f7fb}.ar-card.ar-unchecked{background:#fff8ed}.ar-card[aria-pressed=true]{border-color:#577ba2;box-shadow:0 0 0 1px #577ba2}.ar-content{padding:0 30px}.ar-content h3{font-size:16px;margin:8px 0 12px}.ar-pair{display:flex;justify-content:space-between;align-items:center;gap:18px;border:1px solid #ece1d7;background:#fffbf7;border-radius:11px;padding:14px 16px;margin:9px 0}.ar-pair strong{font-size:13px}.ar-pair p{font-size:12px;color:#69717a;margin:4px 0 0}.ar-pair .ar-button{flex-shrink:0}.ar-coverage{margin:26px 0 20px}.ar-family{border-bottom:1px solid #edf0f4;padding:0 2px}.ar-family summary{padding:13px 0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px}.ar-family summary:before{content:'›';color:#718090}.ar-family[open] summary:before{content:'⌄'}.ar-family summary strong{flex:1;font-size:13px}.ar-method{font-size:11px;color:#66727f;background:#f1f4f7;border-radius:5px;padding:3px 7px}.ar-family.ar-unchecked .ar-method{color:#8b612d;background:#fff3dd}.ar-family>p{max-width:720px;font-size:12px;color:#66717e;margin:0 0 10px 22px}.ar-family>.ar-button{margin:0 0 14px 22px}.ar-limits{margin:0 30px 24px;padding:16px 18px;border-radius:12px;background:#f5f7fa;color:#626d79;font-size:12px}.ar-limits strong{color:#3e4a57}.ar-limits p{margin:5px 0}.ar-limits small{display:block;margin-top:8px}.ar-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 30px;border-top:1px solid #e9edf2}.ar-footer p,.ar-note{font-size:12px;color:#74808e}.ar-primary{background:#e60012;color:#fff;border-color:#e60012;padding:11px 18px}.ar-primary:hover{background:#c70010}.ar-note{margin:10px 0}
@media(max-width:650px){.assembly-review{width:calc(100vw - 16px);max-height:calc(100dvh - 20px);border-radius:14px}.ar-header{padding:20px 18px 2px}.ar-intro,.ar-content{padding-left:18px;padding-right:18px}.ar-summary{padding:0 18px 10px;gap:6px}.ar-card{padding:10px 8px}.ar-card strong{font-size:24px}.ar-card span{font-size:10px}.ar-card small{display:none}.ar-limits{margin:0 18px 16px}.ar-footer{padding:12px 18px}.ar-pair{align-items:flex-start;flex-direction:column;gap:10px}.ar-family summary{flex-wrap:wrap;gap:7px}.ar-method{margin-left:22px}.ar-footer p{max-width:180px}}
.build-journey { position:absolute; z-index:8; top:14px; left:14px; width:320px; max-width:calc(100% - 28px); padding:15px; border:1px solid #e5e8eb; border-radius:14px; background:#ffffffed; box-shadow:0 8px 30px #18222c12; color:#20272d; }
.build-journey[hidden], .build-journey [hidden] { display:none; }
.build-journey-head { display:flex; align-items:center; gap:8px; }
.build-journey-head span { flex:1; color:#cf0011; font-size:10px; font-weight:750; letter-spacing:.07em; }
.build-journey-head button { padding:3px; background:transparent; border:0; color:#66727c; font-size:11px; cursor:pointer; }
.build-journey h2 { margin:10px 0 7px; font-size:18px; line-height:1.25; }
.build-journey p { margin:0 0 12px; font-size:12px; line-height:1.6; color:#5a6670; }
.build-journey-actions { display:flex; flex-wrap:wrap; gap:7px; }
.build-journey-actions button { min-height:36px; padding:7px 10px; font-size:11px; }
.build-journey-actions .link-button { width:100%; text-align:left; padding-left:0; }
.inspector-position { width:100%; grid-column:1/-1; border-top:1px solid #edf0f2; padding-top:10px; }
.inspector-position summary { cursor:pointer; font-size:12px; color:#58636e; padding:4px 0 8px; }
.selection-shortcuts { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; }
.selection-shortcuts button { flex:1; font-size:11px; min-height:34px; padding:5px 8px; }
.catalog-reference-group { border-top:1px solid #e7ebef; margin-top:10px; padding-top:10px; }
.catalog-reference-group summary { cursor:pointer; color:#687480; font-size:11px; line-height:1.5; margin-bottom:8px; }
.catalog-reference-group .palette-item { opacity:.9; margin-bottom:7px; }
.catalog-reference-note { margin:0 0 10px; font-size:11px; color:#66727c; line-height:1.5; }
.inventory-count-note { font-size:11px; color:#687480; line-height:1.5; margin:8px 0; }
@media(max-width:760px) {
  .build-journey { top:8px; left:8px; padding:10px; max-width:calc(100% - 16px); width:280px; }
  .build-journey h2 { font-size:15px; margin:7px 0; }
  .build-journey p { font-size:11px; max-height:72px; overflow:auto; margin-bottom:8px; }
  .build-journey-actions button { min-height:32px; }
  .classic-stage.has-build-journey .build-hint { display:none; }
}
@media print { .build-journey, #startBuildJourney { display:none !important; } }
/* A gallery of actual editable models, independent of stock management. */
.model-library { --ml-red:#e30613; --ml-ink:#252a31; --ml-muted:#66717d; --ml-line:#e3e7eb; width:min(1180px,calc(100vw - 48px)); height:min(920px,calc(100dvh - 48px)); max-width:none; max-height:none; margin:auto; padding:0; border:1px solid #dce1e5; border-radius:20px; background:#fff; color:var(--ml-ink); box-shadow:0 28px 100px #20263140; font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:13px; }
.model-library[open] { display:flex; flex-direction:column; }
.model-library::backdrop { background:#22293675; backdrop-filter:blur(3px); }
.model-library *, .model-library *::before, .model-library *::after { box-sizing:border-box; }
.model-library [hidden] { display:none !important; }
.model-library button, .model-library input, .model-library select { font:inherit; }
.model-library button, .model-library select { cursor:pointer; }
.model-library button:disabled { opacity:.5; cursor:default; }
.model-library[aria-busy="true"] button:disabled { cursor:wait; }
.model-library button:focus-visible, .model-library input:focus-visible, .model-library select:focus-visible, .model-library a:focus-visible { outline:3px solid #e3061350; outline-offset:3px; }
.ml-header { display:flex; flex:none; align-items:flex-start; justify-content:space-between; gap:20px; padding:28px 32px 20px; }
.ml-eyebrow { color:var(--ml-red); font-size:10px; letter-spacing:.11em; font-weight:750; }
.ml-heading h2 { margin:8px 0 6px; font-size:30px; font-weight:650; line-height:1.15; letter-spacing:-.035em; }
.ml-heading p { margin:0; color:var(--ml-muted); line-height:1.5; font-size:14px; }
.ml-close { display:flex; flex:0 0 40px; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid var(--ml-line); border-radius:12px; background:#fff; color:#4b5663; }
.ml-close svg { display:block; width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; pointer-events:none; }
.ml-close:hover { background:#f3f5f7; }
.ml-filters { display:grid; grid-template-columns:minmax(180px, .7fr) minmax(220px, 1.3fr); gap:14px; padding:0 32px; flex:none; }
.ml-filter { display:flex; flex-direction:column; gap:7px; color:#525d69; font-size:11px; font-weight:600; }
.ml-filter select, .ml-filter input { width:100%; min-height:42px; padding:10px 12px; border:1px solid #dce1e7; border-radius:9px; background:#f8f9fa; color:var(--ml-ink); font-size:13px; font-weight:400; }
.ml-filter input::placeholder { color:#8b939c; }
.ml-intro { flex:none; margin:14px 32px 0; color:var(--ml-muted); font-size:11px; line-height:1.6; }
.ml-content { overflow:auto; overscroll-behavior:contain; min-height:0; flex:1; padding:18px 32px 26px; }
.ml-result-count { margin:0 0 14px; color:#737d88; font-size:11px; }
.ml-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:18px; }
.ml-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--ml-line); border-radius:14px; background:#fff; transition:border-color .15s,box-shadow .15s; }
.ml-card:hover, .ml-card:focus-within { border-color:#c4cdd5; box-shadow:0 8px 22px #293a4c0b; }
.ml-model-visual { position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; aspect-ratio:1.4; padding:25px 12px 12px; background:linear-gradient(180deg,#f8fafb,#fff); border-bottom:1px solid #edf0f3; }
.ml-model-visual img { width:100%; height:100%; object-fit:contain; }
.ml-model-id { position:absolute; top:10px; left:12px; padding:4px 6px; border-radius:5px; background:#ffffffde; color:#697582; font-size:10px; font-weight:600; letter-spacing:.04em; }
.ml-kind { position:absolute; top:10px; right:10px; padding:4px 7px; border-radius:5px; background:#fff0f1; color:#b3000c; font-size:10px; font-weight:600; }
.ml-image-unavailable { color:#8a949e; text-align:center; font-size:11px; }
.ml-card-body { display:flex; flex:1; flex-direction:column; padding:16px; }
.ml-card h3 { margin:0 0 6px; color:#29313a; font-size:15px; font-weight:650; line-height:1.45; overflow-wrap:anywhere; }
.ml-parts { margin:0 0 14px; color:#7b8490; font-size:10px; }
.ml-required { margin:0 0 12px; color:#586472; font-size:11px; line-height:1.55; }
.ml-required-label { display:block; margin-bottom:4px; color:#9098a1; font-size:9px; font-weight:650; text-transform:uppercase; letter-spacing:.05em; }
.ml-required ul { display:flex; flex-wrap:wrap; gap:4px; list-style:none; margin:0; padding:0; }
.ml-required li { padding:3px 6px; border-radius:5px; background:#f2f5f7; }
.ml-required p { margin:0; }
.ml-model-note { margin:0 0 12px; padding:9px 10px; border-radius:7px; background:#f3f6f8; color:#697582; font-size:10px; line-height:1.6; }
.ml-legacy-note { background:#fff8eb; color:#80673b; }
.ml-source-links { display:flex; flex-wrap:wrap; gap:5px 13px; margin:0 0 15px; }
.ml-source-link { color:#707d8a; text-decoration:none; font-size:10px; line-height:1.5; }
.ml-source-link:hover { color:#b4000e; text-decoration:underline; text-underline-offset:3px; }
.ml-card-actions { display:grid; gap:6px; margin-top:auto; }
.ml-button { min-height:37px; padding:8px 12px; border:1px solid #dbe1e7; border-radius:8px; background:#fff; color:#45515e; font-size:11px !important; font-weight:600 !important; line-height:1.5; }
.ml-button:hover:not(:disabled) { border-color:#bfc9d2; background:#f6f8fa; }
.ml-primary { border-color:var(--ml-red); background:var(--ml-red); color:#fff; }
.ml-primary:hover:not(:disabled) { border-color:#bd0010; background:#bd0010; }
.ml-insert { border-color:transparent; background:#f3f5f7; }
.ml-unavailable { padding:9px; border-radius:7px; background:#fff7e8; color:#7e6837; font-size:11px; line-height:1.5; }
.ml-pagination { display:flex; flex-direction:column; align-items:center; gap:10px; padding-top:24px; }
.ml-pagination button { min-width:240px; }
.ml-pagination span { color:#9199a2; font-size:10px; }
.ml-empty { padding:50px 20px; text-align:center; color:var(--ml-muted); }
.ml-empty strong { display:block; color:#3d4956; font-size:16px; }
.ml-empty p { margin:10px 0 18px; line-height:1.6; }
.ml-footer { flex:none; padding:13px 32px; border-top:1px solid var(--ml-line); background:#fafbfc; color:#7b8590; font-size:10px; line-height:1.55; }
.ml-confirm { display:flex; flex:none; align-items:center; gap:18px; margin:15px 32px 0; padding:15px; border:1px solid #e8d0a6; border-radius:10px; background:#fffaf1; color:#665538; }
.ml-confirm-copy { flex:1; min-width:0; }
.ml-confirm strong { display:block; color:#544631; font-size:12px; line-height:1.5; }
.ml-confirm p { margin:6px 0 0; font-size:11px; line-height:1.6; }
.ml-confirm-actions { display:flex; flex:none; flex-wrap:wrap; gap:7px; }
.ml-error { flex:none; margin:15px 32px 0; padding:12px 15px; border:1px solid #edbdc0; border-radius:9px; background:#fff3f3; color:#ac1721; font-size:12px; line-height:1.6; }
@media (max-width:900px) { .ml-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ml-confirm { flex-direction:column; align-items:stretch; gap:12px; } }
@media (max-width:580px) {
  .model-library { width:calc(100vw - 16px); height:calc(100dvh - 16px); border-radius:14px; }
  .ml-header { padding:20px 18px 16px; gap:12px; }
  .ml-heading h2 { font-size:25px; } .ml-heading p { font-size:12px; }
  .ml-filters { grid-template-columns:1fr; gap:10px; padding:0 18px; }
  .ml-filter { gap:4px; } .ml-filter select, .ml-filter input { min-height:40px; font-size:12px; }
  .ml-intro { margin:12px 18px 0; font-size:10px; }
  .ml-content { padding:16px 18px 20px; }
  .ml-grid { grid-template-columns:1fr; gap:16px; }
  .ml-card-body { padding:15px; } .ml-model-visual { aspect-ratio:1.6; }
  .ml-footer { padding:11px 18px; font-size:9px; }
  .ml-confirm, .ml-error { margin:12px 18px 0; padding:12px; }
  .ml-confirm-actions { display:grid; grid-template-columns:1fr 1fr; }
  .ml-confirm p { font-size:10px; }
  .ml-close { width:36px; height:36px; flex-basis:36px; }
}
@media (prefers-reduced-motion:reduce) { .ml-card { transition:none; } }
@media print { .model-library { display:none !important; } }
.project-rename-dialog {
  width:min(480px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px);
  margin:auto; padding:0; overflow:auto; border:1px solid #dce1e5; border-radius:20px;
  background:#fff; color:#252a31; box-shadow:0 24px 80px #20263140;
  font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:14px;
}
.project-rename-dialog::backdrop { background:#22293675; backdrop-filter:blur(3px); }
.project-rename-dialog *, .project-rename-dialog *::before, .project-rename-dialog *::after { box-sizing:border-box; }
.project-rename-dialog [hidden] { display:none !important; }
.project-rename-dialog button, .project-rename-dialog input { font:inherit; }
.project-rename-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:28px 28px 0; }
.project-rename-heading { min-width:0; }
.project-rename-eyebrow { color:#e30613; font-size:10px; font-weight:750; letter-spacing:.08em; }
.project-rename-heading h2 { margin:10px 0 8px; font-size:25px; font-weight:650; line-height:1.2; letter-spacing:-.035em; }
.project-rename-heading p { margin:0; color:#697582; font-size:13px; line-height:1.6; }
.project-rename-close {
  display:flex; flex:0 0 36px; align-items:center; justify-content:center; width:36px; height:36px;
  margin:0; padding:0; border:1px solid #e3e7eb; border-radius:10px; background:#fff; color:#56616e; cursor:pointer;
}
.project-rename-close svg { display:block; flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; pointer-events:none; }
.project-rename-close:hover { background:#f3f5f7; border-color:#cbd3dc; }
.project-rename-fields { padding:24px 28px 26px; }
.project-rename-label { display:block; margin:0 0 8px; color:#424c58; font-size:12px; font-weight:650; }
.project-rename-input { width:100%; min-height:46px; margin:0; padding:11px 13px; border:1px solid #cfd7df; border-radius:10px; background:#fafbfc; color:#252a31; font-size:16px !important; line-height:1.4; }
.project-rename-input:focus { border-color:#e30613; background:#fff; outline:3px solid #e3061320; outline-offset:1px; }
.project-rename-help { margin:8px 0 0; color:#7a8490; font-size:11px; line-height:1.5; }
.project-rename-error { margin:10px 0 0; color:#b00010; font-size:12px; line-height:1.5; }
.project-rename-input[aria-invalid="true"] { border-color:#b00010; }
.project-rename-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding:18px 28px; border-top:1px solid #e8edf1; background:#fafbfc; }
.project-rename-actions button { min-height:42px; padding:10px 16px; border:1px solid #d9e0e7; border-radius:9px; background:#fff; color:#45515e; font-size:12px; font-weight:650; cursor:pointer; }
.project-rename-actions .project-rename-save { border-color:#e30613; background:#e30613; color:#fff; }
.project-rename-actions .project-rename-save:hover { border-color:#bd0010; background:#bd0010; }
.project-rename-cancel:hover { background:#f0f3f6; border-color:#c3ccd5; }
.project-rename-dialog button:focus-visible { outline:3px solid #e3061350; outline-offset:3px; }
@media (max-width:480px) {
  .project-rename-dialog { border-radius:16px; }
  .project-rename-header { padding:22px 20px 0; gap:12px; }
  .project-rename-heading h2 { font-size:22px; }
  .project-rename-fields { padding:22px 20px; }
  .project-rename-actions { padding:16px 20px; }
}
@media print { .project-rename-dialog { display:none !important; } }
.assembly-placement-bar { position:absolute; z-index:35; top:16px; left:50%; transform:translateX(-50%); width:min(520px,calc(100% - 32px)); padding:14px 16px; border:1px solid #dce3eb; border-radius:16px; background:rgba(255,255,255,.97); box-shadow:0 8px 30px #192c4317; color:#203044; }
.assembly-placement-bar[hidden] { display:none; }
.assembly-placement-bar strong { display:block; font-size:14px; }
.assembly-placement-bar p { margin:6px 0 12px; font-size:12px; line-height:1.5; color:#59687a; }
.assembly-placement-bar[data-valid="false"] p { color:#b51c36; }
.assembly-placement-bar div { display:flex; flex-wrap:wrap; gap:8px; }
.assembly-placement-bar button { min-height:36px; padding:7px 12px; border:1px solid #dce3eb; border-radius:9px; background:white; color:#203044; font:inherit; font-size:12px; cursor:pointer; }
.assembly-placement-bar button[data-assembly-command="place"] { background:#e9001a; color:white; border-color:#e9001a; }
.assembly-placement-bar button:disabled { opacity:.45; cursor:default; }
.assembly-placement-bar button:focus-visible { outline:3px solid #74b9ff; outline-offset:2px; }
.assembly-placement-bar button[hidden] { display:none; }
.assembly-placement-bar[data-kind="slide"] { width:min(430px,calc(100% - 32px)); padding-right:100px; box-sizing:border-box; }
.assembly-placement-bar[data-kind="slide"] p { margin-bottom:0; }
.assembly-placement-bar[data-kind="slide"] div { position:absolute; right:14px; top:50%; transform:translateY(-50%); }
/* The first step uses the same real model library and inventory flows as the workspace. */
.classic-stage:has(.builder-welcome:not([hidden])) .floating-hud { visibility: hidden; }
.builder-welcome {
  top: 50%; width: min(760px, calc(100% - 40px)); max-width: none;
  max-height: calc(100% - 32px); padding: 28px; overflow: auto;
  background: #fff; border: 1px solid #e6e8ed; border-radius: 22px;
  box-shadow: 0 20px 70px #29354b13, 0 2px 6px #29354b04;
  scrollbar-width: thin; scrollbar-color: #d9dce2 transparent;
}
.welcome-header { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 18px; }
.welcome-eyebrow { display: flex; align-items: center; gap: 9px; font-size: 9px; letter-spacing: .11em; line-height: 1.4; }
.welcome-colors { display: flex; gap: 3px; flex-shrink: 0; }
.welcome-colors i { width: 6px; height: 6px; border-radius: 50%; background: #e30613; }
.welcome-colors i:nth-child(2) { background: #00ab46; }
.welcome-colors i:nth-child(3) { background: #0089d8; }
.welcome-colors i:nth-child(4) { background: #ffda00; }
.builder-welcome h1 { font-size: clamp(28px, 2.5vw, 38px); line-height: 1.05; letter-spacing: -.045em; margin: 14px 0 12px; color: #23262b; font-weight: 750; }
.builder-welcome p { font-size: 12px; line-height: 1.6; color: #666e79; }
.welcome-model { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.welcome-model img { display: block; width: 100%; max-width: 285px; height: auto; object-fit: contain; }
.welcome-model > span { color: #7b818a; font-size: 10px; text-align: center; }
.welcome-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 24px 0 20px; }
.welcome-actions .welcome-choice {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  height: auto; min-height: 124px; padding: 17px 15px; border: 1px solid #e4e7ed; border-radius: 13px;
  background: #f8f9fb; color: #303741; text-align: left; white-space: normal; cursor: pointer;
  box-shadow: none; transition: background .16s, border-color .16s, box-shadow .16s;
}
.welcome-choice svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.welcome-choice-icon { width: 24px; height: 24px; flex-shrink: 0; color: #596675; }
.welcome-choice-copy { display: grid; gap: 5px; }
.welcome-choice-copy strong { font-size: 14px; line-height: 1.25; font-weight: 650; }
.welcome-choice-copy > span { font-size: 10.5px; line-height: 1.45; color: #68717d; }
.welcome-choice-arrow { position: absolute; top: 19px; right: 14px; width: 17px; height: 17px; color: #98a0aa; }
.welcome-actions .welcome-choice:hover { background: #fff; border-color: #aeb8c5; box-shadow: 0 5px 16px #3442580a; }
.welcome-actions .welcome-choice-featured { color: #fff; background: #e30613; border-color: #e30613; }
.welcome-choice-featured .welcome-choice-icon, .welcome-choice-featured .welcome-choice-arrow,
.welcome-choice-featured .welcome-choice-copy > span { color: #fff; }
.welcome-actions .welcome-choice-featured:hover { background: #c9000d; border-color: #c9000d; }
.welcome-actions .welcome-choice:focus-visible, .welcome-inventory button:focus-visible { outline: 3px solid #0089d8; outline-offset: 4px; }
.welcome-footer { display: grid; gap: 12px; border-top: 1px solid #edf0f3; padding-top: 16px; }
.welcome-inventory { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; font-size: 11px; color: #626b76; }
.welcome-inventory button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; color: #b9000d; font-size: 11px; font-weight: 650; cursor: pointer; box-shadow: none; }
.welcome-inventory button:hover { color: #8c000a; text-decoration: underline; text-underline-offset: 3px; }
.builder-welcome .welcome-note { display: block; font-size: 10px; line-height: 1.5; color: #818791; }
@media (max-height: 820px) and (min-width: 761px) {
  .builder-welcome { padding: 20px 24px; border-radius: 18px; }
  .builder-welcome h1 { font-size: 30px; margin: 10px 0; }
  .welcome-model img { max-width: 220px; }
  .welcome-model > span { display: none; }
  .welcome-actions { margin: 17px 0 14px; }
  .welcome-actions .welcome-choice { min-height: 110px; padding: 13px; gap: 10px; }
  .welcome-footer { padding-top: 12px; gap: 8px; }
}
@media (max-width: 760px) {
  .builder-welcome { top: 50%; width: calc(100% - 24px); max-width: 480px; padding: 22px; border-radius: 18px; }
  .welcome-header { display: block; }
  .welcome-model { display: none; }
  .builder-welcome h1 { font-size: 30px; margin: 12px 0 10px; }
  .builder-welcome h1 br { display: none; }
  .builder-welcome p { font-size: 12px; }
  .welcome-actions { grid-template-columns: 1fr; gap: 8px; margin: 20px 0 16px; }
  .welcome-actions .welcome-choice { flex-direction: row; align-items: center; gap: 13px; min-height: 67px; padding: 13px 35px 13px 14px; }
  .welcome-choice-copy { gap: 3px; }
  .welcome-choice-copy > span { font-size: 11px; }
  .welcome-choice-arrow { top: 50%; transform: translateY(-50%); }
  .welcome-footer { padding-top: 13px; gap: 9px; }
}
@media (prefers-reduced-motion: reduce) { .welcome-actions .welcome-choice { transition: none; } }

.creator-mark { display:inline-flex; align-items:center; gap:.22em; flex:none; color:#101923; font:700 24px/1 Arial,sans-serif; letter-spacing:-.045em; white-space:nowrap; }
.creator-mark > img { display:block; flex:none; width:.84em; height:1em; max-width:none; object-fit:cover; object-position:left center; }
@media(max-width:760px) { .creator-mark { font-size:22px; } }