:root {
    --model-copper: #d97757;
    --model-copper-soft: rgba(217, 119, 87, .16);
    --model-sage: #8da779;
    --model-cyan: #86aaa7;
    --model-ivory: #e8e3d9;
    --model-graphite: #111210;
}

.robot-studio {
    margin: 0 0 22px;
    padding: clamp(22px, 3vw, 34px);
    overflow: hidden;
    border: 1px solid var(--lab-line);
    border-radius: calc(var(--lab-radius) + 4px);
    background:
        radial-gradient(circle at 24% 25%, rgba(217, 119, 87, .11), transparent 32%),
        linear-gradient(135deg, rgba(250, 249, 245, .035), transparent 45%),
        #191a18;
}

.robot-studio-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    gap: 28px;
    align-items: end;
    margin-bottom: 24px;
}

.robot-studio-heading h2 {
    margin: 6px 0 0;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.robot-studio-heading p {
    max-width: 56ch;
    margin: 0;
    color: var(--lab-muted);
    font-size: 14px;
}

.robot-studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr);
    align-items: start;
    overflow: hidden;
    border: 1px solid var(--lab-line);
    border-radius: 16px;
    background: #111210;
}

.robot-viewport {
    position: relative;
    min-width: 0;
    height: clamp(540px, 45vw, 650px);
    overflow: hidden;
    background:
        linear-gradient(rgba(250, 249, 245, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250, 249, 245, .025) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, #252622 0, #151614 58%, #10110f 100%);
    background-size: 32px 32px, 32px 32px, auto;
}

.robot-viewport::before {
    content: "DIGITAL TWIN / NR-01";
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 2;
    color: rgba(250, 249, 245, .5);
    font: 650 10px/1.2 "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    letter-spacing: .16em;
    pointer-events: none;
}

.robot-viewport canvas {
    display: block;
    width: 100%;
    height: 100%;
    height: 100%;
    min-height: 0;
    cursor: grab;
    outline: 0;
    touch-action: none;
}

.robot-viewport canvas:active { cursor: grabbing; }
.robot-viewport canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--lab-accent); }

.robot-loader,
.robot-fallback {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #131412;
    color: var(--lab-muted);
    text-align: center;
    font-size: 13px;
}

.robot-loader span {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--lab-accent);
    box-shadow: 0 0 0 8px rgba(217, 119, 87, .12);
    animation: modelPulse 1.2s ease-in-out infinite;
}

.robot-loader[hidden],
.robot-fallback[hidden] { display: none; }

.robot-view-help {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 2;
    max-width: calc(100% - 36px);
    margin: 0;
    padding: 8px 11px;
    border: 1px solid rgba(250, 249, 245, .1);
    border-radius: 8px;
    background: rgba(17, 18, 16, .72);
    color: rgba(250, 249, 245, .62);
    font-size: 11px;
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.robot-sensor-hud {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.robot-studio[data-view="mission"] .robot-sensor-hud {
    opacity: 1;
    transform: translateY(0);
}

.robot-sensor-hud div {
    min-width: 88px;
    padding: 8px 10px;
    border: 1px solid rgba(134, 170, 167, .25);
    border-radius: 8px;
    background: rgba(17, 18, 16, .78);
    backdrop-filter: blur(10px);
}

.robot-sensor-hud span {
    display: block;
    color: rgba(250, 249, 245, .48);
    font: 650 8px/1.2 "Cascadia Mono", Consolas, monospace;
    letter-spacing: .1em;
}

.robot-sensor-hud strong {
    display: block;
    margin-top: 4px;
    color: #bcd1ce;
    font: 700 12px/1.2 "Cascadia Mono", Consolas, monospace;
}

.robot-sensor-hud[data-alert="true"] div:first-child {
    border-color: rgba(217, 111, 104, .55);
    background: rgba(217, 111, 104, .13);
}

.robot-sensor-hud[data-alert="true"] div:first-child strong { color: #efaaa4; }

.robot-inspector {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    border-left: 1px solid var(--lab-line);
    background: rgba(27, 28, 25, .98);
}

.inspector-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.inspector-status span:first-child {
    color: var(--lab-muted);
    font-size: 11px;
}

.scan-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--model-sage);
    font: 650 10px/1.2 "Cascadia Mono", Consolas, monospace;
    letter-spacing: .08em;
}

.scan-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px rgba(141, 167, 121, .1);
}

