:root {
  --bs-bg: #f5f7fb;
  --bs-surface: #ffffff;
  --bs-border: #e2e8f0;
  --bs-text: #172033;
  --bs-muted: #64748b;
  --bs-primary: #2563eb;
  --bs-primary-hover: #1d4ed8;
  --bs-dark: #0f172a;
  --bs-radius: 10px;
  --bs-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}

html,
body {
  background: var(--bs-bg);
  color: var(--bs-text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

header {
  min-height: 48px;
  padding: 0 18px;
  background: var(--bs-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

.brainstemBrand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brainstemBrandMark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bs-primary);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: white;
}

.brainstemProduct {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
}

nav {
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  background: var(--bs-surface);
  border-bottom: 1px solid var(--bs-border);
  box-sizing: border-box;
}

nav ul.panelTabs {
  gap: 4px;
  padding-left: 0;
}

nav ul.panelTabs li {
  margin: 0;
  border: 0;
  border-radius: 7px;
  padding: 8px 14px;
  background: transparent;
  color: var(--bs-muted);
  font-size: 14px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
}

nav ul.panelTabs li:hover {
  background: #f1f5f9;
  color: var(--bs-text);
}

nav ul.panelTabs li.active {
  margin-top: 0;
  background: #eff6ff;
  color: var(--bs-primary);
  font-size: 14px;
}

nav .menuBar .menuItem {
  padding: 8px 10px;
  color: var(--bs-muted);
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
}

nav .menuBar .menuItem:hover {
  background: #f1f5f9;
  color: var(--bs-primary);
}

.panels {
  background: white;
}

.blocklyEditor #blocklyPages {
  top: 12px;
  right: 12px;
  padding: 7px 11px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  box-shadow: var(--bs-shadow);
  color: var(--bs-text);
  font-size: 13px;
}

.runSim,
.world,
.reset,
.camera,
.sensors {
  top: 16px;
  font-size: 14px;
  font-weight: 600;
  opacity: 1;
  color: white;
  background: rgba(15, 23, 42, .88);
  backdrop-filter: blur(8px);
  padding: 9px 13px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, background .15s ease;
}

.runSim:hover,
.world:hover,
.reset:hover,
.camera:hover,
.sensors:hover {
  background: var(--bs-primary);
  transform: translateY(-1px);
}

.runSim {
  left: 16px;
}

.world {
  left: 70px;
}

.reset {
  left: 132px;
}

.camera {
  right: 16px;
}

.sensors {
  right: 115px;
}

.sensorReadings {
  top: 64px;
  right: 16px;
  width: 250px;
  color: var(--bs-text);
  background: rgba(255,255,255,.96);
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius);
  box-shadow: var(--bs-shadow);
  backdrop-filter: blur(10px);
}

.sensorReadings .sensorReading table.sensorValues td {
  border: 1px solid var(--bs-border);
  padding: 5px;
}

.worldInfo {
  top: 14px;
  padding: 8px 12px;
  background: rgba(15,23,42,.88);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}

.console {
  background: rgba(15,23,42,.94);
  opacity: 1;
  font-size: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.console.open {
  height: 12em;
}

ul.menuDropDown {
  background: white;
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  box-shadow: var(--bs-shadow);
  padding: 4px;
}

ul.menuDropDown li {
  color: var(--bs-text);
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
}

ul.menuDropDown li:hover {
  background: #f1f5f9;
}

.dialogScreen {
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(3px);
}

.dialogScreen > .dialogWindow {
  background: white;
  color: var(--bs-text);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

.dialogScreen > .dialogWindow > .dialogTitle {
  border-bottom: 1px solid var(--bs-border);
}

.dialogScreen > .dialogWindow select {
  background: white;
  color: var(--bs-text);
  border: 1px solid var(--bs-border);
  border-radius: 6px;
  padding: 7px;
}

.dialogScreen > .dialogWindow > .dialogButtonsRow > button {
  padding: 7px 14px;
  border: 0;
  border-radius: 7px;
  font-weight: 600;
}

.dialogScreen > .dialogWindow > .dialogButtonsRow .btn-success {
  background: var(--bs-primary);
}

.dialogScreen > .dialogWindow > .dialogButtonsRow .btn-success:hover {
  background: var(--bs-primary-hover);
}

.toastMsg {
  width: auto;
  max-width: 520px;
  background: var(--bs-dark);
  border-radius: 8px;
  box-shadow: var(--bs-shadow);
  font-size: 14px;
}

@media (max-width: 800px) {
  header {
    padding: 0 10px;
  }

  .brainstemProduct {
    display: none;
  }

  nav {
    padding: 0 6px;
  }

  nav .menuBar .menuItem {
    padding: 8px 6px;
  }

  .runSim,
  .world,
  .reset,
  .camera,
  .sensors {
    font-size: 12px;
    padding: 7px 9px;
  }
}

/* =========================================================
   BrainSTEM Branding
   ========================================================= */

.brainstemBrand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brainstemLogo {
  display: block;
  width: auto;
  height: 38px;
  max-width: 190px;
  object-fit: contain;
}

.brainstemBrandText {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brainstemBrandText strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
}

.brainstemBrandText span {
  font-size: 11px;
  opacity: 0.72;
  line-height: 1.15;
}

@media (max-width: 700px) {
  .brainstemLogo {
    height: 30px;
    max-width: 145px;
  }

  .brainstemBrandText span {
    display: none;
  }
}


/* =========================================================
   BrainSTEM About
   ========================================================= */

.brainstemAbout {
  max-width: 620px;
  color: #172033;
}

.brainstemAboutBrand {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.brainstemAboutBrand img {
  width: auto;
  height: 44px;
  max-width: 190px;
  object-fit: contain;
}

.brainstemAboutBrand h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
}

.brainstemAboutBrand p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 13px;
}

.brainstemAboutIntro {
  font-size: 14px;
  line-height: 1.6;
}

.brainstemAbout h3 {
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 15px;
}

.brainstemAbout p,
.brainstemAbout li {
  line-height: 1.55;
}

.brainstemAbout a {
  color: #2563eb;
  text-decoration: none;
}

.brainstemAbout a:hover {
  text-decoration: underline;
}

.brainstemAbout ul {
  padding-left: 22px;
}


/* =========================================================
   BrainSTEM Simulator Toolbar
   ========================================================= */

.simToolbar {
  position: absolute;
  z-index: 30;
  top: 16px;
  left: 16px;

  display: flex;
  align-items: center;
  gap: 6px;

  padding: 6px;

  background: rgba(15, 23, 42, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* Override original simulator positioning */

.simToolbar .runSim,
.simToolbar .world,
.simToolbar .reset,
.simToolbar .sensors,
.simToolbar .camera {
  position: static;

  top: auto;
  right: auto;
  bottom: auto;
  left: auto;

  opacity: 1;
  font-size: 13px;
}


/* Shared button */

.simToolButton {
  appearance: none;
  -webkit-appearance: none;

  height: 40px;
  min-width: 40px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 0 13px;

  border: 1px solid transparent;
  border-radius: 10px;

  background: transparent;
  color: #f8fafc;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  user-select: none;

  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 100ms ease,
    box-shadow 140ms ease;
}


.simToolButton:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.10);
}


.simToolButton:active {
  transform: translateY(1px);
}


.simToolButton:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}


/* Primary Run button */

.simToolPrimary {
  background: #2563eb;
  border-color: #3b82f6;

  box-shadow:
    0 4px 12px rgba(37, 99, 235, 0.30);
}


.simToolPrimary:hover {
  background: #1d4ed8;
  border-color: #60a5fa;
}


/* Stop state */

.runSim[data-state="stop"] {
  background: #dc2626;
  border-color: #ef4444;

  box-shadow:
    0 4px 12px rgba(220, 38, 38, 0.28);
}


