html {min-width: 0; max-width: 100%; }
body {min-height: 100%; max-width: 100%; }
button, input, select, textarea {accent-color: var(--sscp-orange);}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .load-stage:focus-visible {outline: 2px solid var(--sscp-orange);
  outline-offset: 2px;}
.sscp-brand {display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit;}
.sscp-wordmark {width: 104px; height: 36px; object-fit: contain;}
.sscp-brand-copy {display: flex; flex-direction: column; line-height: 1;}

.sscp-brand-copy small {margin-top: 5px; color: var(--text-muted); font: 700 12px/1 var(--font-mono); letter-spacing: .14em;}
.save-state {padding: 5px 7px; border: 1px solid var(--line); color: var(--text-muted); font: 700 12px/1 var(--font-mono); letter-spacing: .08em;}
.install-btn {border: 1px solid var(--line); background: var(--surface);}
.compact-btn {width: auto; min-width: 108px; margin: 0; padding: 10px 13px;}
.panel-head, .planner-toolbar {display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;}
.panel-head h2, .planner-toolbar h2 {margin: 3px 0 0;}
.compact-head {align-items: center;}
.count-badge {min-width: 30px; height: 28px; display: grid; place-items: center; padding: 0 7px; background: var(--surface); border: 1px solid var(--line); color: var(--sscp-orange); font: 700 12px/1 var(--font-mono);}
.field-label {display: block; margin: 12px 0 3px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;}
.packing-input {min-height: 190px; resize: vertical; font-size: 12px; line-height: 1.45; white-space: pre;}
.input-actions {display: grid; grid-template-columns: 1fr auto; gap: 8px;}
.input-actions button {margin: 0;}
.parse-status {margin: 9px 0 13px; line-height: 1.45;}
.parse-status.is-error {color: var(--state-danger);}
.parse-status.is-ok {color: var(--text-secondary);}
.cargo-list-head {display: flex; align-items: center; justify-content: space-between; padding: 10px 0 7px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;}
.text-action {width: auto; margin: 0; padding: 4px 7px; border: 0; background: transparent; color: var(--text-muted); font-size: 12px;}
.text-action:hover {color: var(--ink); background: transparent;}
.cargo-list {display: grid; gap: 6px;}
.cargo-row.is-placed {border-left-color: var(--text-muted);}
.cargo-row.is-over {border-left-color: var(--state-danger);}
.cargo-num {display: grid; place-items: center;   background: var(--surface); color: var(--sscp-orange); font: 700 12px/1 var(--font-mono);}
.cargo-main {min-width: 0;}
.cargo-main strong {display: block; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font: 700 12px/1.3 var(--font-mono); white-space: nowrap;}
.cargo-main span {display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px;}
.cargo-weight {color: var(--ink); font: 700 12px/1 var(--font-mono); white-space: nowrap;}
.vehicle-panel {border-left-color: var(--sscp-orange);}
.vehicle-dims {display: flex; align-items: stretch; gap: 1px; border: 1px solid var(--line); background: var(--control-bg);}
.vehicle-dims span {min-width: 96px; padding: 9px 10px; background: var(--panel-bg); color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em;}
.vehicle-dims b {display: block; margin-top: 3px; color: var(--ink); font: 700 12px/1 var(--font-mono); text-transform: none; letter-spacing: 0;}
.custom-vehicle {display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding-top: 12px;}
.custom-vehicle label {color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;}
.custom-vehicle input {margin-bottom: 0;}

.metric-card {padding: 13px; background: var(--panel-bg); border: 1px solid var(--line); border-top: 3px solid var(--line);}
.metric-card:nth-child(4) {border-top-color: var(--sscp-orange);}
.metric-card span {display: block; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;}
.metric-card strong {display: block; margin: 7px 0 3px; color: var(--ink); font: 700 20px/1 var(--font-mono);}
.metric-card small {color: var(--text-muted); font-size: 12px;}
.metric-card.is-danger {border-top-color: var(--state-danger);}
.metric-card.is-warning {border-top-color: var(--line-active);}
.metric-card.is-good {border-top-color: var(--line-selected);}
.toolbar-actions {display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end;}
.planner-panel {min-width: 0; max-width: 100%; overflow: hidden;}
.vehicle-panel {min-width: 0; max-width: 100%;}
.orientation-line {display: flex; gap: 16px; flex-wrap: wrap; margin: 11px 0 8px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--text-muted); font: 700 12px/1 var(--font-mono); letter-spacing: .05em;}
.orientation-line span {display: flex; align-items: center; gap: 6px;}
.orientation-line i {width: 12px; height: 6px; display: inline-block;}
.legend-door {background: var(--sscp-orange);}
.legend-cog {border: 1px solid var(--sscp-orange); border-radius: 50%;}
.legend-over {background: var(--danger-bg); border: 1px solid var(--state-danger);}
.stage-scroll {width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; padding: 8px; background: var(--panel-bg); border: 1px solid var(--line-selected);}
.load-stage {position: relative; min-width: 0; min-height: 0; margin: 0 auto; background: var(--panel-bg); border: 2px solid var(--line-selected); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 40px rgba(0,0,0,.36); user-select: none; overflow: hidden;}
.stage-grid {position: absolute; inset: 0; background-image: linear-gradient(to right, var(--sscp-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--sscp-grid) 1px, transparent 1px); background-size: var(--grid-step, 24px) var(--grid-step, 24px); pointer-events: none;}
.stage-cab-label, .stage-door-label {position: absolute; z-index: 3; top: 7px; padding: 4px 6px; background: rgba(var(--panel-rgb),.85); color: var(--text-muted); font: 700 12px/1 var(--font-mono); letter-spacing: .1em; pointer-events: none;}
.stage-cab-label {left: 7px;}
.stage-door-label {right: 0; top: 0; bottom: 0; width: 10px; padding: 0; background: repeating-linear-gradient(0deg, var(--sscp-orange) 0 7px, var(--surface-active) 7px 14px); writing-mode: vertical-rl; text-indent: -9999px;}
.pallet-layer {position: absolute; inset: 0; z-index: 2;}
.pallet:active, .pallet.is-dragging {cursor: grabbing; z-index: 9; box-shadow: 0 8px 22px rgba(0,0,0,.45);}
.pallet.is-selected {outline: 2px solid var(--brass); outline-offset: 1px; z-index: 6;}
.pallet.is-invalid {background: var(--danger-bg); border-color: var(--state-danger); color: var(--state-danger);}
.pallet strong {overflow: hidden; text-overflow: ellipsis; font: 700 12px/1.05 var(--font-mono); white-space: nowrap;}
.pallet span {font: 700 12px/1 var(--font-mono); opacity: .8; white-space: nowrap;}
.cog-marker {position: absolute; z-index: 8; top: 0; bottom: 0; width: 1px; border-left: 1px dashed var(--sscp-orange); pointer-events: none;}
.cog-marker span {position: absolute; top: 50%; left: 0; width: 14px; height: 14px; transform: translate(-50%,-50%); border: 2px solid var(--sscp-orange); border-radius: 50%; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14);}
.cog-marker span::before, .cog-marker span::after {content: ""; position: absolute; background: var(--sscp-orange);}
.cog-marker span::before {left: 50%; top: -5px; bottom: -5px; width: 1px;}
.cog-marker span::after {top: 50%; left: -5px; right: -5px; height: 1px;}

kbd {padding: 2px 5px; background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 2px; color: var(--ink); font: 700 12px/1 var(--font-mono);}
.preview3d-panel {min-width: 0; max-width: 100%; overflow: hidden; border-left-color: var(--text-muted);}
#view3dEditBtn.is-active {background: var(--surface-active); color: var(--text-active); border-color: var(--line-active);}
#view3dSelection {color: var(--text-secondary);}
#view3dSelection.is-active {color: var(--ink);}
.preview3d-wrap {position: relative; width: 100%; min-width: 0; overflow: hidden; background: var(--panel-bg); border: 1px solid var(--line-selected);}
.preview3d-canvas.is-dragging {cursor: grabbing;}
.preview3d-canvas.is-edit-mode {cursor: crosshair;}
.preview3d-canvas.is-edit-mode.is-pallet-dragging {cursor: move;}
.unplaced-list {display: flex; flex-wrap: wrap; gap: 7px;}
.queue-chip {width: auto; margin: 0; padding: 7px 9px; background: var(--surface); border: 1px solid var(--line); color: var(--text-secondary); font: 700 12px/1 var(--font-mono);}
.queue-chip:hover {border-color: var(--sscp-orange); color: var(--ink);}
.empty-state {width: 100%; padding: 14px; border: 1px dashed var(--line); color: var(--text-muted); text-align: center; font-size: 12px;}

#stackSelectedBtn.is-active, #view3dStackBtn.is-active {background: var(--surface-active); color: var(--text-active); border-color: var(--line-active);}
#stackSelectedBtn:disabled, #unstackSelectedBtn:disabled, #view3dStackBtn:disabled, #view3dUnstackBtn:disabled {opacity: .4; cursor: not-allowed;}
.pallet.is-stacked {box-shadow: 0 0 0 1px rgba(var(--accent-rgb),.32), 5px -5px 0 -2px var(--surface), 9px -9px 0 -4px var(--panel-bg), 0 5px 14px rgba(0,0,0,.3);}
.pallet-stack-badge {position: absolute; right: 3px; top: 3px; min-width: 18px; height: 16px; padding: 0 4px; display: grid; place-items: center; background: var(--brass); color: var(--text-muted); border: 1px solid var(--text-active); font: 700 12px/1 var(--font-mono); pointer-events: none;}
.pallet.is-stack-source {outline: 2px dashed var(--brass); outline-offset: 3px;}
.cargo-row.is-stacked .cargo-num::after {content: "↑"; margin-left: 2px; color: var(--text-active);}
.cargo-row.is-staged {border-left-color: var(--text-muted); background: var(--panel-bg);}
.cargo-row.is-staged .cargo-num {color: var(--ink);}
#view3dYardMoveBtn:disabled {opacity: .4; cursor: not-allowed;}
html, body {overflow-x: hidden;}
body.studio-body {background: var(--bg);}
.studio-brand .sscp-wordmark {width: 90px; height: 34px; object-fit: contain; filter: invert(1); background: transparent;}
.studio-brand .sscp-brand-copy {display: flex; flex-direction: column;}
.studio-brand .sscp-brand-copy small {margin-top: 2px; color: var(--text-muted); font-size: 12px; letter-spacing: .16em;}
.plan-name-label {color: var(--text-muted); font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; flex: 0 0 auto;}
.plan-name-input:hover {border-color: var(--text-muted);}
.plan-name-input:focus {border-color: var(--sscp-orange); background: var(--panel-bg); box-shadow: none;}