.part-module {
    display: inline-flex;
    align-self: flex-start;
    padding: 5px 8px;
    border: 1px solid rgba(134, 170, 167, .35);
    border-radius: 999px;
    background: rgba(134, 170, 167, .08);
    color: var(--model-cyan);
    font-size: 10px;
    font-weight: 700;
}

.robot-inspector h3 {
    margin: 12px 0 8px;
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.part-description {
    min-height: 68px;
    margin: 0 0 18px;
    color: var(--lab-muted);
    font-size: 13px;
}

.part-readout {
    display: grid;
    gap: 0;
    margin: 0 0 22px;
    border-top: 1px solid var(--lab-line);
}

.part-readout div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--lab-line);
    font-size: 11px;
}

.part-readout dt { color: var(--lab-muted); }
.part-readout dd { margin: 0; color: var(--lab-text); text-align: right; }

.part-list-label {
    margin: 0 0 9px;
    color: var(--lab-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
}

.part-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-bottom: 22px;
}

.part-button {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--lab-line);
    border-radius: 8px;
    background: rgba(250, 249, 245, .025);
    color: var(--lab-muted);
    text-align: left;
    font-size: 11px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .16s ease;
}

.part-button:hover {
    border-color: var(--lab-line-strong);
    color: var(--lab-text);
    transform: translateY(-1px);
}

.part-button[aria-pressed="true"] {
    border-color: rgba(217, 119, 87, .65);
    background: var(--model-copper-soft);
    color: var(--lab-text);
}

.part-button:focus-visible,
.model-action:focus-visible {
    outline: 3px solid var(--lab-accent);
    outline-offset: 2px;
}

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

.model-action {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--lab-line);
    border-radius: 8px;
    background: transparent;
    color: var(--lab-muted);
    font-size: 11px;
    cursor: pointer;
}

.model-action:hover,
.model-action[aria-pressed="true"] {
    border-color: rgba(217, 119, 87, .5);
    background: rgba(217, 119, 87, .09);
    color: var(--lab-text);
}

.model-action.wide { grid-column: 1 / -1; }

.model-action:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.mission-view-action {
    border-color: rgba(141, 167, 121, .46);
    background: rgba(141, 167, 121, .08);
    color: #c7d5bc;
    font-weight: 700;
}

.robot-studio[data-view="mission"] .mission-view-action {
    border-color: rgba(217, 119, 87, .62);
    background: rgba(217, 119, 87, .13);
    color: var(--lab-text);
}

.model-mission-controls {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(141, 167, 121, .28);
    border-radius: 10px;
    background: rgba(141, 167, 121, .065);
}

.model-mission-controls[hidden] { display: none; }

.model-mission-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
    font-size: 11px;
}

.model-mission-status span { color: var(--lab-muted); }
.model-mission-status strong { color: #c7d5bc; }

.model-control-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 10px;
    padding: 4px;
    border-radius: 9px;
    background: rgba(17, 18, 16, .55);
}

.model-control-modes button {
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--lab-muted);
    font-size: 10px;
    cursor: pointer;
}

.model-control-modes button[aria-pressed="true"] {
    border-color: rgba(141, 167, 121, .38);
    background: rgba(141, 167, 121, .12);
    color: var(--lab-text);
}

.model-control-modes button:focus-visible,
.manual-drive-controls button:focus-visible {
    outline: 3px solid var(--lab-accent);
    outline-offset: 2px;
}

.model-mission-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.model-mission-actions button {
    min-height: 39px;
    padding: 8px 9px;
    border: 1px solid var(--lab-line);
    border-radius: 8px;
    background: rgba(17, 18, 16, .58);
    color: var(--lab-text);
    font-size: 11px;
    cursor: pointer;
}

.model-mission-actions button:first-child,
.model-mission-actions button:nth-child(2) {
    border-color: rgba(217, 119, 87, .45);
}

.model-mission-actions button:hover:not(:disabled) {
    border-color: var(--lab-accent);
    background: rgba(217, 119, 87, .11);
}

.model-mission-actions button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

.model-mission-actions button:focus-visible {
    outline: 3px solid var(--lab-accent);
    outline-offset: 2px;
}

.model-mission-controls p {
    margin: 10px 0 0;
    color: var(--lab-muted);
    font-size: 10px;
    line-height: 1.5;
}