.runSim[data-state="stop"]:hover {
  background: #b91c1c;
}


/* Sensors active */

.simToolButton.sensors.active {
  background: rgba(37, 99, 235, 0.30);
  border-color: rgba(96, 165, 250, 0.60);
}


/* =========================================================
   Toolbar SVG icons
   ========================================================= */

.simToolButton::before {
  content: "";

  display: block;
  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  background-color: currentColor;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}


.runSim[data-state="run"]::before {
  -webkit-mask-image: url("../brand/icons/run.svg");
  mask-image: url("../brand/icons/run.svg");
}


.runSim[data-state="stop"]::before {
  -webkit-mask-image: url("../brand/icons/stop.svg");
  mask-image: url("../brand/icons/stop.svg");
}


.world::before {
  -webkit-mask-image: url("../brand/icons/world.svg");
  mask-image: url("../brand/icons/world.svg");
}


.reset::before {
  -webkit-mask-image: url("../brand/icons/reset.svg");
  mask-image: url("../brand/icons/reset.svg");
}


.sensors::before {
  -webkit-mask-image: url("../brand/icons/sensors.svg");
  mask-image: url("../brand/icons/sensors.svg");
}


.camera::before {
  -webkit-mask-image: url("../brand/icons/camera.svg");
  mask-image: url("../brand/icons/camera.svg");
}


/* =========================================================
   Related simulator panels
   ========================================================= */

.sensorReadings {
  top: 74px;
  right: 16px;

  width: 240px;
  max-height: calc(100% - 130px);

  padding: 12px;

  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;

  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.20);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


.sensorReadings .sensorReading {
  margin-bottom: 12px;
}


.sensorReadings .sensorType {
  margin-bottom: 5px;

  color: #334155;
  font-size: 12px;
  font-weight: 700;
}


.sensorReadings .sensorReading table.sensorValues td {
  border: 1px solid #e2e8f0;
  padding: 5px 7px;

  font-size: 12px;
}


.worldInfo {
  top: 74px;
}


/* =========================================================
   Responsive toolbar
   ========================================================= */

@media (max-width: 700px) {

  .simToolbar {
    top: 10px;
    left: 10px;
    right: 10px;

    overflow-x: auto;

    scrollbar-width: none;
  }

  .simToolbar::-webkit-scrollbar {
    display: none;
  }

  .simToolButton {
    flex: 0 0 auto;
  }

  .sensorReadings {
    top: 68px;
    right: 10px;
  }

  .worldInfo {
    top: 68px;
  }
}


@media (max-width: 520px) {

  .simToolButton {
    width: 40px;
    min-width: 40px;
    padding: 0;

    font-size: 0;
  }

  .simToolButton::before {
    width: 19px;
    height: 19px;
  }
}


/* Simulator stopping state */

.runSim[data-state="stopping"] {
  background: #475569;
  border-color: #64748b;
  cursor: wait;
  opacity: 0.85;
  box-shadow: none;
}

.runSim[data-state="stopping"]::before {
  -webkit-mask-image: url("../brand/icons/stop.svg");
  mask-image: url("../brand/icons/stop.svg");
}

.runSim:disabled {
  pointer-events: none;
}


/* =========================================================
   BrainSTEM World + Robot Selection Dialogs
   ========================================================= */

.dialogScreen.brainstemSelectionDialog {
  background: rgba(15, 23, 42, 0.64);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


/* Main window */

.dialogScreen.brainstemSelectionDialog > .dialogWindow {
  width: 720px;
  max-width: calc(100% - 32px);
  max-height: 86vh;

  top: 7%;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: #ffffff;
  color: #172033;

  border: 1px solid #e2e8f0;
  border-radius: 18px;

  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.30),
    0 8px 24px rgba(15, 23, 42, 0.12);
}


/* Title */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogTitle {

  padding: 20px 24px 16px;

  color: #0f172a;

  font-size: 19px;
  font-weight: 700;

  border-bottom: 1px solid #e2e8f0;
}


/* Scrollable content */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogBody {

  padding: 20px 24px;

  overflow-y: auto;
}


/* =========================================================
   Main selector
   ========================================================= */

.brainstemSelectionDialog .selectRobot > select,
.brainstemSelectionDialog .selectWorld > select {

  box-sizing: border-box;

  width: 100%;
  height: 46px;

  padding: 0 42px 0 14px;

  background: #ffffff;
  color: #0f172a;

  border: 1px solid #cbd5e1;
  border-radius: 10px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;

  outline: none;
}


.brainstemSelectionDialog .selectRobot > select:hover,
.brainstemSelectionDialog .selectWorld > select:hover {

  border-color: #94a3b8;
}