.studio-vehicle-select label {color: var(--text-muted); font: 700 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;}
.studio-vehicle-select select {height: 38px; margin: 0; padding: 7px 10px; font-size: 12px; background: var(--panel-bg);}
.studio-mode-switch button {min-width: 46px; width: auto; height: 32px; margin: 0; padding: 5px 10px; border: 0; background: transparent; color: var(--text-muted); font: 700 12px/1 var(--font-mono);}
.studio-mode-switch button.is-active {background: var(--surface-active); color: var(--text-active); box-shadow: inset 0 0 0 1px var(--surface-active);}
main#view.studio-shell {width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  
  min-height: calc(100dvh - 62px);}
.studio-main {min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px;}
.studio-sidebar {min-width: 0;
  border-left: 1px solid var(--line);
  
  max-height: calc(100dvh - 62px);
  overflow-y: auto;
  scrollbar-width: thin;}
.sidebar-section { border-bottom: 1px solid var(--line);}
.sidebar-title {margin-bottom: 11px; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;}
.sidebar-panel-head {margin-bottom: 10px;}
.sidebar-panel-head h2 {margin: 2px 0 0; font-size: 17px; text-transform: none;}
.studio-vehicle-strip .vehicle-dims {width: 100%; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0; overflow: hidden; border-color: var(--text-muted); border-radius: 4px;}
.studio-vehicle-strip .vehicle-dims span {min-width: 0; padding: 8px 10px;}
.studio-vehicle-strip .custom-vehicle {margin-top: 8px; padding: 10px; background: var(--panel-bg); border: 1px solid var(--line);}
.studio-view {min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: none;}
.studio-view[hidden] {display: none !important;}
.studio-scene-toolbar {display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);}
.scene-toolbar-group {display: flex; align-items: center; gap: 5px; }
.scene-toolbar-actions {justify-content: flex-end;}
.scene-toolbar-label {margin-right: 4px; color: var(--text-muted); font: 700 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;}
.studio-scene-toolbar .compact-btn {width: auto; min-width: 0; margin: 0; padding: 7px 9px; font-size: 12px; border-radius: 4px;}
.studio-scene-toolbar .compact-btn.is-active {color: var(--text-active); border-color: var(--line-active); background: var(--surface-active);}
.studio-scene {position: relative; border: 0; background: var(--bg);}
.studio-scene .preview3d-canvas {height: calc(100dvh - 214px); min-height: 520px; max-height: 820px; background: var(--bg);}
.scene-hud {position: absolute;
  z-index: 4;
  pointer-events: none;
  display: flex;
  gap: 8px;
  color: var(--text-muted);
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .04em;}
.scene-hud b {color: var(--text-active);}
.scene-hud-left {left: 12px; top: 12px;}
.scene-hud-left span {padding: 6px 8px; background: rgba(var(--panel-rgb),.76); border: 1px solid var(--line); border-radius: 3px;}
.scene-hud-bottom {left: 12px; right: 12px; bottom: 10px;}
.scene-hud-bottom span {max-width: min(680px, 80%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 8px; background: rgba(var(--panel-rgb),.78); border: 1px solid var(--line); border-radius: 3px;}
#planner2dPanel {padding: 12px; background: var(--bg);}
#planner2dPanel .planner-toolbar {padding-bottom: 10px; border-bottom: 1px solid var(--line);}
#planner2dPanel .stage-scroll {min-height: 520px; display: grid; place-items: center; border-radius: 4px;}
.studio-sidebar .cargo-list {display: grid; }
.studio-sidebar .cargo-main strong {font-size: 12px;}
.studio-sidebar .cargo-main span {font-size: 12px;}
.studio-sidebar .cargo-weight {font-size: 12px;}
.studio-sidebar .cargo-list-head {position: sticky; top: 0; z-index: 2; background: var(--bg);}
.studio-sidebar .unplaced-list {display: grid; gap: 5px;}
.studio-sidebar .queue-chip {width: 100%; text-align: left;}
#vehicleSelect optgroup {color: var(--text-muted); background: var(--bg); font-weight: 700;}
#vehicleSelect option {color: var(--ink); background: var(--panel-bg);}
.preview3d-canvas {display: block; width: 100%; height: clamp(340px, 44vw, 590px);  cursor: grab; user-select: none; background: radial-gradient(circle at 45% 28%, var(--panel-bg) 0, var(--bg) 58%, var(--bg) 100%);}
@media (max-width: 1380px) {
.studio-topbar {grid-template-columns: auto minmax(120px,.45fr) minmax(210px,270px) auto;}
.studio-top-actions {grid-column: 1 / -1; justify-content: flex-end; margin-top: -2px;}
main#view.studio-shell {min-height: calc(100dvh - 104px);}
.studio-sidebar {max-height: calc(100dvh - 104px);}
.studio-scene .preview3d-canvas {height: calc(100dvh - 255px);}
}

.analysis-note {margin: 9px 0 0;
  padding-left: 8px;
  border-left: 2px solid var(--line-active);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;}
.problem-list {display: grid; gap: 6px;}
.problem-item {width: 100%;
  min-width: 0;
  margin: 0;
  padding: 9px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  align-items: start;
  gap: 7px;
  text-align: left;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 3px;}
.problem-item > span {width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  background: var(--surface);
  font: 700 12px/1 var(--font-mono);}
.problem-item p {margin: 1px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.35;}
.problem-item.is-error {border-left-color: var(--state-danger);}
.problem-item.is-error > span {color: var(--state-danger); background: var(--surface);}
.problem-item.is-warning {border-left-color: var(--line-active);}
.problem-item.is-warning > span {color: var(--text-active); background: var(--surface-active);}
.problem-item.is-ok {border-left-color: var(--text-muted); cursor: default;}
.problem-item.is-ok > span {color: var(--text-secondary); background: var(--surface);}
#problemCount.is-ok {color: var(--text-secondary); border-color: var(--text-muted);}
.modal-head {display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;}
.modal-head h2 {margin: 3px 0 0;}
.modal-head .icon-btn {width: 34px; min-width: 34px; height: 34px; margin: 0; font-size: 22px; line-height: 1;}
.shape-toggle {width: 28px;
  min-width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  font: 700 16px/1 var(--font-mono);}
.shape-toggle:hover {border-color: var(--text-muted); color: var(--ink);}
.shape-toggle.is-active {border-color: var(--sscp-orange); color: var(--text-active); background: var(--surface-active);}
.pallet.is-round {border-radius: 50%; padding: 9px; justify-content: center; align-items: center; text-align: center;}
.pallet.is-round strong, .pallet.is-round span {max-width: 88%; text-align: center;}
.pallet.is-stacked:not(.is-invalid) .pallet-stack-badge {background: var(--control-hover); border-color: var(--surface); color: var(--text-muted);}
.cargo-row.is-stacked:not(.is-over) {border-left-color: var(--line-selected);}
.cargo-row.is-round .cargo-num {border-radius: 50%;}

.history-actions {display: flex; gap: 4px;}
.history-btn {width: 36px;
  min-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  font: 700 20px/1 var(--font-mono);
  background: var(--panel-bg);
  border: 1px solid var(--line);
  color: var(--ink);}
.history-btn:disabled {opacity: .28; cursor: not-allowed;}
.history-btn:not(:disabled):hover {border-color: var(--sscp-orange); color: var(--ink);}
.cargo-list-tools {display: flex; align-items: center; gap: 5px;}
.plan-name-label {display: none;}

.plan-name-input { width: 100%; height: 34px; margin: 0; padding: 6px 9px; background: var(--panel-bg); border: 1px solid transparent; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; 
  flex: 1 1 auto; min-width: 240px;}
.topbar-unit-tabs {flex: 1 1 100%; order: 20;  padding-top: 2px;}
.topbar-unit-tabs .load-unit-tabs {padding-top: 2px;}
.load-unit-tabs {width: 100%;

  padding: 0 0 8px;
   display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:8px; padding-bottom:4px; scrollbar-width:thin;}
.load-unit-tab {width: auto;
  min-width: 126px;
  margin: 0;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  background: linear-gradient(180deg, var(--panel-bg) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-selected);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  border-radius: 3px;
  color: var(--text-secondary);
  text-align: left; flex: 0 0 auto;}
.studio-vehicle-strip {min-width: 0;
  padding: 0;
  margin-top: 2px;
  border: 0;
  background: transparent;
  box-shadow: none;}
.studio-scene-toolbar, .scene-toolbar-group {flex-wrap: wrap;}
#preview3dPanel .vehicle-dims, #preview3dPanel .load-unit-tabs {min-width: 0;}
.stage-scroll-yard {margin-top: 10px; min-height: 180px;}
.topbar-unit-tabs .load-unit-tab.is-active {background: var(--surface); border-color: var(--text-muted); border-left-color: var(--state-ok); color: var(--ink);}
.topbar-unit-tabs .load-unit-tab strong {font-size: 12px; letter-spacing: .04em;}
.topbar-unit-tabs .load-unit-tab span {font-size: 12px; color: var(--text-secondary);}
.yard2d-head {display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:10px; border-top:1px solid var(--line);}
.yard2d-head h3 {margin: 2px 0 0; font-size: 16px;}
.load-stage-yard {border-color:var(--text-muted); background:var(--panel-bg);}
.load-stage-yard .stage-cab-label {left:10px; top:10px;}
.pallet {position: absolute; display: flex; flex-direction: column; justify-content: space-between; min-width: 18px; min-height: 18px; padding: 4px 5px; background: var(--pallet-bg, var(--surface)); border: 1px solid var(--pallet-stroke, var(--line-active)); border-left: 3px solid var(--sscp-orange); color: var(--pallet-fg, var(--text-active)); cursor: grab; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.25);}
.pallet.is-stacked:not(.is-invalid) {background: var(--pallet-stack-bg, var(--pallet-bg, var(--surface))); border-color: var(--pallet-stack-stroke, var(--line-selected)); color: var(--pallet-stack-fg, var(--pallet-fg, var(--text-secondary)));}
.cargo-row {display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px; background: var(--panel-bg); border: 1px solid var(--line); border-left: 3px solid var(--line); border-left-color: var(--cargo-accent, var(--line));}
.cargo-row.is-selected {border-color: var(--line-active); background: var(--panel-bg); border-left-color: var(--cargo-accent, var(--sscp-orange));}

