body[data-q8bot-view="robot"] #canvas-panel, body[data-q8bot-view="robot"] #side-panel { display: none; }
.q8-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--border-hi); flex-shrink: 0; }
.q8-view-switch, .q8-commands { display: flex; gap: 5px; flex-wrap: wrap; }
.q8-toolbar .btn { font-size: 11px; text-transform: none; letter-spacing: 0; min-height: 30px; padding: 5px 10px; color: var(--text); }
.q8-toolbar .btn[aria-pressed="true"] { background: var(--surface2); border-color: var(--accent); color: var(--accent); }
.q8-toolbar button:focus-visible, .q8-workbench button:focus-visible, .q8-workbench select:focus-visible, .q8-workbench summary:focus-visible, .q8-workbench canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.q8-workbench { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 280px; grid-template-rows: minmax(300px,1fr) auto; overflow: auto; scrollbar-color: #627384 #10151b; }
.q8-workbench[hidden] { display: none; }
.q8-scene { position: relative; min-height: 300px; background: #d7dde0; overflow: hidden; }
.q8-scene-heading { position: absolute; top: 20px; left: 22px; z-index: 1; pointer-events: none; display: flex; flex-direction: column; gap: 5px; color: #465965; font-size: 11px; }
.q8-scene-heading strong { font-size: 21px; color: #273d48; letter-spacing: -.04em; }
.q8-scene-heading strong span { font-size: 11px; font-weight: 400; letter-spacing: 0; margin-left: 5px; }
.q8-viewport { position: absolute; inset: 0; display: grid; place-items: center; color: #435965; padding: 0; }
.q8-viewport canvas { display: block; cursor: grab; touch-action: none; }
.q8-viewport canvas:active { cursor: grabbing; }
.q8-loading { padding: 20px; }
.q8-camera { position: absolute; top: 20px; right: 18px; display: flex; gap: 3px; }
.q8-camera .btn { color: #354c59; background: #e5ebee; border-color: #99aab3; text-transform: none; letter-spacing: 0; min-height: 27px; }
.q8-camera .btn:hover { color: #102c39; background: white; }
.q8-caption { position: absolute; bottom: 46px; left: 22px; color: #435965; font-size: 10px; pointer-events: none; }
.q8-run-state { position: absolute; bottom: 16px; left: 22px; right: 16px; color: #284453; font-size: 11px; pointer-events: none; }
.q8-inspector { background: var(--surface); border-left: 1px solid var(--border-hi); overflow-y: auto; min-height: 0; scrollbar-color: #627384 #10151b; }
.q8-section-title { padding: 14px; display: flex; justify-content: space-between; font-weight: 700; font-size: 12px; }
.q8-count { color: #a1b3bf; font-size: 10px; font-weight: 400; }
.q8-motors { padding: 0 12px 12px; }
.q8-leg-row { display: grid; grid-template-columns: 76px 1fr 1fr; align-items: center; gap: 6px; margin-bottom: 7px; }
.q8-leg-row > span { font-size: 10px; color: #a1b3bf; }
.q8-motor { text-align: left; border: 1px solid var(--border-hi); border-radius: 4px; background: var(--surface2); color: var(--text); padding: 6px; font-family: inherit; cursor: pointer; min-width: 0; }
.q8-motor:hover { border-color: var(--accent); }
.q8-motor[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 2px 0 var(--accent); }
.q8-motor[data-fault="true"] { color: var(--yellow); }
.q8-motor span { font-size: 10px; color: #a1b3bf; }
.q8-motor strong { float: right; font-size: 11px; }
.q8-motor small { display: block; font-size: 8px; margin-top: 5px; white-space: nowrap; }
.q8-details { border-top: 1px solid var(--border-hi); padding: 14px; }
.q8-details h3 { font-size: 12px; margin-bottom: 14px; }
.q8-details dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 8px; font-size: 10px; }
.q8-details dt { color: #a1b3bf; }
.q8-details dd { text-align: right; }
.q8-chart-label { display: flex; gap: 10px; margin-top: 22px; font-size: 8px; color: var(--yellow); }
.q8-chart-label span:nth-child(2) { color: var(--accent); }
.q8-chart-label span:nth-child(3) { margin-left: auto; color: #a1b3bf; }
.q8-chart { width: 100%; height: 80px; border-bottom: 1px solid var(--border-hi); margin-bottom: 18px; }
.q8-chart path { fill: none; stroke-width: 1.6; }
.q8-chart [data-line="goal"] { stroke: var(--yellow); stroke-dasharray: 3 3; }
.q8-chart [data-line="position"] { stroke: var(--accent); }
.q8-fault-label { display: block; margin-bottom: 7px; font-size: 10px; }
#q8-fault { width: 100%; color: var(--text); background: var(--surface2); border: 1px solid var(--border-hi); border-radius: 3px; min-height: 32px; padding: 4px; font-family: inherit; font-size: 10px; cursor: pointer; }
#q8-fault:disabled { opacity: .5; cursor: not-allowed; }
.q8-motor-error { min-height: 32px; font-size: 10px; color: var(--yellow); line-height: 1.6; margin-top: 10px; }
.q8-bus { grid-column: 1 / -1; border-top: 1px solid var(--border-hi); background: var(--surface); min-width: 0; }
.q8-bus summary { padding: 12px 14px; cursor: pointer; font-size: 11px; }
.q8-bus summary:hover { background: var(--surface2); }
.q8-bus-count { color: #a1b3bf; font-size: 9px; margin-left: 14px; }
.q8-bus-scroll { max-height: 150px; overflow: auto; scrollbar-color: #627384 #10151b; }
.q8-bus table { width: 100%; border-collapse: collapse; font-size: 9px; text-align: left; white-space: nowrap; }
.q8-bus th { color: #a1b3bf; background: var(--surface); position: sticky; top: 0; }
.q8-bus td, .q8-bus th { padding: 6px 12px; border-bottom: 1px solid var(--border); }
.q8-bus tr[data-error="true"] { color: var(--red); }
@media (max-width: 720px) {
  .q8-workbench { grid-template-columns: minmax(0, 1fr); grid-template-rows: 330px max-content max-content; }
  .q8-inspector { overflow: visible; border-left: 0; border-top: 1px solid var(--border-hi); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .q8-section-title { grid-column: 1 / -1; }
  .q8-details { border-top: 0; padding-top: 0; }
  .q8-camera { top: 70px; left: 22px; right: auto; }
}
@media (max-width: 440px) {
  .q8-inspector { display: block; }
  .q8-details { border-top: 1px solid var(--border-hi); padding-top: 14px; }
  .q8-caption { font-size: 9px; left: 12px; }
  .q8-run-state { font-size: 10px; left: 12px; }
  .q8-bus-count { display: block; margin: 7px 0 0; }
}