.brainstemSelectionDialog .selectRobot > select:focus,
.brainstemSelectionDialog .selectWorld > select:focus {

  border-color: #2563eb;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* =========================================================
   Preview card
   ========================================================= */

.dialogWindow .selectRobot .description,
.dialogWindow .selectWorld .description {

  display: grid;

  grid-template-columns: 190px 1fr;

  gap: 0;

  margin-top: 18px;

  overflow: hidden;

  background: #f8fafc;

  border: 1px solid #e2e8f0;
  border-radius: 14px;
}


.dialogWindow .selectRobot .description .thumbnail,
.dialogWindow .selectWorld .description .thumbnail {

  display: block;

  width: 190px;
  height: 190px;

  padding: 10px;

  box-sizing: border-box;

  background: #ffffff;

  object-fit: contain;
}


/* Worlds can use more of the preview space */

.dialogWindow .selectWorld .description .thumbnail {
  object-fit: cover;
}


.dialogWindow .selectRobot .description .text,
.dialogWindow .selectWorld .description .text {

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  padding: 20px;

  color: #475569;

  font-size: 14px;
  line-height: 1.6;

  border-left: 1px solid #e2e8f0;
}


.dialogWindow .selectRobot .description .text p:first-child,
.dialogWindow .selectWorld .description .text p:first-child {
  margin-top: 0;
}


.dialogWindow .selectRobot .description .text p:last-child,
.dialogWindow .selectWorld .description .text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   Configuration area
   ========================================================= */

.dialogWindow .selectRobot .configurations,
.dialogWindow .selectWorld .configurations {

  margin-top: 20px;
  padding: 0;

  max-height: 280px;

  overflow-y: auto;

  background: #ffffff;

  border: 1px solid #e2e8f0;
  border-radius: 12px;
}


.dialogWindow .selectRobot .configurations:before,
.dialogWindow .selectWorld .configurations:before {

  content: "Configuration";

  display: block;

  padding: 12px 14px;

  background: #f8fafc;

  color: #334155;

  border-bottom: 1px solid #e2e8f0;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* World configuration rows */

.dialogWindow
.selectWorld
.configurations
.configuration {

  padding: 13px 14px;

  border-bottom: 1px solid #f1f5f9;
}


.dialogWindow
.selectWorld
.configurations
.configuration:last-child {

  border-bottom: none;
}


.dialogWindow
.selectWorld
.configurations
.configuration
.configurationTitle {

  margin-bottom: 7px;

  color: #475569;

  font-size: 12px;
  font-weight: 700;
}


/* Inputs */

.brainstemSelectionDialog
.configurations select,

.brainstemSelectionDialog
.configurations input[type="text"] {

  box-sizing: border-box;

  width: 100%;
  height: 40px;

  padding: 0 11px;

  background: #ffffff !important;
  color: #0f172a !important;

  border: 1px solid #cbd5e1 !important;
  border-radius: 8px;

  font-family: inherit;
  font-size: 13px !important;

  outline: none;
}


.brainstemSelectionDialog
.configurations select:focus,

.brainstemSelectionDialog
.configurations input[type="text"]:focus {

  border-color: #2563eb !important;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.10);
}


/* Slider */

.brainstemSelectionDialog
.configurations
.slider {

  display: flex;

  align-items: center;

  gap: 12px;
}


.brainstemSelectionDialog
.configurations
.slider input[type="range"] {

  flex: 1;
}


.brainstemSelectionDialog
.configurations
.slider input[type="text"] {

  width: 72px !important;

  text-align: center !important;
}


/* File upload */

.brainstemSelectionDialog
.configurations
input[type="file"] {

  box-sizing: border-box;

  width: 100%;

  padding: 9px;

  background: #f8fafc !important;
  color: #334155 !important;

  border: 1px dashed #cbd5e1 !important;
  border-radius: 8px;

  font-family: inherit;
  font-size: 12px !important;
}


/* Checkbox */

.brainstemSelectionDialog
.configurations
input[type="checkbox"] {

  width: 16px;
  height: 16px;

  margin-right: 7px;

  accent-color: #2563eb;
}


/* =========================================================
   Tooltips
   ========================================================= */

.brainstemSelectionDialog .tooltip {
  border-bottom: none;
}


.brainstemSelectionDialog .tooltip {
  color: #64748b;
}


.brainstemSelectionDialog .tooltip .tooltiptext {

  background: #0f172a;
  color: #ffffff;

  border-radius: 8px;

  padding: 7px 9px;

  font-size: 12px;

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
}


/* =========================================================
   Footer buttons
   ========================================================= */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogButtonsRow {

  box-sizing: border-box;

  display: flex;
  align-items: center;

  gap: 8px;

  width: 100%;

  padding: 14px 20px;

  background: #f8fafc;

  border-top: 1px solid #e2e8f0;
}


.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogButtonsRow
> button {

  min-width: auto;
  height: 38px;

  margin: 0;

  padding: 0 14px;

  border: 1px solid #cbd5e1;
  border-radius: 9px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 130ms ease,
    border-color 130ms ease,
    transform 100ms ease;
}


.dialogScreen.brainstemSelectionDialog
.dialogButtonsRow
.btn-light {

  background: #ffffff;
  color: #334155;
}


.dialogScreen.brainstemSelectionDialog
.dialogButtonsRow
.btn-light:hover {

  background: #f1f5f9;

  border-color: #94a3b8;
}


.dialogScreen.brainstemSelectionDialog
.dialogButtonsRow
.btn-success {

  background: #2563eb;
  color: #ffffff;

  border-color: #2563eb;
}


.dialogScreen.brainstemSelectionDialog
.dialogButtonsRow
.btn-success:hover {

  background: #1d4ed8;

  border-color: #1d4ed8;
}


.dialogScreen.brainstemSelectionDialog
.dialogButtonsRow
button:active {

  transform: translateY(1px);
}


/* Keep Load Map separated on left */

.dialogScreen.brainstemSelectionDialog
.dialogButtonsRow
.push-left {

  margin-right: auto;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 650px) {

  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow {

    top: 3%;

    max-height: 94vh;

    border-radius: 14px;
  }


  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow
  > .dialogTitle {

    padding: 16px 18px;
  }


  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow
  > .dialogBody {

    padding: 16px;
  }


  .dialogWindow .selectRobot .description,
  .dialogWindow .selectWorld .description {

    grid-template-columns: 1fr;
  }


  .dialogWindow .selectRobot .description .thumbnail,
  .dialogWindow .selectWorld .description .thumbnail {

    width: 100%;
    height: 180px;
  }


  .dialogWindow .selectRobot .description .text,
  .dialogWindow .selectWorld .description .text {

    border-left: none;
    border-top: 1px solid #e2e8f0;
  }


  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow
  > .dialogButtonsRow {

    flex-wrap: wrap;

    padding: 12px;
  }


  .dialogScreen.brainstemSelectionDialog
  .dialogButtonsRow
  .push-left {

    margin-right: 0;
  }


  .dialogScreen.brainstemSelectionDialog
  .dialogButtonsRow
  button {

    flex: 1 1 auto;
  }
}


/* =========================================================
   BrainSTEM Selection Dialog — Compact Layout v2
   ========================================================= */


/* Wider modal = much less vertical scrolling */

.dialogScreen.brainstemSelectionDialog > .dialogWindow {
  width: 920px;
  max-width: calc(100vw - 40px);
  max-height: 90vh;
  top: 5%;
}


/* Slightly more compact title */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogTitle {

  padding: 16px 20px;

  font-size: 18px;
}


/* Body consumes available space without wasting room */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogBody {

  padding: 16px 20px;

  overflow-y: auto;
}


/* =========================================================
   WORLD / ROBOT MASTER LAYOUT
   ========================================================= */

.brainstemSelectionDialog .selectWorld,
.brainstemSelectionDialog .selectRobot {

  display: grid;

  grid-template-columns:
    minmax(280px, 0.85fr)
    minmax(360px, 1.15fr);

  grid-template-areas:
    "selector selector"
    "preview settings";

  gap: 14px 18px;

  align-items: start;

  max-height: none;
}


/* Selector always spans full width */

.brainstemSelectionDialog .selectWorld > select,
.brainstemSelectionDialog .selectRobot > select {

  grid-area: selector;

  margin: 0;
}


/* Preview left */

.brainstemSelectionDialog .selectWorld > .description,
.brainstemSelectionDialog .selectRobot > .description {

  grid-area: preview;
}


/* Configuration right */

.brainstemSelectionDialog .selectWorld > .configurations,
.brainstemSelectionDialog .selectRobot > .configurations {

  grid-area: settings;
}


/* =========================================================
   PREVIEW — DON'T CROP ANYTHING
   ========================================================= */

.dialogWindow .selectRobot .description,
.dialogWindow .selectWorld .description {

  display: flex;
  flex-direction: column;

  margin: 0;

  overflow: visible;

  background: #f8fafc;

  border: 1px solid #e2e8f0;
  border-radius: 12px;
}


/* Full image visible */

.dialogWindow .selectRobot .description .thumbnail,
.dialogWindow .selectWorld .description .thumbnail {

  display: block;

  width: 100%;
  height: 190px;

  box-sizing: border-box;

  padding: 10px;

  background: #ffffff;

  object-fit: contain !important;
  object-position: center;

  border-radius: 11px 11px 0 0;
}


/* Description below image */

.dialogWindow .selectRobot .description .text,
.dialogWindow .selectWorld .description .text {

  display: block;

  padding: 13px 15px;

  color: #475569;

  font-size: 13px;
  line-height: 1.45;

  border-left: none;
  border-top: 1px solid #e2e8f0;

  overflow: visible;
}


/* Reduce excess paragraph spacing */

.dialogWindow .description .text p {

  margin-top: 0;
  margin-bottom: 8px;
}


.dialogWindow .description .text p:last-child {

  margin-bottom: 0;
}


/* =========================================================
   CONFIGURATION PANEL
   ========================================================= */

.dialogWindow .selectWorld .configurations,
.dialogWindow .selectRobot .configurations {

  margin: 0;

  max-height: none;

  overflow: visible;

  background: #ffffff;

  border: 1px solid #e2e8f0;
  border-radius: 12px;
}


/* Smaller header */

.dialogWindow .selectWorld .configurations:before,
.dialogWindow .selectRobot .configurations:before {

  padding: 10px 12px;

  font-size: 11px;
}


/* =========================================================
   WORLD SETTINGS — TWO COLUMN GRID
   ========================================================= */

.dialogWindow .selectWorld .configurations {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  align-content: start;
}


.dialogWindow .selectWorld .configurations:before {

  grid-column: 1 / -1;
}


.dialogWindow
.selectWorld
.configurations
.configuration {

  min-width: 0;

  padding: 10px 12px;

  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}


.dialogWindow
.selectWorld
.configurations
.configuration:nth-child(odd) {

  border-right: none;
}


/* Compact config labels */

.dialogWindow
.selectWorld
.configurations
.configuration
.configurationTitle {

  margin-bottom: 5px;

  font-size: 11px;
}


/* Compact inputs */

.brainstemSelectionDialog
.configurations select,

.brainstemSelectionDialog
.configurations input[type="text"] {

  height: 36px;

  font-size: 12px !important;
}


/* =========================================================
   ROBOT SPECS — USE COLUMNS INSTEAD OF LONG VERTICAL LIST
   ========================================================= */

.dialogWindow .selectRobot .configurations {

  padding: 12px 16px 14px;

  column-count: 2;
  column-gap: 26px;
}


.dialogWindow .selectRobot .configurations:before {

  column-span: all;

  margin:
    -12px
    -16px
    10px;

  border-radius: 11px 11px 0 0;
}


.dialogWindow .selectRobot .configurations h3 {

  margin:
    8px
    0
    4px;

  color: #334155;

  font-size: 12px;

  break-after: avoid;
}


.dialogWindow .selectRobot .configurations ul {

  margin:
    0
    0
    10px;

  padding-left: 18px;

  color: #475569;

  font-size: 12px;
  line-height: 1.45;

  break-inside: avoid;
}


.dialogWindow .selectRobot .configurations li {

  margin-bottom: 2px;
}


/* =========================================================
   FOOTER — MORE COMPACT
   ========================================================= */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogButtonsRow {

  flex-shrink: 0;

  padding: 10px 16px;

  gap: 6px;
}


.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogButtonsRow
> button {

  height: 36px;

  padding: 0 12px;

  font-size: 12px;
}


/* =========================================================
   MEDIUM WIDTH
   ========================================================= */

@media (max-width: 820px) {

  .brainstemSelectionDialog .selectWorld,
  .brainstemSelectionDialog .selectRobot {

    grid-template-columns: 1fr;

    grid-template-areas:
      "selector"
      "preview"
      "settings";
  }


  .dialogWindow .selectWorld .description,
  .dialogWindow .selectRobot .description {

    display: grid;

    grid-template-columns:
      180px
      minmax(0, 1fr);
  }


  .dialogWindow .selectWorld .description .thumbnail,
  .dialogWindow .selectRobot .description .thumbnail {

    width: 180px;
    height: 160px;

    border-radius: 11px 0 0 11px;
  }


  .dialogWindow .selectWorld .description .text,
  .dialogWindow .selectRobot .description .text {

    border-top: none;
    border-left: 1px solid #e2e8f0;
  }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 560px) {

  .dialogScreen.brainstemSelectionDialog > .dialogWindow {

    top: 2%;

    max-width: calc(100vw - 16px);
    max-height: 96vh;
  }


  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow
  > .dialogBody {

    padding: 12px;
  }


  .dialogWindow .selectWorld .description,
  .dialogWindow .selectRobot .description {

    display: flex;
    flex-direction: column;
  }


  .dialogWindow .selectWorld .description .thumbnail,
  .dialogWindow .selectRobot .description .thumbnail {

    width: 100%;
    height: 170px;

    border-radius: 11px 11px 0 0;
  }


  .dialogWindow .selectWorld .description .text,
  .dialogWindow .selectRobot .description .text {

    border-left: none;
    border-top: 1px solid #e2e8f0;
  }


  .dialogWindow .selectWorld .configurations {

    grid-template-columns: 1fr;
  }


  .dialogWindow
  .selectWorld
  .configurations
  .configuration {

    border-right: none;
  }


  .dialogWindow .selectRobot .configurations {

    column-count: 1;
  }


  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow
  > .dialogButtonsRow {

    overflow-x: auto;
    flex-wrap: nowrap;
  }


  .dialogScreen.brainstemSelectionDialog
  .dialogButtonsRow
  button {

    flex: 0 0 auto;
  }
}



/* =========================================================
   BrainSTEM Coding Workspace
   ========================================================= */

.blocklyEditor,
.panel[aria-labelledby="navPython"] {
  background: #f8fafc;
}


/* =========================================================
   Blockly workspace
   ========================================================= */

#blocklyDiv {
  background: #f8fafc;
}


/* Main workspace background */

.blocklyMainBackground {
  fill: #f8fafc !important;
  stroke: none !important;
}


/* Toolbox */

.blocklyToolboxDiv {
  background: #ffffff !important;

  border-right: 1px solid #e2e8f0 !important;

  box-shadow:
    3px 0 12px rgba(15, 23, 42, 0.04);

  padding-top: 8px;

  color: #334155 !important;
}


/* Toolbox categories */

.blocklyTreeRow {
  height: 38px !important;

  margin: 2px 7px !important;
  padding: 0 10px !important;

  border-radius: 8px;

  display: flex !important;
  align-items: center;

  transition:
    background 120ms ease,
    color 120ms ease;
}


.blocklyTreeRow:hover {
  background: #f1f5f9 !important;
}


.blocklyTreeSelected {
  background: #eff6ff !important;

  color: #1d4ed8 !important;
}


.blocklyTreeLabel {
  color: #475569 !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size: 13px !important;
  font-weight: 600 !important;
}


.blocklyTreeSelected .blocklyTreeLabel {
  color: #1d4ed8 !important;
}


/* Category indicator */

.blocklyTreeIcon {
  margin-right: 6px !important;
}


/* =========================================================
   Blockly flyout
   ========================================================= */

.blocklyFlyoutBackground {
  fill: #f8fafc !important;
  fill-opacity: 0.98 !important;

  stroke: #e2e8f0 !important;
  stroke-width: 1px !important;
}


.blocklyFlyoutLabelText {
  fill: #475569 !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size: 12px !important;
}


/* =========================================================
   Blockly blocks
   ========================================================= */

.blocklyText {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size: 12px !important;
}


.blocklyEditableText > rect {
  rx: 5px;
  ry: 5px;
}


.blocklyDraggable {
  transition: filter 100ms ease;
}


.blocklyDraggable:hover {
  filter: brightness(1.03);
}


/* =========================================================
   Blockly controls
   ========================================================= */

.blocklyZoom {
  opacity: 0.85;
}


.blocklyZoom > image,
.blocklyZoom > rect {
  transition: opacity 120ms ease;
}


.blocklyZoom:hover {
  opacity: 1;
}


.blocklyScrollbarHandle {
  fill: #94a3b8 !important;

  opacity: 0.45;
}


.blocklyScrollbarHandle:hover {
  opacity: 0.75;
}


/* =========================================================
   Blockly page selector
   ========================================================= */

.blocklyEditor #blocklyPages {
  top: 12px;
  right: 14px;

  min-width: 72px;

  padding: 7px 11px;

  background: rgba(255, 255, 255, 0.96);
  color: #334155;

  border: 1px solid #e2e8f0;
  border-radius: 9px;

  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.08);

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
}