.lock-toggle {width: 28px; min-width: 28px; height: 28px; margin: 0; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-muted); font: 700 12px/1 var(--font-mono);}
.lock-toggle:hover {border-color: var(--text-muted); color: var(--ink);}
.lock-toggle.is-active {border-color: var(--line-active); background: var(--surface-active); color: var(--text-active);}
.cargo-row.is-locked {box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.12);}
.cargo-row.is-locked .cargo-main strong::after {content: "  LOCK"; color: var(--text-active); font-size: 12px; letter-spacing: .08em;}
.studio-sidebar .cargo-row { border-radius: 3px;  }
.pallet.is-auto-locked {outline: 1px dashed var(--brass); outline-offset: -3px;}
.pallet-lock-badge {position: absolute; left: 3px; top: 3px; min-width: 24px; height: 14px; padding: 0 3px;
  display: grid; place-items: center; background: rgba(var(--panel-rgb),.9); color: var(--text-active);
  border: 1px solid var(--line-active); font: 700 12px/1 var(--font-mono); pointer-events: none;}

.yard2d-section[hidden] {display: none !important;}

.project-tools-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.project-tools-grid button { min-height:34px; padding:7px 8px; font-size:12px; }
.project-meta-summary { margin-top:8px; font-size:12px; line-height:1.45; }
.cargo-filterbar { grid-template-columns:minmax(0,1fr) auto;   }
.cargo-filterbar input, .cargo-filterbar select { min-width:0; height:34px; padding:5px 8px; font-size:12px; }
.cargo-filterbar #cargoUnitFilter { grid-column:1 / -1; }
.cargo-filterbar #cargoCodeFilter { grid-column:1 / -1; }
.cargo-code { display:block; font-size:13px; color:var(--text-secondary); overflow-wrap:anywhere; }
.yard-cargo-queue { width:100%; padding:8px 0; }
.yard-cargo-queue > strong { display:block; margin-bottom:8px; font-size:13px; overflow-wrap:anywhere; }
.yard-cargo-queue > div { display:flex; flex-wrap:wrap; gap:6px; }
.yard-cargo-region { position:absolute; border:1px solid var(--line); pointer-events:none; z-index:2; }
.yard-cargo-region > span { position:absolute; top:-22px; left:0; width:max(140px,100%); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; line-height:20px; color:var(--text-secondary); }

.cargo-mini-action { width:28px !important; min-width:28px !important; height:28px !important; padding:0 !important; margin:0 !important; font-size:12px !important; }
.priority-tag, .note-tag { display:inline-grid; place-items:center; min-width:20px; height:16px; margin-left:4px; padding:0 4px; border:1px solid var(--line-active); background:var(--surface-active); color:var(--text-active); font:700 12px/1 var(--font-mono); font-style:normal; }
.note-tag { min-width:16px; border-color:var(--text-muted); background:var(--surface); color:var(--text-secondary); }
.load-unit-tab.is-drop-target { outline:2px dashed var(--sscp-orange); outline-offset:2px; background:var(--surface-active); }
.feature-modal { width:min(860px,94vw); max-height:86vh; overflow:auto; }
.feature-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.feature-list { display:grid; gap:7px; }
.feature-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid var(--line); background:var(--panel-bg); }
.feature-row.is-current { border-left:3px solid var(--sscp-orange); background:var(--panel-bg); }
.feature-row > div:first-child { min-width:0; display:grid; gap:4px; }
.feature-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feature-row small { color:var(--text-muted); font-size:12px; }
.feature-row-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.feature-row-actions button { min-height:30px; padding:5px 8px; font-size:12px; }
.form-grid { display:grid; gap:10px; }
.form-grid.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid label { display:grid; gap:5px; color:var(--text-muted); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.form-grid input, .form-grid select, .form-grid textarea { width:100%; margin:0; min-width:0; }
.form-grid .span-2 { grid-column:1 / -1; }
.variant-compare-controls { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:12px 0; }
.variant-compare-controls select { min-width:0; margin:0; }
.compare-table { width:100%; border-collapse:collapse; margin:10px 0 16px; font-size:12px; }
.compare-table th, .compare-table td { padding:7px 8px; border:1px solid var(--line); text-align:left; }
.compare-table thead th { background:var(--panel-bg); color:var(--ink); }
.compare-table tbody th { color:var(--text-muted); width:36%; }

.unit-meta-drawer { margin-top:8px; border:1px solid var(--line); background:var(--panel-bg); border-radius:4px; }
.unit-meta-drawer > summary { cursor:pointer; padding:8px 10px; color:var(--text-secondary); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; user-select:none; }
.unit-meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0 10px 10px; }
.unit-meta-grid label { margin:0; font-size:12px; color:var(--text-muted); }
.unit-meta-grid input { margin:4px 0 0; min-height:34px; }
.unit-meta-grid .unit-meta-note { grid-column:1 / -1; }
.unit-meta-grid button { width:auto; justify-self:start; }


.scene-more { position:relative; }
.scene-more > summary { list-style:none; cursor:pointer; min-height:32px; padding:7px 10px; border:1px solid var(--line); border-radius:3px; background:var(--panel-bg); color:var(--text-secondary); font-size:12px; font-weight:700; text-transform:uppercase; }
.scene-more > summary::-webkit-details-marker { display:none; }
.scene-more-menu { position:absolute; z-index:30; right:0; top:calc(100% + 5px); width:210px; padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--panel-bg); border:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.45); }
.scene-more-menu .compact-btn { min-width:0; width:100%; }

.studio-plan-title {
  flex: 1 1 390px !important;
  min-width: 340px !important;
  max-width: 620px !important;
  overflow: hidden;
}
.studio-plan-title .plan-name-label, .studio-plan-title .save-state, .studio-vehicle-select > label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.studio-plan-title .save-state { margin-left: 2px; }
.studio-vehicle-select { flex: 0 0 285px !important; min-width: 250px !important; }

/* Dialogi robocze mają zachowywać się jak okna, nie jak dolne szuflady. */
.modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  overflow-y: auto;
}
.modal-overlay > .modal {
  margin: auto;
  border-radius: 6px !important;
  max-height: calc(100dvh - 48px) !important;
}

/* Instrukcja 3D jest dostępna z toolbara bez przewijania strony. */

/* Ręczne dodawanie ładunku. */
.cargo-entry-actions { display: grid;    }
.cargo-entry-actions button {  margin: 0; padding: 7px 9px;  }

/* Kształt jest stałą kontrolką obok blokady - bez dodatkowego przełącznika listy. */
.cargo-list .shape-toggle { display: grid !important; }

/* Dwa rzuty w krokach załadunku. */

.preview3d-canvas.is-hovering-cargo { cursor: pointer; }
.preview3d-canvas.is-edit-mode.is-hovering-cargo { cursor: grab; }
.preview3d-canvas.is-pallet-dragging { cursor: grabbing !important; }
.scene-runtime-status {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  transform: translate(-50%, -50%);
  max-width: min(440px, calc(100% - 32px));
  padding: 10px 14px;
  text-align: center;
  color: var(--ink);
  background: rgba(var(--panel-rgb),.92);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-active);
  border-radius: 4px;
  font: 700 12px/1.45 var(--font-mono, monospace);
  letter-spacing: .035em;
  pointer-events: none;
}
.scene-runtime-status.is-error { color: var(--state-danger); border-left-color: var(--state-danger); }

  .studio-topbar {
    
    flex-wrap: nowrap !important;

    overflow-x: auto;
    overflow-y: hidden;
  }
  .studio-brand {
    flex: 0 0 186px !important;

  }
  .topbar-unit-tabs {
    
    flex: 0 0 auto !important;

  }
  .topbar-unit-tabs .load-unit-tabs {

    gap: 5px !important;
    overflow-x: auto;
  }
  
  .studio-plan-title {
    
    flex: 1 1 300px !important;

    padding-left: 0 !important;
  }

  .studio-vehicle-select {
    
    flex: 0 0 270px !important;
    
  }

  .studio-mode-switch {
    
    flex: 0 0 auto !important;
  }
  .studio-top-actions {

    justify-content: flex-start !important;
    
    margin: 0 !important;
  }
  

  
  .studio-brand {
    
    order: initial !important;

    align-self: center;
  }
  .studio-plan-title {
    
    order: initial !important;

  }
  .studio-plan-title .plan-name-label {
    
    flex: 0 0 auto;
  }
  
  .studio-plan-title .save-state {
    
    flex: 0 0 auto;
  }
  .studio-vehicle-select {
    
    order: initial !important;
    
    width: auto !important;

  }

  .studio-mode-switch {
    
    order: initial !important;
    
  }
  .topbar-unit-tabs {
    
    order: initial !important;

    align-self: stretch;
  }
  .topbar-unit-tabs .load-unit-tabs {
    
    height: 38px;

  }

  .studio-top-actions {
    
    order: initial !important;
    
    align-self: center !important;
    
    flex: 0 0 auto !important;

  }