.manual-drive-controls[hidden] { display: none; }

.drive-pad {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 44px);
    justify-content: center;
    gap: 5px;
    margin: 3px 0 11px;
}

.drive-pad button {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0;
    padding: 2px;
    border: 1px solid var(--lab-line);
    border-radius: 8px;
    background: rgba(250, 249, 245, .025);
    color: var(--lab-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.drive-pad button span {
    margin-top: 2px;
    color: var(--lab-muted);
    font-size: 8px;
}

.drive-pad button:hover,
.drive-pad button:active {
    border-color: rgba(217, 119, 87, .58);
    background: rgba(217, 119, 87, .12);
}

.drive-forward { grid-column: 2; grid-row: 1; }
.drive-left { grid-column: 1; grid-row: 2; }
.drive-right { grid-column: 3; grid-row: 2; }
.drive-back { grid-column: 2; grid-row: 3; }

.drive-center {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    color: var(--lab-muted);
    font-size: 8px;
}

.drive-center i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--model-sage);
    box-shadow: 0 0 0 6px rgba(141, 167, 121, .1);
}

.manual-return {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(134, 170, 167, .32);
    border-radius: 8px;
    background: rgba(134, 170, 167, .07);
    color: #c4d6d4;
    font-size: 10px;
    cursor: pointer;
}

.manual-readout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 11px 0 0;
    border-top: 1px solid var(--lab-line);
}

.manual-readout div {
    padding: 8px 0;
    border-bottom: 1px solid var(--lab-line);
}

.manual-readout div:nth-child(odd):not(.manual-feedback) {
    padding-right: 10px;
    border-right: 1px solid var(--lab-line);
}

.manual-readout div:nth-child(even) { padding-left: 10px; }
.manual-readout dt { color: var(--lab-muted); font-size: 8px; }
.manual-readout dd { margin: 2px 0 0; color: var(--lab-text); font-size: 11px; }
.manual-readout .manual-feedback { grid-column: 1 / -1; }
.manual-feedback dd[data-tone="warning"] { color: #efaaa4; }
.manual-feedback dd[data-tone="success"] { color: #c7d5bc; }

.robot-studio[data-view="mission"] .robot-viewport::before {
    content: "LIVE ROOM / 12 × 8 GRID";
    color: rgba(141, 167, 121, .75);
}

.robot-studio[data-view="mission"] .part-list-label,
.robot-studio[data-view="mission"] .part-list {
    display: none;
}

.robot-studio[data-view="mission"] #autoRotateButton,
.robot-studio[data-view="mission"] #explodeButton,
.robot-studio[data-view="mission"] #undersideButton {
    display: none;
}

.robot-studio[data-view="mission"] .model-actions { grid-template-columns: 1fr; }
.robot-studio[data-view="mission"] .model-action.wide { grid-column: auto; }

.robot-studio[data-view="mission"][data-control-mode="manual"] .part-description,
.robot-studio[data-view="mission"][data-control-mode="manual"] .part-readout {
    display: none;
}

@keyframes modelPulse {
    0%, 100% { opacity: .55; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 1040px) {
    .robot-studio-layout { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); }
}

@media (max-width: 820px) {
    .robot-studio-heading { grid-template-columns: 1fr; gap: 12px; }
    .robot-studio-layout { grid-template-columns: 1fr; }
    .robot-viewport { height: 480px; min-height: 0; }
    .robot-viewport canvas { min-height: 0; }
    .robot-inspector { border-top: 1px solid var(--lab-line); border-left: 0; }
    .part-description { min-height: 0; }
}

@media (max-width: 480px) {
    .robot-studio { padding: 14px; }
    .robot-studio-heading h2 { font-size: 32px; }
    .robot-viewport { height: 390px; min-height: 0; }
    .robot-viewport canvas { min-height: 0; }
    .robot-inspector { padding: 18px; }
    .part-list { grid-template-columns: 1fr; }
    .model-actions { grid-template-columns: 1fr; }
    .model-action.wide { grid-column: auto; }
    .model-mission-actions { grid-template-columns: 1fr; }
    .robot-view-help { right: 10px; bottom: 10px; }
    .robot-sensor-hud { top: 10px; right: 10px; }
    .robot-sensor-hud div { min-width: 72px; padding: 7px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .robot-loader span { animation: none; }
}