.blocklyEditor #blocklyPages:hover {
  border-color: #94a3b8;
}


/* =========================================================
   Blockly disabled state
   ========================================================= */

.blocklyEditor .disable {
  background: rgba(248, 250, 252, 0.86);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}


.blocklyEditor .disable .enable {
  padding: 12px 18px;

  background: #ffffff;
  color: #2563eb;

  border: 1px solid #2563eb;
  border-radius: 10px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.12);

  font-size: 14px;
  font-weight: 700;
}


/* =========================================================
   Python / Ace editor
   ========================================================= */

#pythonCode {
  background: #ffffff;

  font-size: 14px;
}


/* Editor gutter */

#pythonCode .ace_gutter {
  background: #f8fafc !important;
  color: #94a3b8 !important;

  border-right: 1px solid #e2e8f0;
}


#pythonCode .ace_gutter-active-line {
  background: #f1f5f9 !important;
}


/* Active line */

#pythonCode .ace_active-line {
  background: #f8fafc !important;
}


/* Selection */

#pythonCode .ace_selection {
  background: rgba(37, 99, 235, 0.15) !important;
}


/* Cursor */

#pythonCode .ace_cursor {
  color: #2563eb !important;
}


/* Main editor text */

#pythonCode .ace_text-layer {
  color: #1e293b;
}


