:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --ink: #161a1c;
  --muted: #687074;
  --panel: #111416;
  --panel-2: #181c1f;
  --panel-line: rgba(255, 255, 255, 0.105);
  --panel-text: #f2f4f4;
  --panel-muted: #90989c;
  --silver: #d9ddde;
  --stage: #e5e2dc;
  --accent: #b9e7db;
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body { height: 100%; min-height: 0; }

body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  background: var(--panel);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button, select { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

.app-shell {
  display: grid;
  grid-template-columns: minmax(312px, 348px) 1fr;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.controls {
  position: relative;
  z-index: 20;
  display: flex;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  color: var(--panel-text);
  background:
    radial-gradient(circle at 10% 0%, rgba(108, 131, 132, 0.15), transparent 34%),
    linear-gradient(150deg, #171b1d 0%, #0e1113 72%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 16px 0 46px rgba(0, 0, 0, 0.14);
}

.brand-row {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 86px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--panel-line);
}

.brand-row h1 {
  margin: 2px 0 0;
  font-size: 1.25rem;
  font-weight: 570;
  letter-spacing: -0.025em;
}

.eyebrow {
  margin: 0;
  color: var(--panel-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brand-row .eyebrow {
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
}

.control-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior: contain;
  padding: 0 16px 38px 22px;
  scrollbar-color: #5c676b rgba(255,255,255,.035);
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.sidebar-tabs { display: flex; flex: 0 0 auto; gap: 5px; padding: 10px 22px; border-bottom: 1px solid var(--panel-line); }
.sidebar-tabs button { flex: 1; padding: 9px 7px; border: 0; border-radius: 8px; color: #939ea1; background: transparent; cursor: pointer; font-size: .875rem; }
.sidebar-tabs button[aria-pressed="true"] { color: #edf2f0; background: #2b3639; }
.controls[data-sidebar-panel="layout"] [data-controls-panel="cabinet"],
.controls[data-sidebar-panel="cabinet"] [data-controls-panel="layout"] { display: none; }
.layout-top-actions { margin: 12px 0 18px; }
.layout-subheading { margin: 0 0 9px; font-size: .875rem; font-weight: 600; color: #e4eaea; }
.component-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.component-gateway { --component-accent: #b4c3c6; }
.component-switch { --component-accent: #819ba9; }
.component-k8s { --component-accent: #9cbaac; }
.component-gpu { --component-accent: #aea28b; }
.component-nas { --component-accent: #9ca8bc; }
.palette-device { min-width: 0; text-align: left; padding: 8px 9px; background: #1c2427; color: #dfe5e5; border: 1px solid #374145; border-left: 3px solid var(--component-accent); border-radius: 7px; cursor: grab; }
.palette-device strong, .palette-device small { display: block; }
.palette-device strong { font-size: .78rem; font-weight: 560; white-space: nowrap; }
.palette-device small { color: #99a6a8; font-size: .75rem; margin-top: 3px; }
.palette-device[aria-pressed="true"] { border-color: #b6dbcf; background: #314540; }
.layout-instructions { color: #9aa8ab; font-size: .75rem; line-height: 1.5; margin: 11px 0 14px; }
.layout-board-heading { display: flex; justify-content: space-between; margin: 0 1px 8px; color: #a9b6b9; font-size: .75rem; }
.rack-layout-scroll { max-height: 340px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; border: 1px solid #3a474b; border-radius: 9px; scrollbar-width: thin; scrollbar-color: #677d81 #192125; background: #11191c; touch-action: pan-y; }
.rack-layout-board { position: relative; min-height: 52px; overflow: hidden; background: #11191c; }
.layout-slot { position: absolute; left: 0; width: 100%; height: 26px; border: 0; border-bottom: 1px solid #29353a; padding: 0 0 0 5px; text-align: left; color: #85979d; background: transparent; font: 12px ui-monospace, monospace; cursor: pointer; }
.layout-slot:hover { background: #293c39; color: #d5eee5; }
.layout-slot:focus-visible { outline: 2px solid #b9e7db; outline-offset: -2px; }
.layout-device { position: absolute; left: 37px; right: 5px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; min-width: 0; padding: 6px 9px; border: 1px solid #46565b; border-left: 3px solid var(--component-accent); border-radius: 4px; color: #e2e9e9; background: linear-gradient(110deg, #2c393d, #202b2f); cursor: grab; text-align: left; }
.layout-device strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; font-weight: 600; }
.layout-device small { color: #a4b6ba; font: 12px ui-monospace, monospace; }
.layout-device.single-u { flex-direction: row; justify-content: space-between; align-items: center; gap: 5px; padding-block: 2px; }
.layout-device.single-u small { flex: 0 0 auto; font-size: 11px; }
.layout-device[aria-pressed="true"] { border-color: #b9e7db; background: linear-gradient(110deg, #425e58, #2e4440); box-shadow: inset 0 0 0 1px #b9e7db; }
.layout-device:focus-visible { outline: 2px solid #d9fff3; outline-offset: -3px; }
.layout-drop-preview { position: absolute; left: 37px; right: 4px; display: grid; place-items: center; z-index: 5; border: 2px dashed #b9e7db; border-radius: 4px; background: #3f826eaa; color: white; font-size: 12px; pointer-events: none; }
.layout-drop-preview.invalid { border-color: #f1ac91; background: #973e36d9; }
.layout-selection { margin-top: 10px; padding: 10px; background: #20302e; border: 1px solid #56786f; border-radius: 8px; }
.layout-selection-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.layout-selection-heading strong { font-size: .8rem; font-weight: 600; }
.layout-selection button { color: #dce9e5; background: #364d47; border: 1px solid #5d766f; border-radius: 5px; padding: 6px 10px; cursor: pointer; font-size: .75rem; }
.layout-selection button:disabled { opacity: .35; cursor: not-allowed; }
.layout-selection-heading button { border: 0; background: transparent; font-size: 18px; padding: 0 4px; }
#layout-move-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.layout-position-entry { display: flex; gap: 6px; align-items: center; }
#layout-move-actions label { display: flex; align-items: center; gap: 6px; font-size: .75rem; }
#layout-position { width: 47px; padding: 5px 3px; background: #16211f; border: 1px solid #5d766f; border-radius: 4px; color: #edf5f2; font: 13px ui-monospace, monospace; }
.layout-move-buttons { display: flex; gap: 4px; }
.layout-notice { margin: 10px 0; color: #a8c7bc; font-size: .75rem; line-height: 1.5; }
.layout-notice.error { color: #f6bc9c; }

.control-scroll::-webkit-scrollbar { width: 11px; }
.control-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.025); }
.control-scroll::-webkit-scrollbar-thumb {
  min-height: 48px;
  border: 3px solid transparent;
  border-radius: 10px;
  background: #5c676b;
  background-clip: padding-box;
}
.control-scroll::-webkit-scrollbar-thumb:hover { background: #788488; background-clip: padding-box; }
.control-scroll:focus-visible { outline: 2px solid #8bcdbc; outline-offset: -3px; }

.control-section {
  padding: 22px 0;
  border-bottom: 1px solid var(--panel-line);
}

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.section-heading h2,
.select-field > span,
.compact-control > span {
  margin: 0;
  color: #e6e9e9;
  font-size: 0.89rem;
  font-weight: 590;
  letter-spacing: -0.01em;
}

.section-heading > span {
  color: var(--panel-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--panel-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.segmented.three { grid-template-columns: repeat(3, 1fr); }
.environment-options button { min-height: 44px; font-size: .875rem; }

.segmented button {
  min-height: 38px;
  padding: 7px 10px;
  color: #98a0a3;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 570;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.segmented button:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.06); }

.segmented button.active {
  color: #121617;
  background: #e5e8e8;
  box-shadow: 0 2px 10px rgba(0,0,0,.28), inset 0 1px 0 #fff;
}

.segmented button:disabled { cursor: not-allowed; opacity: .35; }

.control-note {
  min-height: 31px;
  margin: 10px 2px 0;
  color: var(--panel-muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

.split-controls {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: 12px;
}

.select-field,
.compact-control {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 11px;
}

.select-field select {
  width: 100%;
  height: 47px;
  padding: 0 35px 0 13px;
  color: #e9ebeb;
  appearance: none;
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  outline: 0;
  background:
    linear-gradient(45deg, transparent 50%, #879094 50%) right 15px center / 6px 6px no-repeat,
    linear-gradient(135deg, #879094 50%, transparent 50%) right 11px center / 6px 6px no-repeat,
    rgba(255,255,255,.035);
  font-size: .82rem;
}

.segmented.compact button { min-height: 37px; padding-inline: 7px; }

.material-focus-field {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.material-focus-field > span {
  color: var(--panel-muted);
  font-size: .78rem;
}

.material-focus-field select {
  width: 100%;
  height: 39px;
  padding: 0 34px 0 11px;
  color: #edf0f0;
  appearance: none;
  border: 1px solid var(--panel-line);
  border-radius: 11px;
  outline: 0;
  background:
    linear-gradient(45deg, transparent 50%, #879094 50%) right 14px center / 6px 6px no-repeat,
    linear-gradient(135deg, #879094 50%, transparent 50%) right 10px center / 6px 6px no-repeat,
    rgba(255,255,255,.04);
  font-size: .79rem;
}

.material-stack {
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}

.material-stack > div {
  display: grid;
  min-height: 48px;
  grid-template-columns: 31px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
}

.material-stack > div + div { border-top: 1px solid rgba(255,255,255,.065); }
.material-stack span { display: grid; gap: 2px; }
.material-stack strong { color: #e9ecec; font-size: .78rem; font-weight: 570; }
.material-stack small { color: #747d80; font-size: .66rem; line-height: 1.3; }

.material-swatch {
  display: block;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 6px rgba(0,0,0,.22);
}

.material-swatch.shell { background: linear-gradient(135deg, #eef1f1 0%, #aab1b3 48%, #d7dbdc 100%); }
.material-swatch.mesh {
  background-color: #92999b;
  background-image: radial-gradient(circle, #535a5c 1.2px, transparent 1.35px);
  background-size: 5px 5px;
}
.material-swatch.structure { background: linear-gradient(135deg, #b3b9ba, #70787a); }
.material-swatch.accent { background: linear-gradient(120deg, #fff 0 23%, #7e8587 25% 37%, #f6f8f8 40% 64%, #969d9f 67% 77%, #fff 80%); }

.equipment-preset {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.equipment-preset > span {
  color: var(--panel-muted);
  font-size: .78rem;
}

.equipment-preset select {
  width: 100%;
  height: 39px;
  padding: 0 34px 0 11px;
  color: #edf0f0;
  appearance: none;
  border: 1px solid var(--panel-line);
  border-radius: 11px;
  outline: 0;
  background:
    linear-gradient(45deg, transparent 50%, #879094 50%) right 14px center / 6px 6px no-repeat,
    linear-gradient(135deg, #879094 50%, transparent 50%) right 10px center / 6px 6px no-repeat,
    rgba(255,255,255,.04);
  font-size: .82rem;
}

.equipment-list {
  overflow: hidden;
  border: 1px solid var(--panel-line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}

.equipment-row {
  display: grid;
  min-height: 52px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 10px;
}

.equipment-row + .equipment-row { border-top: 1px solid rgba(255,255,255,.065); }

.equipment-swatch {
  width: 8px;
  height: 30px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 0 10px rgba(255,255,255,.04);
}

.equipment-swatch.gateway { background: linear-gradient(#dce1e2, #848d90); }
.equipment-swatch.switch { background: linear-gradient(#596266, #1b2022); }
.equipment-swatch.k8s { background: linear-gradient(#77d9c1, #2c6d63); }
.equipment-swatch.gpu { background: linear-gradient(#9f8cff, #443a78); }
.equipment-swatch.nas { background: linear-gradient(#92a5ad, #3c4b51); }

.equipment-copy { display: grid; min-width: 0; gap: 2px; }
.equipment-copy strong { overflow: hidden; color: #e9ecec; font-size: .82rem; font-weight: 570; text-overflow: ellipsis; white-space: nowrap; }
.equipment-copy small { color: #747d80; font-size: .68rem; }

.stepper {
  display: grid;
  grid-template-columns: 28px 24px 28px;
  align-items: center;
  justify-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
}

.stepper button {
  width: 28px;
  height: 30px;
  padding: 0;
  color: #b8bec0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
}

.stepper button:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.06); }
.stepper button:disabled { color: #4d5558; cursor: not-allowed; }
.stepper output { color: #eef1f1; font-size: .75rem; font-variant-numeric: tabular-nums; }

.equipment-message {
  min-height: 17px;
  margin: 9px 2px 0;
  color: #8f999c;
  font-size: .7rem;
}

.equipment-message.limit { color: #e6b89b; }

.equipment-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-top: 9px;
}

.equipment-actions button {
  min-height: 37px;
  padding: 0 12px;
  color: #dce0e0;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 570;
}

.equipment-actions button:first-child {
  color: #101716;
  border-color: #a5d7ca;
  background: #b9e7db;
}

.equipment-actions button:hover { filter: brightness(1.07); }
.equipment-actions button:disabled { opacity: .38; cursor: not-allowed; filter: none; }

.behavior { padding-bottom: 14px; }

.switch-row {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 1px;
  color: #e5e8e8;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.switch-row + .switch-row { border-top: 1px solid rgba(255,255,255,.07); }

.switch-row span { display: grid; gap: 3px; }
.switch-row strong { font-size: .82rem; font-weight: 560; }
.switch-row small { color: var(--panel-muted); font-size: .73rem; }

.switch-row i {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid #434a4e;
  border-radius: 20px;
  background: #272c2f;
  transition: background 180ms ease, border-color 180ms ease;
}

.switch-row i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  content: "";
  border-radius: 50%;
  background: #a8afb1;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform 180ms ease, background 180ms ease;
}

.switch-row[aria-checked="true"] i { border-color: #8ec6b8; background: #8ec6b8; }
.switch-row[aria-checked="true"] i::after { background: #0f1716; transform: translateX(16px); }

.spec-card {
  margin-top: 22px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
}

.spec-card dl { display: grid; gap: 10px; margin: 0; }
.spec-card dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.spec-card dt { color: var(--panel-muted); font-size: .75rem; }
.spec-card dd { margin: 0; color: #e9ebeb; font-size: .76rem; text-align: right; }
.spec-card > p { margin: 15px 0 0; color: #737c80; font-size: .68rem; line-height: 1.5; }

.viewport {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 24%, rgba(255,255,255,.85), transparent 31%),
    linear-gradient(145deg, #d8d5cf, #f0eee9 64%, #d4d1ca);
}

#scene { display: block; width: 100%; height: 100%; touch-action: none; }
.viewport[data-stage-theme="dark"] { color-scheme: dark; background: #14181d; }
.viewport[data-stage-theme="dark"] .model-title span,
.viewport[data-stage-theme="dark"] .model-title strong { color: #e4eaf0; }
.viewport[data-stage-theme="dark"] .model-title em,
.viewport[data-stage-theme="dark"] .environment-bar small,
.viewport[data-stage-theme="dark"] .interaction-hint { color: #aab6c1; }
.viewport[data-stage-theme="dark"] .stage-chip,
.viewport[data-stage-theme="dark"] .view-cluster,
.viewport[data-stage-theme="dark"] .environment-controls,
.viewport[data-stage-theme="dark"] .studio-mode-controls { color: #e4eaf0; background: rgba(30,37,44,.92); border-color: #414c58; box-shadow: 0 8px 24px #0003, inset 0 1px 0 #ffffff08; }
.viewport[data-stage-theme="dark"] .environment-controls label { color: #afbdc9; }
.viewport[data-stage-theme="dark"] .environment-controls select,
.viewport[data-stage-theme="dark"] .studio-mode-controls button,
.viewport[data-stage-theme="dark"] .view-cluster button { color: #e4eaf0; }
.viewport[data-stage-theme="dark"] .environment-controls select option { background: #1e252c; color: #e4eaf0; }
.viewport[data-stage-theme="dark"] .studio-mode-controls button[aria-pressed="true"],
.viewport[data-stage-theme="dark"] .view-cluster button.active,
.viewport[data-stage-theme="dark"] .stage-chip[aria-pressed="true"] { color: #f6f9fc; background: #465563; border-color: #7e919f; }
.viewport[data-stage-theme="dark"] .loading { color: #b9c5cf; background: #14181d; }
.viewport[data-stage-theme="dark"] .loading-mark { border-color: #8a9ba8; box-shadow: inset 0 0 0 5px #14181d, inset 0 0 0 7px #536675; }
#scene[data-navigation="move"] { cursor: grab; }
#scene[data-navigation="move"].dragging { cursor: grabbing; }

.stage-topbar {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 24px 26px;
  pointer-events: none;
}

.model-title { display: grid; gap: 4px; justify-self: start; }
.environment-bar { position: absolute; top: 110px; left: 26px; z-index: 5; max-width: calc(100% - 52px); }
.environment-controls { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; background: rgba(242,243,241,.88); box-shadow: 0 3px 16px rgba(30,40,42,.06); }
.environment-controls label { color: #536065; font-size: .69rem; font-weight: 650; }
.environment-controls select { min-width: 0; max-width: 160px; padding: 4px 2px; border: 0; border-radius: 5px; background: transparent; color: #1d292d; font-size: .76rem; font-weight: 600; }
.environment-controls button { padding: 6px 9px; border: 0; border-radius: 7px; background: #27383c; color: white; cursor: pointer; font-size: .71rem; white-space: nowrap; }
.environment-bar small { display: block; margin: 7px 4px 0; font-size: .65rem; color: #526064; }
.studio-mode-controls { display: flex; width: fit-content; gap: 3px; margin-top: 8px; padding: 3px; border: 1px solid #bbc0c1; border-radius: 10px; background: rgba(242,243,241,.9); }
.studio-mode-controls button { min-width: 68px; min-height: 32px; padding: 5px 13px; border: 0; border-radius: 7px; color: #414d51; background: transparent; cursor: pointer; font-size: .875rem; }
.studio-mode-controls button[aria-pressed="true"] { color: #f3f6f7; background: #2b353c; }
.studio-mode-controls button:focus-visible { outline: 2px solid #718d9d; outline-offset: 1px; }
.auto-rotate-control { display: block; margin-top: 10px; min-height: 36px; }
.auto-rotate-control:focus-visible { outline: 2px solid #718d9d; outline-offset: 3px; }
.viewport[data-environment="datacenter"] .model-title span,
.viewport[data-environment="datacenter"] .model-title strong,
.viewport[data-environment="datacenter"] .model-title em,
.viewport[data-environment="datacenter"] .environment-bar small { color: #e0e9ec; text-shadow: 0 1px 5px #182631; }
.fit-warning { padding: 10px; border: 1px solid #8e7248; border-radius: 8px; background: #3a3020; color: #f9d99f; font-size: .74rem; line-height: 1.5; }
.stage-fit-warning { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #553f1e; color: #ffe3ae; font-size: .7rem; }
[hidden] { display: none !important; }
.model-title span { color: #4b5458; font-size: .72rem; font-weight: 700; letter-spacing: .11em; }
.model-title strong { color: #171b1d; font-size: .91rem; font-weight: 560; }
.model-title em { color: #687276; font-size: .7rem; font-style: normal; font-weight: 540; }

.stage-chip,
.view-cluster button {
  min-height: 40px;
  color: #252b2e;
  border: 1px solid rgba(26,31,33,.14);
  border-radius: 12px;
  background: rgba(249,249,247,.72);
  box-shadow: 0 8px 25px rgba(62,57,48,.08), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  cursor: pointer;
}

.stage-chip { padding: 0 15px; pointer-events: auto; font-size: .78rem; font-weight: 590; }
.stage-chip[aria-pressed="true"] { color: #f7f8f7; border-color: #202628; background: #22282a; }

.stage-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: auto;
}

.mobile-controls-button { display: none; }

.view-cluster {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 28px;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(24,29,31,.13);
  border-radius: 14px;
  background: rgba(249,249,247,.68);
  box-shadow: 0 12px 34px rgba(58,54,46,.1);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.view-cluster button {
  min-width: 55px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  font-size: .75rem;
  font-weight: 570;
}

.view-cluster button.active { color: #f8f9f8; background: #22282a; }

.interaction-hint {
  position: absolute;
  z-index: 4;
  left: 25px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(33,39,41,.62);
  font-size: .72rem;
  pointer-events: none;
}

.interaction-hint span { font-size: 1rem; }


.icon-button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  color: currentColor;
  border: 0;
  border-radius: 50%;
  background: rgba(119,127,129,.11);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-close { display: none; }


.loading {
  position: absolute;
  z-index: 15;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 15px;
  color: #4e575a;
  background: #dfddd7;
  transition: opacity 450ms ease, visibility 450ms;
}

.loading.hidden { visibility: hidden; opacity: 0; }
.loading span { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.loading-mark { width: 34px; height: 48px; border: 2px solid #697174; border-radius: 11px; box-shadow: inset 0 0 0 5px #dfddd7, inset 0 0 0 7px #9ca3a5; animation: breathe 1.3s ease-in-out infinite; }

@keyframes breathe { 50% { opacity: .45; transform: translateY(-3px); } }

button:focus-visible,
select:focus-visible { outline: 2px solid #8bcdbc; outline-offset: 2px; }

@media (max-width: 900px) {
  .app-shell { display: block; }
  .viewport { width: 100%; height: 100dvh; }
  .controls {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(365px, 92vw);
    transform: translateX(-102%);
    transition: transform 240ms cubic-bezier(.22,.8,.24,1);
  }
  .controls.open { transform: none; }
  .mobile-close { display: grid; }
  .mobile-controls-button { display: inline-flex; align-items: center; justify-self: start; }
  .stage-topbar { grid-template-columns: auto 1fr auto; align-items: start; padding: 16px; }
  .model-title { padding-top: 3px; }
  .interaction-hint { display: none; }
}

@media (max-width: 600px) {
  .environment-bar { top: 90px; left: 16px; max-width: calc(100% - 32px); }
  .environment-controls { gap: 7px; }
  .environment-controls label { font-size: .62rem; }
  .environment-controls select { max-width: 130px; font-size: .72rem; }
  .stage-topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; }
  .stage-actions #reset-view { display: none; }
  .stage-actions .stage-chip { padding-inline: 12px; }
  .model-title span { font-size: .64rem; }
  .model-title strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
  .model-title em { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .view-cluster { bottom: 18px; }
  .view-cluster button { min-width: 45px; padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.ar-section .control-note { line-height: 1.55; }
.ar-section .ar-equipment-note { font-size: 10px; margin: -6px 0 12px; }
.ar-equipment-option { display: flex; align-items: center; gap: 8px; margin: 14px 0; color: #bdc6c9; font-size: 12px; cursor: pointer; }
.ar-equipment-option input { accent-color: #a8c6b9; width: 15px; height: 15px; margin: 0; }
.ar-prepare, .ar-view, .ar-download { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; border: 1px solid #45544e; border-radius: 8px; background: #25342e; color: #e0eae5; text-decoration: none; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ar-prepare:hover, .ar-view:hover { background: #30443b; }
.ar-prepare:disabled { cursor: progress; opacity: .6; }
.ar-status { margin: 10px 0 0; }
.ar-dimensions { color: #c2ccca; font-size: 11px; line-height: 1.6; font-variant-numeric: tabular-nums; margin: 12px 0; }
.ar-view { margin-bottom: 8px; }
.ar-view img { width: 24px; height: 24px; }
.ar-view::after { content: 'View in your space'; }
.ar-download { background: transparent; border-color: #3c464b; color: #cad3d6; }
.ar-download:hover { background: #252d31; }
.ar-disclaimer { color: #829097; font-size: 10px; line-height: 1.5; margin: 12px 0 0; }
.prototype-section summary { cursor:pointer; color:#d4dedb; font-size:14px; padding:12px 0; }
.prototype-section .control-note { font-size:13px; line-height:1.6; }
.prototype-slider { display:block; margin:18px 0; color:#bac7c2; font-size:14px; }
.prototype-slider span { display:flex; justify-content:space-between; gap:8px; }
.prototype-slider input { width:100%; margin:12px 0 0; accent-color:#a8c6b9; }
.prototype-link { display:block; padding:14px 0; color:#b6d4c5; font-size:14px; line-height:1.5; }

/* Liquid-glass chrome. The scene continues behind the floating sidebar;
   --scene-inset reserves the unobstructed region for camera and stage controls. */
:root {
  --sidebar-width: 348px;
  --scene-inset: calc(var(--sidebar-width) + 24px);
  --panel-muted: #b2bec5;
  --glass-tint: rgba(243, 247, 249, .64);
  --glass-edge: rgba(255, 255, 255, .65);
  --glass-shadow: 0 12px 32px #141e281f, inset 0 1px 0 #ffffffcc, inset 0 -1px 0 #ffffff2e;
  --glass-selected: rgba(28, 39, 47, .86);
}
.app-shell { display: block; position: relative; }
.viewport { width: 100%; height: 100%; }
.controls {
  position: absolute;
  inset: 12px auto 12px 12px;
  width: var(--sidebar-width);
  height: auto;
  color-scheme: dark;
  background: linear-gradient(135deg, #ffffff14, transparent 40%), rgba(18, 26, 33, .72);
  border: 1px solid rgba(230, 242, 255, .2);
  border-radius: 24px;
  box-shadow: 0 20px 64px #0000003d, inset 0 1px 0 #ffffff33, inset 0 -1px 0 #ffffff0d;
  -webkit-backdrop-filter: blur(32px) saturate(145%);
  backdrop-filter: blur(32px) saturate(145%);
}
.control-scroll { overflow-y: auto; padding-bottom: 24px; }
.sidebar-tabs button { color: #b2bec5; }
.sidebar-tabs button[aria-pressed="true"] { color: #f4f7fa; background: #d4eaf81f; box-shadow: inset 0 1px 0 #ffffff1a; }
.segmented button { color: #b2bec5; }
.material-stack small, .spec-card > p { color: #a9b6bf; }
.stage-topbar { left: var(--scene-inset); grid-template-columns: minmax(0, 1fr) auto; }
.model-title { min-width: 0; max-width: 100%; }
.model-title :is(span, strong, em) { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.environment-bar { top: calc(24px + 5rem); left: calc(var(--scene-inset) + 26px); max-width: calc(100% - var(--scene-inset) - 52px); }
.view-cluster { left: calc((100% + var(--scene-inset)) / 2); border-radius: 18px; }
.interaction-hint { left: calc(var(--scene-inset) + 25px); bottom: 84px; }
.interaction-hint #interaction-copy { font-size: .72rem; }
.viewport[data-stage-theme="dark"] {
  --glass-tint: rgba(32, 43, 54, .56);
  --glass-edge: rgba(223, 238, 255, .23);
  --glass-shadow: 0 12px 32px #0003, inset 0 1px 0 #ffffff29, inset 0 -1px 0 #ffffff0a;
  --glass-selected: rgba(183, 211, 232, .2);
}
/* One blur layer per surface: no costly nested blur on segmented children. */
.viewport :is(.stage-chip, .view-cluster, .environment-controls, .studio-mode-controls),
.viewport[data-stage-theme="dark"] :is(.stage-chip, .view-cluster, .environment-controls, .studio-mode-controls) {
  background: linear-gradient(135deg, #ffffff12, transparent 65%), var(--glass-tint);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  backdrop-filter: blur(24px) saturate(155%);
}
.view-cluster button { -webkit-backdrop-filter: none; backdrop-filter: none; }
.stage-chip { border-radius: 14px; }
.viewport .stage-chip[aria-pressed="true"],
.viewport[data-stage-theme="dark"] .stage-chip[aria-pressed="true"],
.viewport .view-cluster button.active,
.viewport[data-stage-theme="dark"] .view-cluster button.active,
.viewport .studio-mode-controls button[aria-pressed="true"],
.viewport[data-stage-theme="dark"] .studio-mode-controls button[aria-pressed="true"] { color: #f5f9fc; background: var(--glass-selected); border-color: var(--glass-edge); }
.viewport .stage-chip:hover, .viewport[data-stage-theme="dark"] .stage-chip:hover,
.view-cluster button:hover, .studio-mode-controls button:hover { box-shadow: inset 0 0 0 1px #a8b8c980, var(--glass-shadow); }

/* Separate flex child, not an overlay: configuration can scroll all the way
   down while AR stays docked. Expanded results have their own bounded scroll. */
.ar-dock {
  flex: 0 0 auto;
  max-height: 46%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #72828d transparent;
  padding: 17px 22px max(17px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(230, 242, 255, .19);
  background: linear-gradient(135deg, #cfe6f917, #cfe6f906);
  box-shadow: 0 -8px 24px #00000014, inset 0 1px 0 #ffffff06;
}
.ar-dock .section-heading { margin-bottom: 12px; }
.ar-dock .section-heading > span { font-size: .75rem; letter-spacing: .03em; white-space: nowrap; }
.ar-dock .ar-prepare, .ar-dock .ar-view, .ar-dock .ar-download {
  min-height: 44px;
  font-size: .875rem;
  border-radius: 12px;
  border-color: rgba(217, 240, 255, .24);
  color: #f2f7fb;
  background: linear-gradient(135deg, #ffffff15, #ffffff05), rgba(178, 213, 239, .12);
  box-shadow: inset 0 1px 0 #ffffff1f, 0 4px 14px #00000014;
}
.ar-dock .ar-prepare:hover, .ar-dock .ar-view:hover, .ar-dock .ar-download:hover { background-color: rgba(178, 213, 239, .23); }
.ar-dock .ar-status { min-height: 0; margin: 10px 0 0; font-size: .75rem; }
.ar-dock .ar-dimensions, .ar-dock .ar-disclaimer { color: #b2bec5; font-size: .75rem; }
.ar-dock .ar-equipment-note { font-size: .75rem; }
.ar-dock .ar-equipment-option { font-size: .875rem; align-items: flex-start; line-height: 1.5; }
.ar-dock .ar-equipment-option input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.ar-options { margin-top: 10px; }
.ar-options summary { width: fit-content; color: #d2dfe8; cursor: pointer; font-size: .8125rem; padding: 4px 0; }
.ar-dock:focus-visible, .ar-dock a:focus-visible, .ar-options summary:focus-visible { outline: 2px solid #b5def8; outline-offset: -2px; border-radius: 4px; }

@media (max-width: 900px) {
  :root { --scene-inset: 0px; }
  .stage-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .environment-bar { top: calc(16px + 5rem); }
  .controls {
    position: fixed;
    inset: 8px auto 8px 8px;
    width: min(365px, calc(100vw - 24px));
    transform: translateX(calc(-100% - 16px));
  }
  .controls.open { transform: none; }
}
@media (max-width: 600px) { .environment-bar { top: calc(16px + 4.5rem); left: 16px; max-width: calc(100% - 32px); } }
@media (max-height: 500px) {
  .brand-row { min-height: 64px; padding-block: 10px; }
  .sidebar-tabs { padding-block: 6px; }
  .ar-dock { padding-top: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
/* Light environments use a complete workspace theme, not just a lighter backdrop.
   Physical material swatches and per-component accent colors stay unchanged. */
.controls[data-ui-theme="light"] {
  --panel-text: #202e38;
  --panel-muted: #52636f;
  --panel-line: rgba(52, 72, 86, .16);
  color: var(--panel-text);
  color-scheme: light;
  background: linear-gradient(135deg, #ffffff80, #ffffff0d 60%), rgba(240, 246, 250, .76);
  border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 20px 64px #263b4e1f, inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff80;
}
.controls[data-ui-theme="light"] :is(.section-heading h2, .select-field > span, .compact-control > span,
  .material-stack strong, .equipment-copy strong, .spec-card dd, .switch-row, .layout-subheading,
  .layout-selection-heading strong, .prototype-section summary, .ar-options summary) { color: var(--panel-text); }
.controls[data-ui-theme="light"] :is(.sidebar-tabs button, .segmented button, .material-stack small,
  .equipment-copy small, .equipment-message, .spec-card > p, .palette-device small, .layout-instructions,
  .layout-board-heading, .layout-device small, .prototype-slider, .ar-dimensions, .ar-disclaimer,
  .ar-equipment-option) { color: var(--panel-muted); }
.controls[data-ui-theme="light"] :is(.segmented, .material-stack, .equipment-list, .stepper, .spec-card) {
  border-color: var(--panel-line);
  background: rgba(255, 255, 255, .32);
}
.controls[data-ui-theme="light"] :is(.material-stack > div + div, .equipment-row + .equipment-row, .switch-row + .switch-row) { border-color: var(--panel-line); }
.controls[data-ui-theme="light"] .sidebar-tabs button[aria-pressed="true"],
.controls[data-ui-theme="light"] .segmented button.active {
  color: #1c3547;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 8px #30485814, inset 0 0 0 1px #ffffffd9;
}
.controls[data-ui-theme="light"] :is(.sidebar-tabs button, .segmented button):hover:not(:disabled) { color: #172e3e; background: #ffffffa6; }
.controls[data-ui-theme="light"] select { color: var(--panel-text); background-color: #ffffff66; }
.controls[data-ui-theme="light"] select option { color: #202e38; background: #f6f9fb; }
.controls[data-ui-theme="light"] .switch-row i { background: #c6d0d7; border-color: #9aaab5; }
.controls[data-ui-theme="light"] .switch-row i::after { background: white; box-shadow: 0 1px 3px #263b4e40; }
.controls[data-ui-theme="light"] .switch-row[aria-checked="true"] i { background: #4a7868; border-color: #3c6758; }
.controls[data-ui-theme="light"] :is(.prototype-slider input, .ar-equipment-option input) { accent-color: #346b58; }
.controls[data-ui-theme="light"] .prototype-link { color: #285b49; }
.controls[data-ui-theme="light"] :is(.equipment-actions button, .layout-selection button, .ar-prepare, .ar-view, .ar-download) {
  color: #203b4e;
  border-color: rgba(58, 86, 106, .24);
  background: linear-gradient(135deg, #ffffffd9, #ffffff59), rgba(215, 230, 241, .5);
  box-shadow: inset 0 1px 0 #ffffffb3, 0 3px 12px #243d5210;
}
.controls[data-ui-theme="light"] :is(.equipment-actions button, .layout-selection button, .ar-prepare, .ar-view, .ar-download):hover:not(:disabled) { background-color: #c7dce8; }
.controls[data-ui-theme="light"] .equipment-actions button:first-child { color: #204d3d; background: #d3e9df; border-color: #86af9f; }
.controls[data-ui-theme="light"] .stepper button { color: #344f60; }
.controls[data-ui-theme="light"] .stepper button:disabled { color: #94a0a9; }
.controls[data-ui-theme="light"] .stepper output { color: var(--panel-text); }
.controls[data-ui-theme="light"] :is(.palette-device, .layout-device) {
  color: #233b4b;
  background: linear-gradient(120deg, #ffffffd9, #e4edf3cc);
  border-color: #afbfca;
  border-left-color: var(--component-accent);
}
.controls[data-ui-theme="light"] :is(.palette-device, .layout-device)[aria-pressed="true"] {
  background: #d9ebe5; border-color: #427b68; box-shadow: inset 0 0 0 1px #427b68;
}
.controls[data-ui-theme="light"] :is(.rack-layout-scroll, .rack-layout-board) { background: #edf3f7; border-color: #b4c4cf; }
.controls[data-ui-theme="light"] .layout-slot { color: #5a6e7b; border-color: #cfdae1; }
.controls[data-ui-theme="light"] .layout-slot:hover { background: #d7e8e0; color: #284d3e; }
.controls[data-ui-theme="light"] .layout-selection { background: #e0eee8; border-color: #85ac9e; }
.controls[data-ui-theme="light"] .layout-selection-heading button { background: transparent; box-shadow: none; }
.controls[data-ui-theme="light"] #layout-position { color: #203b4e; background: #f6faf8; border-color: #8ca79d; }
.controls[data-ui-theme="light"] .layout-drop-preview { color: #153e2f; background: #d0eadfd9; border-color: #376f5b; }
.controls[data-ui-theme="light"] .layout-drop-preview.invalid { color: #742c24; background: #f8dfd7eb; border-color: #a65341; }
.controls[data-ui-theme="light"] .layout-notice { color: #32634f; }
.controls[data-ui-theme="light"] :is(.layout-notice.error, .equipment-message.limit) { color: #8a3e24; }
.controls[data-ui-theme="light"] .fit-warning { color: #774516; background: #fff0d8; border-color: #c8a06a; }
.controls[data-ui-theme="light"] .ar-dock {
  border-color: rgba(93, 117, 135, .2);
  background: linear-gradient(135deg, #ffffff66, #e1ecf533);
  box-shadow: 0 -8px 24px #30485808, inset 0 1px 0 #ffffff80;
}
.controls[data-ui-theme="light"] .ar-view img { filter: brightness(.32); }
.controls[data-ui-theme="light"] :is(.control-scroll, .rack-layout-scroll, .ar-dock) { scrollbar-color: #8b9da9 #ffffff1a; }
.controls[data-ui-theme="light"] .control-scroll::-webkit-scrollbar-thumb { background-color: #8b9da9; }
.controls[data-ui-theme="light"] .control-scroll::-webkit-scrollbar-thumb:hover { background-color: #687f8e; }
.controls[data-ui-theme="light"] :focus-visible,
.controls[data-ui-theme="light"] .ar-dock:focus-visible { outline: 2px solid #376b89; outline-offset: -2px; }
.viewport[data-stage-theme="light"] { --glass-selected: rgba(255, 255, 255, .9); }
.viewport[data-stage-theme="light"] :is(.stage-chip[aria-pressed="true"], .view-cluster button.active, .studio-mode-controls button[aria-pressed="true"], .environment-controls button) {
  color: #213c4e;
  background: var(--glass-selected);
  box-shadow: inset 0 0 0 1px #7e9eb452, 0 2px 8px #30485814;
}
/* Readable, opaque alternatives for unsupported blur and accessibility prefs. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .viewport[data-stage-theme="light"] { --glass-selected: #fff; }
  .controls { background: #192128; }
  .controls[data-ui-theme="light"] { background: #edf3f7; }
  .viewport :is(.stage-chip, .view-cluster, .environment-controls, .studio-mode-controls) { background: #edf2f5; }
  .viewport[data-stage-theme="dark"] :is(.stage-chip, .view-cluster, .environment-controls, .studio-mode-controls) { background: #26323d; }
  .viewport .stage-chip[aria-pressed="true"], .viewport[data-stage-theme="dark"] .stage-chip[aria-pressed="true"] { background: #344956; }
}
@media (prefers-reduced-transparency: reduce) {
  .viewport[data-stage-theme="light"] { --glass-selected: #fff; }
  .controls { background: #192128; }
  .controls[data-ui-theme="light"] { background: #edf3f7; }
  .controls, .viewport :is(.stage-chip, .view-cluster, .environment-controls, .studio-mode-controls) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .viewport :is(.stage-chip, .view-cluster, .environment-controls, .studio-mode-controls) { background: #edf2f5; }
  .viewport[data-stage-theme="dark"] :is(.stage-chip, .view-cluster, .environment-controls, .studio-mode-controls) { background: #26323d; }
  .viewport .stage-chip[aria-pressed="true"], .viewport[data-stage-theme="dark"] .stage-chip[aria-pressed="true"] { background: #344956; }
}