:root {
  --bg: rgb(5, 5, 6);
  --surface: rgb(10, 10, 12);
  --surface-raised: rgb(16, 16, 20);
  --text: rgb(183, 183, 188);
  --text-strong: rgb(238, 238, 242);
  --text-muted: rgb(122, 122, 128);
  --frame-rgb: 82, 82, 88;
  --frame-strong-rgb: 118, 118, 126;
  --frame: rgba(var(--frame-rgb), 0.30);
  --frame-strong: rgba(var(--frame-strong-rgb), 0.52);
  --emphasis-rgb: 230, 230, 230;
  --emphasis: rgb(var(--emphasis-rgb));
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

.devStagingCard,
.gameStagingCard,
.orbStageCard,
.shellCalibCard,
.deathCard,
.logPanel,
.pathBoardPanel,
.cameraInputPanel {
  border-radius: 16px;
  border: 1px solid var(--frame);
  background: rgba(10, 10, 12, 0.96);
}

.runtimeShellStatusCard {
  border: 1px solid var(--frame);
  background: rgba(10, 10, 12, 0.92);
}

.devStagingCard,
.gameStagingCard,
.orbStageCard {
  background: var(--surface);
}

.devStagingButton,
.shellCalibBtn,
.stageButton {
  border: 1px solid var(--frame);
  background: rgba(var(--frame-rgb), 0.12);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.runtimeShellToolButton {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}

.runtimeShellPopupHeader {
  border-bottom: 1px solid rgba(var(--frame-rgb), 0.18);
  background: rgba(16, 16, 20, 0.96);
}

.runtimeShellPopupSubhead {
  border-bottom: 1px solid rgba(var(--frame-rgb), 0.16);
  background: rgba(10, 10, 12, 0.92);
}

.devStagingButton:hover,
.shellBootCollapse:hover,
.runtimeShellToolButton:hover {
  border-color: var(--frame-strong);
  color: var(--text-strong);
}