/* Line numbers */

#pythonCode .ace_gutter-cell {
  padding-left: 12px;
  padding-right: 10px;
}


/* Cleaner scrollbar */

#pythonCode .ace_scrollbar-v::-webkit-scrollbar,
#pythonCode .ace_scrollbar-h::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}


#pythonCode .ace_scrollbar-v::-webkit-scrollbar-thumb,
#pythonCode .ace_scrollbar-h::-webkit-scrollbar-thumb {
  background: #cbd5e1;

  border: 3px solid transparent;
  border-radius: 8px;

  background-clip: padding-box;
}


/* =========================================================
   Coding tabs
   ========================================================= */

nav ul.panelTabs {
  gap: 4px;

  padding-left: 10px;
}


nav ul.panelTabs li {
  margin-left: 0 !important;

  padding: 8px 15px !important;

  background: transparent !important;
  color: #64748b !important;

  border: none !important;
  border-radius: 8px 8px 0 0 !important;

  font-size: 13px !important;
  font-weight: 600;

  transition:
    background 120ms ease,
    color 120ms ease;
}


nav ul.panelTabs li:hover {
  background: #f1f5f9 !important;

  color: #334155 !important;
}


nav ul.panelTabs li.active {
  margin-top: 0 !important;

  background: #ffffff !important;
  color: #2563eb !important;

  box-shadow:
    inset 0 -2px 0 #2563eb;

  font-size: 13px !important;
}


/* =========================================================
   File / Robot / Help menu
   ========================================================= */

nav .menuBar .menuItem {
  padding: 7px 9px !important;

  color: #64748b !important;

  border-radius: 7px;

  font-size: 12px;
  font-weight: 600 !important;
}


nav .menuBar .menuItem:hover {
  background: #f1f5f9;

  color: #2563eb !important;
}


/* Navigation itself */

nav {
  margin-top: 0 !important;

  min-height: 42px;

  background: #ffffff;

  border-bottom: 1px solid #e2e8f0 !important;
}


/* =========================================================
   Save states
   ========================================================= */

.saveBlockly,
.savePython {
  margin: 0 12px;

  padding: 6px 10px;

  background: #eff6ff;
  color: #2563eb;

  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;
}


.saveBlockly:hover,
.savePython:hover {
  background: #dbeafe;
}


/* =========================================================
   Responsive coding interface
   ========================================================= */

@media (max-width: 600px) {

  nav ul.panelTabs li {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


  nav .menuBar .menuItem {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }


  .blocklyTreeRow {
    height: 42px !important;
  }
}



/* =========================================================
   Blockly Categories — Native Color Edge + Clean Border
   ========================================================= */

.blocklyTreeRow {

  /* IMPORTANT:
     Do not set border or border-left here.
     Blockly supplies the category color on the left edge. */

  border-top: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;

  background: #ffffff !important;

  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04);
}


.blocklyTreeRow:hover {

  background: #f8fafc !important;

  border-top-color: #cbd5e1 !important;
  border-right-color: #cbd5e1 !important;
  border-bottom-color: #cbd5e1 !important;

  box-shadow:
    0 2px 5px rgba(15, 23, 42, 0.07);
}


/* Selected row */

.blocklyTreeSelected {

  background: #eff6ff !important;

  border-top-color: #bfdbfe !important;
  border-right-color: #bfdbfe !important;
  border-bottom-color: #bfdbfe !important;
}


.blocklyTreeSelected .blocklyTreeLabel {

  color: #1d4ed8 !important;
  font-weight: 700 !important;
}


/* =========================================================
   Blockly Toolbox Final Polish
   ========================================================= */

/* Remove unnecessary blank area above first category */

.blocklyToolboxDiv {
  padding-top: 0 !important;
}


/* Remove any Blockly tree spacing at top */