.studio-vehicle-select {

    grid-template-columns: auto minmax(0,1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    
  }
.studio-topbar {
    display: grid !important;
    grid-template-columns: 228px minmax(360px,1fr) 88px 194px 88px 136px 132px 74px 98px auto auto !important;
    grid-template-rows: 44px 40px !important;
    grid-template-areas:
      "brand plan vehicleLabel vehicle unitLabel unit addType stepper mode actions actions"
      "tabs tabs . . . . . . . . ." !important;
    align-items: center !important;
    gap: 5px 10px !important;
    min-height: 92px !important;
    padding: 5px 8px 6px !important;
    overflow: hidden !important;
  }
  .studio-brand {  width: 228px !important; min-width: 228px !important; }
  .studio-plan-title {
    
    display: grid !important;
    grid-template-columns: auto minmax(180px,1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .studio-plan-title::after { content: ""; }
  .studio-plan-title .plan-name-label { display: inline !important; }
  .studio-plan-title .plan-name-input { height: 36px !important; min-width: 0 !important; }
  .studio-plan-title .save-state { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 92px !important; height: 22px !important; margin-left: 2px !important; padding: 0 8px !important; }
  .studio-topbar::after {
    content: "TYP PRZESTRZENI";
    
    color: var(--text-dim, var(--text-secondary));
    font: 700 12px/1 var(--font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    align-self: center;
  }
  .studio-vehicle-select {
    
    min-width: 0 !important;
    display: block !important;
  }
  .studio-vehicle-select > label { display: none !important; }

  .studio-mode-switch {
    
    width: 98px !important;
  }
  .studio-mode-switch button { min-width: 49px; }
  .studio-top-actions {
    
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow: hidden !important;
  }
  .studio-top-actions button { height: 34px !important; padding: 6px 10px !important; }
  .topbar-unit-tabs {
    
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    padding: 0 !important;
    margin-left: 0 !important;
  }
  .topbar-unit-tabs .load-unit-tabs {
    width: 96px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .topbar-unit-tabs .load-unit-tab {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 6px 8px !important;
    background: var(--panel-bg) !important;
    border: 1px solid var(--line-active) !important;
    border-left: 3px solid var(--line-active) !important;
    color: var(--ink) !important;
  }
  .topbar-unit-tabs .load-unit-tab:not(.is-active) { display: none !important; }
  .topbar-unit-tabs .load-unit-tab strong, .topbar-unit-tabs .load-unit-tab span { color: inherit !important; }





.studio-topbar {
  display:block !important;
  
  padding:5px 8px 6px !important;
  
}
.topbar-main-row {
  height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.topbar-secondary-row {
  height:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
  min-width:0;
}
.topbar-main-row .studio-brand {flex:0 0 200px !important; min-width:200px !important; width:200px !important;}
.topbar-main-row .studio-plan-title {
  flex:1 1 470px !important; min-width:300px !important; max-width:none !important;
  display:grid !important; grid-template-columns:auto minmax(180px,1fr) auto !important;
  align-items:center !important; gap:9px !important; padding:0 !important;
}
.topbar-main-row .studio-plan-title .plan-name-label {display:inline !important; color:var(--text-muted); font:700 12px/1 var(--font-mono); letter-spacing:.12em;}
.topbar-main-row .studio-plan-title .plan-name-input {height:36px !important; min-width:0 !important;}
.topbar-main-row .studio-plan-title .save-state {display:inline-flex !important; height:22px !important; min-width:86px !important; padding:0 8px !important; align-items:center; justify-content:center;}
.topbar-main-row .studio-vehicle-select {flex:0 0 340px !important; min-width:300px !important; display:grid !important; grid-template-columns:auto minmax(0,1fr) !important; align-items:center; gap:8px;}

.topbar-main-row .studio-vehicle-select > label {display:block !important; color:var(--text-muted); font:700 12px/1 var(--font-mono); letter-spacing:.12em; white-space:nowrap;}

.topbar-main-row .studio-mode-switch {flex:0 0 96px !important; width:96px !important;}
.topbar-secondary-row .topbar-unit-tabs {flex:0 0 126px !important; min-width:126px !important; max-width:126px !important; padding:0 !important;}
.topbar-secondary-row .load-unit-tabs {width:126px !important; padding:0 !important; overflow:visible !important;}
.topbar-secondary-row .load-unit-tab {width:126px !important; min-width:126px !important; max-width:126px !important; height:36px !important; min-height:36px !important; padding:5px 8px !important;}
.topbar-secondary-row .load-unit-tab:not(.is-active) {display:none !important;}
.topbar-secondary-row .studio-top-actions {
  flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:flex-end !important;
  gap:6px !important; flex-wrap:nowrap !important; overflow:visible !important; margin:0 !important;
}
.topbar-secondary-row .studio-top-actions button {height:34px !important; padding:6px 10px !important;}
.studio-topbar::before, .studio-topbar::after {
  content: none !important;
  display: none !important;
}

:root { --sscp-topbar-h: 92px; --sscp-sidebar-w: 348px; }

  html, body { height: 100%; overflow: hidden !important; }
  body.studio-body { min-height: 100dvh; }

  .studio-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 120 !important;
    width: 100% !important;
    height: var(--sscp-topbar-h) !important;
    min-height: var(--sscp-topbar-h) !important;
    max-height: var(--sscp-topbar-h) !important;
    
    display: grid !important;

    background: var(--bg) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  .topbar-main-row {
    height: 43px !important;
    min-height: 43px !important;

    flex-wrap: nowrap !important;
  }
  .topbar-secondary-row {
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;

  }

  .topbar-main-row .studio-brand {
    flex: 0 0 196px !important;

  }
  .topbar-main-row .studio-plan-title {
    flex: 0 1 330px !important;
    min-width: 230px !important;
    
    display: grid !important;
    
    gap: 7px !important;
    padding: 0 !important;
    align-items: center !important;
  }
  .topbar-main-row .studio-plan-title .plan-name-input {
    min-width: 0 !important;
    width: 100% !important;
    height: 34px !important;
    padding: 5px 8px !important;
    margin: 0 !important;
  }
  .topbar-main-row .studio-plan-title .save-state {
    
    height: 22px !important;
    padding: 0 7px !important;
    margin: 0 !important;
  }

  .topbar-main-row .studio-vehicle-select {
    flex: 0 1 310px !important;
    min-width: 245px !important;
    
    display: grid !important;
    
    align-items: center !important;
    gap: 7px !important;
  }
  .topbar-main-row .studio-vehicle-select select {
    height: 34px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
  }
  .topbar-main-row .studio-vehicle-select > label, .topbar-main-row .studio-plan-title .plan-name-label {
    display: block !important;
    color: var(--text-muted) !important;
    font: 700 12px/1 var(--font-mono) !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }

  .topbar-main-row .studio-mode-switch {
    flex: 0 0 94px !important;
    
    height: 34px !important;
  }
  .topbar-main-row .studio-mode-switch button {
    min-width: 47px !important;
    height: 30px !important;
  }

  /* Active load unit is selected only through these cards. */
  .topbar-secondary-row .topbar-unit-tabs {
    flex: 1 1 auto !important;
    
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .topbar-secondary-row .load-unit-tabs {
    width: 100% !important;
    height: 38px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }
  .topbar-secondary-row .load-unit-tab, .topbar-secondary-row .load-unit-tab:not(.is-active) {
    display: flex !important;
    flex: 0 0 126px !important;
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 5px 8px !important;
    margin: 0 !important;
    background: var(--panel-bg) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--line-selected) !important;
    color: var(--ink) !important;
  }
  .topbar-secondary-row .load-unit-tab.is-active {
    background: var(--panel-bg) !important;
    border-color: var(--line-active) !important;
    border-left-color: var(--line-active) !important;
    color: var(--ink) !important;
  }
  .topbar-secondary-row .load-unit-tab strong { font-size: 12px !important; }
  .topbar-secondary-row .load-unit-tab span { font-size: 12px !important; }

  .topbar-secondary-row .studio-top-actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    margin: 0 !important;
  }
  .topbar-secondary-row .studio-top-actions button {
    height: 34px !important;
    min-width: 0 !important;
    padding: 5px 9px !important;
    margin: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .topbar-secondary-row .studio-top-actions .cta { padding-inline: 12px !important; }

  /* Viewport shell - no document scroll. */
  main#view.studio-shell {
    width: 100% !important;
    height: calc(100dvh - var(--sscp-topbar-h)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--sscp-topbar-h)) !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) var(--sscp-sidebar-w) !important;
    overflow: hidden !important;
  }
  .studio-main {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  .studio-sidebar {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    border-left: 1px solid var(--line) !important;
  }

  .studio-vehicle-strip {
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  .studio-vehicle-strip .vehicle-dims span { padding: 6px 8px !important; }

  .studio-view {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }
  #preview3dPanel:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #preview3dPanel .studio-scene-toolbar {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 6px 8px !important;
  }
  #preview3dPanel .studio-scene {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #preview3dPanel .preview3d-canvas, .studio-scene .preview3d-canvas {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* 2D scroll happens inside the planner only; navbar and sidebar never move. */
  #planner2dPanel:not([hidden]) {
    display: block !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    padding: 10px !important;
  }
  #planner2dPanel .stage-scroll {
    min-height: 0 !important;
    max-width: 100% !important;
  }
  #planner2dPanel .stage-scroll-yard { min-height: 180px !important; }
.studio-topbar {
    box-sizing: border-box !important;
    
    min-width: 0 !important;
    
  }

  .topbar-main-row {
    display: grid !important;
    
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .topbar-main-row > * { min-width: 0 !important; }
  .topbar-main-row .studio-brand { width: auto !important; min-width: 0 !important; }
  .topbar-main-row .studio-plan-title, .topbar-main-row .studio-vehicle-select { max-width: none !important; }
  .topbar-main-row .studio-plan-title { grid-template-columns: auto minmax(0,1fr) auto !important; }
  .topbar-main-row .studio-vehicle-select { grid-template-columns: auto minmax(0,1fr) !important; }
  .topbar-main-row .studio-plan-title .save-state { min-width: 74px !important; }
  
  .topbar-main-row .studio-mode-switch { width: 92px !important; min-width: 92px !important; }

  .topbar-secondary-row {
    display: grid !important;
    
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .topbar-secondary-row .topbar-unit-tabs, .topbar-secondary-row .load-unit-tabs { min-width: 0 !important; }
  .topbar-secondary-row .studio-top-actions {
    max-width: 100% !important;
    overflow-x: auto !important;
    scrollbar-width: thin;
  }
  .topbar-secondary-row .studio-top-actions button { flex: 0 0 auto !important; }

@media (max-width: 1540px) {
  .topbar-main-row {
    grid-template-columns: minmax(150px, 176px) minmax(180px, 1fr) minmax(210px, .92fr) minmax(150px, .48fr) 70px 88px !important;
  }
  .topbar-main-row .studio-plan-title .plan-name-label, .topbar-main-row .studio-vehicle-select > label {
    display: none !important;
  }
  .topbar-main-row .studio-plan-title, .topbar-main-row .studio-vehicle-select {
    gap: 6px !important;
    grid-template-columns: minmax(0,1fr) auto !important;
  }
  .topbar-main-row .studio-vehicle-select {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

.studio-topbar { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; }
.studio-topbar * { grid-area: auto !important; }

  
  .topbar-main-row, .topbar-secondary-row { grid-template-areas: none !important; }

/* Navbar spacing: controls size to their content, fields have bounded widths. */
.studio-topbar .topbar-main-row > *, .studio-topbar .topbar-secondary-row > * { order: 0 !important; }
.studio-topbar .studio-mode-switch {
  
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  
  width: 112px !important;
  min-width: 112px !important;
  flex: 0 0 112px !important;

}
.studio-topbar .studio-mode-switch button {
  width: 100% !important;
  min-width: 0 !important;
  
  padding: 4px 8px !important;
}

.studio-topbar .studio-top-actions, .studio-topbar .history-actions { gap: 8px !important; }
.studio-topbar .history-actions { flex-shrink: 0 !important; }
.studio-topbar .studio-top-actions button { width: auto !important; }

  :root { --sscp-topbar-h: 108px; }
  .studio-topbar {
    padding: 8px 16px !important;
    grid-template-rows: 42px 42px !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .studio-topbar .topbar-main-row {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    height: 42px !important;
    min-height: 42px !important;
    overflow: visible !important;
  }
  .studio-topbar .topbar-main-row .studio-brand {
    flex: 0 1 160px !important;
    width: 160px !important;
    min-width: 110px !important;
  }
  .studio-topbar .topbar-main-row .studio-plan-title {
    flex: 0 1 250px !important;
    width: 250px !important;
    min-width: 170px !important;
    max-width: 250px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .studio-topbar .topbar-main-row .plan-name-label { display: none !important; }
  .studio-topbar .topbar-main-row .studio-vehicle-select {
    flex: 0 1 200px !important;
    width: 200px !important;
    min-width: 150px !important;
    max-width: 200px !important;
  }
  
  .studio-topbar .topbar-main-row .studio-vehicle-select {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 9px 30px !important;
    gap: 3px !important;
  }
  .studio-topbar .topbar-main-row .studio-vehicle-select > label {
    display: block !important;
    margin: 0 !important;
  }
  .studio-topbar .topbar-main-row select {
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    margin: 0 !important;
  }
  .studio-topbar .topbar-secondary-row {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    height: 42px !important;
    min-height: 42px !important;
    column-gap: 20px !important;
    overflow: visible !important;
  }
  .studio-topbar .topbar-secondary-row .topbar-unit-tabs {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 40% !important;
  }
  .studio-topbar .topbar-secondary-row .load-unit-tabs {
    width: max-content !important;
    max-width: 100% !important;
  }
  .studio-topbar .topbar-secondary-row .studio-top-actions {
    margin-left: auto !important;
    justify-content: flex-end !important;
    overflow: visible !important;
    padding: 2px 0 !important;
  }
  .studio-topbar .topbar-secondary-row .studio-top-actions button {
    height: 36px !important;
    padding: 6px 12px !important;
  }

  .topbar-main-row {
    grid-template-columns: minmax(170px, 200px) minmax(210px, .72fr) minmax(260px, 340px) 96px !important;
  }

  .topbar-secondary-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

.topbar-unit-tabs {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.topbar-unit-tabs .load-unit-tabs {
  display: flex !important;
  flex: 0 1 auto !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: auto !important;
  max-width: min(760px, calc(100vw - 650px)) !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 1px 2px 0 !important;
  scrollbar-width: thin;
}

.load-unit-card {
  position: relative;
  flex: 0 0 auto;

}

.studio-topbar .load-unit-card .load-unit-tab {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
  
  overflow: hidden;
}

.load-unit-card .load-unit-tab strong, .load-unit-card .load-unit-tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.load-unit-card.is-active .load-unit-tab {
  border-color: var(--line-active) !important;
  border-left-color: var(--line-active) !important;
  background: var(--panel-bg) !important;
  color: var(--ink) !important;
}

.load-unit-remove {
  position: absolute;
  z-index: 3;
  
  right: 4px;
  display: grid;
  place-items: center;
  width: 27px;
  min-width: 27px;
  height: 27px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgba(var(--panel-rgb),.58);
  color: var(--text-muted);
  cursor: pointer;
}

.load-unit-remove svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.load-unit-remove:hover:not(:disabled) {
  color: var(--state-danger);
  border-color: var(--state-danger);
  background: var(--danger-bg);
}

.load-unit-remove:disabled {
  opacity: .22;
  cursor: not-allowed;
}

.load-unit-add-btn {
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-selected);
  
  background: var(--panel-bg);
  color: var(--ink);
  font: 700 22px/1 var(--font-mono);
}

.load-unit-add-btn:hover {
  color: var(--text-active);
  border-color: var(--line-active);
  background: var(--surface-active);
}

.add-load-unit-help {
  margin: 8px 0 14px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

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

.load-unit-choice {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0,1fr);
  grid-template-rows: auto auto;
  gap: 4px 10px;
  width: 100%;
  min-height: 72px;
  margin: 0;
  padding: 12px;
  text-align: left;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-selected);
  color: var(--ink);
}

.load-unit-choice:hover {
  border-color: var(--line-active);
  border-left-color: var(--line-active);
  background: var(--panel-bg);
}

.load-unit-choice-type {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 4px 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text-active);
  font: 700 12px/1 var(--font-mono);
}

.load-unit-choice strong {
  align-self: end;
  color: var(--ink);
  font-size: 12px;
}

.load-unit-choice small {
  align-self: start;
  overflow: hidden;
  color: var(--text-muted);
  font: 700 12px/1.35 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.load-unit-card.is-drop-target .load-unit-tab {
  outline: 2px dashed var(--sscp-orange);
  outline-offset: -2px;
  background: var(--surface-active) !important;
}

[hidden] { display: none !important; }
.solver-status { display:flex; align-items:center; gap:16px; padding:16px; background:var(--surface); border:1px solid var(--brass); border-radius:12px; color:var(--ink); }
.solver-status-copy { flex:1 1 240px; min-width:0; line-height:1.5; overflow-wrap:anywhere; }
.solver-status-copy strong, #solverPhase, .solver-status-copy small { display:block; }
.solver-status-copy small { color:var(--text-secondary); margin-top:5px; font-size:13px; }
.solver-status-actions { display:flex; flex:0 0 auto; align-items:center; gap:16px; }
#solverElapsed { font-variant-numeric:tabular-nums; white-space:nowrap; }
#solverCancelBtn { flex:0 0 auto; width:auto; min-width:96px; min-height:44px; margin:0; white-space:nowrap; }
.solver-animation { display:flex; flex:0 0 38px; gap:4px; align-items:end; height:28px; }
.solver-animation i { width:10px; height:15px; background:var(--brass); border-radius:2px; animation:cargo-working 1.2s ease-in-out infinite; }
.solver-animation i:nth-child(2) { animation-delay:.15s; }
.solver-animation i:nth-child(3) { animation-delay:.3s; }
@keyframes cargo-working { 0%, 100% { transform:translateY(0); opacity:.5; } 50% { transform:translateY(-10px); opacity:1; } }
.unit-error { display:inline-flex; width:18px; height:18px; justify-content:center; align-items:center; background:var(--danger-bg); color:white; border-radius:50%; }
.data-report-body, .parse-status { white-space:pre-wrap; overflow-wrap:anywhere; }
.data-report-body { max-height:55vh; overflow:auto; line-height:1.6; }
.parse-status { max-height:240px; overflow:auto; }
.modal-overlay .modal { max-height:90dvh; overflow:auto; }

.cargo-option { display:flex !important; align-items:center; gap:8px; }
.cargo-option input[type=checkbox] { width:18px; height:18px; flex:none; }
/* Keep feedback outside the fixed-height desktop workspace flow. */
.solver-status { position:fixed; left:50%; bottom:16px; transform:translateX(-50%); width:min(720px,calc(100% - 24px)); box-sizing:border-box; margin:0; z-index:150; box-shadow:0 12px 40px #0009; }

.studio-topbar .save-state { max-width:110px; white-space:normal; line-height:1.2; }

/* Main navbar controls use one visual height. Width remains content-driven. */
.studio-topbar .studio-top-actions > button, .studio-topbar .history-actions > button, .studio-topbar .load-unit-add-btn, .studio-topbar .load-unit-card, .studio-topbar .load-unit-card .load-unit-tab {

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.studio-topbar .history-actions > button, .studio-topbar .load-unit-add-btn {
  width: var(--sscp-navbar-control-h) !important;
  min-width: var(--sscp-navbar-control-h) !important;
  padding: 0 !important;
}

.studio-topbar .studio-top-actions > button {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 3D / 2D buttons follow the same height instead of using a smaller inner control. */
.studio-topbar .studio-mode-switch {

  padding: 0 !important;
  gap: 6px !important;
  border: 0 !important;
  background: transparent !important;
}
.studio-topbar .studio-mode-switch button {

  margin: 0 !important;
}

.topbar-unit-tabs .load-unit-tabs {
  padding-bottom: 3px !important;
}

.load-unit-card {
  height: var(--sscp-navbar-control-h) !important;
  min-width: 248px;
  width: 248px;
  overflow: visible;
}

.studio-topbar .load-unit-card .load-unit-tab {
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 5px 74px 5px 9px !important;
  border-radius: 4px;
  line-height: 1.08;
}

.studio-topbar .load-unit-card .load-unit-tab strong { line-height: 1.1; font-size: 13px !important; }
.studio-topbar .load-unit-card .load-unit-tab span { line-height: 1.05; font-size: 13px !important; }

.load-unit-lock {
  position: absolute; z-index: 3; right: 35px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 32px; min-width: 32px; height: 32px; margin: 0; padding: 0;
  color: var(--text-secondary); background: var(--control-bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.load-unit-lock svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.load-unit-lock:hover { background: var(--control-hover); }
.load-unit-lock[aria-pressed="true"] { color: var(--text-active); background: var(--surface-active); border-color: var(--line-active); }
.load-unit-lock:active { transform: translateY(-50%); }
.studio-topbar .load-unit-card.is-auto-locked .load-unit-tab span { color: var(--state-warning) !important; }
.auto-load-summary { flex: 1 1 100%; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.4; }

.load-unit-remove {
  top: 50%;
  transform: translateY(-50%);
}

.load-unit-add-btn {
  border-radius: 4px;
  font-size: 20px;
}

#editQuantityWrap[hidden], #editQuantityHelp[hidden] { display: none !important; }

.pallet-editor-modal .analysis-note { margin: 0; }

.studio-sidebar {
  
  flex-direction: column;
  gap: 12px;

}

.sidebar-section {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-bg);
}

.analysis-panel { order: 1; }

.problems-panel { order: 3; }
.cargo-panel { order: 4; }
.unplaced-panel { order: 5; }

.analysis-panel .metric-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "meta value";
  gap: 3px 10px;
  padding: 10px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
}

.analysis-panel .metric-card span { grid-area: label; }
.analysis-panel .metric-card small { grid-area: meta; margin: 0; }
.analysis-panel .metric-card strong {
  grid-area: value;
  align-self: center;
  margin: 0;
  font-size: 15px;
  text-align: right;
}

.cargo-entry-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.cargo-entry-actions button {
  min-height: 38px;
  font-size: 12px;
  border-radius: 8px;
}

#toggleImportBtn {
  border-color: var(--text-muted);
  background: var(--panel-bg);
  color: var(--ink);
}

.cargo-filterbar {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.cargo-filterbar input, .cargo-filterbar select {
  margin: 0;
}

.studio-sidebar .cargo-list {
  gap: 8px;
}

.cargo-row {
  border-radius: 8px;
}

.studio-sidebar .cargo-row {
  grid-template-columns: 24px minmax(0,1fr) auto 26px 26px 26px !important;
  gap: 6px;
  padding: 8px;
  background: var(--panel-bg);
  border-color: var(--text-muted);
}

.cargo-num {
  width: 24px;
  height: 24px;
  font-size: 12px;
  border-radius: 6px;
}

.problems-panel .problem-list {
  display: grid;
  gap: 8px;
}

.problems-panel .problem-item {
  border-radius: 8px;
}

main#view.studio-shell {
  grid-template-columns: minmax(0, 1fr) 312px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.studio-sidebar {
  display: block;
  padding: 0;
  background: var(--panel-bg);
  border-left-color: var(--text-muted);
}

.studio-sidebar .sidebar-section {
  margin: 0;
  padding: 14px 14px 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.studio-sidebar .sidebar-title, .hansa-section-title {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font: 500 12px/1.2 var(--font-sans);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.hansa-section-title {
  color: var(--text-secondary);
}

.hansa-analysis .analysis-metric {
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  border: 0;
}

.hansa-analysis .analysis-metric-row {

  min-width: 0;
}

.hansa-analysis .analysis-metric-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text-secondary);
  font: 500 12px/1.2 var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
}

.hansa-analysis .analysis-metric strong {
  margin: 0;
  color: var(--state-ok);
  font: 700 12px/1 var(--font-mono);
  white-space: nowrap;
}

.hansa-analysis .analysis-metric small {
  margin: 0;
  color: var(--text-secondary);
  font: 700 12px/1 var(--font-mono);
  white-space: nowrap;
}

.analysis-icon {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--text-muted);
}

.analysis-icon-weight::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 3px;
  height: 1px;
  background: currentColor;
  box-shadow: 5px -3px 0 -0.25px currentColor;
}

.analysis-icon-weight::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 3px;
  height: 9px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: skewX(-22deg);
}

.analysis-icon-volume {
  width: 12px;
  height: 12px;
  margin-left: 1px;
  border: 1px solid currentColor;
  transform: rotate(30deg) skew(-5deg, -5deg) scale(.72);
}

.analysis-progress {
  position: relative;
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.analysis-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--state-ok);
  transition: width .18s ease;
}

.analysis-metric.is-warning .analysis-progress > span { background: var(--state-warning); }
.analysis-metric.is-danger .analysis-progress > span { background: var(--state-danger); }
.analysis-metric.is-warning strong { color: var(--state-warning); }
.analysis-metric.is-danger strong { color: var(--state-danger); }

.analysis-divider {
  height: 1px;
  margin: 10px 0 11px;
  background: var(--control-bg);
}

.analysis-subtitle {
  margin: 0 0 10px;
  color: var(--text-muted);
  font: 500 12px/1.2 var(--font-sans);
}

.balance-row + .balance-row {
  margin-top: 11px;
}

.balance-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

.balance-copy small {
  color: var(--text-secondary);
  font-size: 12px;
}

.balance-copy strong {
  color: var(--state-ok);
  font: 700 12px/1 var(--font-mono);
}

.balance-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: var(--control-bg);
}

.balance-track-longitudinal {
  background: linear-gradient(to right, var(--control-bg) 0 40%, var(--control-bg) 40% 60%, var(--control-bg) 60% 100%);
}

.balance-track-lateral {
  background: linear-gradient(to right, var(--control-bg) 0 45%, var(--control-bg) 45% 55%, var(--control-bg) 55% 100%);
}

.balance-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid var(--state-ok);
  border-radius: 50%;
  background: var(--ok-bg);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(85,166,99,.3);
}

.hansa-problems .problem-list {
  gap: 7px;
}

.hansa-problems .problem-item {
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.hansa-problems .problem-item > span {
  width: 16px;
  height: 16px;
  margin-top: 0;
  background: transparent;
  font-size: 12px;
}

.hansa-problems .problem-item p {
  margin: 0;
  color: var(--text-active);
  font-size: 12px;
  line-height: 1.25;
}

.hansa-problems .problem-item.is-error p { color: var(--state-danger); }
.hansa-problems .problem-item.is-info p { color: var(--text-active); }
.hansa-problems .problem-item.is-ok p { color: var(--text-muted); }
.hansa-problems .problem-item.is-ok > span { color: var(--text-secondary); }
.hansa-problems #problemCount.is-ok { color: inherit; border: 0; }

.hansa-cargo .cargo-entry-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0 0 10px;
}

.hansa-cargo .cargo-entry-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 31px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.hansa-cargo #toggleImportBtn {
  color: var(--ink);
  background: var(--panel-bg);
  border: 1px solid var(--line);
}

.hansa-cargo #addPalletBtn {
  color: var(--ink-on-light);
  background: var(--action-light);
  border-color: var(--action-light);
}

.hansa-cargo #addPalletBtn:hover {
  background: var(--action-light);
  border-color: var(--line-selected);
}

.cargo-filter-drawer {
  margin: 0 0 7px;
  border: 0;
}

.cargo-filter-drawer > summary {
  cursor: pointer;
  min-height: 32px;
  align-content: center;
  color: var(--text-muted);
  font-size: 12px;
  text-align: right;
  list-style: none;
}

.cargo-filter-drawer > summary::-webkit-details-marker { display: none; }
.cargo-filter-drawer > summary::before { content: "+ "; }
.cargo-filter-drawer[open] > summary::before { content: "− "; }

.cargo-filter-drawer .cargo-filterbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 7px 0 10px;
}

