:root {
    --bg: #08110f;
    --panel: #101b18;
    --panel-2: #15231f;
    --panel-3: #1b2d28;
    --line: #294039;
    --line-soft: #dbe5e0;
    --ink: #eaf4f0;
    --muted: #88a19a;
    --paper: #f4f7f5;
    --paper-2: #ffffff;
    --green: #39d39b;
    --green-dark: #178663;
    --orange: #ff7a2f;
    --amber: #f2b544;
    --red: #ef5d52;
    --blue: #4ca6ff;
    --violet: #9c7bff;
    --shadow: 0 18px 45px rgba(0,0,0,.22);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    overflow: hidden;
    color: var(--ink);
    background: var(--bg);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible {
    outline: 3px solid rgba(57,211,155,.35);
    outline-offset: 2px;
}

.topbar {
    height: 68px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line);
    background: #0b1513;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    position: relative;
    z-index: 1000;
}
.header-left { min-width: 0; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.brand-logo {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid #ff9f68;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #ff8a45, #d85112);
    box-shadow: inset 0 1px rgba(255,255,255,.25), 0 5px 12px rgba(255,122,47,.18);
    font-size: 11px;
    font-weight: 900;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: -.3px; }
.brand small { margin-top: 1px; color: var(--muted); font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; }
.mission-chip {
    justify-self: end;
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #111e1a;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 5px rgba(242,181,68,.1); }
.live-dot.active { background: var(--green); box-shadow: 0 0 0 5px rgba(57,211,155,.1); }
.mission-chip small, .mission-chip strong { display: block; }
.mission-chip small { color: var(--muted); font-size: 7px; text-transform: uppercase; letter-spacing: .8px; }
.mission-chip strong { margin-top: 2px; font-size: 10px; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.control-session-timer {
    min-width: 104px;
    padding: 5px 10px;
    border: 1px solid #315149;
    border-radius: 8px;
    background: #101f1b;
    text-align: center;
}
.control-session-timer[hidden] { display: none; }
.control-session-timer small, .control-session-timer strong { display: block; }
.control-session-timer small { color: #82a69a; font-size: 8px; font-weight: 800; letter-spacing: .7px; }
.control-session-timer strong { margin-top: 1px; color: #65e2b3; font-variant-numeric: tabular-nums; font-size: 14px; }
.control-session-timer.sending { border-color: #b98936; }
.control-session-timer.sending strong { color: #f2b544; }
.control-session-timer.sent { border-color: #267a5e; }
.control-session-timer.error { border-color: #8f4741; }
.control-session-timer.error strong { color: #ff8d83; }
.student-badge { display: flex; align-items: center; gap: 8px; padding-right: 10px; border-right: 1px solid var(--line); }
.student-badge > span:first-child {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #07110e;
    background: var(--green);
    font-weight: 900;
}
.student-badge strong, .student-badge small { display: block; }
.student-badge strong { font-size: 10px; }
.student-badge small { color: var(--muted); font-size: 8px; }
.secondary-button, .map-tools button, .clear-button {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #15231f;
    cursor: pointer;
    font-size: 8px;
    font-weight: 700;
}
.secondary-button { height: 34px; padding: 0 12px; }
.exit-button { border-color: #693d38; color: #ffaaa1; background: #241613; }

.lab-shell {
    height: calc(100vh - 68px);
    min-height: 650px;
    display: grid;
    grid-template-columns: 340px minmax(470px, 1fr) 390px;
    overflow: hidden;
}
.robot-panel, .program-panel { min-width: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #39534b transparent; }
.robot-panel { padding: 16px; border-right: 1px solid var(--line); background: var(--panel); }
.program-panel { padding: 16px; border-left: 1px solid var(--line); background: var(--panel); }
.map-panel { min-width: 0; display: grid; grid-template-rows: 64px 64px 78px minmax(390px, 1fr) 42px; padding: 0 16px; background: #dfe7e2; color: #173029; }
.section-heading, .map-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.eyebrow { margin: 0 0 3px; color: var(--green); font-size: 7px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
.section-heading h1, .section-heading h2, .map-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.5px; }
.ready-badge { display: flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid #2c5849; border-radius: 6px; color: #8ce9c5; background: #142b23; font-size: 7px; font-weight: 800; }
.ready-badge i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }

.robot-stage {
    height: 310px;
    margin-top: 13px;
    overflow: hidden;
    position: relative;
    border: 1px solid #315149;
    border-radius: 13px;
    background:
        linear-gradient(rgba(84,144,126,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(84,144,126,.08) 1px, transparent 1px),
        radial-gradient(circle at 50% 56%, #234139, #0b1714 68%);
    background-size: 18px 18px, 18px 18px, auto;
}
.robot-stage::after {
    content: "";
    width: 72%;
    height: 18px;
    position: absolute;
    left: 14%;
    bottom: 21px;
    border-radius: 50%;
    background: rgba(0,0,0,.42);
    filter: blur(8px);
}
.stage-topline { display: flex; justify-content: space-between; position: absolute; z-index: 4; left: 10px; right: 10px; top: 9px; color: #71958a; font-size: 6px; letter-spacing: 1px; }
.stage-topline b { color: var(--green); }
.robot-photo {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    object-fit: contain;
    padding: 25px 4px 4px;
    filter: drop-shadow(0 16px 17px rgba(0,0,0,.42));
}
.sensor-hotspot {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 6;
    border: 2px solid #d7e5df;
    border-radius: 50%;
    color: #fff;
    background: rgba(16,27,24,.92);
    box-shadow: 0 0 0 4px rgba(57,211,155,.12), 0 3px 9px rgba(0,0,0,.3);
    cursor: crosshair;
    font-size: 7px;
    font-weight: 900;
    transition: .16s;
}
.sensor-hotspot::after { content: ""; width: 16px; position: absolute; border-top: 1px dashed rgba(57,211,155,.6); transform-origin: left; }
.sensor-hotspot:hover, .sensor-hotspot.active { border-color: var(--green); color: #07110e; background: var(--green); transform: scale(1.15); }
.sensor-hotspot.empty { border-style: dashed; border-color: #769087; color: #769087; background: rgba(8,17,15,.82); box-shadow: none; }
.sensor-hotspot.drag-over { border-color: var(--orange); background: var(--orange); transform: scale(1.25); }
.sensor-hotspot.lidar { left: 32%; top: 19%; }
.sensor-hotspot.gps { right: 22%; top: 15%; }
.sensor-hotspot.camera { left: 27%; top: 35%; }
.sensor-hotspot.ultrasonic { left: 28%; top: 50%; }
.sensor-hotspot.bumper { left: 38%; bottom: 18%; }
.sensor-hotspot.encoder { right: 26%; bottom: 14%; }
.sensor-hotspot.emergency { right: 28%; top: 39%; }
.sensor-hotspot.chassis { left: 49%; bottom: 10%; }
.sensor-hotspot.battery { right: 38%; top: 56%; }
.sensor-hotspot.cargo { right: 20%; top: 27%; }
.sensor-hotspot.imu { left: 17%; top: 24%; }
.sensor-hotspot.lidar::after, .sensor-hotspot.camera::after, .sensor-hotspot.ultrasonic::after { right: 18px; }
.sensor-hotspot.gps::after, .sensor-hotspot.encoder::after, .sensor-hotspot.emergency::after, .sensor-hotspot.imu::after { left: 18px; }

.sensor-inspector {
    margin-top: 9px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-2);
}
.sensor-title { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; }
.sensor-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: #07110e; background: var(--green); font-size: 9px; font-weight: 900; }
.sensor-title small, .sensor-title strong { display: block; }
.sensor-title small { color: var(--muted); font-size: 6px; text-transform: uppercase; }
.sensor-title strong { margin-top: 2px; font-size: 10px; }
.sensor-state { padding: 4px 6px; border-radius: 5px; color: var(--green); background: rgba(57,211,155,.1); font-size: 6px; font-weight: 900; }
.sensor-inspector p { margin: 8px 0; color: #a9bdb7; font-size: 8px; line-height: 1.45; }
.sensor-overview { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; }
.sensor-overview img { width: 62px; height: 48px; object-fit: contain; border: 1px solid #29483e; border-radius: 8px; background: radial-gradient(circle, #1c332b, #091612); }
.sensor-overview img[hidden] { display: none; }
.sensor-overview img[hidden] + p { grid-column: 1 / -1; }
.sensor-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.sensor-data span { padding: 6px; border: 1px solid #2a423b; border-radius: 6px; background: #0d1815; }
.sensor-data small, .sensor-data b { display: block; }
.sensor-data small { color: #678078; font-size: 5px; text-transform: uppercase; }
.sensor-data b { margin-top: 3px; color: #cce0d9; font-size: 8px; }

.hardware-grid { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 9px; }
.hardware-module {
    min-width: 0;
    min-height: 38px;
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    position: relative;
    padding: 5px;
    border: 1px solid #a97923;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(242,181,68,.09), var(--panel-2) 42%);
    cursor: grab;
}
.hardware-module::after {
    content: "";
    width: 7px;
    height: 7px;
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 7px rgba(242,181,68,.7);
}
.hardware-module.dragging { opacity: .35; }
.hardware-module.installed {
    border-color: #2fa879;
    background: linear-gradient(90deg, rgba(57,211,155,.14), #142820 46%);
    opacity: 1;
    cursor: default;
}
.hardware-module.installed::after { background: var(--green); box-shadow: 0 0 8px rgba(57,211,155,.75); }
.hardware-module.not-required {
    border-color: #31443e;
    background: rgba(10, 22, 18, .55);
    opacity: .48;
    cursor: help;
}
.hardware-module.not-required::after {
    background: #60736d;
    box-shadow: none;
}
.hardware-module .module-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; color: var(--green); background: #0b1714; font-size: 12px; font-weight: 900; }
.module-icon.photo, .cmd-icon.photo { overflow: hidden; background: radial-gradient(circle, #315147, #0b1714); }
.module-icon.photo img, .cmd-icon.photo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.hardware-module strong, .hardware-module small {
    display: block;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}
.hardware-module strong { font-size: 7px; }
.hardware-module small { margin-top: 2px; color: var(--muted); font-size: 5px; }

.map-heading { height: 64px; }
.map-heading .eyebrow { color: #59756c; }
.map-tools { display: flex; gap: 7px; }
.map-tools button { height: 31px; padding: 0 9px; border-color: #c7d4ce; color: #315149; background: #f8fbf9; }
.map-tools button:disabled, .map-telemetry button:disabled {
    opacity: .42;
    filter: grayscale(.65);
    cursor: not-allowed;
}
.map-tools .reset-robot-button { border-color: #72a996; color: #17694f; background: #effcf7; }
.map-tools button:last-child { border-color: #efb28e; color: #b04e17; background: #fff5ee; }
.delivery-card {
    height: 54px;
    display: grid;
    grid-template-columns: 20px minmax(150px,1fr) auto 20px minmax(150px,1fr);
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid #cbd8d2;
    border-radius: 10px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 6px 18px rgba(28,55,47,.06);
}
.route-point { width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px currentColor; }
.route-point i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.route-point.start { color: var(--orange); }
.route-point.finish { color: #2d8067; }
.delivery-card small, .delivery-card strong, .delivery-card em { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.delivery-card small { color: #789087; font-size: 5px; letter-spacing: .8px; }
.delivery-card strong { margin: 2px 0 1px; font-size: 8px; }
.delivery-card em { color: #6a7e78; font-size: 6px; font-style: normal; }
.route-arrow { color: #8ca098; font-size: 15px; }
.map-stage { min-height: 390px; position: relative; overflow: hidden; border: 1px solid #bdccc5; border-radius: 13px; background: #dbe5df; box-shadow: var(--shadow); }
#city-map { width: 100%; height: 100%; }
.map-command-bar {
    min-width: 0;
    display: grid;
    grid-template-rows: 29px 44px;
    gap: 5px;
    padding-bottom: 5px;
}
.control-route-switcher {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(110px, .85fr) 1fr 1fr;
    gap: 5px;
    padding: 4px 5px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 8px;
    background: rgba(10,24,20,.9);
    box-shadow: 0 5px 14px rgba(0,0,0,.12);
}
.control-route-switcher > small {
    align-self: center;
    padding-left: 4px;
    color: #8ba49c;
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .6px;
}
.control-route-switcher button {
    min-width: 0;
    height: 34px;
    display: grid;
    grid-template-columns: 8px 1fr;
    align-items: center;
    gap: 6px;
    padding: 4px 7px;
    border-color: #365149;
    border-radius: 7px;
    color: #dceae5;
    background: #13241f;
    text-align: left;
}
.control-route-switcher button:hover, .control-route-switcher button.active { border-color: var(--green); background: #18362c; }
.control-route-switcher button:nth-of-type(2).active { border-color: #ff8a62; }
.control-route-switcher button.passed { border-color: #57e1ae; box-shadow: inset 0 0 0 1px rgba(87,225,174,.18); }
.control-route-switcher button.passed::after {
    content: "✓";
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    margin-left: auto;
    border-radius: 50%;
    color: #07110e;
    background: #57e1ae;
    font-size: 11px;
    font-weight: 900;
}
.control-route-switcher i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px rgba(57,211,155,.7); }
.control-route-switcher button:nth-of-type(2) i { background: #ff6b5f; box-shadow: 0 0 7px rgba(255,107,95,.65); }
.control-route-switcher span, .control-route-switcher b { display: block; min-width: 0; }
.control-route-switcher span { overflow: hidden; color: #8ba49c; font-size: 6px; white-space: nowrap; text-overflow: ellipsis; }
.control-route-switcher b { margin-bottom: 2px; color: #fff; font-size: 8px; }
.leaflet-container { font-family: "Segoe UI", Arial, sans-serif; background: #d9e4de; }
.leaflet-tile-pane { filter: saturate(.72) contrast(.95) brightness(1.04); }
.leaflet-control-attribution { font-size: 7px; }
.map-status {
    position: absolute;
    z-index: 500;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(196,210,203,.9);
    border-radius: 7px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(8px);
    color: #5e756d;
    font-size: 6px;
}
.map-status span { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.map-status span.ready { background: #2fae79; }
.route-safety {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 5px 9px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 8px;
    color: #dceae5;
    background: rgba(10,24,20,.9);
    box-shadow: 0 5px 14px rgba(0,0,0,.12);
    font-size: 7px;
}
.route-safety strong { color: #54e2ad; font-size: 7px; letter-spacing: .7px; }
.route-safety span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.route-safety b { padding-left: 8px; border-left: 1px solid #365149; color: #fff; white-space: nowrap; }
.legend-light { width: 7px; height: 15px; display: inline-block; border: 2px solid #e8f2ee; border-radius: 4px; background: linear-gradient(#ef5d52 0 29%, #f2b544 30% 62%, #39d39b 63%); }
.map-telemetry {
    position: absolute;
    z-index: 500;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    border: 1px solid rgba(31,53,47,.25);
    border-radius: 9px;
    color: #fff;
    background: rgba(10,24,20,.88);
    backdrop-filter: blur(8px);
}
.map-telemetry span, .map-telemetry button { padding: 0 9px; }
.map-telemetry > * + * { border-left: 1px solid #345047; }
.map-telemetry button {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.map-telemetry button:hover b { color: var(--orange); }
.map-telemetry button.gnss-lost b { color: #ff6b5f; }
.map-telemetry small, .map-telemetry b { display: block; }
.map-telemetry small { color: #8ba49c; font-size: 5px; text-transform: uppercase; }
.map-telemetry b { margin-top: 3px; font-size: 8px; }
.event-console { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; min-width: 0; }
.console-label { padding: 4px 6px; border-radius: 5px; color: #d9fff0; background: #267b60; font-size: 5px; font-weight: 900; letter-spacing: .8px; }
.event-console p { margin: 0; overflow: hidden; color: #567068; font-size: 7px; white-space: nowrap; text-overflow: ellipsis; }
.event-console time { color: #789087; font-size: 6px; }

.clear-button { height: 27px; padding: 0 8px; }
.program-actions { display: flex; align-items: center; gap: 5px; }
.program-actions button, .program-actions a { height: 27px; display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid #38564e; border-radius: 7px; color: #bed1ca; background: #0d1b17; cursor: pointer; font-size: 6px; font-weight: 800; text-decoration: none; }
.program-actions .guide-button { color: #73e6ba; }
.program-actions .pdf-button { border-color: #4279a2; color: #9fd3ff; }
.program-actions .sample-button { border-color: #975330; color: #ffc09c; }
.program-actions button:disabled { opacity: .38; cursor: not-allowed; }
.editor-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 9px;
    padding: 4px;
    border: 1px solid #254239;
    border-radius: 9px;
    background: #08120f;
}
.editor-mode-tabs button {
    height: 31px;
    border-color: transparent;
    color: #789087;
    background: transparent;
}
.editor-mode-tabs button.active {
    border-color: #2d755d;
    color: #dffff2;
    background: #173c30;
}
.code-editor[hidden], #visual-editor[hidden] { display: none; }
.code-editor {
    min-height: 430px;
    display: grid;
    grid-template-rows: auto minmax(330px, 1fr) auto;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #315149;
    border-radius: 11px;
    background: #08120f;
}
.code-editor-head, .code-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.code-editor-head span, .code-editor-head b, .code-editor-head small { display: block; }
.code-editor-head b { color: #70e5b8; font: 800 12px/1.2 Consolas, monospace; }
.code-editor-head small { margin-top: 2px; color: #789087; font-size: 7px; }
.code-editor button {
    padding: 7px 9px;
    border-color: #315149;
    color: #bfe1d5;
    background: #10231d;
}
#code-source {
    width: 100%;
    min-height: 330px;
    resize: vertical;
    padding: 13px 15px;
    border: 1px solid #29483e;
    border-radius: 8px;
    outline: 0;
    color: #d9fff0;
    background:
        linear-gradient(90deg, #0d1c17 0 37px, #13261f 37px 38px, #0a1713 38px);
    caret-color: #55e1ac;
    font: 12px/1.65 Consolas, "Courier New", monospace;
    tab-size: 4;
}
#code-source:focus { border-color: #46c596; box-shadow: 0 0 0 2px rgba(70,197,150,.12); }
.code-editor-foot p { margin: 0; color: #8ca49c; font-size: 8px; line-height: 1.4; }
.code-editor-foot p.error { color: #ff8e83; }
.code-editor-foot p.success { color: #66e4b4; }
.palette-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 13px; padding: 3px; border-radius: 8px; background: #0a1412; }
.palette-tabs button { height: 27px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; font-size: 6px; font-weight: 800; }
.palette-tabs button.active { color: #07110e; background: var(--green); }
.command-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; min-height: 118px; margin-top: 8px; }
.palette-block {
    min-width: 0;
    min-height: 53px;
    display: grid;
    grid-template-rows: 25px auto auto;
    place-items: center;
    padding: 5px 3px;
    border: 1px solid #335047;
    border-bottom: 3px solid var(--block-color, var(--green));
    border-radius: 8px;
    color: #d8e6e1;
    background: var(--panel-2);
    cursor: grab;
    text-align: center;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.palette-block:hover { border-color: var(--block-color, var(--green)); background: var(--panel-3); transform: translateY(-1px); }
.palette-block.dragging { opacity: .35; }
.palette-block .cmd-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #07110e; background: var(--block-color, var(--green)); font-size: 14px; font-weight: 900; }
.palette-block strong { max-width: 100%; overflow: hidden; margin-top: 3px; font-size: 6px; white-space: nowrap; text-overflow: ellipsis; }
.palette-block small { color: var(--muted); font-size: 5px; }
.program-title { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 5px; color: var(--muted); font-size: 6px; letter-spacing: .6px; }
.program-title b { display: inline-grid; min-width: 17px; height: 17px; place-items: center; border-radius: 5px; color: #07110e; background: var(--green); }
.program-workspace {
    min-height: 160px;
    max-height: 245px;
    overflow-y: auto;
    margin: 0;
    padding: 7px;
    border: 1px dashed #41675b;
    border-radius: 10px;
    background:
        linear-gradient(rgba(84,144,126,.045) 1px, transparent 1px),
        #0b1613;
    background-size: 14px 14px;
    list-style: none;
}
.program-workspace.empty::before { content: "Перетащите сюда графические команды"; height: 144px; display: grid; place-items: center; color: #5f7a72; font-size: 7px; }
.program-workspace.drag-target { border-color: var(--green); background-color: #10231d; }
.program-block {
    --block-color: var(--green);
    min-height: 35px;
    display: grid;
    grid-template-columns: 25px 1fr auto 19px;
    align-items: center;
    gap: 7px;
    position: relative;
    margin-bottom: 4px;
    padding: 4px 5px 4px 4px;
    border: 1px solid #345048;
    border-left: 4px solid var(--block-color);
    border-radius: 6px 9px 9px 6px;
    background: #172621;
    cursor: grab;
}
.program-block.executing { border-color: var(--amber); background: #2c2618; box-shadow: 0 0 0 2px rgba(242,181,68,.12); }
.program-block.done { opacity: .48; }
.program-block.dragging { opacity: .3; }
.program-block .cmd-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; color: #07110e; background: var(--block-color); font-size: 12px; font-weight: 900; }
.program-block strong, .program-block small { display: block; }
.program-block strong { font-size: 7px; }
.program-block small { color: var(--muted); font-size: 5px; }
.block-value { display: flex; align-items: center; gap: 2px; }
.block-value button, .remove-block { width: 18px; height: 18px; padding: 0; border: 1px solid #3b554e; border-radius: 5px; color: #a7bbb5; background: #0d1916; cursor: pointer; font-size: 9px; }
.block-value b { min-width: 27px; color: #d5e5df; font-size: 6px; text-align: center; }
.remove-block:hover { border-color: var(--red); color: var(--red); }
.program-diagnostics {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-2);
}
.program-diagnostics div { display: flex; align-items: center; gap: 6px; }
.program-diagnostics span { width: 7px; height: 7px; border-radius: 50%; background: #62766f; }
.program-diagnostics span.passed { background: var(--green); box-shadow: 0 0 7px var(--green); }
.program-diagnostics span.error { background: var(--red); }
.program-diagnostics strong { font-size: 6px; }
.program-diagnostics button { height: 23px; padding: 0 8px; border: 1px solid #3d5d54; border-radius: 6px; color: #b8cec6; background: #0c1714; cursor: pointer; font-size: 6px; }
.run-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 8px 0; padding: 8px; border-radius: 8px; background: #0a1412; }
.run-summary span { text-align: center; }
.run-summary span + span { border-left: 1px solid #273c36; }
.run-summary small, .run-summary b { display: block; }
.run-summary small { color: var(--muted); font-size: 5px; text-transform: uppercase; }
.run-summary b { margin-top: 3px; font-size: 9px; }
.run-button, .stop-button { width: 100%; min-height: 48px; border: 0; border-radius: 9px; cursor: pointer; }
.run-button { display: flex; align-items: center; justify-content: center; gap: 9px; color: #06100d; background: var(--green); box-shadow: 0 4px 0 var(--green-dark); }
.run-button:disabled { color: #71877f; background: #243a34; box-shadow: none; cursor: default; }
.run-button > span:first-child { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.22); font-size: 8px; }
.run-button strong, .run-button small { display: block; text-align: left; }
.run-button strong { font-size: 9px; }
.run-button small { margin-top: 2px; font-size: 6px; }
.stop-button { color: #fff; background: var(--red); font-size: 8px; font-weight: 900; }

.robot-map-icon, .destination-map-icon, .base-map-icon { background: transparent; border: 0; }
.robot-map-marker {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    position: relative;
    border: 3px solid #fff;
    border-radius: 10px;
    color: #fff;
    background: #17221f;
    box-shadow: 0 5px 15px rgba(0,0,0,.3);
    transform: rotate(var(--heading, 0deg));
}
.robot-map-marker::after { content: ""; position: absolute; right: -7px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--orange); }
.robot-map-marker span { color: var(--orange); font-size: 12px; transform: rotate(calc(var(--heading, 0deg) * -1)); }
.destination-map-marker { width: 30px; height: 30px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50% 50% 50% 5px; color: #fff; background: var(--green-dark); box-shadow: 0 5px 13px rgba(0,0,0,.24); font-size: 7px; font-weight: 900; transform: rotate(-45deg); }
.destination-map-marker span { transform: rotate(45deg); }
.base-map-marker { padding: 6px 8px; border: 2px solid #fff; border-radius: 8px; color: #fff; background: var(--orange); box-shadow: 0 5px 13px rgba(0,0,0,.25); font-size: 7px; font-weight: 900; white-space: nowrap; }
.obstacle-map-icon { background: transparent; border: 0; }
.obstacle-map-marker {
    width: 38px;
    min-height: 38px;
    display: grid;
    place-items: center;
    position: relative;
    border: 3px solid #fff;
    border-radius: 11px 11px 11px 3px;
    color: #fff;
    background: #17221f;
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
    transform: rotate(-45deg);
    transition: .2s;
}
.obstacle-map-marker > * { transform: rotate(45deg); }
.obstacle-map-marker small {
    position: absolute;
    left: 24px;
    bottom: -10px;
    padding: 3px 5px;
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    background: #26362f;
    font-size: 6px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.obstacle-map-marker.trafficLight { background: #26322e; }
.obstacle-map-marker.crosswalk { background: #267b60; }
.obstacle-map-marker.obstacle { background: #b34d37; }
.obstacle-map-marker.passed { opacity: .48; filter: grayscale(.7); }
.traffic-signal {
    width: 13px;
    display: grid;
    gap: 2px;
    padding: 3px;
    border-radius: 4px;
    background: #050807;
}
.traffic-signal i { width: 7px; height: 7px; border-radius: 50%; background: #343a38; }
.traffic-signal i:first-child { background: #ef5d52; box-shadow: 0 0 5px #ef5d52; }
.traffic-signal i:nth-child(2) { background: #f2b544; }
.traffic-signal i:last-child { background: #39d39b; }
.obstacle-symbol { font-size: 20px; line-height: 1; }

.guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 3200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(4,10,8,.88);
    backdrop-filter: blur(12px);
}
.guide-overlay[hidden] { display: none; }
.guide-card {
    width: min(980px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    position: relative;
    padding: 28px;
    border: 1px solid #34574d;
    border-radius: 18px;
    color: #e9f5f1;
    background: #101f1a;
    box-shadow: 0 30px 90px rgba(0,0,0,.52);
}
.guide-card h2 { margin: 5px 0 20px; font-size: 25px; }
.guide-close { width: 36px; height: 36px; position: absolute; top: 16px; right: 16px; border: 1px solid #3b5c52; border-radius: 9px; color: #c8d9d3; background: #0a1612; cursor: pointer; font-size: 20px; }
.guide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guide-columns article { padding: 17px; border: 1px solid #2d4d44; border-radius: 13px; background: #14251f; }
.guide-role { display: inline-flex; padding: 5px 8px; border-radius: 6px; font-size: 9px; font-weight: 900; letter-spacing: 1px; }
.guide-role.operator { color: #07120e; background: var(--green); }
.guide-role.robot { color: #fff; background: var(--orange); }
.guide-columns ol { display: grid; gap: 11px; margin: 15px 0 0; padding-left: 24px; }
.guide-columns li { padding-left: 5px; color: #55dba7; }
.guide-columns b, .guide-columns small { display: block; }
.guide-columns b { color: #eef8f4; font-size: 13px; }
.guide-columns small { margin-top: 3px; color: #99aea7; font-size: 11px; line-height: 1.45; }
.sample-explanation { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 15px 17px; border: 1px solid #6d452e; border-radius: 13px; background: #2a2018; }
.sample-explanation h3 { margin: 3px 0; font-size: 16px; }
.sample-explanation p:not(.eyebrow) { margin: 0; color: #cab8ac; font-size: 11px; }
.sample-explanation button { min-height: 40px; padding: 0 15px; border: 0; border-radius: 8px; color: #170d07; background: var(--orange); cursor: pointer; font-size: 11px; font-weight: 900; white-space: nowrap; }
.sample-sequence { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; padding: 10px; border-radius: 10px; background: #0a1612; }
.sample-step { min-width: 88px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 7px; padding: 7px; border: 1px solid #345047; border-bottom: 3px solid var(--step-color); border-radius: 8px; background: #172621; }
.sample-step span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; color: #07110e; background: var(--step-color); font-size: 14px; font-weight: 900; }
.sample-step span.photo { overflow: hidden; background: radial-gradient(circle, #315147, #0b1714); }
.sample-step img { width: 100%; height: 100%; object-fit: contain; }
.sample-step b, .sample-step small { display: block; white-space: nowrap; }
.sample-step b { font-size: 9px; }
.sample-step small { color: #91a69f; font-size: 8px; }
.command-reference { margin-top: 22px; padding-top: 20px; border-top: 1px solid #315047; }
.reference-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.reference-heading h3 { margin: 2px 0 0; font-size: 20px; }
.reference-heading > span { padding: 6px 9px; border: 1px solid #3b5d53; border-radius: 7px; color: #9fb7af; font-size: 10px; white-space: nowrap; }
.reference-groups { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; }
.reference-group { overflow: hidden; border: 1px solid #2f4e45; border-radius: 12px; background: #12221d; }
.reference-group h4 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 11px 13px; border-bottom: 1px solid #2f4e45; color: #e7f5f0; background: #172a24; font-size: 13px; }
.reference-group h4 span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: #07110e; background: var(--green); font-size: 10px; }
.reference-command { min-height: 76px; display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 11px; padding: 10px 12px; border-bottom: 1px solid #263f38; }
.reference-command:last-child { border-bottom: 0; }
.reference-icon { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 2px solid color-mix(in srgb, var(--reference-color) 72%, white); border-radius: 11px; color: #07110e; background: var(--reference-color); font-size: 23px; font-weight: 900; }
.reference-icon.photo { background: radial-gradient(circle, #315147, #0b1714); }
.reference-icon img { width: 100%; height: 100%; object-fit: contain; }
.reference-command strong { display: block; color: #f0faf6; font-size: 12px; }
.reference-command p { margin: 4px 0 5px; color: #a9bdb6; font-size: 10px; line-height: 1.4; }
.reference-command small { display: block; color: #65cba4; font-size: 9px; line-height: 1.3; }

.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4,10,8,.82);
    backdrop-filter: blur(12px);
}
.login-overlay[hidden] { display: none; }
.login-card {
    width: min(390px, 100%);
    padding: 25px;
    border: 1px solid #315149;
    border-radius: 16px;
    background: #111f1b;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.login-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 17px; border: 1px solid #ffad7d; border-radius: 13px; color: #fff; background: var(--orange); font-size: 13px; font-weight: 900; }
.login-card h2 { margin-bottom: 8px; font-size: 22px; }
.login-card > p:not(.eyebrow) { margin-bottom: 18px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.login-card label { display: block; margin-bottom: 11px; color: #b9ccc5; font-size: 8px; font-weight: 700; }
.login-card input { width: 100%; height: 42px; margin-top: 5px; padding: 0 11px; border: 1px solid #345149; border-radius: 8px; color: #fff; background: #0a1512; }
.login-card input.invalid { border-color: #ef5d52; box-shadow: 0 0 0 3px rgba(239,93,82,.12); }
.login-name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.login-card button { width: 100%; height: 44px; margin-top: 5px; border: 0; border-radius: 9px; color: #06100d; background: var(--green); cursor: pointer; font-size: 9px; font-weight: 900; }
.login-card > small { display: block; margin-top: 10px; color: #6f8980; font-size: 7px; text-align: center; }
.toast { position: fixed; left: 50%; bottom: 21px; z-index: 4000; max-width: min(440px, calc(100vw - 30px)); padding: 9px 14px; border: 1px solid #38564e; border-radius: 8px; color: #eafff7; background: #10201b; box-shadow: 0 12px 32px rgba(0,0,0,.35); font-size: 8px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Readability pass: operator-console scale */
body { font-size: 15px; }
.topbar {
    height: 76px;
    grid-template-columns: 1fr auto;
    padding: 0 22px;
}
.brand-logo { width: 44px; height: 44px; font-size: 13px; }
.brand strong { font-size: 20px; }
.brand small { font-size: 10px; }
.mission-chip { min-width: 230px; padding: 9px 16px; }
.mission-chip small { font-size: 9px; }
.mission-chip strong { font-size: 13px; }
.student-badge strong { font-size: 13px; }
.student-badge small { font-size: 10px; }
.student-badge > span:first-child { width: 38px; height: 38px; }
.secondary-button, .map-tools button, .clear-button { font-size: 11px; }
.secondary-button { height: 39px; }
.lab-shell {
    height: calc(100vh - 76px);
    grid-template-columns: 320px minmax(1020px, 1fr) minmax(460px, .45fr);
    grid-template-areas: "robot program map";
}
.robot-panel { grid-area: robot; }
.program-panel { grid-area: program; }
.map-panel { grid-area: map; }
.robot-panel { padding: 14px; }
.program-panel { padding: 18px; }
.map-panel { grid-template-rows: 66px 68px 84px minmax(390px, 1fr) 46px; padding: 0 14px; }
.eyebrow { font-size: 10px; letter-spacing: 1.15px; }
.section-heading h1, .section-heading h2, .map-heading h2 { font-size: 22px; }
.ready-badge { padding: 7px 9px; font-size: 10px; }
.robot-stage { height: 245px; margin-top: 11px; }
.stage-topline { left: 12px; right: 12px; top: 11px; font-size: 9px; }
.sensor-hotspot { width: 26px; height: 26px; font-size: 10px; }
.sensor-inspector { margin-top: 8px; padding: 9px; }
.sensor-title { grid-template-columns: 30px 1fr auto; gap: 7px; }
.sensor-number { width: 30px; height: 30px; font-size: 11px; }
.sensor-title small { font-size: 7px; }
.sensor-title strong { font-size: 11px; }
.sensor-state { padding: 4px 6px; font-size: 7px; }
.sensor-inspector p { font-size: 9px; line-height: 1.35; }
.sensor-overview { grid-template-columns: 56px 1fr; gap: 8px; }
.sensor-overview img { width: 56px; height: 44px; }
.sensor-data span { padding: 6px; }
.sensor-data small { font-size: 7px; }
.sensor-data b { font-size: 9px; }
.hardware-grid { gap: 5px; margin-top: 8px; }
.hardware-module {
    min-height: 42px;
    grid-template-columns: 29px 1fr auto;
    gap: 5px;
    padding: 5px;
}
.hardware-module .module-icon { width: 29px; height: 29px; font-size: 13px; }
.hardware-module strong { font-size: 9px; }
.hardware-module small { font-size: 7px; }
.hardware-module em { font-size: 7px; }
.map-heading { height: 66px; }
.map-tools button { height: 34px; padding: 0 9px; }
.delivery-card {
    height: 58px;
    grid-template-columns: 22px minmax(140px,1fr) auto 22px minmax(140px,1fr);
    gap: 8px;
    padding: 7px 11px;
}
.route-point { width: 22px; height: 22px; }
.delivery-card small { font-size: 8px; }
.delivery-card strong { font-size: 11px; }
.delivery-card em { font-size: 9px; }
.route-arrow { font-size: 19px; }
.leaflet-control-attribution { font-size: 9px; }
.map-status { padding: 8px 10px; font-size: 9px; }
.map-telemetry { padding: 11px; }
.map-telemetry small { font-size: 8px; }
.map-telemetry b { font-size: 12px; }
.console-label { padding: 5px 8px; font-size: 8px; }
.event-console p { font-size: 10px; }
.event-console time { font-size: 9px; }
.clear-button { height: 32px; padding: 0 10px; }
.program-actions button, .program-actions a { height: 32px; padding: 0 9px; font-size: 9px; }
.program-panel .section-heading h2 { font-size: 26px; }
.palette-tabs { gap: 4px; margin-top: 12px; padding: 4px; }
.palette-tabs button { height: 31px; font-size: 9px; }
.command-palette { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; min-height: 76px; margin-top: 7px; }
.palette-block {
    min-height: 68px;
    grid-template-rows: 28px auto auto;
    padding: 5px 3px;
}
.palette-block .cmd-icon { width: 28px; height: 28px; font-size: 15px; }
.palette-block .cmd-icon.photo, .program-block .cmd-icon.photo { background: radial-gradient(circle, #315147, #0b1714); }
.palette-block strong { margin-top: 3px; font-size: 8px; }
.palette-block small { font-size: 7px; }
.program-title { margin: 10px 0 7px; font-size: 9px; }
.program-title b { min-width: 22px; height: 22px; }
.block-inspector {
    min-height: 112px;
    display: grid;
    grid-template-columns: 70px minmax(220px, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    padding: 12px 14px;
    border: 1px solid #36584e;
    border-radius: 12px;
    background: #14251f;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.block-inspector.empty { display: grid; place-items: center; border-style: dashed; color: #789087; }
.block-inspector.empty p { margin: 0; font-size: 12px; }
.inspector-command-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid color-mix(in srgb, var(--inspector-color) 75%, white);
    border-radius: 14px;
    color: #07110e;
    background: var(--inspector-color);
    box-shadow: 0 8px 18px rgba(0,0,0,.24);
    font-size: 29px;
    font-weight: 900;
}
.inspector-command-icon.photo { background: radial-gradient(circle, #315147, #0b1714); }
.inspector-command-icon img { width: 100%; height: 100%; object-fit: contain; }
.inspector-command-copy { min-width: 0; }
.inspector-command-copy > small, .inspector-command-setting > small { color: #6ed9b0; font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.inspector-command-copy strong { display: block; margin-top: 3px; font-size: 16px; }
.inspector-command-copy p { margin: 4px 0; color: #a8bbb5; font-size: 11px; line-height: 1.35; }
.inspector-command-copy em { color: #78a899; font-size: 10px; font-style: normal; }
.inspector-command-setting { min-width: 190px; padding-left: 14px; border-left: 1px solid #35534b; text-align: center; }
.inspector-command-setting > div { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 6px 0 4px; }
.inspector-command-setting button { width: 31px; height: 31px; border: 1px solid #4d6e64; border-radius: 8px; color: #fff; background: #0b1714; cursor: pointer; font-size: 18px; }
.inspector-command-setting b { min-width: 72px; color: #fff; font-size: 15px; }
.inspector-command-setting span { color: #829b93; font-size: 9px; }
.phase-overview { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 7px; }
.phase-overview button {
    min-width: 0;
    height: 28px;
    overflow: hidden;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--phase-color) 58%, #314d44);
    border-radius: 7px;
    color: var(--phase-color);
    background: color-mix(in srgb, var(--phase-color) 8%, #0d1a16);
    cursor: pointer;
    font-size: 9px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.phase-overview button:disabled { opacity: .3; cursor: default; }
.program-workspace {
    min-height: 170px;
    max-height: 170px;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    gap: 4px;
    padding: 18px;
    overflow-x: auto;
    overflow-y: hidden;
}
.program-workspace.empty { display: grid; place-items: center; }
.program-workspace.empty::before { width: 100%; height: 130px; font-size: 12px; }
.program-phase {
    height: 126px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    position: relative;
    padding: 27px 10px 9px;
    border: 1px solid color-mix(in srgb, var(--phase-color) 54%, #27443b);
    border-radius: 12px;
    background: color-mix(in srgb, var(--phase-color) 7%, #0d1a16);
}
.phase-label {
    position: absolute;
    left: 10px;
    top: 6px;
    color: var(--phase-color);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .75px;
    text-transform: uppercase;
}
.phase-chain, .repeat-chain { display: flex; align-items: center; gap: 4px; }
.phase-connector {
    flex: 0 0 23px;
    display: grid;
    place-items: center;
    color: #7ee9bf;
    font-size: 20px;
    font-weight: 900;
}
.repeat-frame {
    height: 78px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 19px 7px 5px;
    border: 2px solid var(--repeat-color);
    border-radius: 11px;
    background: rgba(156,123,255,.08);
    box-shadow: inset 0 0 0 3px rgba(156,123,255,.05);
}
.repeat-label {
    position: absolute;
    left: 7px;
    top: 4px;
    color: #cbbcff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .55px;
}
.program-block {
    flex: 0 0 50px;
    width: 50px;
    min-height: 50px;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    text-align: center;
    background: transparent;
    box-shadow: none;
}
.program-block .cmd-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 2px solid color-mix(in srgb, var(--block-color) 78%, white);
    border-radius: 11px;
    font-size: 21px;
    box-shadow: 0 5px 12px rgba(0,0,0,.22);
}
.program-block .remove-block {
    width: 15px;
    height: 15px;
    position: absolute;
    top: -3px;
    right: 1px;
    border-radius: 50%;
    font-size: 9px;
    opacity: .78;
}
.program-block.executing { border: 0; background: transparent; box-shadow: none; }
.program-block.executing .cmd-icon { box-shadow: 0 0 0 3px var(--amber), 0 0 18px rgba(242,181,68,.5); }
.program-block.selected .cmd-icon { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--block-color), 0 7px 18px rgba(0,0,0,.32); }
.node-order {
    min-width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    position: absolute;
    left: -3px;
    bottom: -5px;
    border: 1px solid #739087;
    border-radius: 50%;
    color: #eafff6;
    background: #0b1714;
    font-size: 7px;
    font-weight: 900;
}
.program-connector {
    flex: 0 0 14px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #6ef0bd;
    list-style: none;
}
.program-connector span {
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border: 1px solid #3d7663;
    border-radius: 50%;
    background: #11241e;
    box-shadow: 0 0 0 4px rgba(57,211,155,.06);
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: 900;
}
.program-connector.row-turn {
    flex: 0 0 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin: -9px 0;
    padding-right: 43px;
}
.program-connector.row-turn::before {
    content: "";
    width: calc(100% - 50px);
    height: 15px;
    position: absolute;
    right: 53px;
    top: 0;
    border-right: 2px solid #356a59;
    border-bottom: 2px solid #356a59;
    border-radius: 0 0 9px 0;
}
.program-connector.row-turn span { position: relative; z-index: 1; }
.program-diagnostics { margin-top: 10px; padding: 9px 10px; }
.program-diagnostics strong { font-size: 9px; }
.program-diagnostics button { height: 30px; padding: 0 10px; font-size: 9px; }
.run-summary { margin: 10px 0; padding: 10px; }
.run-summary small { font-size: 8px; }
.run-summary b { font-size: 12px; }
.run-button, .stop-button { min-height: 58px; }
.run-button > span:first-child { width: 32px; height: 32px; font-size: 11px; }
.run-button strong { font-size: 12px; }
.run-button small { font-size: 9px; }
.stop-button { font-size: 11px; }
.destination-map-marker, .base-map-marker { font-size: 10px; }
.route-safety { font-size: 9px; }
.route-safety strong { font-size: 9px; }
.obstacle-map-marker small { font-size: 8px; }
.login-card { width: min(440px, 100%); padding: 30px; }
.login-icon { width: 56px; height: 56px; font-size: 16px; }
.login-card h2 { font-size: 26px; }
.login-card > p:not(.eyebrow) { font-size: 13px; }
.login-card label { font-size: 11px; }
.login-card input { height: 47px; font-size: 14px; }
.login-card button { height: 49px; font-size: 12px; }
.login-card > small { font-size: 10px; }
.toast { padding: 12px 17px; font-size: 11px; }

/* Readability pass: raise small operator-console labels without enlarging the panels */
body { font-size: 17px; }
.brand strong { font-size: 22px; }
.brand small { font-size: 12px; letter-spacing: 1px; }
.mission-chip small { font-size: 11px; }
.mission-chip strong { font-size: 14px; }
.student-badge strong { font-size: 14px; }
.student-badge small { font-size: 11px; }
.secondary-button, .map-tools button, .clear-button { font-size: 12px; }
.eyebrow { font-size: 11px; }
.section-heading h1, .section-heading h2, .map-heading h2 { font-size: 24px; }
.program-panel .section-heading h2 { font-size: 28px; }
.ready-badge { font-size: 11px; }
.stage-topline { font-size: 10px; }
.sensor-title small { font-size: 9px; }
.sensor-title strong { font-size: 13px; }
.sensor-state { font-size: 9px; }
.sensor-inspector p { font-size: 11px; }
.sensor-data small { font-size: 9px; }
.sensor-data b { font-size: 11px; }
.hardware-module strong { font-size: 11px; }
.hardware-module small { font-size: 9px; }
.hardware-module em { font-size: 9px; }
.delivery-card small { font-size: 9px; }
.delivery-card strong { font-size: 13px; }
.delivery-card em { font-size: 10px; }
.map-status { font-size: 11px; }
.route-safety, .route-safety strong { font-size: 10px; }
.map-telemetry small { font-size: 9px; }
.map-telemetry b { font-size: 13px; }
.console-label { font-size: 9px; }
.event-console p { font-size: 11px; }
.event-console time { font-size: 10px; }
.program-actions button, .program-actions a { font-size: 11px; }
.palette-tabs button { font-size: 11px; }
.palette-block strong { font-size: 10px; }
.palette-block small { font-size: 9px; }
.program-title { font-size: 11px; }
.program-diagnostics strong { font-size: 11px; }
.program-diagnostics button { font-size: 11px; }
.run-summary small { font-size: 9px; }
.run-summary b { font-size: 13px; }
.run-button strong { font-size: 13px; }
.run-button small { font-size: 10px; }
.stop-button { font-size: 12px; }
.toast { font-size: 13px; }

@media (max-width: 1450px) {
    .topbar { grid-template-columns: 1fr auto; }
    .lab-shell { grid-template-columns: 270px minmax(760px, 62vw) minmax(0, 1fr); }
    .robot-panel, .program-panel { padding: 16px; }
    .hardware-module em { display: none; }
    .map-panel { grid-template-rows: 98px 72px 82px minmax(390px, 1fr) 46px; padding: 0 9px; }
    .map-heading { height: 98px; align-items: stretch; flex-direction: column; justify-content: center; gap: 5px; }
    .map-heading .eyebrow { display: none; }
    .map-heading h2 { font-size: 19px; line-height: 1; }
    .map-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .map-tools button { height: 32px; padding: 0 3px; font-size: 10px; }
    .delivery-card { height: 65px; grid-template-columns: 22px minmax(0,1fr); }
    .delivery-card > .start, .delivery-card > span:nth-child(2), .delivery-card > .route-arrow { display: none; }
    .route-safety span { display: none; }
    .control-route-switcher { grid-template-columns: 1fr 1fr; }
    .control-route-switcher > small { display: none; }
}

@media (max-width: 1180px) {
    .lab-shell { grid-template-columns: 220px 710px minmax(0, 1fr); }
    .robot-stage { height: 220px; }
    .command-palette { grid-template-columns: repeat(4, 1fr); }
    .block-inspector { grid-template-columns: 62px 1fr auto; }
    .route-safety span { display: none; }
}
@media (max-width: 1080px) {
    body { overflow: auto; }
    .topbar { position: sticky; top: 0; grid-template-columns: 1fr auto; }
    .mission-chip { display: none; }
    .lab-shell {
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "program program"
            "map map"
            "robot robot";
        overflow: visible;
    }
    .robot-panel, .program-panel { overflow: visible; }
    .map-panel { min-height: 650px; }
}
@media (max-width: 680px) {
    .topbar { height: 60px; padding: 0 10px; }
    .brand small, .student-badge > span:last-child { display: none; }
    .secondary-button { padding: 0 8px; }
    .lab-shell { display: block; }
    .map-panel { min-height: 620px; padding: 0 9px; }
    .delivery-card { grid-template-columns: 18px 1fr; height: auto; min-height: 74px; }
    .delivery-card .route-arrow, .delivery-card .finish { display: none; }
    .robot-panel, .program-panel { border: 0; }
    .command-palette { grid-template-columns: repeat(4, 1fr); }
    .header-left { gap: 10px; }
    .guide-overlay { padding: 10px; }
    .guide-card { max-height: calc(100vh - 20px); padding: 20px 14px; }
    .guide-columns { grid-template-columns: 1fr; }
    .sample-explanation { align-items: stretch; flex-direction: column; }
    .reference-groups { grid-template-columns: 1fr; }
    .block-inspector { grid-template-columns: 58px 1fr; }
    .inspector-command-icon { width: 54px; height: 54px; }
    .inspector-command-setting { grid-column: 1 / -1; padding: 10px 0 0; border-top: 1px solid #35534b; border-left: 0; }
}

/* Compact header, readable route controls and branded start page */
.topbar {
    height: 58px;
    grid-template-columns: 1fr auto;
    padding: 0 14px;
}
.brand-wordmark { width: auto; height: 40px; display: block; }
.header-actions { justify-self: end; }
.student-badge > span:first-child { width: 34px; height: 34px; }
.secondary-button { height: 34px; }
.lab-shell { height: calc(100vh - 58px); }

.map-panel {
    container-type: inline-size;
    grid-template-rows: 68px 90px 68px minmax(360px, 1fr) 46px;
}
.map-heading {
    height: 68px;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.map-heading .eyebrow { display: none; }
.map-heading h2 { overflow: hidden; font-size: 20px; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.map-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.map-tools button { height: 32px; min-width: 0; padding: 0 5px; font-size: 11px; line-height: 1.05; white-space: normal; }

.delivery-card {
    height: 84px;
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 4px 8px;
    padding: 7px 10px;
}
.delivery-card > .start { grid-column: 1; grid-row: 1; }
.delivery-card > span:nth-child(2) { display: block; grid-column: 2; grid-row: 1; }
.delivery-card > .route-arrow { display: none; }
.delivery-card > .finish { display: grid; grid-column: 1; grid-row: 2; }
.delivery-card > span:nth-child(5) { grid-column: 2; grid-row: 2; }
.delivery-card small { font-size: 8px; }
.delivery-card strong { margin: 1px 0; font-size: 11px; line-height: 1.15; }
.delivery-card em { font-size: 9px; line-height: 1.15; }

.map-command-bar { grid-template-rows: 62px; gap: 0; padding-bottom: 5px; }
.route-safety[hidden] { display: none !important; }
.route-safety { min-height: 34px; gap: 8px; padding: 6px 9px; font-size: 10px; }
.route-safety strong { font-size: 11px; }
.control-route-switcher {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 14px 40px;
    gap: 4px 6px;
    padding: 4px 6px;
}
.control-route-switcher > small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    grid-column: 1 / -1;
    padding: 0;
    font-size: 8px;
    line-height: 12px;
}
.control-route-switcher > small span,
.control-route-switcher > small b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.control-route-switcher > small b { color: #84d9b9; font-size: 8px; letter-spacing: 0; }
.control-route-switcher button { height: 38px; padding: 4px 8px; }
.control-route-switcher span { font-size: 9px; }
.control-route-switcher b { margin-bottom: 1px; font-size: 11px; }

.login-overlay {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 470px);
    align-items: center;
    gap: clamp(30px, 6vw, 100px);
    padding: clamp(28px, 5vw, 80px);
    background:
        linear-gradient(90deg, rgba(5,15,12,.30) 0%, rgba(5,15,12,.12) 45%, rgba(5,15,12,.82) 76%, rgba(5,15,12,.96) 100%),
        url("start-background.webp") center / cover no-repeat;
}
.start-copy {
    max-width: 600px;
    align-self: center;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.start-copy > img { width: min(390px, 80%); height: auto; display: block; margin-bottom: 30px; }
.start-copy > span { color: #67e0b3; font-size: 12px; font-weight: 900; letter-spacing: 2px; }
.start-copy h1 { max-width: 580px; margin: 12px 0 16px; font-size: clamp(36px, 4vw, 62px); line-height: 1.02; letter-spacing: -1.7px; }
.start-copy p { max-width: 570px; margin: 0; color: #d6e7e0; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.55; }
.start-copy > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.start-copy > div b { padding: 8px 11px; border: 1px solid rgba(130,224,188,.48); border-radius: 8px; color: #eafff7; background: rgba(10,31,24,.68); font-size: 11px; backdrop-filter: blur(8px); }
.login-card {
    width: min(470px, 100%);
    grid-column: 2;
    justify-self: end;
    padding: 34px;
    border-color: rgba(112,183,157,.48);
    background: rgba(11,26,21,.94);
    box-shadow: 0 30px 90px rgba(0,0,0,.52);
    backdrop-filter: blur(18px);
}
.login-logo { display: block; width: 230px; max-width: 76%; height: auto; margin-bottom: 18px; }
.login-card h2 { font-size: 30px; }
.login-card > p:not(.eyebrow) { font-size: 14px; }
.login-card label { font-size: 12px; }
.login-card input { height: 50px; font-size: 15px; }
.login-card button { height: 52px; font-size: 13px; }
.login-card > small { font-size: 11px; }

@container (max-width: 430px) {
    .route-safety span { display: none; }
    .control-route-switcher > small span { display: none; }
    .control-route-switcher > small b { width: 100%; text-align: center; }
}

@media (max-width: 900px) {
    .login-overlay { grid-template-columns: 1fr; justify-items: center; background-position: 35% center; }
    .login-card { grid-column: 1; justify-self: center; }
    .login-logo { display: block; }
}

@media (max-width: 680px) {
    .topbar { height: 54px; padding: 0 8px; }
    .brand-wordmark { height: 34px; }
    .student-badge > span:last-child { display: none; }
    .control-session-timer { min-width: 82px; padding: 4px 6px; }
    .control-session-timer small { font-size: 7px; }
    .control-session-timer strong { font-size: 12px; }
    .lab-shell { height: auto; }
    .map-panel { grid-template-rows: 68px 90px 68px minmax(360px, 1fr) 46px; }
    .delivery-card .finish { display: grid; }
    .login-overlay { padding: 16px; }
    .login-card { padding: 24px 20px; }
    .login-name-grid { grid-template-columns: 1fr; gap: 0; }
}

/* Viewport-safe layout: nothing is clipped on short displays. */
.login-overlay {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: start;
}
.login-card { margin-block: auto; }

@media (min-width: 1081px) {
    html, body {
        height: 100%;
        min-height: 0;
    }
    body {
        overflow: hidden;
    }
    .lab-shell {
        height: calc(100dvh - 58px);
        min-height: 0;
        grid-template-columns: clamp(250px, 17vw, 320px) minmax(0, 1fr) 33.333333vw;
        overflow: hidden;
    }
    .robot-panel,
    .program-panel,
    .map-panel {
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
    }
    .map-panel {
        width: 33.333333vw;
        grid-template-rows: auto auto auto minmax(360px, 1fr) auto;
    }
}

@media (min-width: 1081px) and (max-height: 760px) {
    .topbar {
        height: 50px;
        padding-inline: 12px;
    }
    .brand-wordmark { height: 34px; }
    .student-badge > span:first-child {
        width: 30px;
        height: 30px;
    }
    .secondary-button { height: 31px; }
    .lab-shell { height: calc(100dvh - 50px); }
    .robot-panel,
    .program-panel { padding-block: 12px; }
    .map-stage { min-height: 330px; }
}

@media (max-width: 1080px) {
    html, body {
        height: auto;
        min-height: 100%;
    }
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .topbar {
        position: sticky;
        top: 0;
    }
    .lab-shell {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    .robot-panel,
    .program-panel,
    .map-panel {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    .map-panel {
        width: 100%;
        grid-template-rows: auto auto auto minmax(360px, 64dvh) auto;
    }
}

@media (min-width: 681px) and (max-width: 1080px) {
    .lab-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 33.333333vw;
        grid-template-rows: auto auto;
        grid-template-areas:
            "program map"
            "robot map";
        align-items: start;
    }
    .program-panel { grid-area: program; }
    .robot-panel { grid-area: robot; }
    .map-panel {
        grid-area: map;
        width: 33.333333vw;
        height: calc(100dvh - 58px);
        min-height: 0;
        position: sticky;
        top: 58px;
        overflow-x: hidden;
        overflow-y: auto;
        grid-template-rows: auto auto auto minmax(340px, 1fr) auto;
        scrollbar-gutter: stable;
    }
    .program-panel .section-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .program-actions { flex-wrap: wrap; }
}

/* Compact selected-command editor: keep the program itself in view. */
.block-inspector {
    min-height: 76px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    margin-bottom: 6px;
    padding: 7px 10px;
}
.inspector-command-icon {
    width: 44px;
    height: 44px;
    border-width: 2px;
    border-radius: 10px;
    font-size: 22px;
}
.inspector-command-copy > small,
.inspector-command-setting > small { font-size: 8px; }
.inspector-command-copy strong {
    margin-top: 1px;
    font-size: 14px;
}
.inspector-command-copy p {
    display: -webkit-box;
    overflow: hidden;
    margin: 2px 0;
    font-size: 10px;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.inspector-command-copy em { font-size: 9px; }
.inspector-command-setting {
    min-width: 160px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "parameter range"
        "controls controls";
    align-items: center;
    gap: 2px 7px;
    padding-left: 10px;
}
.inspector-command-setting > small { grid-area: parameter; }
.inspector-command-setting > div {
    grid-area: controls;
    margin: 0;
}
.inspector-command-setting > span {
    grid-area: range;
    justify-self: end;
    white-space: nowrap;
}
.inspector-command-setting button {
    width: 28px;
    height: 28px;
    font-size: 16px;
}
.inspector-command-setting b {
    min-width: 62px;
    font-size: 14px;
}

@media (max-width: 520px), (max-height: 520px) {
    .login-overlay {
        place-items: start center;
        padding: 12px;
    }
    .login-card {
        margin-block: 0;
        padding: 18px 16px;
    }
    .login-logo {
        width: 190px;
        margin-bottom: 12px;
    }
    .login-card > p:not(.eyebrow) { margin-bottom: 12px; }
    .login-card label { margin-bottom: 8px; }
    .login-card input { height: 44px; }
    .login-card button { height: 46px; }
}

@media (max-width: 420px) {
    .topbar { gap: 6px; }
    .brand-wordmark { height: 29px; }
    .header-actions { gap: 5px; }
    .student-badge {
        padding-right: 5px;
        border-right: 0;
    }
    .student-badge > span:first-child {
        width: 29px;
        height: 29px;
    }
    .control-session-timer {
        min-width: 70px;
        padding-inline: 4px;
    }
    .secondary-button {
        height: 31px;
        padding-inline: 6px;
    }
    .map-panel {
        grid-template-rows: auto auto auto minmax(340px, 62dvh) auto;
    }
}

@media (max-width: 680px) {
    .program-panel .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .program-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .block-inspector {
        grid-template-columns: 44px minmax(0, 1fr);
        min-height: 74px;
    }
    .inspector-command-icon {
        width: 40px;
        height: 40px;
    }
    .inspector-command-setting {
        min-width: 0;
        padding-top: 6px;
    }
}

/* Control routes live in the upper map toolbar. */
.map-panel {
    grid-template-rows: auto auto minmax(360px, 1fr) auto;
}
.map-heading {
    height: auto;
    min-height: 0;
    padding: 7px 0;
}
.map-tools {
    align-items: stretch;
}
.map-tools #new-address {
    border-color: #efb28e;
    color: #b04e17;
    background: #fff5ee;
}
.map-tools .control-route-switcher {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 12px 34px;
    gap: 3px 5px;
    padding: 3px 5px;
}
.map-tools .control-route-switcher > small {
    grid-column: 1 / -1;
    font-size: 7px;
    line-height: 10px;
}
.map-tools .control-route-switcher button {
    height: 34px;
    border-color: #365149;
    color: #dceae5;
    background: #13241f;
}
.map-tools .control-route-switcher button:hover,
.map-tools .control-route-switcher button.active {
    border-color: var(--green);
    background: #18362c;
}
.route-safety[hidden] { display: none !important; }

@media (min-width: 1081px) and (max-height: 760px) {
    .map-panel {
        grid-template-rows: auto auto minmax(330px, 1fr) auto;
    }
}

@media (min-width: 1081px) and (max-height: 800px) {
    .robot-panel .section-heading h1 {
        font-size: 20px;
        line-height: 1.05;
    }
    .robot-panel .ready-badge {
        padding: 5px 6px;
        font-size: 10px;
    }
    .sensor-inspector {
        padding: 7px;
    }
    .sensor-overview {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 6px;
    }
    .sensor-overview img {
        width: 48px;
        height: 40px;
    }
    .sensor-inspector p {
        display: -webkit-box;
        overflow: hidden;
        margin-block: 5px;
        font-size: 12px;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .sensor-data span {
        padding: 4px;
    }
    .sensor-data small { font-size: 11px; }
    .sensor-data b { font-size: 12px; }
}

@media (max-width: 1080px) {
    .map-panel {
        grid-template-rows: auto auto minmax(360px, 64dvh) auto;
    }
}

@media (max-width: 420px) {
    .map-panel {
        grid-template-rows: auto auto minmax(340px, 62dvh) auto;
    }
}

/* The departure station is constant, so the order card shows only the destination. */
.delivery-card {
    height: 58px;
    min-height: 58px;
    grid-template-columns: 20px minmax(0, 1fr);
    grid-template-rows: 1fr;
}
.delivery-card > .finish {
    display: grid;
    grid-column: 1;
    grid-row: 1;
}
.delivery-card > span.delivery-destination {
    display: block;
    grid-column: 2;
    grid-row: 1;
}

/* Readable type floor for the operator console. */
.brand small,
.student-badge small,
.mission-chip small,
.control-session-timer small,
.eyebrow,
.ready-badge { font-size: 12px; }

.secondary-button,
.map-tools > button,
.clear-button,
.program-actions button,
.program-actions a,
.palette-tabs button,
.editor-mode-tabs button { font-size: 13px; }

.stage-topline { font-size: 12px; }
.sensor-hotspot {
    width: 34px;
    height: 34px;
    font-size: 12px;
}
.sensor-title small,
.sensor-state,
.sensor-data small { font-size: 12px; }
.sensor-number { font-size: 12px; }
.sensor-title strong { font-size: 14px; }
.sensor-inspector p {
    font-size: 13px;
    line-height: 1.4;
}
.sensor-data b { font-size: 13px; }

.hardware-module {
    min-height: 48px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 8px;
}
.hardware-module .module-icon {
    width: 32px;
    height: 32px;
}
.hardware-module strong { font-size: 13px; }
.hardware-module small,
.hardware-module em { font-size: 12px; }

.map-tools > button {
    height: 36px;
}
.map-tools .control-route-switcher {
    grid-template-rows: 16px 40px;
}
.map-tools .control-route-switcher > small,
.map-tools .control-route-switcher > small b { font-size: 12px; }
.map-tools .control-route-switcher button {
    height: 40px;
    font-size: 12px;
}
.control-route-switcher span { font-size: 12px; }
.control-route-switcher b {
    margin-bottom: 1px;
    font-size: 14px;
}

.delivery-card {
    height: 64px;
    min-height: 64px;
}
.delivery-card small { font-size: 12px; }
.delivery-card strong { font-size: 14px; }
.delivery-card em {
    font-size: 12px;
    line-height: 1.25;
}

.map-status,
.event-console p { font-size: 12px; }
.map-telemetry small,
.console-label,
.event-console time { font-size: 12px; }
.map-telemetry b { font-size: 14px; }
.leaflet-control-attribution { font-size: 12px; }
.destination-map-marker,
.base-map-marker,
.obstacle-map-marker small { font-size: 12px; }
.event-console p {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.palette-block {
    min-height: 76px;
}
.palette-block strong,
.program-block strong { font-size: 12px; }
.palette-block small,
.program-block small { font-size: 12px; }
.program-title,
.program-title small,
.program-workspace.empty::before { font-size: 12px; }
.phase-overview button {
    height: 32px;
    font-size: 12px;
}
.phase-title-short { display: none; }
.block-value b,
.block-value button,
.remove-block { font-size: 12px; }

.inspector-command-copy > small,
.inspector-command-setting > small,
.inspector-command-copy em,
.inspector-command-setting span { font-size: 12px; }
.inspector-command-copy p {
    font-size: 12px;
    line-height: 1.25;
}
.inspector-command-copy strong,
.inspector-command-setting b { font-size: 15px; }

.program-diagnostics strong,
.program-diagnostics button { font-size: 12px; }
.run-summary small { font-size: 12px; }
.run-summary b { font-size: 14px; }
.run-button strong { font-size: 14px; }
.run-button small,
.stop-button { font-size: 12px; }
.run-button > span:first-child { font-size: 12px; }

.code-editor-head small,
.code-editor-foot p,
.code-editor textarea,
.code-editor button { font-size: 12px; }

.guide-columns small,
.sample-explanation p:not(.eyebrow),
.sample-explanation button,
.sample-step b,
.sample-step small,
.reference-heading > span,
.reference-command p,
.reference-command small { font-size: 12px; }
.reference-command strong { font-size: 13px; }

.login-card label,
.login-card > small { font-size: 12px; }
.toast { font-size: 13px; }

@media (max-width: 680px) {
    .map-tools > button { font-size: 12px; }
    .hardware-module strong { font-size: 13px; }
    .hardware-module small { font-size: 12px; }
    .phase-title-full { display: none; }
    .phase-title-short { display: inline; }
}

/* The digital twin is assembled directly on the robot, not in numbered callouts. */
.robot-photo {
    transform: scale(1.25);
    transform-origin: 50% 56%;
    padding: 12px 0 0;
}

.sensor-hotspot,
.sensor-hotspot:hover,
.sensor-hotspot.active,
.sensor-hotspot.empty,
.sensor-hotspot.drag-over {
    display: grid;
    place-items: center;
    padding: 2px;
    overflow: visible;
    border: 1px solid rgba(57, 211, 155, .72);
    border-radius: 7px;
    color: transparent;
    background: rgba(7, 17, 14, .76);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .46);
    transform: none;
}

.sensor-hotspot::after { display: none; }

.sensor-hotspot img,
.sensor-hotspot > span {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    transition: opacity .18s, filter .18s, transform .18s;
}

.sensor-hotspot.empty {
    border-style: dashed;
    border-color: rgba(149, 178, 168, .62);
    background: rgba(7, 17, 14, .22);
    box-shadow: none;
}

.sensor-hotspot.empty img,
.sensor-hotspot.empty > span {
    opacity: .22;
    filter: grayscale(1);
}

.sensor-hotspot:not(.empty) {
    border-color: rgba(57, 211, 155, .95);
    background: rgba(7, 17, 14, .28);
    box-shadow: 0 0 0 2px rgba(57, 211, 155, .12), 0 3px 9px rgba(0, 0, 0, .5);
}

.sensor-hotspot:not(.empty) img,
.sensor-hotspot:not(.empty) > span {
    opacity: 1;
    filter: none;
}

.sensor-hotspot:hover,
.sensor-hotspot.active {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(57, 211, 155, .28), 0 3px 10px rgba(0, 0, 0, .55);
}

.sensor-hotspot.drag-over {
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 122, 47, .28);
}

.sensor-hotspot.not-required,
.sensor-hotspot.not-required:hover,
.sensor-hotspot.not-required.active {
    opacity: .12;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* Physical mounting positions and proportions of the real modules. */
.sensor-hotspot.lidar {
    width: 46px;
    height: 38px;
    left: 38%;
    top: 22%;
}
.sensor-hotspot.gps {
    width: 24px;
    height: 39px;
    right: 31%;
    top: 19%;
}
.sensor-hotspot.camera {
    width: 44px;
    height: 27px;
    left: 35%;
    top: 39%;
}
.sensor-hotspot.ultrasonic {
    width: 46px;
    height: 22px;
    left: 35%;
    top: 54%;
}
.sensor-hotspot.bumper {
    width: 57px;
    height: 18px;
    left: 39%;
    bottom: 17%;
}
.sensor-hotspot.encoder {
    width: 27px;
    height: 27px;
    right: 29%;
    bottom: 14%;
    border-radius: 50%;
}
.sensor-hotspot.emergency {
    width: 23px;
    height: 23px;
    right: 30%;
    top: 44%;
    border-radius: 50%;
}
.sensor-hotspot.chassis {
    width: 55px;
    height: 20px;
    left: 48%;
    bottom: 10%;
}
.sensor-hotspot.battery {
    width: 34px;
    height: 25px;
    right: 40%;
    top: 57%;
}
.sensor-hotspot.cargo {
    width: 54px;
    height: 37px;
    right: 18%;
    top: 32%;
}
.sensor-hotspot.imu {
    width: 27px;
    height: 27px;
    left: 47%;
    top: 48%;
}

/* Small, recognisable module drawings for components without separate photos. */
.sensor-hotspot.bumper > span {
    border: 3px solid #a9b6b2;
    border-top: 0;
    border-radius: 3px 3px 10px 10px;
    background: linear-gradient(90deg, transparent 8%, #202b28 8% 92%, transparent 92%);
}
.sensor-hotspot.emergency > span {
    border: 3px solid #e6a72b;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 38%, #ff766a 0 24%, #c71919 25% 66%, #7a0909 67%);
}
.sensor-hotspot.chassis > span {
    position: relative;
    border-radius: 4px;
    background: linear-gradient(#39433f 0 25%, #111916 26% 74%, #39433f 75%);
}
.sensor-hotspot.chassis > span::before,
.sensor-hotspot.chassis > span::after {
    content: "";
    width: 14px;
    position: absolute;
    top: -4px;
    bottom: -4px;
    border: 2px solid #718079;
    border-radius: 7px;
    background: #111;
}
.sensor-hotspot.chassis > span::before { left: 4px; }
.sensor-hotspot.chassis > span::after { right: 4px; }
.sensor-hotspot.cargo > span {
    border: 2px solid #ff9d47;
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.25), transparent 28%),
        linear-gradient(135deg, #ff8a2d, #c94b0b);
    box-shadow: inset 0 -6px 0 rgba(75, 24, 5, .22);
}

@media (max-width: 520px) {
    .robot-photo {
        transform: scale(1.18);
    }
    .sensor-hotspot {
        scale: .88;
        transform-origin: center;
    }
}

/* Keep the robot and selected-module card fixed; scroll only the installation tray. */
@media (min-width: 1081px) {
    .robot-panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .robot-panel > .section-heading,
    .robot-panel > .robot-stage,
    .robot-panel > .sensor-inspector {
        flex: 0 0 auto;
    }
    .hardware-grid {
        min-height: 0;
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-right: 4px;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: #3d6659 transparent;
    }
}

@media (max-width: 1080px) {
    .hardware-grid {
        max-height: min(52dvh, 460px);
        overflow-x: hidden;
        overflow-y: auto;
        padding-right: 4px;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: #3d6659 transparent;
    }
}

/* Non-overlapping physical mounting zones; installed modules merge into the robot. */
.sensor-hotspot.lidar {
    left: 34%;
    top: 22%;
}
.sensor-hotspot.gps {
    right: 20%;
    top: 18%;
}
.sensor-hotspot.camera {
    left: 33%;
    top: 40%;
}
.sensor-hotspot.ultrasonic {
    left: 30%;
    top: 55%;
}
.sensor-hotspot.bumper {
    left: 28%;
    bottom: 15%;
}
.sensor-hotspot.encoder {
    right: 7%;
    bottom: 15%;
}
.sensor-hotspot.emergency {
    right: 5%;
    top: 52%;
}
.sensor-hotspot.chassis {
    left: 32%;
    bottom: 3%;
}
.sensor-hotspot.battery {
    right: 25%;
    top: 64%;
}
.sensor-hotspot.cargo {
    right: 4%;
    top: 35%;
}
.sensor-hotspot.imu {
    left: 59%;
    top: 51%;
}

.sensor-hotspot:not(.empty),
.sensor-hotspot:not(.empty):hover,
.sensor-hotspot:not(.empty).active {
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.sensor-hotspot:not(.empty) img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55));
}