.blocklyTreeRoot {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* Slightly tighter category spacing */

.blocklyTreeRow {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}


/* Category text uses the same color as its native Blockly edge */

.blocklyTreeRow .blocklyTreeLabel {
  color:
    var(--brainstem-category-color, #475569)
    !important;

  font-weight: 650 !important;
}


/* Hover keeps the category identity */

.blocklyTreeRow:hover .blocklyTreeLabel {
  color:
    var(--brainstem-category-color, #334155)
    !important;

  font-weight: 700 !important;
}


/* Selected state also keeps category color */

.blocklyTreeSelected .blocklyTreeLabel {
  color:
    var(--brainstem-category-color, #1d4ed8)
    !important;

  font-weight: 700 !important;
}

.blocklyToolboxDiv {
  padding-top: 0 !important;
}

.blocklyTreeRoot {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* Blockly uses hidden tree rows internally.
   Our custom row styling must not force them visible. */

.blocklyTreeRow.blocklyHidden {
  display: none !important;

  height: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
}


/* =========================================================
   BrainSTEM Header — Restored
   ========================================================= */

header {
  box-sizing: border-box;

  min-height: 58px;

  display: flex;
  align-items: center;

  padding: 8px 16px;

  background: #0f172a;
  color: #ffffff;

  border-bottom: 1px solid rgba(255,255,255,0.08);
}


.brainstemBrand {
  display: flex;
  align-items: center;

  gap: 12px;
}


.brainstemLogo {
  display: block;

  width: auto;
  height: 38px;

  max-width: 180px;

  object-fit: contain;
}


.brainstemBrandText {
  display: flex;
  flex-direction: column;

  line-height: 1.15;
}


.brainstemBrandText strong {
  color: #ffffff;

  font-size: 15px;
  font-weight: 700;
}


.brainstemBrandText span {
  margin-top: 3px;

  color: #94a3b8;

  font-size: 11px;
  font-weight: 500;
}


/* =========================================================
   Simulator Toolbar — Restored
   ========================================================= */

.simToolbar {
  position: absolute;

  top: 14px;
  left: 14px;

  z-index: 20;

  display: flex;
  align-items: center;

  gap: 6px;

  padding: 6px;

  background: rgba(15, 23, 42, 0.90);

  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.22);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.simToolButton {
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 0 11px;

  background: rgba(255,255,255,0.08);
  color: #ffffff;

  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 650;

  cursor: pointer;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 100ms ease;
}


.simToolButton:hover {
  background: rgba(255,255,255,0.15);

  border-color: rgba(255,255,255,0.22);
}


.simToolButton:active {
  transform: translateY(1px);
}


.simToolPrimary {
  background: #2563eb;

  border-color: #2563eb;
}


.simToolPrimary:hover {
  background: #1d4ed8;

  border-color: #1d4ed8;
}


/* Stop */

.runSim[data-state="stop"] {
  background: #dc2626;

  border-color: #dc2626;
}


.runSim[data-state="stop"]:hover {
  background: #b91c1c;

  border-color: #b91c1c;
}


/* Waiting for Python interrupt */

.runSim[data-state="stopping"] {
  background: #64748b;

  border-color: #64748b;

  cursor: wait;
}


/* Sensors active */

.sensors.active {
  background: #0f766e;

  border-color: #14b8a6;
}


/* Modern sensor readings card */

.sensorReadings {
  position: absolute;

  top: 64px;
  left: 14px;

  z-index: 19;

  padding: 10px 12px;

  background: rgba(15, 23, 42, 0.90);
  color: #ffffff;

  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;

  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.20);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-size: 12px;
}


/* Keep world information away from toolbar */

.worldInfo {
  top: 64px !important;
}


/* Simulator toolbar icons */

.simToolButton::before {
  content: "";

  width: 15px;
  height: 15px;

  flex: 0 0 15px;

  background-color: currentColor;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}


.runSim::before {
  mask-image: url("../brand/icons/run.svg");
  -webkit-mask-image: url("../brand/icons/run.svg");
}


.runSim[data-state="stop"]::before {
  mask-image: url("../brand/icons/stop.svg");
  -webkit-mask-image: url("../brand/icons/stop.svg");
}


.world::before {
  mask-image: url("../brand/icons/world.svg");
  -webkit-mask-image: url("../brand/icons/world.svg");
}


.reset::before {
  mask-image: url("../brand/icons/reset.svg");
  -webkit-mask-image: url("../brand/icons/reset.svg");
}


.sensors::before {
  mask-image: url("../brand/icons/sensors.svg");
  -webkit-mask-image: url("../brand/icons/sensors.svg");
}


.camera::before {
  mask-image: url("../brand/icons/camera.svg");
  -webkit-mask-image: url("../brand/icons/camera.svg");
}


@media (max-width: 620px) {

  .brainstemBrandText span {
    display: none;
  }


  .simToolbar {
    right: 8px;
    left: 8px;

    overflow-x: auto;
  }


  .simToolButton {
    flex: 0 0 auto;
  }
}


/* =========================================================
   BrainSTEM Compact Selection Dialogs
   Space-efficient World + Robot layout
   ========================================================= */

.dialogScreen.brainstemSelectionDialog {
  padding: 20px;
  box-sizing: border-box;
}


/* Main dialog shell */

.dialogScreen.brainstemSelectionDialog > .dialogWindow {
  width: min(960px, calc(100vw - 40px));
  max-width: 960px;

  height: auto;
  max-height: calc(100vh - 40px);

  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;

  overflow: hidden;

  border-radius: 14px;
}


/* Title */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogTitle {
  padding: 14px 18px;

  font-size: 17px;
  font-weight: 700;

  line-height: 1.2;
}


/* Scroll only the content area */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogBody {
  min-height: 0;

  padding: 16px 18px;

  overflow-y: auto;
  overflow-x: hidden;
}


/* ---------------------------------------------------------
   Main content grid
   --------------------------------------------------------- */

.brainstemSelectionDialog .selectRobot,
.brainstemSelectionDialog .selectWorld {
  display: grid;

  grid-template-columns:
    minmax(260px, 0.85fr)
    minmax(360px, 1.15fr);

  grid-template-areas:
    "selector selector"
    "description configurations";

  gap: 14px 18px;

  align-items: start;
}


/* Top selector */

.brainstemSelectionDialog .selectRobot > select,
.brainstemSelectionDialog .selectWorld > select {
  grid-area: selector;

  width: 100%;
  height: 40px;

  margin: 0;

  box-sizing: border-box;
}


/* ---------------------------------------------------------
   Preview / description
   --------------------------------------------------------- */

.brainstemSelectionDialog .selectRobot .description,
.brainstemSelectionDialog .selectWorld .description {
  grid-area: description;

  display: grid;

  grid-template-columns: 120px minmax(0, 1fr);

  gap: 14px;

  align-items: start;

  margin: 0;
  padding: 14px;

  min-width: 0;

  box-sizing: border-box;
}


/* Preview image */

.brainstemSelectionDialog
.selectRobot
.description
.thumbnail,

.brainstemSelectionDialog
.selectWorld
.description
.thumbnail {
  width: 120px;
  height: 120px;

  max-width: 120px;
  max-height: 120px;

  margin: 0;

  object-fit: contain;

  border-radius: 8px;
}


/* Description text */

.brainstemSelectionDialog
.selectRobot
.description
.text,

.brainstemSelectionDialog
.selectWorld
.description
.text {
  min-width: 0;

  margin: 0;

  font-size: 13px;
  line-height: 1.45;
}


/* Kill unnecessary vertical spacing */

.brainstemSelectionDialog
.description
.text
p:first-child {
  margin-top: 0;
}

.brainstemSelectionDialog
.description
.text
p:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   Configuration panel
   --------------------------------------------------------- */

.brainstemSelectionDialog .selectRobot .configurations,
.brainstemSelectionDialog .selectWorld .configurations {
  grid-area: configurations;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px 14px;

  align-content: start;

  margin: 0;
  padding: 14px;

  min-width: 0;

  box-sizing: border-box;
}


/* Configuration heading spans both columns */

.brainstemSelectionDialog
.configurations::before {
  grid-column: 1 / -1;
}


/* Individual configuration */

.brainstemSelectionDialog
.configurations
.configuration {
  min-width: 0;

  margin: 0;
}


/* Configuration labels */

.brainstemSelectionDialog
.configurationTitle {
  margin: 0 0 5px;

  font-size: 12px;
  font-weight: 650;
}


/* Inputs */

.brainstemSelectionDialog
.configuration
select,

.brainstemSelectionDialog
.configuration
input {
  width: 100%;
  min-width: 0;

  box-sizing: border-box;
}


/* HTML/help content inside configuration */

.brainstemSelectionDialog
.configuration
> div:not(.configurationTitle) {
  margin-top: 6px;

  font-size: 12px;
  line-height: 1.35;
}


/* ---------------------------------------------------------
   Bottom actions stay visible
   --------------------------------------------------------- */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogButtonsRow {
  position: relative;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 8px;

  padding: 10px 18px;

  margin: 0;

  background: #ffffff;

  border-top: 1px solid #e2e8f0;
}


/* Compact buttons */

.brainstemSelectionDialog
.dialogButtonsRow
button {
  min-width: 84px;
  height: 36px;

  margin: 0;

  padding: 0 16px;

  border-radius: 8px;
}


/* ---------------------------------------------------------
   Medium screens
   --------------------------------------------------------- */

@media (max-width: 679px) {

  .brainstemSelectionDialog .selectRobot,
  .brainstemSelectionDialog .selectWorld {
    grid-template-columns: 1fr;

    grid-template-areas:
      "selector"
      "description"
      "configurations";
  }


  .brainstemSelectionDialog
  .selectRobot
  .configurations,

  .brainstemSelectionDialog
  .selectWorld
  .configurations {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* ---------------------------------------------------------
   Small screens
   --------------------------------------------------------- */

@media (max-width: 560px) {

  .dialogScreen.brainstemSelectionDialog {
    padding: 8px;
  }


  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow {
    width: calc(100vw - 16px);

    max-height: calc(100vh - 16px);
  }


  .brainstemSelectionDialog
  .selectRobot
  .description,

  .brainstemSelectionDialog
  .selectWorld
  .description {
    grid-template-columns: 90px minmax(0, 1fr);
  }


  .brainstemSelectionDialog
  .selectRobot
  .description
  .thumbnail,

  .brainstemSelectionDialog
  .selectWorld
  .description
  .thumbnail {
    width: 90px;
    height: 90px;
  }


  .brainstemSelectionDialog
  .selectRobot
  .configurations,

  .brainstemSelectionDialog
  .selectWorld
  .configurations {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   BrainSTEM Selection Dialog — Tablet Optimization
   ========================================================= */

/* Normal tablet + desktop */
@media (min-width: 680px) {

  .dialogScreen.brainstemSelectionDialog {
    padding: 12px;
  }

  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow {
    width: min(960px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
  }

  .brainstemSelectionDialog .selectRobot,
  .brainstemSelectionDialog .selectWorld {
    grid-template-columns:
      minmax(220px, 0.8fr)
      minmax(300px, 1.2fr);

    grid-template-areas:
      "selector selector"
      "description configurations";

    gap: 12px 14px;
  }

  .brainstemSelectionDialog
  .selectRobot
  .description,

  .brainstemSelectionDialog
  .selectWorld
  .description {
    grid-template-columns: 100px minmax(0, 1fr);

    gap: 10px;

    padding: 12px;
  }

  .brainstemSelectionDialog
  .selectRobot
  .description
  .thumbnail,

  .brainstemSelectionDialog
  .selectWorld
  .description
  .thumbnail {
    width: 100px;
    height: 100px;

    max-width: 100px;
    max-height: 100px;
  }

  .brainstemSelectionDialog
  .selectRobot
  .configurations,

  .brainstemSelectionDialog
  .selectWorld
  .configurations {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px 10px;

    padding: 12px;
  }
}


/* Narrow tablet / split-screen */
@media (max-width: 679px) and (min-width: 561px) {

  .dialogScreen.brainstemSelectionDialog {
    padding: 10px;
  }

  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .brainstemSelectionDialog .selectRobot,
  .brainstemSelectionDialog .selectWorld {
    grid-template-columns: 1fr;

    grid-template-areas:
      "selector"
      "description"
      "configurations";

    gap: 10px;
  }

  .brainstemSelectionDialog
  .selectRobot
  .description,

  .brainstemSelectionDialog
  .selectWorld
  .description {
    grid-template-columns: 90px minmax(0, 1fr);

    padding: 10px;
  }

  .brainstemSelectionDialog
  .selectRobot
  .description
  .thumbnail,

  .brainstemSelectionDialog
  .selectWorld
  .description
  .thumbnail {
    width: 90px;
    height: 90px;
  }

  .brainstemSelectionDialog
  .selectRobot
  .configurations,

  .brainstemSelectionDialog
  .selectWorld
  .configurations {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px 10px;

    padding: 10px;
  }
}



/* =========================================================
   BrainSTEM Dialog Final Compact Adjustments
   ========================================================= */

/* Preview on top, description underneath */
.brainstemSelectionDialog
.selectRobot
.description,

.brainstemSelectionDialog
.selectWorld
.description {
  display: flex;
  flex-direction: column;

  gap: 8px;

  padding: 10px;
}


/* Center preview */
.brainstemSelectionDialog
.selectRobot
.description
.thumbnail,

.brainstemSelectionDialog
.selectWorld
.description
.thumbnail {
  width: 100%;
  height: 105px;

  max-width: 180px;
  max-height: 105px;

  align-self: center;

  object-fit: contain;
}


/* Description directly below image */
.brainstemSelectionDialog
.selectRobot
.description
.text,

.brainstemSelectionDialog
.selectWorld
.description
.text {
  width: 100%;

  font-size: 12px;
  line-height: 1.35;
}


/* Tighten configuration rows including Wall Height */
.brainstemSelectionDialog
.configuration {
  margin: 0;
}


.brainstemSelectionDialog
.configurationTitle {
  margin-bottom: 3px;

  font-size: 11px;
  line-height: 1.2;
}


/* Smaller controls */
.brainstemSelectionDialog
.configuration
select,

.brainstemSelectionDialog
.configuration
input {
  height: 30px;

  padding-top: 3px;
  padding-bottom: 3px;

  font-size: 12px;
}


/* Slightly tighter configuration panel */
.brainstemSelectionDialog
.selectWorld
.configurations,

.brainstemSelectionDialog
.selectRobot
.configurations {
  gap: 6px 10px;

  padding: 10px;
}



/* =========================================================
   BrainSTEM Dialog Preview + Description Polish
   ========================================================= */

/* Let the preview use the full left-column width */
.brainstemSelectionDialog
.selectRobot
.description
.thumbnail,

.brainstemSelectionDialog
.selectWorld
.description
.thumbnail {
  display: block;

  width: 100%;
  height: 180px;

  max-width: none;
  max-height: 180px;

  margin: 0;

  object-fit: contain;
  object-position: center;
}


/* Stronger, more readable description */
.brainstemSelectionDialog
.selectRobot
.description
.text,

.brainstemSelectionDialog
.selectWorld
.description
.text {
  width: 100%;

  margin-top: 4px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;

  color: #334155;
}


/* Make the first line/title stronger if present */
.brainstemSelectionDialog
.description
.text
p:first-child {
  margin-top: 0;
  margin-bottom: 6px;

  font-size: 15px;
  font-weight: 700;

  color: #0f172a;
}


/* Keep remaining description compact */
.brainstemSelectionDialog
.description
.text
p {
  margin-top: 5px;
  margin-bottom: 5px;
}


/* Tablet: still give the preview useful visual space */
@media (min-width: 680px) and (max-width: 900px) {

  .brainstemSelectionDialog
  .selectRobot
  .description
  .thumbnail,

  .brainstemSelectionDialog
  .selectWorld
  .description
  .thumbnail {
    height: 160px;
    max-height: 160px;
  }

}



/* =========================================================
   BrainSTEM Robotics Lab
   Youth-Focused App Polish
   ========================================================= */

.brainstemSelectionDialog {
  --bs-navy: #0f172a;
  --bs-text: #334155;
  --bs-muted: #64748b;

  --bs-blue: #2563eb;
  --bs-blue-dark: #1d4ed8;
  --bs-blue-light: #eff6ff;

  --bs-orange: #f59e0b;
  --bs-orange-light: #fff7ed;

  --bs-border: #dbe4f0;
  --bs-panel: #ffffff;
  --bs-surface: #f8fafc;

  --bs-shadow:
    0 16px 40px rgba(15, 23, 42, 0.12);
}


/* ---------------------------------------------------------
   Dialog background
   --------------------------------------------------------- */

.dialogScreen.brainstemSelectionDialog {
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(37, 99, 235, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(245, 158, 11, 0.08),
      transparent 28%
    ),
    rgba(241, 245, 249, 0.96);
}


/* ---------------------------------------------------------
   Main app window
   --------------------------------------------------------- */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow {
  background: #ffffff;

  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 22px;

  box-shadow: var(--bs-shadow);

  overflow: hidden;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogTitle {
  padding: 18px 22px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbff 100%
    );

  border-bottom: 1px solid var(--bs-border);

  color: var(--bs-navy);

  font-size: 24px;
  font-weight: 800;

  letter-spacing: -0.5px;
}


/* ---------------------------------------------------------
   Main body
   --------------------------------------------------------- */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogBody {
  padding: 18px;

  background: #f8fafc;
}


/* ---------------------------------------------------------
   Main world selector
   --------------------------------------------------------- */

.brainstemSelectionDialog
.selectWorld
> select,

.brainstemSelectionDialog
.selectRobot
> select {
  height: 52px;

  padding: 0 18px;

  background-color: #ffffff;

  border: 2px solid #d7e1ee;
  border-radius: 14px;

  color: var(--bs-navy);

  font-size: 16px;
  font-weight: 750;

  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.04);

  cursor: pointer;

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}


.brainstemSelectionDialog
.selectWorld
> select:hover,

.brainstemSelectionDialog
.selectRobot
> select:hover {
  border-color: #93b4f7;
}


.brainstemSelectionDialog
.selectWorld
> select:focus,

.brainstemSelectionDialog
.selectRobot
> select:focus {
  outline: none;

  border-color: var(--bs-blue);

  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.12);
}


/* ---------------------------------------------------------
   Preview card
   --------------------------------------------------------- */

.brainstemSelectionDialog
.selectWorld
.description,

.brainstemSelectionDialog
.selectRobot
.description {
  position: relative;

  overflow: hidden;

  padding: 14px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbff 100%
    );

  border: 1px solid var(--bs-border);
  border-radius: 18px;

  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.05);
}


/* Little accent bar */

.brainstemSelectionDialog
.description::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 5px;

  background:
    linear-gradient(
      90deg,
      var(--bs-blue),
      #60a5fa,
      var(--bs-orange)
    );
}


/* ---------------------------------------------------------
   Preview image
   --------------------------------------------------------- */

.brainstemSelectionDialog
.selectWorld
.description
.thumbnail,

.brainstemSelectionDialog
.selectRobot
.description
.thumbnail {
  width: 100%;

  height: 230px;
  max-height: 230px;

  padding: 8px;

  box-sizing: border-box;

  background:
    linear-gradient(
      145deg,
      #f8fafc,
      #eef4fb
    );

  border-radius: 14px;

  object-fit: contain;

  transition:
    transform 180ms ease;
}


.brainstemSelectionDialog
.description:hover
.thumbnail {
  transform: scale(1.015);
}


/* ---------------------------------------------------------
   Description copy
   --------------------------------------------------------- */

.brainstemSelectionDialog
.description
.text {
  padding: 4px 8px 2px;

  color: var(--bs-text);

  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}


.brainstemSelectionDialog
.description
.text
p:first-child {
  margin-top: 8px;
  margin-bottom: 6px;

  color: var(--bs-navy);

  font-size: 17px;
  font-weight: 800;
}


.brainstemSelectionDialog
.description
.text
p {
  margin-top: 5px;
  margin-bottom: 5px;
}


/* ---------------------------------------------------------
   Configuration card
   --------------------------------------------------------- */

.brainstemSelectionDialog
.selectWorld
.configurations,

.brainstemSelectionDialog
.selectRobot
.configurations {
  padding: 16px;

  background: #ffffff;

  border: 1px solid var(--bs-border);
  border-radius: 18px;

  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.05);
}


/* Configuration heading */

.brainstemSelectionDialog
.configurations::before {
  padding: 0 2px 12px;

  color: var(--bs-navy);

  font-size: 14px;
  font-weight: 800;

  letter-spacing: 0.04em;

  border-bottom: 1px solid #e6edf5;
}


/* ---------------------------------------------------------
   Individual settings
   --------------------------------------------------------- */

.brainstemSelectionDialog
.configuration {
  padding: 10px;

  background: #fbfdff;

  border: 1px solid transparent;
  border-radius: 12px;

  transition:
    background 130ms ease,
    border-color 130ms ease,
    transform 130ms ease;
}


.brainstemSelectionDialog
.configuration:hover {
  background: var(--bs-blue-light);

  border-color: #d7e6ff;
}


/* Labels */

.brainstemSelectionDialog
.configurationTitle {
  margin-bottom: 7px;

  color: #475569;

  font-size: 13px;
  font-weight: 750;

  line-height: 1.25;
}


/* ---------------------------------------------------------
   Text / number inputs
   --------------------------------------------------------- */

.brainstemSelectionDialog
.configuration
input[type="text"],

.brainstemSelectionDialog
.configuration
input[type="number"] {
  height: 38px;

  padding: 0 12px;

  background: #ffffff;

  border: 2px solid #d7e1ee;
  border-radius: 10px;

  color: var(--bs-navy);

  font-size: 14px;
  font-weight: 650;

  transition:
    border-color 140ms ease,
    box-shadow 140ms ease;
}


.brainstemSelectionDialog
.configuration
input:focus {
  outline: none;

  border-color: var(--bs-blue);

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.11);
}


/* ---------------------------------------------------------
   Select fields
   --------------------------------------------------------- */

.brainstemSelectionDialog
.configuration
select {
  height: 38px;

  padding: 0 12px;

  background-color: #ffffff;

  border: 2px solid #d7e1ee;
  border-radius: 10px;

  color: var(--bs-navy);

  font-size: 14px;
  font-weight: 650;

  cursor: pointer;
}


.brainstemSelectionDialog
.configuration
select:focus {
  outline: none;

  border-color: var(--bs-blue);

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.11);
}


/* ---------------------------------------------------------
   Range sliders
   --------------------------------------------------------- */

.brainstemSelectionDialog
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;

  height: 6px;

  background: #dbe4ee;

  border-radius: 999px;

  cursor: pointer;
}