.cargo-filter-drawer .cargo-filterbar input {
  grid-column: 1 / -1;
}

.cargo-filter-drawer .cargo-filterbar input, .cargo-filter-drawer .cargo-filterbar select {
  min-width: 0;
  height: 30px;
  margin: 0;
  padding: 5px 7px;
  font-size: 12px;
}

.hansa-cargo .cargo-list-head {
  padding: 5px 0 7px;
  border-top: 0;
  color: var(--text-muted);
  font-size: 12px;
}

.hansa-cargo .cargo-list {
  gap: 3px;
}

.studio-sidebar .hansa-cargo .cargo-row {
  
  gap: 7px;
  min-height: 39px;
  padding: 5px 4px 5px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-left: 0;
  border-radius: 5px;
}

.studio-sidebar .hansa-cargo .cargo-row:hover, .studio-sidebar .hansa-cargo .cargo-row.is-selected {
  background: var(--surface-selected);
  border-color: var(--line-selected);
}

.studio-sidebar .hansa-cargo .cargo-num {
  width: 11px;
  height: 11px;
  align-self: start;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--cargo-accent, var(--control-hover));
  color: transparent;
  font-size: 0;
}

.studio-sidebar .hansa-cargo .cargo-main strong {
  color: var(--text-primary);
  font: 500 14px/1.35 var(--font-sans);
}

