.play-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
header.app-header { height: auto; min-height: 64px; }
.play-toolbar button { min-height: 38px; }
.lighting-toggle { display: inline-flex; gap: 3px; }
.lighting-toggle button[aria-pressed="true"] { border-color: #d9502b; background: #f2e6d8; color: #a64225; }
#build-shortcuts [data-toggle], #build-shortcuts [data-camera] { display: none; }
.work-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.work-actions button { min-height: 54px; background: #3c483b; color: white; border-color: #3c483b; display: flex; align-items: center; justify-content: center; padding: 10px 8px; gap: 8px; }
.work-actions button:disabled { background: #e4e6dd; color: #8a9280; border-color: #d7dccd; }
.work-actions kbd { color: #405438; background: #fbfcf7; border: 0; }
.key-guide { margin: 12px 0; padding: 10px 12px; border: 1px solid #d1d8c8; background: #f1f4ea; }
.key-guide h4 { margin: 0 0 6px; font-size: 11px; color: #53624b; }
.key-guide-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 8px; padding: 5px 0; font-size: 11px; border-bottom: 1px solid #e0e5d9; }
.key-guide-row > span:last-child { white-space: nowrap; }
.key-guide kbd { padding: 1px 4px; font-size: 10px; }
.key-guide-extra { font-size: 11px; line-height: 2; margin: 8px 0 0; }
.expression-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.expression-actions button { font-size: 11px; padding: 8px 6px; min-height: 36px; }
.manual-controls { border-top: 1px solid #d6dacd; padding: 4px 0; margin-top: 8px; }
.manual-controls summary { font-size: 12px; cursor: pointer; padding: 10px 0; color: #53624b; }
.manual-controls summary span { float: right; color: #777f6f; }
.control-hint { font-size: 11px; line-height: 1.6; color: #6c7564; margin: 6px 0 10px; }
.speed-heading { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-top: 16px; }
.speed-heading output { color: #657555; font-variant-numeric: tabular-nums; }
.auto-drive { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; }
.speed-controls button { min-height: 40px; font-size: 12px; }
.speed-controls button[aria-pressed="true"] { background: #e8eddf; border-color: #738662; color: #3c5130; font-weight: 700; }
.battery-help { font-size: 12px; line-height: 1.6; margin-bottom: 12px; }
.battery-help summary { cursor: pointer; padding: 6px 0; }
.battery-help a { color: #855039; }
summary:focus-visible, select:focus-visible { outline: 2px solid #d9502b; outline-offset: 3px; }
.joint-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; border-bottom: 1px solid #e2e5db; padding: 9px 0; font-size: 12px; }
.joint-row > div { display: flex; gap: 4px; }
.joint-row button { min-width: 48px; min-height: 38px; padding: 5px; touch-action: none; user-select: none; }
.joint-row input { width: 38px; height: 38px; padding: 5px; text-align: center; text-transform: uppercase; }
.joint-row input[aria-invalid="true"] { border: 2px solid #b83f28; background: #fff2ee; }
.joint-row output { grid-column: 1 / -1; font: 11px Consolas, monospace; color: #7b846f; }
.night .stage-message, .night .stage-caption, .night .room-caption { color: #e3eecf; text-shadow: 0 1px 4px #142530; }
.testing .intro { display: none; }
.testing .intro .steps, .testing #page-description { display: none; }
.testing .workspace { grid-template-columns: minmax(0, 1fr) 320px; height: calc(100dvh - 70px); min-height: 580px; position: relative; }
.testing .view-label, .testing #test-controls > .section-heading > span { display: none; }
.testing .library-panel { display: none; }
.testing.show-mission .library-panel { display: block; position: absolute; z-index: 4; top: 48px; left: 16px; width: 285px; max-height: calc(100% - 64px); box-shadow: 0 5px 25px #19221b25; border: 1px solid #c9d0bd; }
.testing .canvas-panel { height: auto; min-width: 0; }
.testing .detail-panel { grid-column: auto; }
.testing #test-controls { display: flex; flex-direction: column; }
.testing #test-controls > .section-heading { order: -6; }
.testing #construction-controls { order: -5; }
.testing #work-controls { display: contents; }
.testing #work-controls > .work-actions, .testing #work-controls > .control-hint:first-of-type { order: -4; }
.testing #work-controls > .key-guide, .testing #work-controls > .control-hint { order: -1; }
.testing #action-feedback { order: 1; }
.testing #work-extra-actions, .testing #battery-panel { order: -2; }
.testing .drive-settings { order: -3; }
.testing .machine-heading { margin-top: 8px; }
.testing #machine-name { display: none; }
.testing .canvas-bottom #assembly-count { visibility: hidden; }
.testing #status:not(.error) { display: none; }
.testing .canvas-header { gap: 10px; flex-wrap: wrap; }
.testing #quick-actions, .testing .action-buttons { display: none !important; }
.testing #held-label, .testing #safety-state, .testing #action-tip { display: none; }
.testing #construction-controls > label, .testing #construction-controls > select { margin-top: 8px; }
.testing #construction-controls > .equipment-buttons { display: none; }
.testing #action-feedback { border-left: 2px solid #dd773e; padding: 10px; background: #f2f2e9; line-height: 1.65; }
.testing .mission-hint { font-size: 12px; color: #6c765f; padding: 9px 15px; border-bottom: 1px solid #d8dccf; }
.testing #telemetry { top: auto; bottom: 18px; left: 16px; gap: 14px; padding: 8px 11px; }
.testing #telemetry div:nth-child(3), .testing #telemetry div:nth-child(4) { display: none; }
.testing .stage-caption { bottom: 78px; }
.testing .stage-message { top: 15px; left: 16px; right: 16px; text-align: left; font-size: 12px; }
.testing .view-controls { top: 44px; }
.testing .guide { display: none; }
.room-page .intro { display: none; }
.room-layout { grid-template-columns: minmax(0, 1fr) 300px; position: relative; gap: 14px; padding: 18px; }
.room-layout > aside:first-child { position: absolute; left: 34px; top: 76px; z-index: 5; width: 280px; max-height: calc(100% - 95px); overflow-y: auto; box-shadow: 0 8px 30px #19221b25; border: 1px solid #c9d0bd; }
.room-page.joined:not(.show-room) .room-layout > aside:first-child { display: none; }
.room-layout > aside:last-child { grid-column: auto; display: block; max-height: calc(100dvh - 105px); overflow-y: auto; }
.room-layout .canvas-top { gap: 10px; flex-wrap: wrap; }
#room-stage { height: calc(100dvh - 200px); min-height: 480px; }
.room-page .action-buttons { display: none; }
.room-page #room-levers { display: none; }
.room-page .boarding { grid-template-columns: 1fr 1fr; }
.room-page:not(.joined) #work-controls button { pointer-events: none; opacity: .5; }
@media (max-width: 900px) {
    .testing .workspace, .room-layout { display: flex; flex-direction: column; height: auto; min-height: 0; }
    .testing .workspace > *, .room-layout > * { width: 100%; }
    .testing .canvas-panel { height: 65vh; min-height: 420px; }
    .testing .detail-panel { padding: 18px; overflow: visible; }
    .testing #test-controls { display: flex; }
    .room-layout > aside:last-child { max-height: none; }
    .room-layout > aside:first-child { width: min(280px, calc(100% - 48px)); max-height: 65vh; }
    #room-stage { height: 62vh; min-height: 400px; }
    .testing #telemetry { bottom: 20px; }
    .testing.show-mission .library-panel { width: min(285px, calc(100% - 32px)); max-height: 55vh; }
    .canvas-top h3 { max-width: 150px; }
    #build-shortcuts { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .testing .workspace { display: flex; }
    .testing .intro { padding: 9px 14px; }
    .testing .canvas-panel { min-height: 440px; height: 64vh; }
    .room-layout { padding: 10px; }
    .testing .canvas-header h3 { font-size: 11px; }
    .play-toolbar button { font-size: 11px; padding: 6px 8px; }
    .testing #telemetry { bottom: 18px; gap: 8px; left: 10px; }
    .testing #telemetry b { font-size: 15px; }
    .testing #drive-pad { right: 10px; bottom: 12px; }
    .testing #drive-pad button { width: 34px; height: 38px; }
    .testing #drive-pad .brake { width: 116px; }
}