:root {
  --bg: #0b1118; --panel: #111a24; --panel-2: #162230; --border: #263545;
  --text: #edf4fa; --muted: #8ca0b2; --accent: #4db3ff; --ok: #43d39e;
  --warn: #ffbd59; --danger: #ff6b78; --trailer: #dbe4ea; --trailer-line: #a9bac5;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 1080px; background: var(--bg); color: var(--text); font: 13px/1.4 Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select { font: inherit; }
.topbar { height: 72px; padding: 12px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: #0d151e; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { border-radius: 7px; }
h1, h2, p { margin: 0; }
h1 { font-size: 17px; }
h2 { font-size: 15px; }
.brand p, .subtitle { color: var(--muted); font-size: 11px; }
.limits { display: flex; gap: 8px; }
.limits span { color: var(--muted); border: 1px solid var(--border); background: var(--panel); padding: 7px 10px; border-radius: 8px; font-size: 10px; }
.limits strong { display: block; color: var(--text); font-size: 11px; }
.app { height: calc(100vh - 72px); display: grid; grid-template-columns: 330px 1fr; gap: 14px; padding: 14px; }
.sidebar, .workspace { min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.sidebar { overflow: auto; }
.workspace { overflow: hidden; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 13px; }
.compact-upload, .summary-card, .selected-card { padding: 14px; }
.compact-upload { display: grid; grid-template-columns: 1fr 10px; align-items: center; gap: 8px 12px; }
.upload-btn { width: 100%; }
.compact-upload .message, .compact-upload .progress { grid-column: 1 / -1; margin: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.eyebrow { display: block; color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 2px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(67,211,158,.12); }
.status-dot.busy { background: var(--warn); box-shadow: 0 0 0 4px rgba(255,189,89,.12); }
.status-dot.error { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,107,120,.12); }
.views-grid.drag { outline: 2px dashed var(--accent); outline-offset: -7px; background: rgba(77,179,255,.05); }
.btn { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text); padding: 8px 11px; font-weight: 700; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: #486078; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary { color: var(--accent); border-color: rgba(77,179,255,.4); background: rgba(77,179,255,.1); }
.btn.danger { color: var(--danger); }
.btn.ghost { background: transparent; }
.btn.compact { padding: 5px 8px; font-size: 10px; }
.message { color: var(--muted); min-height: 17px; margin-top: 8px; font-size: 10px; }
.message.error { color: var(--danger); }
.progress { height: 3px; overflow: hidden; background: #0a1118; border-radius: 9px; margin-top: 8px; }
.progress span { display: block; width: 45%; height: 100%; background: var(--accent); animation: loading 1s infinite ease-in-out; }
@keyframes loading { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.metrics div { padding: 9px; background: #0d1620; border: 1px solid var(--border); border-radius: 8px; }
.metrics span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.metrics strong { display: block; font-size: 13px; margin-top: 2px; }
.meter { height: 5px; border-radius: 8px; background: #0a1118; overflow: hidden; margin: 10px 0; }
.meter span { display: block; height: 100%; width: 0; background: var(--ok); transition: width .2s; }
.validation-list { display: flex; flex-direction: column; gap: 5px; max-height: 115px; overflow: auto; }
.validation { padding: 6px 8px; border-radius: 7px; font-size: 10px; border: 1px solid transparent; }
.validation.neutral { color: var(--muted); background: #0d1620; }
.validation.ok { color: var(--ok); background: rgba(67,211,158,.08); border-color: rgba(67,211,158,.2); }
.validation.warn { color: var(--warn); background: rgba(255,189,89,.08); border-color: rgba(255,189,89,.2); }
.validation.error { color: var(--danger); background: rgba(255,107,120,.08); border-color: rgba(255,107,120,.2); }
.selection-empty { color: var(--muted); font-size: 11px; padding: 12px 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.form-grid label { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
input, select { width: 100%; border: 1px solid var(--border); border-radius: 7px; background: #0c151f; color: var(--text); padding: 7px 8px; outline: none; }
input:focus, select:focus { border-color: var(--accent); }
.selection-actions { display: flex; justify-content: space-between; margin-top: 9px; }
.nudge-controls { display: flex; align-items: center; gap: 5px; margin-top: 9px; }
.nudge-controls span { margin-right: auto; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.axis-rotation-controls { display: grid; gap: 5px; margin-top: 9px; }
.axis-rotation-controls > span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.axis-rotation-controls > div { display: grid; grid-template-columns: 1fr 54px 54px; align-items: center; gap: 5px; }
.axis-rotation-controls strong { font-size: 10px; font-weight: 600; color: #c7d4dc; }
.planner-card { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.planner-heading, .inventory-heading { padding: 12px 14px; margin: 0; border-bottom: 1px solid var(--border); }
.planner-actions, .trailer-nav { display: flex; align-items: center; gap: 7px; }
.trailer-nav { padding-left: 8px; border-left: 1px solid var(--border); }
.trailer-nav strong { min-width: 92px; text-align: center; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.legend { display: flex; gap: 12px; color: var(--muted); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); }
.legend .legend-cage { background: var(--warn); }
.legend .legend-invalid { background: var(--danger); }
.views-grid { min-height: 0; flex: 1; display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1.25fr 1fr; gap: 8px; padding: 8px; background: #0a121a; transition: .15s; }
.view-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #0d1721; }
.view-title { height: 29px; flex: 0 0 29px; padding: 6px 9px; display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--border); }
.view-title strong { color: var(--text); }
.trailer-stage { min-height: 0; flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 28px 42px; overflow: auto; background: radial-gradient(circle at center, #152331, #0c141d 70%); }
.trailer { position: relative; width: min(100%, calc((100vh - 390px) * 4)); max-width: 1200px; aspect-ratio: 4 / 1; flex: none; background: var(--trailer); border: 5px solid #607581; border-radius: 6px; box-shadow: 0 20px 45px rgba(0,0,0,.35); overflow: hidden; }
.trailer-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--trailer-line) 1px, transparent 1px), linear-gradient(to bottom, var(--trailer-line) 1px, transparent 1px); background-size: 8.3333% 33.3333%; opacity: .55; }
.trailer-front { position: absolute; top: 0; bottom: 0; left: 0; width: 22px; z-index: 2; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; color: #334852; background: #9eb0ba; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.dimension { position: absolute; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.dimension-length { bottom: 16px; left: 50%; transform: translateX(-50%); }
.dimension-width { left: 17px; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.empty-trailer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #637783; pointer-events: none; }
.empty-trailer span { font-size: 10px; }
.placement { position: absolute; border: 2px solid #176ea8; border-radius: 3px; background: rgba(77,179,255,.62); color: #062238; cursor: grab; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.2); user-select: none; z-index: 5; }
.placement.cage { background: rgba(255,189,89,.68); border-color: #b66d0b; color: #3d2304; }
.placement.selected { outline: 3px solid white; outline-offset: 1px; z-index: 20 !important; }
#placements .placement { pointer-events: none; cursor: default; }
.placement.invalid { background: rgba(255,107,120,.7); border-color: #a92937; }
.placement-label { position: absolute; inset: 0; padding: 4px 5px; display: flex; justify-content: space-between; gap: 4px; font-size: 8px; font-weight: 900; white-space: nowrap; }
.placement-label small { opacity: .72; }
.stack-badge { position: absolute; right: 3px; bottom: 3px; border-radius: 8px; background: rgba(0,0,0,.6); color: white; padding: 1px 4px; font-size: 7px; }
.sidebar .inventory-card { flex: 1 1 300px; min-height: 260px; overflow: hidden; display: flex; flex-direction: column; }
.inventory-tools { display: flex; align-items: center; gap: 8px; }
.inventory-tools input { width: 190px; padding: 6px 8px; font-size: 10px; }
.pill { color: var(--accent); background: rgba(77,179,255,.1); padding: 4px 8px; border-radius: 20px; font-size: 9px; font-weight: 800; }
.inventory-search { padding: 8px 10px 0; }
.inventory-search input { font-size: 10px; }
.sidebar .inventory { min-height: 0; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.inventory-empty { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 55px; }
.unit-card { border: 1px solid var(--border); border-radius: 9px; background: #0d1620; padding: 9px; display: grid; gap: 7px; }
.unit-card.used { opacity: .48; }
.unit-title { display: flex; justify-content: space-between; gap: 8px; }
.unit-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-title span { color: var(--muted); font-size: 9px; }
.unit-source { overflow: hidden; color: var(--accent); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.sequence-badge { color: var(--accent) !important; background: rgba(77,179,255,.1); border-radius: 10px; padding: 2px 5px; font-weight: 900; }
.unit-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.unit-specs div { background: var(--panel-2); border-radius: 5px; padding: 4px; }
.unit-specs span { display: block; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.unit-specs strong { display: block; font-size: 9px; }
.unit-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.unit-footer span { color: var(--muted); font-size: 9px; }
.bottom-summary { flex: 0 0 150px; overflow: hidden; }
.summary-heading { padding: 10px 14px; margin: 0; border-bottom: 1px solid var(--border); }
.summary-content { min-height: 0; height: calc(100% - 52px); display: grid; grid-template-columns: 430px 1fr; gap: 12px; padding: 10px 14px; }
.bottom-summary .metrics { grid-template-columns: repeat(4, 1fr); }
.bottom-summary .validation-list { max-height: 72px; }
.summary-validation { min-width: 0; }
.projection-wrap { min-height: 0; flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: 16px 22px; background: radial-gradient(circle at center, #142331, #0b131c 72%); overflow: hidden; }
.projection { position: relative; width: 100%; height: 100%; max-height: 170px; border-left: 3px solid #718895; border-bottom: 4px solid #718895; background-image: linear-gradient(to right, rgba(140,160,178,.18) 1px, transparent 1px), linear-gradient(to top, rgba(140,160,178,.18) 1px, transparent 1px); background-size: 10% 33.333%; }
.projected-unit { position: absolute; border: 1px solid #176ea8; background: rgba(77,179,255,.65); color: #071d2b; font-size: 7px; font-weight: 900; padding: 2px; overflow: hidden; }
.projected-unit.cage { border-color: #b66d0b; background: rgba(255,189,89,.7); }
.projected-unit.invalid { border-color: #a92937; background: rgba(255,107,120,.76); }
.iso-wrap { align-items: center; perspective: 800px; }
.iso-deck { position: relative; width: 72%; aspect-ratio: 4 / 1; background: #c7d2d8; border: 3px solid #718895; transform: rotateX(58deg) rotateZ(-28deg); transform-style: preserve-3d; box-shadow: -18px 22px 28px rgba(0,0,0,.3); }
.iso-unit { position: absolute; border: 1px solid #176ea8; background: rgba(77,179,255,.78); transform-style: preserve-3d; box-shadow: 4px -4px 0 rgba(21,73,106,.55); }
.iso-unit.cage { background: rgba(255,189,89,.82); border-color: #b66d0b; box-shadow: 4px -4px 0 rgba(120,69,5,.55); }
.iso-unit.invalid { background: rgba(255,107,120,.82); border-color: #a92937; }
.hidden { display: none !important; }
@media (max-height: 760px) { .bottom-summary { flex-basis: 130px; } .trailer-stage { padding-top: 20px; padding-bottom: 20px; } }

/* Loading planner shell */
body { min-width: 900px; overflow: hidden; }
.topbar { position: relative; z-index: 40; gap: 18px; padding: 10px 16px; }
.header-left, .header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.header-actions { margin-left: auto; }
.menu-btn { width: 38px; height: 38px; display: grid; place-content: center; gap: 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); cursor: pointer; }
.menu-btn span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--text); }
.header-message { max-width: 210px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-message.error { color: var(--danger); }
.header-actions .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; margin: 0; }
.workspace { height: calc(100vh - 72px); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; padding: 12px; overflow: hidden; }
.workspace .planner-card { position: relative; height: 100%; min-width: 0; }
.summary-card { min-height: 0; height: 100%; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.summary-card .summary-heading { flex: 0 0 auto; }
.trailer-config { display: grid; gap: 8px; margin: 0 12px 12px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: #0d1620; }
.trailer-config > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.trailer-config-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.trailer-config-fields label { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.trailer-config-fields input { margin-top: 3px; padding: 6px; font-size: 10px; }
.trailer-config .btn { width: 100%; }
.summary-card .metrics { grid-template-columns: 1fr 1fr; padding: 12px 12px 0; }
.summary-card .meter { margin: 12px; }
.summary-card .validation-list { max-height: none; min-height: 0; flex: 1; padding: 0 12px 12px; overflow: auto; }
.units-drawer { position: fixed; z-index: 60; top: 72px; bottom: 0; left: 0; width: 350px; display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--border); box-shadow: 20px 0 45px rgba(0,0,0,.4); transform: translateX(-102%); transition: transform .2s ease; }
.units-drawer.open { transform: translateX(0); }
.drawer-scrim { position: fixed; z-index: 50; inset: 72px 0 0; background: rgba(2,7,12,.58); }
.drawer-header, .drawer-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid var(--border); }
.drawer-actions { display: flex; gap: 5px; }
.drawer-tools input { min-width: 0; }
.model-list { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 9px; }
.model-chip { min-width: 145px; max-width: 190px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: #0d1620; color: inherit; text-align: left; cursor: pointer; }
.model-chip.active { border-color: var(--accent); background: rgba(38,151,213,.14); box-shadow: inset 0 0 0 1px rgba(38,151,213,.28); }
.model-chip strong, .model-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-chip strong { color: var(--text); font-size: 9px; }
.model-chip small { color: var(--muted); margin-top: 2px; }
.inventory-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.inventory-filters label { display: grid; gap: 3px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.inventory-filters select { min-width: 0; padding: 6px; font-size: 9px; }
.inventory-filters button { grid-column: 1 / -1; justify-self: end; }
.units-drawer .inventory { min-height: 0; flex: 1; overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.unit-card[draggable="true"] { cursor: grab; }
.unit-card.dragging { opacity: .35; border-color: var(--accent); }
.unit-properties { display: flex; flex-wrap: wrap; gap: 4px; }
.unit-properties span { max-width: 100%; padding: 3px 5px; border-radius: 4px; background: rgba(132,153,170,.1); color: var(--muted); font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-popup { position: absolute; z-index: 35; top: 66px; right: 14px; width: 300px; padding: 14px; border: 1px solid #41617b; border-radius: 12px; background: rgba(17,26,36,.97); box-shadow: 0 16px 40px rgba(0,0,0,.5); backdrop-filter: blur(10px); }
.popup-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.popup-close { width: 27px; height: 27px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.views-grid { height: 100%; }
.planner-heading { flex: 0 0 auto; }
.top-view-panel { grid-column: 1; grid-row: 1; }

/* Primary interactive 3D position view */
.views-grid { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.three-view-panel { grid-column: 1; grid-row: 1 / 4; }
.secondary-view { grid-column: 2; }
.top-view-panel { grid-row: 1; }
.secondary-view:nth-of-type(3) { grid-row: 2; }
.secondary-view:nth-of-type(4) { grid-row: 3; }
.three-view-panel .view-title { height: 38px; flex-basis: 38px; align-items: center; }
.three-toolbar { display: flex; align-items: center; gap: 7px; }
.three-toolbar span { text-transform: none; letter-spacing: 0; }
.view-tool { border: 1px solid var(--border); border-radius: 5px; background: var(--panel-2); color: var(--text); padding: 3px 6px; font-size: 8px; cursor: pointer; }
.view-tool:disabled { opacity: .4; cursor: not-allowed; }
.three-stage { min-height: 0; flex: 1; position: relative; overflow: hidden; perspective: 1900px; cursor: grab; touch-action: none; background: radial-gradient(circle at 48% 44%, #263b4c 0, #101c28 48%, #091119 78%); }
.three-stage:active { cursor: grabbing; }
.three-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.svg-chassis { fill: #344650; stroke: #17232a; stroke-width: 6; }
.svg-deck { fill: url(#deckFill); stroke: #647a86; stroke-width: 7; }
.svg-headboard { fill: #8299a4; stroke: #405762; stroke-width: 5; }
.svg-axle { fill: #293940; stroke: #111a1f; stroke-width: 5; }
.svg-wheel { fill: #10171b; stroke: #030506; stroke-width: 8; }
.orientation-cube-wrap { position: absolute; z-index: 12; top: 18px; right: 20px; width: 88px; height: 88px; display: grid; place-items: center; perspective: 300px; cursor: grab; touch-action: none; border: 1px solid rgba(140,160,178,.28); border-radius: 12px; background: rgba(7,15,22,.45); backdrop-filter: blur(4px); }
.orientation-cube-wrap:active { cursor: grabbing; }
.orientation-cube { position: relative; width: 42px; height: 42px; transform-style: preserve-3d; transition: transform .06s linear; }
.cube-face { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid #8ca0b2; background: rgba(34,54,69,.92); color: #edf4fa; font-size: 7px; font-weight: 900; letter-spacing: .04em; backface-visibility: hidden; user-select: none; cursor: pointer; }
.cube-face:hover { background: rgba(77,179,255,.85); border-color: #edf4fa; }
.cube-front { transform: translateZ(21px); }.cube-back { transform: rotateY(180deg) translateZ(21px); }
.cube-right { transform: rotateY(90deg) translateZ(21px); }.cube-left { transform: rotateY(-90deg) translateZ(21px); }
.cube-top { transform: rotateX(90deg) translateZ(21px); }.cube-bottom { transform: rotateX(-90deg) translateZ(21px); }
.three-object { cursor: move; }
.three-object .unit-face { fill: rgba(77,179,255,.82); stroke: #146a9f; stroke-width: 3; }
.three-object .unit-long { filter: brightness(.72); }
.three-object .unit-end { filter: brightness(.55); }
.three-object.cage .unit-face { fill: rgba(255,189,89,.86); stroke: #a55f08; }
.three-object.invalid .unit-face { fill: rgba(255,107,120,.88); stroke: #9e2633; }
.three-object.selected .unit-face { stroke: white; stroke-width: 6; }
.three-object text { fill: #071d2b; font-size: 11px; font-weight: 900; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 2px; }
.svg-empty { fill: #536873; font-size: 16px; font-weight: 800; text-anchor: middle; }
.three-camera { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.three-world { position: relative; width: min(74%, 820px); aspect-ratio: 4 / 1; transform-style: preserve-3d; transition: transform .08s linear; }
.three-deck { position: absolute; inset: 0; transform-style: preserve-3d; background: #bfcbd2; border: 5px solid #607581; border-radius: 4px; box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset; }
.three-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, #8fa3ae 1px, transparent 1px), linear-gradient(to bottom, #8fa3ae 1px, transparent 1px); background-size: 8.3333% 33.3333%; opacity: .55; }
.three-headboard { position: absolute; z-index: 40; left: -7px; top: -6px; bottom: -6px; width: 22px; display: grid; place-items: center; writing-mode: vertical-rl; color: #20333d; background: #8fa4af; border: 2px solid #607581; font-size: 7px; font-weight: 900; letter-spacing: .12em; transform: translateZ(18px); }
.three-chassis { position: absolute; z-index: -2; inset: 18% 4% -7%; transform: translateZ(-23px); border: 10px solid #34444d; background: #263640; }
.three-chassis i { position: absolute; top: 8%; bottom: 8%; width: 6px; background: #18262e; }
.three-chassis i:first-child { left: 31%; }
.three-chassis i:last-child { right: 31%; }
.three-wheel { position: absolute; z-index: -1; width: 42px; height: 22px; border: 7px solid #080b0e; border-radius: 50%; background: #667985; box-shadow: inset 0 0 0 4px #202a30, 0 4px 8px rgba(0,0,0,.65); transform: translateZ(-34px) rotateX(72deg); }
.wheel-a { left: 65%; top: -11%; }.wheel-b { left: 65%; bottom: -16%; }
.wheel-c { left: 77%; top: -11%; }.wheel-d { left: 77%; bottom: -16%; }
.three-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; text-align: center; color: #526873; transform: translateZ(7px); pointer-events: none; }
.three-empty span { font-size: 9px; }
.secondary-view .view-title { height: 24px; flex-basis: 24px; padding: 4px 7px; }
.secondary-view .trailer-stage { padding: 16px 22px; overflow: hidden; }
.secondary-view .trailer { width: 94%; border-width: 3px; }
.secondary-view .trailer-front { width: 12px; font-size: 5px; }
.secondary-view .dimension { display: none; }
.secondary-view .projection-wrap { padding: 12px 15px 18px; }
.secondary-view .projection { max-height: none; }
.side-wheels, .back-wheels { position: absolute; left: 0; right: 0; bottom: -16px; height: 20px; pointer-events: none; }
.side-wheels i, .back-wheels i { position: absolute; width: 24px; height: 24px; border: 6px solid #090d10; border-radius: 50%; background: #607581; }
.side-wheels i:first-child { right: 20%; }.side-wheels i:last-child { right: 10%; }
.back-wheels i:first-child { left: 8%; }.back-wheels i:last-child { right: 8%; }

@media (max-width: 1180px) {
  .limits span:nth-child(-n+2), .header-message { display: none; }
  .workspace { grid-template-columns: minmax(0, 1fr) 250px; }
  .views-grid { grid-template-columns: minmax(0, 1fr) 225px; }
  .three-toolbar span { display: none; }
}