.studio-sidebar .hansa-cargo .cargo-main span {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.studio-sidebar .hansa-cargo .cargo-weight.cargo-status-chip {
  min-width: 24px;
  padding: 4px 5px;
  border-radius: 4px;
  background: var(--control-bg);
  color: var(--text-secondary);
  font: 500 12px/1 var(--font-mono);
  text-align: center;
}

.unplaced-panel .sidebar-panel-head {
  margin-bottom: 8px;
}

.hansa-analysis .analysis-metric.metric-card {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  gap: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.hansa-analysis .analysis-metric.metric-card span, .hansa-analysis .analysis-metric.metric-card strong, .hansa-analysis .analysis-metric.metric-card small {
  grid-area: auto !important;
  align-self: auto !important;
  text-align: initial !important;
}

.hansa-analysis .analysis-metric.metric-card small { white-space: normal; overflow-wrap: anywhere; }

.hansa-analysis .analysis-metric-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 40px !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100%;
}

.hansa-analysis .analysis-metric-row > strong, .hansa-analysis .analysis-metric-row > small {
  justify-self: end;
}

.hansa-analysis .analysis-progress > span {
  grid-area: auto !important;
}

/* POZYCJE acts as a real collapsible section instead of only the filters being collapsible. */
.hansa-cargo > summary.hansa-section-title {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.hansa-cargo > summary.hansa-section-title::-webkit-details-marker {
  display: none;
}

.hansa-cargo > summary.hansa-section-title::after {
  content: "−";
  flex: 0 0 auto;
  color: var(--text-muted);
  font: 700 14px/1 var(--font-mono);
}

.hansa-cargo:not([open]) > summary.hansa-section-title {
  margin-bottom: 0;
}

.hansa-cargo:not([open]) > summary.hansa-section-title::after {
  content: "+";
}

.hansa-cargo-body {
  min-width: 0;
}

/* Restore the shape selector next to the lock control. */
.studio-sidebar .hansa-cargo .cargo-row {
  grid-template-columns: 13px minmax(0, 1fr) auto !important;
}

.studio-sidebar .hansa-cargo .cargo-mini-action, .studio-sidebar .hansa-cargo .lock-toggle, .studio-sidebar .hansa-cargo .shape-toggle {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: var(--control-bg) !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
}

.studio-sidebar .hansa-cargo .shape-toggle:hover, .studio-sidebar .hansa-cargo .lock-toggle:hover, .studio-sidebar .hansa-cargo .cargo-mini-action:hover {
  color: var(--ink) !important;
  background: var(--control-hover) !important;
}

.studio-sidebar .hansa-cargo .shape-toggle.is-active {
  color: var(--text-active) !important;
  border-color: var(--line-active) !important;
  background: var(--surface-active) !important;
}

.studio-sidebar .hansa-cargo .cargo-row.is-locked .lock-toggle, .studio-sidebar .hansa-cargo .lock-toggle.is-active {
  color: var(--text-active) !important;
}

/* Give the load-unit card actual vertical breathing room. The previous 42px card plus
   padding sat inside a 42px row and was clipped by legacy overflow rules. */
:root { --sscp-navbar-control-h: 40px; }

.studio-topbar {
  min-height: 104px !important;
  overflow: visible !important;
  padding-bottom: 7px !important;
}

.studio-topbar .topbar-secondary-row {
  height: 48px !important;
  min-height: 48px !important;
  overflow: visible !important;
  align-items: center !important;
}

.studio-topbar .topbar-secondary-row .topbar-unit-tabs {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  overflow: visible !important;
  align-items: center !important;
}

.studio-topbar .topbar-secondary-row .load-unit-tabs {
  height: 46px !important;
  min-height: 46px !important;
  padding: 3px 1px 3px 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
}

.studio-topbar .load-unit-card, .studio-topbar .load-unit-card .load-unit-tab, .studio-topbar .load-unit-add-btn, .studio-topbar .studio-top-actions > button, .studio-topbar .history-actions > button, .studio-topbar .studio-mode-switch, .studio-topbar .studio-mode-switch button {
  height: var(--sscp-navbar-control-h) !important;
  min-height: var(--sscp-navbar-control-h) !important;
  box-sizing: border-box !important;
}

.studio-topbar .load-unit-card {
  margin: 0 !important;
  overflow: visible !important;
}

.studio-topbar .load-unit-card .load-unit-tab {
  margin: 0 !important;
}

.studio-topbar .load-unit-remove {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* 0.12.6: focused utilities and operation feedback. */
.editor-error {color:var(--state-danger);min-height:1.4em;margin:8px 0;}
#deletePalletBtn {color:var(--state-danger);}
#clearFiltersBtn {margin:4px 0 10px;}
.task-status {position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;gap:16px;background:rgba(var(--panel-rgb),.94);color:var(--ink);}
.task-status[hidden] {display:none;}
.task-spinner {width:26px;height:26px;border:3px solid var(--line-selected);border-top-color:var(--line-active);border-radius:50%;animation:task-spin .85s linear infinite;}
@keyframes task-spin {to {transform:rotate(360deg);}}
.studio-sidebar .hansa-cargo .cargo-row .cargo-num {grid-column:1;grid-row:1;}
.studio-sidebar .hansa-cargo .cargo-row .cargo-main {grid-column:2;grid-row:1;}
.studio-sidebar .hansa-cargo .cargo-row .cargo-status-chip {grid-column:3;grid-row:1;}
.studio-sidebar .hansa-cargo .cargo-row .cargo-reason {grid-column:2 / -1;grid-row:2;white-space:normal;font-size:12px;line-height:1.35;color:var(--text-secondary);}
@media (prefers-reduced-motion:reduce) {.task-spinner, .solver-animation i {animation:none;}}

.scene-toolbar-group {flex-wrap:wrap;}

/* Operational controls and shared state colours. */
.cargo-main.cargo-select {
  display: block;
  width: 100%; min-width: 0; margin: 0; padding: 2px 0;
  border: 0; border-radius: 2px; background: transparent;
  text-align: left; color: var(--text-primary);
  text-transform: none; letter-spacing: normal;
}
.cargo-main.cargo-select:hover { background: transparent; }
.studio-sidebar .hansa-cargo .cargo-main strong { white-space: normal; overflow-wrap: anywhere; }
.cargo-row-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cargo-row-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.keyboard-help { margin: 8px 0 12px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.variant-compare-controls label { min-width: 0; color: var(--text-secondary); font-size: 14px; }
.variant-compare-controls select { margin-top: 6px; }
.modal-buttons { flex-wrap: wrap; }
.modal-buttons button { flex: 1 1 120px; width: auto; }
.studio-sidebar .hansa-cargo .cargo-row .cargo-reason { font-size: 13px; }
.hansa-analysis .analysis-metric strong { font-size: 16px; }
.hansa-analysis .analysis-metric small, .balance-copy small { font-size: 13px; }
.balance-copy { font-size: 13px; }
.analysis-subtitle, .hansa-analysis .analysis-metric-label { font-size: 13px; }
.hansa-cargo .cargo-entry-actions button { min-height: 40px; font-size: 14px; }
.cargo-filter-drawer .cargo-filterbar input, .cargo-filter-drawer .cargo-filterbar select { height: auto; min-height: 36px; font-size: 14px; }
.studio-topbar .topbar-secondary-row { flex-wrap: wrap !important; height: auto !important; }
.studio-topbar .topbar-secondary-row .studio-top-actions { flex-wrap: wrap !important; }
.studio-topbar .topbar-secondary-row .topbar-unit-tabs { flex: 1 1 360px !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 60px !important; }
.studio-topbar .topbar-secondary-row .load-unit-tabs { flex: 1 1 0% !important; width: 0 !important; min-width: 0 !important; max-width: calc(100% - 48px) !important; height: 60px !important; min-height: 60px !important; }

  body.studio-body { display: flex !important; flex-direction: column; height: 100dvh; }
  .studio-topbar { flex: 0 0 auto; height: auto !important; max-height: none !important; grid-template-rows: auto auto !important; }
  main#view.studio-shell { flex: 1 1 auto; height: auto !important; max-height: none !important; }

/* 0.12.13: a compact brand and consistent baselines. */
.studio-topbar .studio-brand { flex-direction: column; align-items: flex-start; gap: 2px; }
.studio-topbar .studio-brand .sscp-brand-copy { display: block; border: 0; padding: 0; }
.studio-topbar .studio-brand .sscp-brand-copy small { display: block; margin: 0; white-space: nowrap; letter-spacing: 0; line-height: 1.2; }
.studio-topbar .load-unit-add-btn { margin: 0 !important; align-self: center !important; }
.studio-topbar .topbar-main-row { height: auto !important; min-height: 42px !important; }
.cargo-list-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.cargo-selection-marquee { position: fixed; z-index: 9000; pointer-events: none; border: 2px solid var(--brass); background: rgba(var(--accent-rgb),.16); }
.cargo-context-menu { position: fixed; z-index: 9500; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; border: 1px solid var(--line-selected); border-radius: 6px; background: var(--panel-bg); color: var(--text-primary); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.cargo-context-menu[hidden], .cargo-selection-marquee[hidden] { display: none; }
.cargo-context-title { margin: 0; padding: 8px 10px; color: var(--text-secondary); font-size: 13px; }
.cargo-context-menu button { display: block; width: 100%; min-height: 36px; margin: 0; padding: 8px 10px; border: 0; text-align: left; white-space: normal; line-height: 1.35; font-size: 14px; background: transparent; color: var(--text-primary); }
.cargo-context-menu button:hover:not(:disabled), .cargo-context-menu button:focus-visible { background: var(--control-hover); }
.cargo-context-menu button:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.cargo-context-menu .cargo-context-delete { color: var(--state-danger); }
.cargo-context-menu button:disabled { opacity: .55; cursor: default; }

.cargo-list-head { flex-wrap: wrap; gap: 8px; }
#cargoActionsBtn { font-size: 13px; text-transform: none; letter-spacing: normal; }
#cargoActionsBtn, #clearCargoBtn { min-height: 32px; }

.studio-topbar .topbar-secondary-row .load-unit-tabs { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin; }
.studio-topbar .load-unit-add-btn { flex: 0 0 40px; }

/* 0.12.13: choose a load unit beside the add button. */
.load-unit-picker { position: fixed; z-index: 9600; max-width: calc(100vw - 16px); }
.load-unit-picker .add-load-unit-modal { width: 100%; max-width: none; max-height: inherit !important; margin: 0; padding: 14px; border-radius: 6px; background: var(--panel-bg); border-color: var(--line-selected); }
.load-unit-picker .modal-head { margin-bottom: 6px; }
.load-unit-picker .modal-head h2 { font-size: 18px; line-height: 1.3; text-transform: none; }
.load-unit-picker .add-load-unit-help { margin: 0 0 10px; font-size: 13px; }
.load-unit-picker .load-unit-choice-grid { grid-template-columns: minmax(0,1fr); gap: 6px; }
.load-unit-picker .load-unit-choice { min-width: 0; padding: 10px; min-height: 44px; border-left-width: 1px; }
.load-unit-picker .load-unit-choice strong { font-size: 14px; }
.load-unit-picker .load-unit-choice small { font-size: 13px; white-space: normal; overflow-wrap: anywhere; }

/* Pallet editor: keep essential fields compact and actions outside the scroll area. */
#palletEditorModal.modal-overlay { padding:12px !important; overflow:hidden; }
#palletEditorModal .pallet-editor-modal { display:flex; flex-direction:column; gap:12px; width:min(680px,calc(100vw - 24px)); max-width:680px; max-height:calc(100dvh - 24px) !important; padding:16px; overflow:hidden; }
#palletEditorModal .modal-head, #palletEditorModal .modal-buttons { flex:0 0 auto; margin:0; }
#palletEditorModal .modal-head h2 { margin:0; font-size:20px; line-height:1.4; }
#palletEditorModal .pallet-editor-body { display:flex; flex-direction:column; gap:10px; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:4px; }
#palletEditorModal .pallet-editor-fields { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px 10px; }
#palletEditorModal .pallet-editor-fields > label { grid-column:span 2; }
#palletEditorModal .pallet-editor-fields > .editor-half { grid-column:span 3; }
#palletEditorModal .pallet-editor-fields > .editor-full { grid-column:1 / -1; }
#palletEditorModal .form-grid label { min-width:0; gap:4px; text-transform:none; letter-spacing:0; line-height:1.35; color:var(--text-secondary); }
#palletEditorModal .form-grid input:not([type="checkbox"]), #palletEditorModal .form-grid select { min-height:44px; padding:8px 10px; }
#palletEditorModal .form-grid textarea { min-height:64px; padding:8px 10px; }
#palletEditorModal .pallet-editor-options { flex:0 0 auto; border-top:1px solid var(--line); }
#palletEditorModal .pallet-editor-options > summary { min-height:44px; padding:10px 0; color:var(--ink); font-size:14px; cursor:pointer; }
#palletEditorModal .pallet-editor-options .two-col { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 10px; }
#palletEditorModal .span-2 { grid-column:1 / -1; }
#palletEditorModal .cargo-option { min-height:44px; font-weight:500; }
#palletEditorModal .analysis-note { margin:0; border:0; padding:0; color:var(--text-secondary); line-height:1.45; }
#palletEditorModal .editor-error { margin:0; }
#palletEditorModal #shapeHelp:empty, #palletEditorModal .editor-error:empty { display:none; }
#palletEditorModal .modal-buttons { gap:8px; }
#palletEditorModal .modal-buttons button { min-height:44px; padding:8px 12px; }

.task-status { flex-wrap:wrap; align-content:center; padding:20px; }
.task-status strong { max-width:calc(100vw - 40px); overflow-wrap:anywhere; }
#cancelTaskBtn { width:auto; min-height:44px; margin:0; flex:0 0 auto; }

/* 0.12.25: cargo workflow and compact operational controls. */
.cargo-search { width:100%; min-height:44px; }
.selection-tools { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.selection-tools button,.group-select { width:auto; min-height:44px; margin:0; }
.cargo-group { min-width:0; border-top:1px solid var(--line); padding:10px 0; }
.cargo-group > summary { min-height:44px; cursor:pointer; overflow-wrap:anywhere; line-height:1.45; }
#visibleSelectionStatus,#filterSummary { overflow-wrap:anywhere; line-height:1.45; }
.analysis-details > summary,.keyboard-help-drawer > summary,.plan-info > summary { min-height:44px; padding:10px 0; cursor:pointer; }
.solver-result { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 12px; padding:10px; border:1px solid var(--line); background:var(--surface); }
.solver-result[hidden] { display:none; }
.solver-result span { flex:1 1 220px; }
.solver-result button { width:auto; margin:0; min-height:44px; }
#palletEditorModal .modal-buttons { flex-wrap:wrap; }
.analysis-metric > small { display:block; line-height:1.4; font-size:13px; color:var(--text-secondary); }

/* 0.12.27: regular-width Roboto; deliberate hierarchy at 400 / 500 / 700. */
body, p, .muted, .keyboard-help, .analysis-note, .cargo-reason,
.cargo-main span, .save-state, .project-meta-summary,
.modal small, .problem-item p { font-weight:400; }
input, select, textarea { font-weight:400 !important; }
button, .studio-topbar button, .studio-scene-toolbar button,
.cargo-context-menu button, .cargo-mini-action { font-weight:500 !important; }
label, summary, .field-label, .sidebar-title,
.metric-card span, .scene-toolbar-label { font-weight:500; }
h1, h2, h3, strong, b, .metric-card strong,
.analysis-metric-row strong, .vehicle-dims b { font-weight:700; }
.studio-topbar .load-unit-tab span { font-weight:400; }
.studio-topbar .load-unit-tab strong { font-weight:700; }
/* Allow regular-width text to wrap inside existing controls. */
.studio-topbar .studio-top-actions > button { white-space:normal; line-height:1.3; height:auto !important; min-height:40px; }

/* 2D labels: keep orientation outside cargo and reserve space for status icons. */
.stage-direction-line {display:flex; justify-content:space-between; gap:16px; padding:4px 8px; color:var(--text-muted); font-size:12px; font-weight:700;}
.pallet {gap:4px;}
.pallet-heading {display:flex; flex-wrap:wrap; align-items:center; align-content:flex-start; gap:4px; min-width:0; overflow:hidden;}
.pallet-heading > strong {flex:1 1 64px; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.15;}
.pallet-heading .pallet-lock-badge, .pallet-heading .pallet-stack-badge {position:static; flex:0 0 auto; min-width:0; height:16px; margin:0; padding:0 2px; box-sizing:border-box;}
.pallet-heading .pallet-lock-badge {width:18px;}
.pallet-lock-badge svg {display:block; width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2;}
.pallet-details {flex:0 0 auto; min-width:0; margin-top:auto;}
.pallet-dimensions {display:flex; flex-wrap:wrap; column-gap:2px; line-height:1.2;}
.pallet .pallet-dimensions span {white-space:normal; overflow-wrap:anywhere; line-height:1.2;}
.pallet .pallet-mass {display:block; white-space:nowrap; line-height:1.25; opacity:1; font-variant-numeric:tabular-nums;}
.pallet.is-round .pallet-heading, .pallet.is-round .pallet-details {max-width:88%; width:100%;}
.pallet.is-round .pallet-mass {max-width:none;}

/* Entry directions share the name row; native buttons provide Tab/Space/Enter. */
#palletEditorModal .cargo-name-row { display:grid; grid-template-columns:minmax(0,1fr) 84px; grid-template-rows:auto 76px; column-gap:10px; }
#palletEditorModal .cargo-name-row > label { grid-column:1; margin:0; }
#palletEditorModal .cargo-name-row > input { grid-column:1; grid-row:2; align-self:center; margin:0; }
#palletEditorModal .entry-sides-picker { grid-column:2; grid-row:2; align-self:center; justify-self:center; display:grid; grid-template-columns:24px 28px 24px; grid-template-rows:22px 32px 22px; align-items:center; justify-items:center; }
#palletEditorModal .entry-side { width:24px; height:24px; min-height:24px; padding:2px; margin:0; border-radius:2px; color:var(--ink); }
#palletEditorModal .entry-side[aria-pressed="true"] { background:var(--ok-bg); color:var(--state-ok); border-color:var(--state-ok); }
#palletEditorModal .entry-side[aria-pressed="false"] { background:var(--danger-bg); color:var(--state-danger); border-color:var(--state-danger); border-style:dashed; }
#palletEditorModal .entry-side:focus-visible { outline:2px solid var(--brass); outline-offset:2px; z-index:1; }
#palletEditorModal .entry-side svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#palletEditorModal .entry-front { grid-area:1 / 2; }
#palletEditorModal .entry-right { grid-area:2 / 3; }
#palletEditorModal .entry-rear { grid-area:3 / 2; }
#palletEditorModal .entry-left { grid-area:2 / 1; }
#palletEditorModal .entry-pallet { grid-area:2 / 2; width:24px; height:34px; fill:var(--surface); stroke:var(--ink); stroke-width:1.2; }

/* Bulk import is a desktop dialog; its draft is separate from the loading plan. */
#importModal .bulk-import-modal { display:flex;flex-direction:column;gap:10px;width:max-content;min-width:min(580px,calc(100vw - 32px));max-width:min(1440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:16px;overflow:hidden; }
#importModal .modal-head,#importModal .modal-buttons { flex:0 0 auto;margin:0; }
#importModal .modal-head h2 { margin:0;font-size:20px; }
#importModal .bulk-import-body { min-width:0;min-height:0;overflow:auto;scrollbar-gutter:stable; }
#importModal .import-assignment { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:10px; }
#importModal label { color:var(--ink);font-size:13px;text-transform:none;letter-spacing:0; }
#importModal input,#importModal textarea { font:inherit;color:var(--ink); }
#importModal .import-assignment input { width:100%;min-width:0;min-height:36px;padding:7px 9px; }
#importModal .bulk-paste-row { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:4px; }
#importModal #packingInput { height:36px;min-height:36px;max-height:36px;margin:0;padding:7px 9px;resize:none;overflow:hidden;white-space:nowrap;font-size:13px; }
#importModal .bulk-paste-row button { width:auto;min-height:36px;white-space:nowrap; }
#importModal .bulk-import-toolbar { display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:10px 0 7px; }
#importModal .bulk-import-toolbar > span { flex:1 1 180px;min-width:0;color:var(--text-secondary);font-size:12px; }
#importModal .bulk-import-toolbar > div { display:flex;flex-wrap:wrap;gap:6px; }
#importModal .bulk-import-toolbar button { width:auto;min-height:30px;padding:5px 8px;white-space:nowrap; }
#importModal .bulk-import-grid { overflow-x:auto; }
#importModal table { table-layout:auto;width:max-content;min-width:0;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums; }
#importModal th,#importModal td { border:1px solid var(--line);padding:0;text-align:left; }
#importModal th { background:var(--surface);padding:5px 6px;font-weight:500;white-space:nowrap; }
#importModal th small { display:block;color:var(--text-secondary);font-size:11px; }
#importModal .import-row-number { width:28px;text-align:center;color:var(--text-secondary); }
#importModal .import-row-actions { width:auto;white-space:nowrap;text-align:center; }
/* Hidden text sizes the column; the editable field fills the entire cell. */
#importModal .import-cell { position:relative; }
#importModal .import-cell::before { content:attr(data-import-value);display:block;visibility:hidden;pointer-events:none;white-space:pre;height:36px;padding:7px 8px;box-sizing:border-box; }
#importModal td input { position:absolute;inset:0;display:block;width:100%;min-width:0;height:100%;min-height:36px;margin:0;padding:7px 6px;border:0;box-shadow:none;background:var(--panel-bg);font-size:13px; }
#importModal td input[data-import-key="length"],#importModal td input[data-import-key="width"],#importModal td input[data-import-key="height"],#importModal td input[data-import-key="weight"] { text-align:right; }
#importModal td input:focus-visible { outline:2px solid var(--brass);outline-offset:-2px; }
#importModal td input[aria-invalid="true"] { box-shadow:inset 0 0 0 1px var(--state-danger,var(--state-bad)); }
#importModal .import-delete { display:grid;place-items:center;width:28px;min-width:28px;height:28px;min-height:28px;margin:3px auto;padding:4px;color:var(--state-danger,var(--state-bad)); }
#importModal .import-delete svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
#importModal .import-delete.is-undo { color:var(--brass); }
#importModal td:has(.import-entry-toggle) { padding:3px 5px; }
#importModal .import-entry-toggle { width:auto;min-width:94px;max-width:100%;min-height:28px;margin:0;padding:4px 6px;white-space:nowrap;box-sizing:border-box; }
#importModal .import-entry-toggle[aria-pressed="true"],#importModal #importEntryAllBtn[aria-pressed="true"] { background:var(--surface-active);color:var(--text-active);border-color:var(--line-active); }
#importModal .import-shape-cell { padding:3px 5px;text-align:center; }
#importModal .import-shape-toggle { display:grid;place-items:center;width:28px;min-width:28px;height:28px;min-height:28px;margin:0 auto;padding:4px; }
#importModal .import-shape-toggle svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7; }
#importModal .import-shape-toggle[aria-pressed="true"] { background:var(--surface-active);color:var(--text-active);border-color:var(--line-active); }
#importModal .import-empty { padding:18px;text-align:center;color:var(--text-secondary); }
#importModal .bulk-import-totals { display:flex;justify-content:space-between;gap:12px;padding-top:8px;color:var(--text-secondary);font-size:12px;font-variant-numeric:tabular-nums; }
#importModal .parse-status { margin:6px 0 0;white-space:pre-line;font-size:12px; }
#importModal .parse-status:empty { display:none; }
#importModal .modal-buttons { display:flex;align-items:center;gap:8px; }
#importModal .modal-buttons button { flex:0 0 auto;width:auto;min-width:110px;min-height:34px;padding:7px 14px; }
#importModal .bulk-import-destination { margin-right:auto;color:var(--text-secondary);font-size:12px; }
#importModal.is-bulk-edit .import-assignment,#importModal.is-bulk-edit .bulk-paste-row,#importModal.is-bulk-edit #importPasteLabel { display:none; }
/* The table sets the dialog width; the controls fit within it. */
#importModal .import-assignment,#importModal .bulk-paste-row,#importModal .bulk-import-toolbar { contain:inline-size; }
#importModal .import-assignment label { min-width:0; }
#selectedCargoDetails .selected-cargo-actions { display:flex;gap:5px;margin-top:8px; }
#selectedCargoDetails .selected-cargo-actions button:not([data-edit-selection]) { display:grid;place-items:center;width:28px;min-width:28px;min-height:28px;height:28px;margin:0;padding:4px; }
#selectedCargoDetails .selected-cargo-actions svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
#selectedCargoDetails .selected-cargo-actions [data-edit-selection] { display:block;flex:1 1 auto;width:100%;min-width:0;min-height:30px;height:auto;padding:5px 8px;white-space:normal;overflow-wrap:anywhere;line-height:1.35; }
.solver-result { flex-wrap:wrap; }
.height-comparison-controls { display:flex;gap:4px; }
.height-comparison-controls button { width:auto;white-space:nowrap; }
.height-comparison-controls button[aria-pressed="true"] { background:var(--surface-active);color:var(--text-active);border-color:var(--line-active); }
.securing-review-tag { display:inline-block;padding:0 3px;border:1px solid var(--state-warning);color:var(--state-warning);font-style:normal; }
#selectedCargoDetails .securing-review-text { color:var(--state-warning); }