/* Readable workbench layout; control IDs and motion behaviour are unchanged. */
:root {
  font-family: Inter, "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #192e43;
  background: #edf1f5;
  color-scheme: light;
  --ink: #192e43;
  --secondary: #4d6072;
  --line: #d8e1e9;
  --accent: #156283;
  --soft: #edf6fa;
}
* { box-sizing: border-box; }
body { margin: 0; }
header {
  min-height: 76px; padding: 16px 28px; background: #fff;
  border-bottom: 1px solid var(--line); display: flex;
  align-items: center; justify-content: space-between; gap: 16px;
}
header > div { display: flex; align-items: center; gap: 24px; }
header b { font-size: 26px; letter-spacing: -.8px; }
header span { color: var(--secondary); }
.badge {
  display: inline-block; background: var(--soft); color: #285871;
  padding: 5px 12px; border: 1px solid #d4e6ed; border-radius: 8px;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
main {
  display: grid; grid-template-columns: 330px minmax(0, 1fr) 330px;
  gap: 16px; padding: 16px 20px; max-width: 1920px; margin: auto;
  height: calc(100vh - 128px); height: calc(100dvh - 128px); min-height: 640px;
}
aside, .viewport {
  min-width: 0; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 3px 12px #24394f06;
}
aside { background: #fff; padding: 20px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a5b7c6 #f1f5f8; }
h1 { font-size: 26px; line-height: 1.35; margin: 0; font-weight: 750; overflow-wrap: anywhere; }
h2 { font-size: 20px; line-height: 1.4; margin: 0 0 10px; font-weight: 700; }
p { margin: 6px 0 16px; }
.muted, .hint, .note { font-size: 14px; color: var(--secondary); line-height: 1.65; }
.note { margin: 8px 0; }
label { display: block; font-size: 16px; font-weight: 550; margin: 16px 0 8px; color: #3a5064; }
input, select, textarea {
  display: block; width: 100%; min-width: 0; min-height: 46px;
  border: 1px solid #b8c8d5; border-radius: 8px; font: inherit;
  font-size: 16px; padding: 9px 10px; background: #fff; color: var(--ink); margin-top: 7px;
}
input[type=range] { padding: 0; accent-color: var(--accent); min-height: 32px; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, summary:focus-visible, .file:focus-within {
  outline: 3px solid #248bb4; outline-offset: 3px;
}
button, .file {
  font: inherit; font-size: 16px; font-weight: 600; color: var(--ink);
  border: 1px solid #bfcfdb; border-radius: 8px; background: #fff;
  padding: 10px 12px; cursor: pointer; min-height: 46px; line-height: 1.4;
}
button:hover, .file:hover { background: #f0f6fa; border-color: #799fb5; }
button:disabled { background: #f1f4f7; color: #687d8e; border-color: #d2dde5; cursor: default; box-shadow: none; }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 3px 8px #15628316; }
.primary:hover { background: #104d6a; border-color: #104d6a; }
aside > button, details > button { width: 100%; margin: 6px 0; }
.file { display: block; text-align: center; margin-top: 18px; border-style: dashed; background: #f7fafc; }
.file input { font-size: 14px; font-weight: 400; border: 0; padding: 4px 0; min-height: 36px; background: transparent; }
.file input::file-selector-button { font: inherit; padding: 5px 8px; border: 1px solid #b8c8d5; border-radius: 5px; background: #fff; color: var(--ink); margin-right: 8px; }
.tabs { display: flex; gap: 8px; margin-top: 24px; padding: 4px; background: #edf2f6; border-radius: 10px; }
.tabs button { flex: 1; border-color: transparent; background: transparent; }
.tabs [aria-pressed=true] { background: #fff; color: #125a7b; border-color: #bacfdd; box-shadow: 0 2px 5px #2342570c; }
.parameters { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.parameter-fields { padding: 20px; overflow: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: #a5b7c6 #f1f5f8; }
.parameter-fields > button { width: 100%; margin: 6px 0; }
.parameter-write { padding: 16px 20px; background: #f5f9fc; border-top: 1px solid var(--line); flex-shrink: 0; }
.parameter-write button { width: 100%; }
.parameter-write .note { margin: 10px 0 0; overflow-wrap: anywhere; }
#connections-panel { background: #f6f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-top: 20px; }
#connections-panel summary { font-size: 17px; font-weight: 700; color: #274b65; }
.connection-badge { float: right; font-size: 14px; font-weight: 400; color: #4d6072; }
#connection-state { color: #76520d; border-top: 1px solid var(--line); padding-top: 10px; }
#connection-fields [aria-invalid=true] { border-color: #b33139; background: #fff4f4; }
.viewport {
  padding: 24px; display: flex; flex-direction: column; align-items: stretch; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #fff 0%, #f6f9fc 60%, #edf3f8 100%);
}
.viewbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.viewbar .muted { margin-top: 10px; margin-bottom: 0; }
.viewbar .badge { background: #fff; color: #526575; border-color: #dce5ec; flex-shrink: 0; }
.stage-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 4px; color: #40566b; font-size: 15px; font-weight: 600; }
.render-modes { display: flex; gap: 3px; background: #e3ebf2; padding: 4px; border-radius: 9px; }
.render-modes button { min-height: 38px; padding: 6px 14px; border: 0; background: transparent; font-size: 15px; color: #425e74; }
.render-modes button[aria-pressed=true] { background: #fff; color: #164d6b; box-shadow: 0 2px 6px #203e5410; }
.render-modes button:disabled { color: #677b8d; }
.canvas-stage { position: relative; flex: 1; min-height: 220px; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.part-caption { position: absolute; left: 8px; bottom: 20px; pointer-events: none; display: flex; flex-direction: column; gap: 2px; border-left: 3px solid #167e9c; padding: 8px 12px; max-width: 80%; overflow-wrap: anywhere; background: #ffffffdc; border-radius: 0 8px 8px 0; }
.part-caption span { color: #526779; font-size: 14px; }
.part-caption strong { font-size: 16px; font-weight: 600; color: #254b66; }
.view-controls { display: flex; justify-content: center; gap: 4px; align-self: center; padding: 4px; border: 1px solid #cddae4; background: #fff; border-radius: 10px; box-shadow: 0 3px 12px #18334c06; }
.view-controls button { min-width: 54px; border: 0; background: transparent; min-height: 42px; color: #344f65; padding: 8px 12px; }
.view-controls button:hover { background: #e9f2f8; }
.hint { text-align: center; margin: 12px 0 8px; }
.scope { text-align: center; font-size: 14px; line-height: 1.7; color: #526779; margin-top: 8px; padding-top: 12px; border-top: 1px solid #dde6ed; }
.notice { font-size: 14px; color: #805413; overflow-wrap: anywhere; max-height: 120px; overflow: auto; }
.notice:empty { display: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
progress { width: 100%; height: 8px; accent-color: #167e9c; margin: 16px 0 10px; }
#status { font-size: 14px; overflow-wrap: anywhere; min-height: 42px; }
.error { color: #ad2833; }
.results { font-size: 14px; max-height: 230px; overflow: auto; overflow-wrap: anywhere; }
.metric { padding: 8px 0; border-bottom: 1px solid #e8eef3; display: flex; justify-content: space-between; gap: 8px; }
.metric strong { white-space: nowrap; }
details { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 18px; font-size: 16px; }
summary { cursor: pointer; min-height: 30px; font-weight: 600; }
textarea { font: 14px/1.6 monospace; resize: vertical; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.fields label { margin-top: 6px; font-size: 14px; }
.fields input { padding: 9px 7px; font-variant-numeric: tabular-nums; }
.section-label, .base-label { font-size: 16px; color: #34536c; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; font-weight: 650; }
output { float: right; color: #155c81; font-variant-numeric: tabular-nums; }
footer { text-align: center; color: #506779; font-size: 14px; padding: 13px 16px; min-height: 52px; border-top: 1px solid var(--line); background: #fff; }
#saved, #runtime-status, #runtime-profile { overflow-wrap: anywhere; }
body[data-pending=true] #run, body[data-pending=true] #save { opacity: .6; }
.emergency-controls { position: sticky; top: -20px; z-index: 4; background: #fff; padding: 20px 20px 16px; margin: -20px -20px 22px; border-bottom: 1px solid #eed7d9; box-shadow: 0 5px 10px #18334c04; }
.emergency-buttons { display: grid; grid-template-columns: 1fr 80px; align-items: stretch; gap: 10px; }
.emergency-stop { width: 100%; min-height: 56px; background: #c1303b; border: 1px solid #a1232e; border-radius: 9px; color: #fff; font-size: 22px; font-weight: 750; box-shadow: 0 3px 0 #90242c; }
.emergency-stop:hover { background: #ad2330; border-color: #8d202a; }
.emergency-stop small { font-size: 14px; font-weight: 500; margin-left: 8px; }
.emergency-buttons #reset-stop { min-height: 56px; font-size: 17px; border: 1px solid #a6bbc9; color: #244e69; background: #edf5f8; }
.emergency-buttons #reset-stop:disabled { color: #687d8e; border-color: #d2dde5; background: #f1f4f7; }
.emergency-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.emergency-row span { font-size: 14px; color: #854148; }
#reset-stop-note { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
body[data-estop=true] .emergency-stop { background: #902025; box-shadow: inset 0 2px 6px #560e12; }
body[data-estop=true] #emergency-state { font-weight: 700; color: #a72c32; }
.chassis-controls { padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.chassis-controls #chassis-stop { width: 100%; background: #e8f0f5; font-weight: 700; }
.wheel-speeds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 12px; }
.wheel-speeds .metric { font-size: 14px; gap: 4px; flex-wrap: wrap; }
.wheel-speeds output { float: none; }
.jog-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.jog-row button { padding: 10px 12px; font-size: 17px; }
.jog-row output { float: none; font-size: 18px; font-weight: 600; }
.sine-title { margin-top: 28px; }
.sine-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 10px; }
.sine-buttons button { background: #eff7fb; border-color: #bed5e2; color: #185879; }
.sine-buttons button:hover { background: #dfeef6; border-color: #7faec6; }
.sine-buttons button:disabled { background: #f1f4f7; color: #687d8e; border-color: #d2dde5; }
.motion-controls > #stop { width: 100%; margin: 12px 0 0; }
.motion-controls .results { max-height: 150px; }
.gripper-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#reset-pose { width: 100%; margin-top: 12px; }
.quick-controls input[type=range] { margin-top: 8px; }
.quick-controls [hidden] { display: none; }
.quick-controls label { margin-top: 12px; }
.quick-controls .muted { margin-bottom: 12px; }
@media (min-width: 1101px) and (max-width: 1439px) {
  main { grid-template-columns: 300px minmax(0, 1fr) 310px; gap: 12px; padding: 14px; }
  .viewport { padding: 20px; }
  h1 { font-size: 24px; }
  .viewbar { flex-wrap: wrap; }
  .viewbar .badge { margin-left: auto; }
}
@media (max-width: 1100px) {
  main { height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px; }
  .viewport { grid-column: 1/-1; grid-row: 1; min-height: 690px; }
  .canvas-stage { flex: auto; height: 420px; min-height: 320px; }
  .parameters { grid-column: 1; grid-row: 2; overflow: visible; }
  .parameter-fields { overflow: visible; }
  .actions { grid-column: 2; grid-row: 2; overflow: visible; }
  .emergency-controls { position: static; border-radius: 14px 14px 0 0; }
}
@media (max-width: 720px) {
  header { padding: 14px 16px; gap: 12px; align-items: center; }
  header > div { display: block; }
  header b { display: block; font-size: 24px; }
  header > div > span { font-size: 14px; }
  header .badge { font-size: 14px; padding: 5px 8px; }
  main { display: flex; flex-direction: column; gap: 14px; padding: 12px; }
  .viewport { order: 0; padding: 18px 14px; min-height: 0; }
  .parameters { order: 1; }
  .actions { order: 2; }
  .viewbar { flex-wrap: wrap; gap: 8px; }
  .viewbar h1 { font-size: 22px; }
  .viewbar .badge { margin-left: auto; }
  .stage-toolbar { margin-top: 18px; font-size: 14px; }
  .canvas-stage { flex: auto; height: 360px; min-height: 300px; }
  .part-caption { left: 0; bottom: 12px; }
  .view-controls { gap: 0; width: 100%; padding: 3px; }
  .view-controls button { padding: 8px 6px; min-width: 0; flex: 1; font-size: 15px; }
  .view-controls #fit { flex: 1.6; }
  .scope { padding-top: 12px; }
  .parameter-fields, aside { padding: 20px; }
  .parameters { padding: 0; }
  textarea { font-size: 16px; }
  footer { font-size: 14px; }
}


/* Verified MDA1 model viewer; controls retain preview.7 readable type sizes. */
.scene-options { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:10px 0; }
.scene-options button { min-height:40px; padding:6px 10px; font-size:14px; }
.scene-options button[aria-pressed=true] { background:#d9eef5; border-color:#8bb8c9; }
#stage-stop { display:none; }
.cooperative-controls { border:1px solid #b8d7e1; background:#f0f8fb; padding:16px; border-radius:12px; margin:16px 0 22px; }
.cooperative-controls button { width:100%; }
#sequence-phase { font-size:16px; color:#185773; margin:12px 0 0; }
.reference-photo { margin:8px 0; font-size:14px; color:#486174; }
.reference-photo img { float:left; width:80px; max-height:110px; object-fit:contain; margin:8px 14px 8px 0; }
.reference-photo p { overflow:hidden; }
.view-controls { flex-wrap:wrap; }
.view-controls button { font-size:14px; min-height:36px; padding:6px 9px; }
body.expanded-view main { display:block; height:calc(100dvh - 96px); min-height:560px; }
body.expanded-view .parameters, body.expanded-view .actions, body.expanded-view footer { display:none; }
body.expanded-view .viewport { height:100%; }
body.expanded-view #stage-stop { display:block; }
body.expanded-view .reference-photo, body.expanded-view .scope, body.expanded-view .hint { display:none; }
body[data-estop=true] #stage-stop { background:#701d23; }
@media (min-width:1200px) { .viewport { padding:18px; } .stage-toolbar { margin-top:12px; } .scope { margin-top:10px; } }
@media (max-width:600px) { .scene-options button { font-size:14px; } .cooperative-controls { margin:12px 0; } }

body.expanded-view .scene-options #stage-stop { display:inline-block; width:auto; min-width:88px; }

.scene-hud { position:absolute; top:8px; left:12px; z-index:2; display:flex; flex-direction:column; pointer-events:none; color:#305569; font-size:14px; gap:3px; background:#ffffffcf; padding:8px 12px; border-radius:8px; }
.scene-hud strong { font-size:16px; }
#navigation-map{display:block;width:100%;height:auto;border:1px solid #d7e2e9;border-radius:10px;margin:12px 0;background:#eff5f8}

/* CAD mode uses a separate visual assembly, preserving the mounted parameter editor. */
#cad-workspace[hidden],main[hidden],#workbench-model-tabs[hidden]{display:none!important}
.model-tabs{display:flex;align-items:center;gap:8px;padding:12px 28px;background:#fff;border-bottom:1px solid #dbe3ed}
.model-tabs button{width:auto;margin:0;padding:10px 20px;font-size:16px}
.model-tabs button[aria-pressed=true]{background:#173c60;border-color:#173c60;color:#fff}
.model-tabs>span{margin-left:auto;font-size:14px;color:#5f7286}
.cad-workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;padding:24px;max-width:1900px;margin:auto;min-height:calc(100vh - 150px)}
.cad-sidebar{padding:25px;background:white;border:1px solid #dce3ec;border-radius:16px;min-width:0}
.cad-eyebrow{color:#71859b;letter-spacing:2px;font-size:12px;font-weight:700}
.cad-sidebar h2{font-size:27px;line-height:1.4;margin:14px 0 10px;color:#183953}.cad-sidebar h2 span{font-size:18px;color:#768b9d}
.cad-intro{font-size:16px;line-height:1.7;color:#617386}
.cad-card{display:flex;flex-direction:column;gap:9px;padding:17px 0;margin:8px 0;border-bottom:1px solid #e5ebf1;color:#536a7e;font-size:14px}
.cad-label{font-size:14px;color:#6d8295}.cad-card strong{font-size:18px;color:#233e56;line-height:1.5}.cad-card span{overflow-wrap:anywhere}
.selected-card strong{font-size:16px}.selected-card>span:last-child{font-size:12px;max-height:60px;overflow:auto}
.cad-sidebar label{font-size:16px}.cad-stage-panel{background:#f8fafc;border:1px solid #dce3ec;border-radius:16px;overflow:hidden;min-width:0}
.cad-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:23px 26px;background:white}.cad-heading h1{font-size:27px;margin:5px 0 0;color:#203f59}
.cad-static-badge{font-size:14px;color:#466980;border:1px solid #d8e5ed;background:#f0f7fa;border-radius:20px;padding:8px 14px}
.cad-canvas-wrap{height:clamp(440px,60vh,790px);position:relative;background:#eef2f6}#cad-scene{display:block;width:100%;height:100%;touch-action:none}
.cad-canvas-label{position:absolute;bottom:20px;left:25px;color:#9aabba;font-size:22px;pointer-events:none;letter-spacing:2px}.cad-canvas-label span{font-size:11px;margin-left:12px}
.cad-toolbar{display:flex;align-items:center;gap:8px;padding:13px 20px;background:#fff;border-top:1px solid #e3eaf1}.cad-toolbar button{width:auto;margin:0;font-size:14px;padding:8px 13px}.cad-toolbar span{font-size:13px;color:#72869a;margin-left:auto}
#cad-status{font-size:14px;color:#35667f;padding:10px 24px;margin:0}.cad-provenance{margin:0 24px 15px;font-size:13px;color:#748598;overflow-wrap:anywhere}.cad-provenance summary{font-size:14px}
body.cad-active footer{display:none}
@media(max-width:1000px){.cad-workspace{grid-template-columns:260px minmax(0,1fr);padding:14px;gap:12px}.cad-sidebar{padding:18px}.cad-toolbar{flex-wrap:wrap}.cad-toolbar span{width:100%;margin:3px 0}.cad-heading{padding:20px}.cad-static-badge{font-size:12px}}
@media(max-width:700px){.model-tabs{padding:10px 12px}.model-tabs button{padding:9px 12px;font-size:14px}.model-tabs>span{display:none}.cad-workspace{display:flex;flex-direction:column;padding:10px}.cad-stage-panel{order:-1}.cad-canvas-wrap{height:410px}.cad-heading h1{font-size:22px}.cad-heading{padding:16px}.cad-static-badge{max-width:118px}.cad-sidebar{padding:20px}.cad-sidebar h2{font-size:24px}.cad-card{margin:3px 0}.cad-toolbar{padding:10px}.cad-toolbar button{padding:8px 10px}}

.cad-motion{padding:20px 24px;background:#fff;border-top:1px solid #dce3ec;color:#334e65;font-size:16px}
.cad-motion h2{font-size:20px;margin:0}.cad-motion button{width:auto;margin:0;font-size:16px;padding:9px 14px}
.cad-motion-heading,.cad-motion-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cad-motion-note,#cad-motion-status,.cad-motion details{font-size:14px;line-height:1.65}.cad-motion-note{color:#6b7e8c;margin:10px 0 14px}
.cad-leg-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.cad-leg-tabs [aria-pressed=true]{background:#1c526d;color:#fff}
.cad-joint-row{display:grid;grid-template-columns:85px minmax(80px,1fr) 84px 20px;align-items:center;gap:12px;margin:10px 0}
.cad-joint-row input{min-width:0;margin:0}.cad-joint-row input[type=range]{padding:0;accent-color:#187b9b}.cad-joint-row input[type=number]{font-size:16px;padding:8px;width:100%}
.cad-motion .cad-checkbox{display:flex;gap:8px;align-items:center;font-size:14px}.cad-checkbox input{width:auto;margin:0}
.cad-motion details{overflow-wrap:anywhere}.cad-motion summary{cursor:pointer}.cad-motion-actions{margin-top:16px;justify-content:flex-start}
@media(max-width:700px){.cad-motion{padding:16px}.cad-motion h2{font-size:18px}.cad-motion-heading button{font-size:14px;padding:8px}.cad-leg-tabs button{flex:1;font-size:14px;padding:8px 4px}.cad-joint-row{grid-template-columns:62px minmax(50px,1fr) 70px 14px;gap:7px}.cad-motion-actions button{font-size:14px}}

.cloud-preview-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 18px;background:#102c40;color:#e4f3ff;font:500 14px/1.6 system-ui,sans-serif;border-bottom:1px solid #28627d;}.cloud-preview-note form{margin:0}.cloud-preview-note button{width:auto;margin:0;padding:8px 16px;background:#19445c;color:#e4f3ff;border:1px solid #4b7c95;border-radius:8px;font-size:14px;}