.brainstemSelectionDialog
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;

  width: 22px;
  height: 22px;

  background: var(--bs-blue);

  border: 3px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 2px 7px rgba(37, 99, 235, 0.35);

  transition:
    transform 120ms ease,
    background 120ms ease;
}


.brainstemSelectionDialog
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.12);

  background: var(--bs-blue-dark);
}


.brainstemSelectionDialog
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;

  background: var(--bs-blue);

  border: 3px solid #ffffff;
  border-radius: 50%;

  box-shadow:
    0 2px 7px rgba(37, 99, 235, 0.35);
}


/* ---------------------------------------------------------
   Checkbox
   --------------------------------------------------------- */

.brainstemSelectionDialog
input[type="checkbox"] {
  width: 20px;
  height: 20px;

  accent-color: var(--bs-blue);

  cursor: pointer;
}


/* ---------------------------------------------------------
   Tooltips
   --------------------------------------------------------- */

.brainstemSelectionDialog
.tooltip {
  color: var(--bs-blue);

  font-weight: 800;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.dialogScreen.brainstemSelectionDialog
> .dialogWindow
> .dialogButtonsRow {
  padding: 12px 18px;

  background: rgba(255, 255, 255, 0.97);

  border-top: 1px solid var(--bs-border);

  box-shadow:
    0 -6px 18px rgba(15, 23, 42, 0.035);
}


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.brainstemSelectionDialog
.dialogButtonsRow
button {
  min-width: 82px;
  height: 42px;

  padding: 0 16px;

  background: #ffffff;

  border: 1.5px solid #cad6e4;
  border-radius: 11px;

  color: #334155;

  font-size: 14px;
  font-weight: 750;

  cursor: pointer;

  box-shadow:
    0 2px 5px rgba(15, 23, 42, 0.04);

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}


.brainstemSelectionDialog
.dialogButtonsRow
button:hover {
  transform: translateY(-1px);

  background: #f8fafc;

  border-color: #94a3b8;

  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.08);
}


/* Primary action */

.brainstemSelectionDialog
.dialogButtonsRow
.btn-success {
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #3b82f6
    );

  border-color: #2563eb;

  color: #ffffff;

  box-shadow:
    0 5px 12px rgba(37, 99, 235, 0.24);
}


.brainstemSelectionDialog
.dialogButtonsRow
.btn-success:hover {
  background:
    linear-gradient(
      135deg,
      #1d4ed8,
      #2563eb
    );

  border-color: #1d4ed8;

  box-shadow:
    0 7px 16px rgba(37, 99, 235, 0.32);
}


/* ---------------------------------------------------------
   Tablet polish
   --------------------------------------------------------- */

@media (min-width: 680px) and (max-width: 900px) {

  .dialogScreen.brainstemSelectionDialog
  > .dialogWindow
  > .dialogTitle {
    font-size: 21px;
  }


  .brainstemSelectionDialog
  .selectWorld
  .description
  .thumbnail,

  .brainstemSelectionDialog
  .selectRobot
  .description
  .thumbnail {
    height: 190px;
    max-height: 190px;
  }


  .brainstemSelectionDialog
  .configuration {
    padding: 8px;
  }


  .brainstemSelectionDialog
  .configurationTitle {
    font-size: 12px;
  }


  .brainstemSelectionDialog
  .dialogButtonsRow
  button {
    min-width: 76px;
    height: 40px;
  }

}