@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

* {
  box-sizing: border-box
}

:root {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8eef4;
  background: #070b10;
  line-height: 1.35;
  --line: #263441;
  --bright: #405260;
  --text: #e8eef4;
  --muted: #7e8d9b;
  --dim: #53616e;
  --success: #8fc4a4;
  --danger: #d38b93
}

html,
body {
  min-height: 100%;
  background: #070b10
}

body {
  margin: 0;
  background: radial-gradient(circle at 50% -20%, rgba(84, 105, 124, .13), transparent 42%), linear-gradient(180deg, #080d13, #070b10)
}

button,
input,
select {
  font: inherit
}

button {
  color: var(--text);
  background: #151f29;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  transition: .16s ease
}

button:hover:not(:disabled) {
  background: #1b2732;
  border-color: var(--bright);
  transform: translateY(-1px)
}

button:active:not(:disabled) {
  transform: translateY(0)
}

button:disabled {
  opacity: .34;
  cursor: not-allowed
}

button.primary {
  background: #d9e2e9;
  color: #0b1015;
  border-color: #d9e2e9
}

button.primary:hover:not(:disabled) {
  background: #eef3f6
}

button.secondary {
  padding: 9px 12px
}

.emergency {
  background: #25171a !important;
  border-color: #70434a !important;
  color: #e6b9bd !important
}

.navbar {
  height: 64px;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 14, 20, .95);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 18px;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02)
}

.brand {
  display: flex;
  align-items: center;
  min-width: 74px
}

.logo-placeholder {
  font-size: 10px;
  letter-spacing: .2em;
  color: #82909c;
  border: 1px solid #35434f;
  padding: 7px 9px;
  border-radius: 4px
}

.nav-desktop {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto
}

.nav-item {
  display: grid;
  gap: 2px;
  min-width: 62px
}

.nav-label {
  font-size: 8px;
  letter-spacing: .16em;
  color: var(--dim)
}

.nav-item strong {
  font-size: 11px;
  letter-spacing: .04em
}

.nav-toggle {
  padding: 7px 10px;
  font-size: 9px;
  letter-spacing: .12em
}

.icon-button {
  display: none;
  background: transparent;
  border: 0;
  font-size: 23px;
  padding: 4px
}

.mobile-ble {
  display: none;
  margin-left: auto;
  font-size: 10px;
  align-items: center;
  gap: 7px
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #64717d
}

.status-dot.connected {
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(143, 196, 164, .1)
}

.dashboard {
  width: min(1480px, calc(100% - 30px));
  margin: 0 auto;
  padding: 15px 0 24px
}

.connection-strip {
  display: none
}

.telemetry-speed-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(170px, 1.5fr);
  gap: 9px;
  margin-bottom: 11px
}

.telemetry-card,
.speed-panel,
.panel,
.development-panel,
.raw-panel {
  background: linear-gradient(180deg, rgba(17, 25, 34, .98), rgba(11, 17, 23, .98));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28)
}

.telemetry-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 124px;
  padding: 11px
}

.card-top {
  display: flex;
  align-items: center
}

.telemetry-name {
  width: 100%;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: #9eacb9;
  padding: 2px 0;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase
}

.telemetry-name:focus {
  outline: none;
  border-bottom-color: #617384
}

.telemetry-reading {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  align-self: center
}

.telemetry-value {
  font-size: 30px;
  line-height: 1;
  overflow-wrap: anywhere;
  font-weight: 800;
  letter-spacing: -.03em
}

.telemetry-unit {
  font-size: 13px;
  font-weight: 800;
  color: #b5c2cd
}

.telemetry-config-row {
  display: flex;
  align-items: center;
  gap: 5px
}

.telemetry-config-row .unit-select,
.telemetry-config-row .custom-unit {
  flex: 1;
  min-width: 0
}

.telemetry-card .custom-unit[hidden] {
  display: none !important
}

.unit-select,
.custom-unit {
  width: 100%;
  border: 1px solid #2d3a47;
  border-radius: 5px;
  background: #090f15;
  color: #aebac5;
  padding: 5px;
  font-size: 9px
}

.speed-panel {
  padding: 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.speed-heading {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.speed-heading span {
  font-size: 9px;
  letter-spacing: .17em;
  color: var(--muted);
  font-weight: 800
}

.speed-heading strong {
  font-size: 27px
}

.speed-panel input[type=range] {
  width: 100%;
  margin: 12px 0
}

.speed-panel button {
  font-size: 9px;
  padding: 7px;
  letter-spacing: .08em
}

.main-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 11px
}

.panel {
  padding: 15px
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px
}

.eyebrow {
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--dim);
  font-weight: 800
}

.section-heading h2 {
  margin: 3px 0;
  font-size: 18px;
  letter-spacing: .04em
}

.mode-switch {
  display: flex;
  gap: 4px
}

.mode-switch button {
  font-size: 9px;
  padding: 7px 10px;
  letter-spacing: .1em
}

.mode-switch button.active {
  background: #d9e2e9;
  color: #0b1015;
  border-color: #d9e2e9
}

.arrow-control {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 17px 0 5px
}

.arrow-middle {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 108px));
  gap: 8px
}

.arrow-center-spacer {
  width: 100%;
  height: 68px
}

.drive {
  height: 68px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  font-size: 22px;
  background: #0e161e
}

.drive span {
  font-size: 8px;
  letter-spacing: .13em;
  color: #8493a1
}

.drive.up,
.drive.down {
  width: 108px
}

.drive.stop {
  border-color: #604047;
  background: #171114
}

.voice-control {
  min-height: 250px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px
}

.listen {
  padding: 15px 24px;
  font-size: 11px;
  letter-spacing: .12em
}

.listen.listening {
  background: #d9e2e9;
  color: #10151a
}

.voice-state {
  font-size: 9px;
  letter-spacing: .18em;
  color: #8998a6
}

.voice-last {
  width: min(420px, 100%);
  border: 1px solid #2b3742;
  padding: 11px;
  border-radius: 6px;
  text-align: center;
  background: #0b1117
}

.voice-last span,
.command-feedback span {
  display: block;
  font-size: 8px;
  color: var(--dim);
  letter-spacing: .16em;
  font-weight: 800
}

.voice-last strong {
  display: block;
  margin-top: 5px;
  font-size: 17px
}

.voice-supported,
.hint {
  font-size: 9px;
  color: #697887;
  text-align: center
}

.secondary-control {
  display: flex;
  flex-direction: column
}

.secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 25px
}

.secondary-grid button {
  min-height: 62px;
  font-size: 10px;
  letter-spacing: .08em
}

.secondary-grid .emergency {
  grid-column: 1/-1;
  min-height: 76px;
  font-size: 12px;
  letter-spacing: .12em
}

.command-feedback {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line)
}

.command-feedback strong {
  display: block;
  margin-top: 4px;
  font-size: 13px
}

.development-panel,
.raw-panel {
  margin-top: 11px;
  padding: 10px
}

.development-panel summary,
.raw-panel summary {
  cursor: pointer;
  color: #7f8e9c;
  font-size: 9px;
  letter-spacing: .12em;
  font-weight: 700
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 11px 0
}

.dev-grid label {
  display: grid;
  gap: 4px;
  font-size: 8px;
  color: #788795
}

.dev-grid input {
  width: 100%;
  background: #090e14;
  color: #d8e0e7;
  border: 1px solid #2e3a46;
  border-radius: 5px;
  padding: 7px;
  font-size: 9px
}

.muted {
  font-size: 9px;
  color: #72818f
}

#rawReceived {
  margin: 8px 0 0;
  max-height: 160px;
  overflow: auto;
  background: #080c11;
  padding: 10px;
  border-radius: 5px;
  font: 10px ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #b8c5d0
}

.side-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 285px;
  background: #0e151d;
  border-right: 1px solid #2d3945;
  z-index: 60;
  padding: 76px 16px 20px;
  transform: translateX(-100%);
  transition: transform .18s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28)
}

.side-menu.open {
  transform: translateX(0)
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  z-index: 50
}

.menu-heading {
  font-size: 9px;
  color: var(--dim);
  letter-spacing: .16em;
  margin-bottom: 12px
}

.menu-row {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid #27313b;
  font-size: 11px
}

.side-menu>button {
  width: 100%;
  margin-top: 9px;
  padding: 10px;
  font-size: 10px
}

.portrait-overlay {
  position: fixed;
  inset: 0;
  background: #070b10;
  z-index: 100;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px
}

.portrait-overlay h1 {
  font-size: 25px;
  margin: 10px 0 4px
}

.portrait-overlay p {
  color: #8997a5;
  margin: 0
}

.rotate-icon {
  font-size: 50px
}

[hidden] {
  display: none !important
}

@media(max-width:850px) {
  .navbar {
    height: 55px;
    padding: 0 11px;
    gap: 10px
  }

  .hamburger {
    display: block
  }

  .nav-desktop {
    display: none
  }

  .mobile-ble {
    display: flex
  }

  .brand {
    margin-left: 2px
  }

  .dashboard {
    width: calc(100% - 10px);
    padding: 6px 0 12px
  }

  .telemetry-speed-row {
    grid-template-columns: repeat(5, minmax(64px, 1fr)) minmax(100px, 1.5fr);
    gap: 4px
  }

  .telemetry-card,
  .speed-panel {
    padding: 7px;
    min-height: 88px
  }

  .telemetry-value {
    font-size: 19px
  }

  .telemetry-unit {
    font-size: 10px
  }

  .telemetry-name {
    font-size: 8px
  }

  .unit-select,
  .custom-unit {
    font-size: 8px;
    padding: 3px
  }

  .speed-heading strong {
    font-size: 18px
  }

  .speed-panel button {
    padding: 4px;
    font-size: 8px
  }

  .main-grid {
    grid-template-columns: 1fr
  }

  .secondary-control {
    order: 2
  }

  .primary-control {
    order: 1
  }

  .arrow-control {
    padding: 7px 0 2px
  }

  .drive {
    height: 59px
  }

  .drive.up,
  .drive.down {
    width: 90px
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 75px)
  }

  .dev-grid {
    grid-template-columns: 1fr
  }

  .development-panel,
  .raw-panel {
    display: none
  }
}

@media (max-width:850px) and (hover:none) and (pointer:coarse) and (orientation:portrait) {
  body {
    overflow: hidden
  }

  .dashboard,
  .navbar {
    visibility: hidden
  }

  .portrait-overlay:not([hidden]) {
    display: grid !important
  }
}

@media (max-width:850px) and (hover:none) and (pointer:coarse) and (orientation:landscape) {
  .portrait-overlay {
    display: none !important
  }
}

@media (min-width:851px) {
  .portrait-overlay {
    display: none !important
  }
}

.device-profile-wrap {
  display: grid;
  gap: 2px;
  min-width: 145px;
  align-self: center
}

.device-profile-label {
  font-size: 7px;
  letter-spacing: .16em;
  color: var(--dim);
  font-weight: 800
}

.device-profile-wrap select {
  background: #101821;
  color: #d4dee6;
  border: 1px solid #33424f;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 750
}

.custom-ble-profile {
  position: absolute;
  right: 18px;
  top: 64px;
  z-index: 40;
  display: flex;
  gap: 7px;
  padding: 9px;
  background: #0e151d;
  border: 1px solid #33414d;
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4)
}

.custom-ble-profile label {
  display: grid;
  gap: 3px;
  font-size: 7px;
  color: #7e8d9b;
  letter-spacing: .08em
}

.custom-ble-profile input {
  width: 235px;
  background: #090f15;
  color: #c8d3dc;
  border: 1px solid #2d3a47;
  border-radius: 4px;
  padding: 5px;
  font-size: 8px
}

@media(max-width:850px) {

  .device-profile-wrap,
  .custom-ble-profile {
    display: none
  }
}

/* Phase 1C navbar correction */
.nav-desktop .nav-bluetooth {
  display: grid;
  gap: 2px;
  min-width: 82px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  box-shadow: none;
  transform: none;
}

.nav-desktop .nav-bluetooth:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  transform: none;
}

.nav-desktop .nav-bluetooth .nav-label {
  display: block
}

.nav-desktop .nav-bluetooth strong {
  display: block;
  font-size: 11px;
  letter-spacing: .04em;
}

.nav-desktop .nav-bluetooth.connected strong {
  color: var(--success)
}

.nav-desktop .device-profile-wrap {
  min-width: 145px
}

.nav-desktop .device-profile-wrap select {
  height: 31px
}

@media(max-width:850px) {
  .nav-desktop .nav-bluetooth {
    display: none
  }
}

.nav-desktop .nav-bluetooth {
  cursor: pointer
}

.nav-desktop .nav-bluetooth:focus-visible {
  outline: 1px solid #8ea1b2;
  outline-offset: 3px
}

/* Deleted development/raw panels must not reserve layout space. */
.development-panel,
.raw-panel {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  border: 0 !important
}

/* Phase 1C — final viewport/layout refinement */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  min-width: 0;
}

.navbar {
  height: 68px;
}

.dashboard {
  width: 100%;
  max-width: none;
  height: calc(100vh - 68px);
  margin: 0;
  padding: 12px 22px 14px;
  overflow: hidden;
}

.telemetry-speed-row {
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(220px, 1.45fr);
}

.main-grid {
  height: calc(100% - 147px);
  min-height: 0;
}

.panel {
  min-height: 0;
}

.primary-control,
.secondary-control {
  min-height: 0;
}

.logo-image-placeholder {
  width: 66px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid #35434f;
  border-radius: 5px;
  color: #82909c;
  font-size: 10px;
  letter-spacing: .2em;
}

.logo-image-placeholder:hover:not(:disabled) {
  background: rgba(255, 255, 255, .025);
  border-color: #4b5c6a;
  transform: none;
}

.logo-image-placeholder span {
  pointer-events: none
}

/* Day/night themes */
:root[data-theme="light"] {
  --line: #c7d0d8;
  --bright: #8293a2;
  --text: #17222c;
  --muted: #53616e;
  --dim: #687785;
  --success: #397b58;
  --danger: #a04752;
}

html[data-theme="light"],
body[data-theme="light"] {
  background: #edf1f4;
}

body[data-theme="light"] {
  background: linear-gradient(180deg, #f4f7f9, #e9eef2);
}

body[data-theme="light"] .navbar {
  background: rgba(244, 247, 249, .96);
}

body[data-theme="light"] .telemetry-card,
body[data-theme="light"] .speed-panel,
body[data-theme="light"] .panel {
  background: linear-gradient(180deg, #f8fafb, #eef2f5);
  box-shadow: 0 8px 22px rgba(20, 35, 48, .08);
}

body[data-theme="light"] button {
  color: #17222c;
  background: #e5ebef;
  border-color: #c4cfd7;
}

body[data-theme="light"] button.primary,
body[data-theme="light"] .mode-switch button.active {
  background: #17222c;
  color: #f4f7f9;
  border-color: #17222c;
}

body[data-theme="light"] .unit-select,
body[data-theme="light"] .custom-unit,
body[data-theme="light"] .dev-grid input,
body[data-theme="light"] .device-profile-wrap select {
  background: #fff;
  color: #17222c;
  border-color: #b8c4cd;
}

body[data-theme="light"] .emergency {
  background: #f7e8ea !important;
  color: #8e3e49 !important;
  border-color: #d7a1a8 !important;
}

/* Do not let old development/raw rules reintroduce scrollable blocks. */
.development-panel,
.raw-panel {
  display: none !important
}

@media(max-width:850px) {

  html,
  body {
    overflow: hidden
  }

  .navbar {
    height: 55px
  }

  .dashboard {
    height: calc(100vh - 55px);
    padding: 6px 5px 10px;
    overflow: hidden;
  }

  .main-grid {
    height: calc(100% - 99px)
  }
}

/* Phase 1C — Poppins + theme-aware text */
body,
button,
input,
select {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-theme="dark"] {
  color: #e8eef4;
}

body[data-theme="dark"] .telemetry-name,
body[data-theme="dark"] .section-heading h2,
body[data-theme="dark"] .speed-heading strong,
body[data-theme="dark"] .telemetry-value,
body[data-theme="dark"] .telemetry-unit,
body[data-theme="dark"] .command-feedback strong {
  color: #f1f5f8;
}

body[data-theme="dark"] .nav-item strong,
body[data-theme="dark"] .nav-label,
body[data-theme="dark"] .eyebrow,
body[data-theme="dark"] .speed-heading span,
body[data-theme="dark"] .command-feedback span {
  color: #91a1af;
}

body[data-theme="dark"] .drive span,
body[data-theme="dark"] .voice-state,
body[data-theme="dark"] .hint,
body[data-theme="dark"] .voice-supported {
  color: #81909e;
}

body[data-theme="light"] {
  color: #18232d;
}

body[data-theme="light"] .telemetry-name,
body[data-theme="light"] .section-heading h2,
body[data-theme="light"] .speed-heading strong,
body[data-theme="light"] .telemetry-value,
body[data-theme="light"] .telemetry-unit,
body[data-theme="light"] .command-feedback strong,
body[data-theme="light"] .nav-item strong {
  color: #17222c;
}

body[data-theme="light"] .nav-label,
body[data-theme="light"] .eyebrow,
body[data-theme="light"] .speed-heading span,
body[data-theme="light"] .command-feedback span {
  color: #61717e;
}

body[data-theme="light"] .drive span,
body[data-theme="light"] .voice-state,
body[data-theme="light"] .hint,
body[data-theme="light"] .voice-supported {
  color: #687985;
}

body[data-theme="light"] .logo-image-placeholder {
  color: #566875;
  border-color: #aebbc4;
}

body[data-theme="light"] .device-profile-label {
  color: #61717e;
}

/* Phase 1C — navigation and control theme cleanup */
.navbar {
  align-items: center;
}

.nav-desktop {
  align-items: center;
}

.nav-item {
  align-self: center;
}

.nav-toggle {
  align-self: center;
  height: 34px;
  min-width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.logo-image-placeholder {
  width: 68px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #35434f;
  border-radius: 5px;
  color: #82909c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .20em;
}

body[data-theme="dark"] .primary-control .section-heading h2,
body[data-theme="dark"] .secondary-control .section-heading h2 {
  color: #f3f7fa;
}

body[data-theme="dark"] .primary-control .eyebrow,
body[data-theme="dark"] .secondary-control .eyebrow,
body[data-theme="dark"] .primary-control .drive span,
body[data-theme="dark"] .secondary-control .command-feedback span {
  color: #8295a5;
}

body[data-theme="dark"] .primary-control .drive {
  color: #eaf1f5;
}

body[data-theme="dark"] .primary-control .drive span {
  color: #8295a5;
}

body[data-theme="dark"] .secondary-control button {
  color: #eaf1f5;
}

body[data-theme="dark"] .secondary-control button:disabled {
  color: #596672;
}

body[data-theme="dark"] .secondary-control .emergency {
  color: #e7b5bb !important;
}

body[data-theme="light"] .primary-control .section-heading h2,
body[data-theme="light"] .secondary-control .section-heading h2 {
  color: #17222c;
}

body[data-theme="light"] .primary-control .eyebrow,
body[data-theme="light"] .secondary-control .eyebrow,
body[data-theme="light"] .primary-control .drive span,
body[data-theme="light"] .secondary-control .command-feedback span {
  color: #60717e;
}

body[data-theme="light"] .primary-control .drive {
  color: #17222c;
  background: #e7edf1;
  border-color: #c4cfd7;
}

body[data-theme="light"] .primary-control .drive span {
  color: #536672;
}

body[data-theme="light"] .primary-control .drive.stop {
  background: #f2e9eb;
  border-color: #d5b0b6;
}

body[data-theme="light"] .secondary-control button {
  color: #17222c;
  background: #e7edf1;
  border-color: #c4cfd7;
}

body[data-theme="light"] .secondary-control button:disabled {
  color: #87949e;
}

body[data-theme="light"] .secondary-control .emergency {
  color: #8d3d49 !important;
  background: #f7e8ea !important;
  border-color: #d5a2aa !important;
}

body[data-theme="light"] .command-feedback strong {
  color: #17222c;
}

/* Phase 1C — Mobile layout correction
   Voice command functionality is intentionally unchanged/held.
   Mobile gets a real responsive dashboard instead of squeezing desktop cards
   into one row or clipping stacked control panels. */
@media (max-width:850px) {

  html,
  body {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .navbar {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    height: 64px;
    min-height: 64px;
    padding: 0 12px;
    gap: 10px;
    box-sizing: border-box;
  }

  .hamburger {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    font-size: 26px;
  }

  .logo-image-placeholder {
    width: 68px;
    height: 38px;
    flex: 0 0 68px;
  }

  .mobile-ble {
    margin-left: auto;
    min-width: 0;
    max-width: 150px;
  }

  .dashboard {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    padding: 10px 10px 18px;
    overflow: visible;
  }

  .telemetry-speed-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 9px;
  }

  .telemetry-card {
    min-width: 0;
    min-height: 112px;
    padding: 9px;
  }

  .telemetry-name {
    font-size: 9px;
    min-width: 0;
  }

  .telemetry-reading {
    gap: 5px;
  }

  .telemetry-value {
    font-size: 23px;
  }

  .telemetry-unit {
    font-size: 11px;
  }

  .telemetry-config-row {
    min-width: 0;
  }

  .unit-select,
  .custom-unit {
    width: 100%;
    min-width: 0;
    font-size: 9px;
    padding: 5px 6px;
  }

  .speed-panel {
    grid-column: 1 / -1;
    min-height: 112px;
    padding: 10px;
  }

  .speed-heading strong {
    font-size: 23px;
  }

  .speed-panel input[type=range] {
    margin: 9px 0;
  }

  .speed-panel button {
    min-height: 30px;
    padding: 5px;
    font-size: 9px;
  }

  .main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    height: auto;
    min-height: 0;
  }

  .primary-control,
  .secondary-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 350px;
  }

  .panel {
    padding: 13px;
  }

  .section-heading {
    align-items: center;
  }

  .section-heading h2 {
    font-size: 19px;
  }

  .mode-switch button {
    min-height: 34px;
    padding: 7px 11px;
  }

  .arrow-control {
    min-height: 270px;
    padding: 18px 0 8px;
    gap: 8px;
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 68px);
    gap: 7px;
  }

  .drive {
    height: 62px;
    font-size: 21px;
  }

  .drive.up,
  .drive.down {
    width: 82px;
  }

  .secondary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 20px;
  }

  .secondary-grid button {
    min-height: 62px;
    font-size: 10px;
  }

  .secondary-grid .emergency {
    min-height: 70px;
  }

  .command-feedback {
    margin-top: 24px;
  }
}

@media (max-width:480px) {
  .navbar {
    padding: 0 9px;
  }

  .mobile-ble {
    max-width: 125px;
  }

  .dashboard {
    padding-left: 8px;
    padding-right: 8px;
  }

  .telemetry-card {
    min-height: 106px;
    padding: 8px;
  }

  .telemetry-value {
    font-size: 21px;
  }

  .telemetry-unit {
    font-size: 10px;
  }

  .telemetry-name {
    font-size: 8px;
  }

  .primary-control,
  .secondary-control {
    min-height: 335px;
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 62px);
  }

  .drive {
    height: 58px;
  }

  .drive.up,
  .drive.down {
    width: 76px;
  }

  .secondary-grid button {
    min-height: 58px;
  }
}

/* ============================================================
   Phase 1C FINAL — mobile single-screen layout
   ============================================================ */
@media (max-width:850px) {

  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
  }

  body {
    min-width: 0;
  }

  .navbar {
    position: relative;
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 0 8px;
    box-sizing: border-box;
    gap: 7px;
  }

  .hamburger {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    font-size: 23px;
  }

  .logo-image-placeholder {
    width: 60px;
    height: 34px;
    flex: 0 0 60px;
  }

  .mobile-ble {
    margin-left: auto;
    max-width: 118px;
    min-width: 0;
  }

  .dashboard {
    width: 100%;
    height: calc(100vh - 56px);
    min-height: 0;
    max-width: none;
    padding: 6px 7px 7px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Six compact cards: 5 telemetry + speed, all visible without scrolling. */
  .telemetry-speed-row {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin: 0 0 6px;
  }

  .telemetry-card,
  .speed-panel {
    min-width: 0;
    min-height: 0;
    height: 82px;
    padding: 7px;
    box-sizing: border-box;
  }

  .telemetry-name {
    font-size: 8px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .telemetry-reading {
    gap: 3px;
    min-width: 0;
  }

  .telemetry-value {
    font-size: 18px;
    line-height: 1;
  }

  .telemetry-unit {
    font-size: 9px;
    line-height: 1;
  }

  .telemetry-config-row {
    margin-top: 4px;
  }

  .unit-select,
  .custom-unit {
    height: 24px;
    min-height: 24px;
    padding: 2px 4px;
    font-size: 8px;
    border-radius: 4px;
  }

  .speed-panel {
    grid-column: auto;
  }

  .speed-heading {
    min-height: 18px;
  }

  .speed-heading strong {
    font-size: 18px;
    line-height: 1;
  }

  .speed-heading span {
    font-size: 8px;
  }

  .speed-panel input[type=range] {
    margin: 5px 0 3px;
  }

  .speed-panel button {
    height: 22px;
    min-height: 22px;
    padding: 2px;
    font-size: 8px;
  }

  /* Primary + Secondary are deliberately side by side. */
  .main-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }

  .primary-control,
  .secondary-control,
  .panel {
    min-width: 0;
    min-height: 0;
    height: 100%;
    box-sizing: border-box;
  }

  .panel {
    padding: 9px;
  }

  .section-heading {
    gap: 4px;
    margin-bottom: 4px;
  }

  .section-heading h2 {
    font-size: 17px;
    line-height: 1;
  }

  .eyebrow {
    font-size: 7px;
    letter-spacing: .16em;
  }

  .mode-switch {
    gap: 3px;
  }

  .mode-switch button {
    min-height: 27px;
    height: 27px;
    padding: 3px 7px;
    font-size: 8px;
  }

  /* Compact arrow pad centered in the left half. */
  .arrow-control {
    min-height: 0;
    height: calc(100% - 45px);
    padding: 6px 0 0;
    gap: 4px;
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 44px);
    gap: 4px;
  }

  .drive {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 2px;
    font-size: 15px;
  }

  .drive.up,
  .drive.down {
    width: 52px;
    height: 44px;
  }

  .drive span {
    font-size: 6px;
    margin-top: 1px;
  }

  /* Compact device controls in the right half. */
  .secondary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 7px;
  }

  .secondary-grid button {
    min-height: 42px;
    height: 42px;
    padding: 4px;
    font-size: 8px;
  }

  .secondary-grid .emergency {
    min-height: 45px;
    height: 45px;
    grid-column: 1 / -1;
  }

  .command-feedback {
    margin-top: 8px;
    padding-top: 6px;
  }

  .command-feedback span {
    font-size: 7px;
  }

  .command-feedback strong {
    font-size: 10px;
  }

  /* Voice is intentionally held; when opened, keep it contained in its half. */
  .voice-control {
    min-height: 0;
    overflow: hidden;
  }
}

@media (max-width:850px) and (max-height:700px) {
  .navbar {
    height: 50px;
    min-height: 50px;
  }

  .dashboard {
    height: calc(100vh - 50px);
    padding: 4px 6px 5px;
  }

  .telemetry-speed-row {
    gap: 4px;
    margin-bottom: 4px;
  }

  .telemetry-card,
  .speed-panel {
    height: 72px;
    padding: 6px;
  }

  .telemetry-value,
  .speed-heading strong {
    font-size: 16px;
  }

  .unit-select,
  .custom-unit {
    height: 21px;
    min-height: 21px;
  }

  .panel {
    padding: 7px;
  }

  .section-heading h2 {
    font-size: 15px;
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 39px);
  }

  .drive {
    width: 39px;
    height: 39px;
    min-height: 39px;
  }

  .arrow-center-spacer {
    height: 39px;
  }

  .drive.up,
  .drive.down {
    width: 46px;
    height: 39px;
  }

  .secondary-grid button {
    min-height: 37px;
    height: 37px;
  }

  .secondary-grid .emergency {
    min-height: 39px;
    height: 39px;
  }
}

/* ============================================================
   Phase 1C MOBILE SCREEN-FIT — final sizing pass
   Goal: maximize Primary/Secondary control area while keeping
   telemetry compact and preventing clipping/scrollbars.
   ============================================================ */

@media (max-width:850px) {
  .navbar {
    height: 56px;
    min-height: 56px;
  }

  .dashboard {
    height: calc(100dvh - 56px);
    min-height: 0;
    padding: 5px 7px 6px;
    gap: 0;
  }

  /* Very compact telemetry header. */
  .telemetry-speed-row {
    flex: 0 0 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 5px;
  }

  .telemetry-card,
  .speed-panel {
    height: 72px;
    min-height: 72px;
    padding: 6px;
    border-radius: 8px;
  }

  .telemetry-name {
    font-size: 7px;
  }

  .telemetry-value {
    font-size: 16px;
  }

  .telemetry-unit {
    font-size: 8px;
  }

  .telemetry-config-row {
    margin-top: 3px;
  }

  .unit-select,
  .custom-unit {
    height: 20px;
    min-height: 20px;
    padding: 1px 4px;
    font-size: 7px;
  }

  .speed-heading strong {
    font-size: 17px;
  }

  .speed-heading span {
    font-size: 7px;
  }

  .speed-panel input[type=range] {
    margin: 3px 0 2px;
  }

  .speed-panel button {
    height: 20px;
    min-height: 20px;
    font-size: 7px;
  }

  /* Give the two control panels almost all remaining viewport height. */
  .main-grid {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }

  .primary-control,
  .secondary-control,
  .primary-control.panel,
  .secondary-control.panel {
    min-height: 0;
    height: 100%;
  }

  .panel {
    padding: 9px;
    overflow: hidden;
  }

  .section-heading {
    margin-bottom: 2px;
  }

  .section-heading h2 {
    font-size: 16px;
  }

  .mode-switch button {
    height: 26px;
    min-height: 26px;
    padding: 3px 7px;
    font-size: 8px;
  }

  .arrow-control {
    height: calc(100% - 42px);
    min-height: 0;
    padding: 8px 0 0;
    justify-content: flex-start;
    gap: 5px;
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 52px);
    gap: 5px;
  }

  .drive {
    width: 52px;
    height: 52px;
    min-height: 52px;
  }

  .drive.up,
  .drive.down {
    width: 60px;
    height: 52px;
  }

  .drive span {
    font-size: 7px;
  }

  .secondary-grid {
    margin-top: 9px;
    gap: 6px;
  }

  .secondary-grid button {
    height: 52px;
    min-height: 52px;
    font-size: 8px;
  }

  .secondary-grid .emergency {
    height: 56px;
    min-height: 56px;
  }

  .command-feedback {
    margin-top: 9px;
    padding-top: 6px;
  }
}

/* Short-screen phones: use every available pixel without introducing scroll. */
@media (max-width:850px) and (max-height:700px) {
  .navbar {
    height: 50px;
    min-height: 50px;
  }

  .dashboard {
    height: calc(100dvh - 50px);
    padding: 4px 6px 5px;
  }

  .telemetry-speed-row {
    gap: 3px;
    margin-bottom: 4px;
  }

  .telemetry-card,
  .speed-panel {
    height: 64px;
    min-height: 64px;
    padding: 5px;
  }

  .telemetry-name {
    font-size: 6.5px;
  }

  .telemetry-value {
    font-size: 15px;
  }

  .telemetry-unit {
    font-size: 7px;
  }

  .unit-select,
  .custom-unit {
    height: 18px;
    min-height: 18px;
    font-size: 6.5px;
  }

  .speed-heading strong {
    font-size: 15px;
  }

  .speed-panel button {
    height: 18px;
    min-height: 18px;
    font-size: 6.5px;
  }

  .panel {
    padding: 7px;
  }

  .section-heading h2 {
    font-size: 14px;
  }

  .mode-switch button {
    height: 23px;
    min-height: 23px;
    padding: 2px 5px;
    font-size: 7px;
  }

  .arrow-control {
    height: calc(100% - 37px);
    padding-top: 5px;
    gap: 3px;
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 45px);
    gap: 3px;
  }

  .drive {
    width: 45px;
    height: 45px;
    min-height: 45px;
  }

  .drive.up,
  .drive.down {
    width: 52px;
    height: 45px;
  }

  .drive span {
    font-size: 6px;
  }

  .secondary-grid {
    margin-top: 5px;
    gap: 4px;
  }

  .secondary-grid button {
    height: 43px;
    min-height: 43px;
    font-size: 7px;
  }

  .secondary-grid .emergency {
    height: 45px;
    min-height: 45px;
  }

  .command-feedback {
    margin-top: 5px;
    padding-top: 4px;
  }
}

/* Extra-small / very short mobile viewport. */
@media (max-width:430px) and (max-height:600px) {
  .navbar {
    height: 46px;
    min-height: 46px;
  }

  .dashboard {
    height: calc(100dvh - 46px);
    padding: 3px 5px 4px;
  }

  .telemetry-card,
  .speed-panel {
    height: 58px;
    min-height: 58px;
    padding: 4px;
  }

  .telemetry-value {
    font-size: 13px;
  }

  .unit-select,
  .custom-unit {
    height: 16px;
    min-height: 16px;
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 39px);
  }

  .drive {
    width: 39px;
    height: 39px;
    min-height: 39px;
  }

  .drive.up,
  .drive.down {
    width: 46px;
    height: 39px;
  }

  .secondary-grid button {
    height: 37px;
    min-height: 37px;
  }

  .secondary-grid .emergency {
    height: 39px;
    min-height: 39px;
  }
}

/* ============================================================
   Phase 1C FINAL MOBILE COMPOSITION
   Telemetry = one compact row
   Controls = dominant area, side by side
   ============================================================ */

@media (max-width:850px) {

  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
  }

  .navbar {
    height: 52px;
    min-height: 52px;
    padding: 0 7px;
  }

  .dashboard {
    width: 100%;
    height: calc(100dvh - 52px);
    min-height: 0;
    box-sizing: border-box;
    padding: 5px 6px 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* SIX cards in ONE row: 5 telemetry + speed. */
  .telemetry-speed-row {
    flex: 0 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 5px;
  }

  .telemetry-card,
  .speed-panel {
    width: 100%;
    min-width: 0;
    height: 67px;
    min-height: 67px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 7px;
  }

  .telemetry-name {
    display: block;
    width: 100%;
    font-size: 6px;
    line-height: 1;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .telemetry-reading {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
    margin-top: 5px;
    white-space: nowrap;
  }

  .telemetry-value {
    font-size: 13px;
    line-height: 1;
    min-width: 0;
  }

  .telemetry-unit {
    font-size: 6px;
    line-height: 1;
  }

  .telemetry-config-row {
    margin-top: 4px;
    min-width: 0;
  }

  .unit-select,
  .custom-unit {
    width: 100%;
    height: 18px;
    min-height: 18px;
    padding: 1px 2px;
    font-size: 6px;
    border-radius: 4px;
  }

  /* Speed stays in the same row and is intentionally compact. */
  .speed-panel {
    overflow: hidden;
  }

  .speed-heading {
    min-height: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .speed-heading span {
    font-size: 6px;
  }

  .speed-heading strong {
    font-size: 15px;
    line-height: 1;
  }

  .speed-panel input[type=range] {
    width: 100%;
    margin: 4px 0 2px;
  }

  .speed-panel button {
    width: 100%;
    height: 18px;
    min-height: 18px;
    padding: 1px;
    font-size: 6px;
  }

  /* The controls dominate the remaining screen. */
  .main-grid {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
  }

  .primary-control,
  .secondary-control,
  .primary-control.panel,
  .secondary-control.panel {
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .panel {
    padding: 9px;
    box-sizing: border-box;
  }

  .section-heading {
    margin-bottom: 3px;
  }

  .section-heading h2 {
    font-size: 17px;
    line-height: 1;
  }

  .eyebrow {
    font-size: 7px;
    letter-spacing: .15em;
  }

  .mode-switch {
    gap: 3px;
  }

  .mode-switch button {
    height: 27px;
    min-height: 27px;
    padding: 3px 7px;
    font-size: 8px;
  }

  /* Larger arrow controls because controls are the primary experience. */
  .arrow-control {
    height: calc(100% - 43px);
    min-height: 0;
    padding-top: 12px;
    justify-content: flex-start;
    gap: 6px;
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 56px);
    gap: 6px;
  }

  .drive {
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 2px;
  }

  .drive.up,
  .drive.down {
    width: 66px;
    height: 56px;
  }

  .drive span {
    font-size: 7px;
    margin-top: 1px;
  }

  /* Larger device controls. */
  .secondary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
  }

  .secondary-grid button {
    height: 54px;
    min-height: 54px;
    padding: 4px;
    font-size: 8px;
  }

  .secondary-grid .emergency {
    height: 58px;
    min-height: 58px;
  }

  .command-feedback {
    margin-top: 9px;
    padding-top: 6px;
  }

  .command-feedback span {
    font-size: 7px;
  }

  .command-feedback strong {
    font-size: 10px;
  }
}

/* Landscape/short mobile: preserve the same one-row telemetry and
   give controls even more of the available height. */
@media (max-width:850px) and (max-height:600px) {
  .navbar {
    height: 46px;
    min-height: 46px;
  }

  .dashboard {
    height: calc(100dvh - 46px);
    padding: 4px 5px 5px;
  }

  .telemetry-speed-row {
    gap: 3px;
    margin-bottom: 4px;
  }

  .telemetry-card,
  .speed-panel {
    height: 58px;
    min-height: 58px;
    padding: 4px;
  }

  .telemetry-name {
    font-size: 5.5px;
  }

  .telemetry-reading {
    margin-top: 3px;
  }

  .telemetry-value {
    font-size: 12px;
  }

  .telemetry-unit {
    font-size: 5.5px;
  }

  .unit-select,
  .custom-unit {
    height: 16px;
    min-height: 16px;
    font-size: 5.5px;
  }

  .speed-heading strong {
    font-size: 13px;
  }

  .speed-panel input[type=range] {
    margin: 2px 0 1px;
  }

  .speed-panel button {
    height: 16px;
    min-height: 16px;
    font-size: 5.5px;
  }

  .panel {
    padding: 7px;
  }

  .section-heading h2 {
    font-size: 15px;
  }

  .mode-switch button {
    height: 24px;
    min-height: 24px;
    padding: 2px 6px;
    font-size: 7px;
  }

  .arrow-control {
    height: calc(100% - 39px);
    padding-top: 7px;
    gap: 4px;
  }

  .arrow-middle {
    grid-template-columns: repeat(3, 48px);
    gap: 4px;
  }

  .drive {
    width: 48px;
    height: 48px;
    min-height: 48px;
  }

  .drive.up,
  .drive.down {
    width: 56px;
    height: 48px;
  }

  .secondary-grid {
    gap: 5px;
    margin-top: 6px;
  }

  .secondary-grid button {
    height: 46px;
    min-height: 46px;
    font-size: 7px;
  }

  .secondary-grid .emergency {
    height: 49px;
    min-height: 49px;
  }

  .command-feedback {
    margin-top: 6px;
    padding-top: 4px;
  }
}

/* ============================================================
   Phase 1C — MOBILE CONTROL BOUNDS
   Controls must remain completely inside their own panel.
   ============================================================ */

@media (max-width:850px) {
  .main-grid {
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
  }

  .primary-control,
  .secondary-control {
    position: relative;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden !important;
    box-sizing: border-box;
  }

  .primary-control *,
  .secondary-control * {
    box-sizing: border-box;
  }

  /* Keep the arrow pad entirely within the primary panel. */
  .arrow-control {
    width: 100%;
    max-width: 100%;
    height: calc(100% - 42px);
    max-height: calc(100% - 42px);
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 2px 4px;
    gap: 5px;
  }

  .arrow-middle {
    width: min(100%, 168px);
    max-width: 168px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .drive,
  .drive.up,
  .drive.down {
    width: 100%;
    max-width: 52px;
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 0;
    justify-self: center;
  }

  .drive.up,
  .drive.down {
    width: min(60px, 100%);
    max-width: 60px;
  }

  /* Keep device controls bounded by the secondary panel. */
  .secondary-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: calc(100% - 95px);
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
  }

  .secondary-grid button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 46px;
    min-height: 40px;
    max-height: 52px;
    padding: 4px;
  }

  .secondary-grid .emergency {
    width: 100%;
    grid-column: 1 / -1;
    height: 48px;
    min-height: 42px;
    max-height: 54px;
  }

  .command-feedback {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}

/* Short phones: reduce controls rather than allowing any clipping. */
@media (max-width:850px) and (max-height:600px) {
  .main-grid {
    gap: 4px;
  }

  .panel {
    padding: 6px;
  }

  .arrow-control {
    height: calc(100% - 36px);
    max-height: calc(100% - 36px);
    padding: 3px 1px;
    gap: 3px;
  }

  .arrow-middle {
    width: min(100%, 138px);
    gap: 3px;
  }

  .drive,
  .drive.up,
  .drive.down {
    max-width: 43px;
  }

  .drive.up,
  .drive.down {
    max-width: 49px;
  }

  .secondary-grid {
    max-height: calc(100% - 82px);
    gap: 4px;
    margin-top: 5px;
  }

  .secondary-grid button {
    height: 39px;
    min-height: 36px;
    max-height: 43px;
    font-size: 7px;
  }

  .secondary-grid .emergency {
    height: 42px;
    min-height: 38px;
    max-height: 45px;
  }

  .command-feedback {
    margin-top: 4px;
    padding-top: 3px;
  }
}

/* ============================================================
   Phase 1C FINAL — MOBILE CONTROL GEOMETRY
   - Telemetry stays one compact row.
   - Primary/Secondary stay side by side.
   - Arrow buttons retain the desktop cross layout.
   - Every control is bounded by its panel.
   - Emergency Stop remains visible.
   - Mobile menu contents remain visible on short screens.
   ============================================================ */

@media (max-width:850px) {

  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
  }

  .navbar {
    height: 52px;
    min-height: 52px;
    padding: 0 7px;
  }

  .dashboard {
    width: 100%;
    height: calc(100dvh - 52px);
    min-height: 0;
    margin: 0;
    padding: 5px 6px 5px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* One compact telemetry row. */
  .telemetry-speed-row {
    flex: 0 0 67px;
    height: 67px;
    min-height: 67px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 5px;
  }

  .telemetry-card,
  .speed-panel {
    min-width: 0;
    width: 100%;
    height: 67px;
    min-height: 67px;
    padding: 5px;
    overflow: hidden;
  }

  .telemetry-name {
    font-size: 6px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .telemetry-reading {
    margin-top: 4px;
    gap: 2px;
  }

  .telemetry-value {
    font-size: 13px;
    line-height: 1;
  }

  .telemetry-unit {
    font-size: 6px;
    line-height: 1;
  }

  .unit-select,
  .custom-unit {
    height: 18px;
    min-height: 18px;
    padding: 1px 2px;
    font-size: 6px;
  }

  .telemetry-config-row {
    margin-top: 3px;
  }

  .speed-heading {
    min-height: 14px;
  }

  .speed-heading span {
    font-size: 6px;
  }

  .speed-heading strong {
    font-size: 15px;
  }

  .speed-panel input[type=range] {
    margin: 3px 0 2px;
  }

  .speed-panel button {
    height: 18px;
    min-height: 18px;
    padding: 1px;
    font-size: 6px;
  }

  /* Two dominant panels, always side-by-side. */
  .main-grid {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
  }

  .primary-control,
  .secondary-control {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden !important;
  }

  .panel {
    padding: 8px;
    box-sizing: border-box;
  }

  .section-heading {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    margin: 0;
    overflow: hidden;
  }

  .section-heading h2 {
    font-size: 16px;
    line-height: 1;
    margin: 3px 0 0;
  }

  .eyebrow {
    font-size: 6.5px;
    line-height: 1;
  }

  .mode-switch {
    gap: 3px;
  }

  .mode-switch button {
    height: 27px;
    min-height: 27px;
    padding: 3px 6px;
    font-size: 7px;
  }

  /* True cross-shaped arrow pad. */
  .arrow-control {
    width: 100%;
    height: calc(100% - 34px);
    min-height: 0;
    max-height: calc(100% - 34px);
    padding: 3px 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "up"
      "middle"
      "down";
    align-items: center;
    justify-items: center;
    gap: 2px;
    overflow: hidden;
  }

  .arrow-control>.drive.up {
    grid-area: up;
  }

  .arrow-control>.arrow-middle {
    grid-area: middle;
  }

  .arrow-control>.drive.down {
    grid-area: down;
  }

  .arrow-middle {
    width: min(100%, 154px);
    max-width: 154px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .drive,
  .drive.up,
  .drive.down {
    width: 44px;
    max-width: 44px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 1px;
    font-size: 15px;
  }

  .drive.up,
  .drive.down {
    width: 50px;
    max-width: 50px;
  }

  .drive span {
    font-size: 5.5px;
    line-height: 1;
    letter-spacing: .1em;
  }

  /* Secondary panel uses all remaining space and keeps Emergency Stop visible. */
  .secondary-control {
    display: grid;
    grid-template-rows: 34px minmax(0, 1fr) auto;
  }

  .secondary-grid {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    margin: 4px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 34px 34px 38px;
    gap: 5px;
    align-content: start;
    overflow: hidden;
  }

  .secondary-grid button {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 2px;
    font-size: 6.5px;
  }

  .secondary-grid .emergency {
    grid-column: 1 / -1;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    font-size: 7.5px;
  }

  .command-feedback {
    width: 100%;
    min-width: 0;
    margin: 4px 0 0;
    padding-top: 4px;
    min-height: 25px;
    max-height: 29px;
    overflow: hidden;
  }

  .command-feedback span {
    font-size: 6px;
  }

  .command-feedback strong {
    margin-top: 2px;
    font-size: 8px;
  }

  /* Mobile side menu: keep all menu actions inside short phone screens. */
  .side-menu {
    width: min(355px, 92vw);
    height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    padding: 58px 14px 10px;
    overflow: hidden;
  }

  .menu-heading {
    margin-bottom: 5px;
    font-size: 7px;
  }

  .menu-row {
    padding: 7px 0;
    font-size: 9px;
    min-height: 29px;
  }

  .side-menu>button {
    margin-top: 5px;
    padding: 7px;
    min-height: 32px;
    height: 32px;
    font-size: 8px;
  }
}

/* Short landscape phones: compact the panels, never move controls outside them. */
@media (max-width:850px) and (max-height:600px) {
  .navbar {
    height: 46px;
    min-height: 46px;
  }

  .dashboard {
    height: calc(100dvh - 46px);
    padding: 4px 5px;
  }

  .telemetry-speed-row,
  .telemetry-card,
  .speed-panel {
    height: 58px;
    min-height: 58px;
  }

  .telemetry-speed-row {
    flex-basis: 58px;
    margin-bottom: 4px;
    gap: 3px;
  }

  .telemetry-card,
  .speed-panel {
    padding: 4px;
  }

  .telemetry-name {
    font-size: 5.5px;
  }

  .telemetry-reading {
    margin-top: 3px;
  }

  .telemetry-value {
    font-size: 12px;
  }

  .telemetry-unit {
    font-size: 5.5px;
  }

  .unit-select,
  .custom-unit {
    height: 16px;
    min-height: 16px;
    font-size: 5.5px;
  }

  .speed-heading strong {
    font-size: 13px;
  }

  .speed-panel input[type=range] {
    margin: 2px 0 1px;
  }

  .speed-panel button {
    height: 16px;
    min-height: 16px;
    font-size: 5.5px;
  }

  .panel {
    padding: 6px;
  }

  .section-heading {
    height: 30px;
    min-height: 30px;
  }

  .section-heading h2 {
    font-size: 14px;
  }

  .mode-switch button {
    height: 23px;
    min-height: 23px;
    font-size: 6.5px;
  }

  .arrow-control {
    height: calc(100% - 30px);
    max-height: calc(100% - 30px);
    padding: 2px 0;
  }

  .arrow-middle {
    width: min(100%, 126px);
    gap: 3px;
  }

  .drive,
  .drive.up,
  .drive.down {
    width: 38px;
    max-width: 38px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    font-size: 13px;
  }

  .drive.up,
  .drive.down {
    width: 44px;
    max-width: 44px;
  }

  .drive span {
    font-size: 5px;
  }

  .secondary-control {
    grid-template-rows: 30px minmax(0, 1fr) auto;
  }

  .secondary-grid {
    grid-template-rows: 30px 30px 33px;
    gap: 4px;
    margin-top: 3px;
  }

  .secondary-grid button {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    font-size: 6px;
  }

  .secondary-grid .emergency {
    height: 33px;
    min-height: 33px;
    max-height: 33px;
    font-size: 7px;
  }

  .command-feedback {
    margin-top: 3px;
    min-height: 22px;
    max-height: 25px;
    padding-top: 3px;
  }

  .side-menu {
    padding-top: 52px;
    padding-bottom: 7px;
  }

  .menu-row {
    padding: 5px 0;
    min-height: 25px;
    font-size: 8px;
  }

  .side-menu>button {
    height: 28px;
    min-height: 28px;
    margin-top: 4px;
    padding: 5px;
    font-size: 7px;
  }
}

/* ============================================================
   Phase 1C — FINAL MOBILE SCREEN-FIT REFINEMENT
   1. Light theme applies to hamburger + side menu.
   2. Primary/Secondary headings remain fully visible.
   3. Speed is 1.5x the width of one telemetry card.
   4. All controls remain inside their own panels.
   ============================================================ */

@media (max-width:850px) {

  /* Six-column status strip: five telemetry cards + speed at 1.5x. */
  .telemetry-speed-row {
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr) !important;
    gap: 4px;
    width: 100%;
  }

  .telemetry-card,
  .speed-panel {
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Keep panel headings readable and inside their own panel. */
  .primary-control .section-heading,
  .secondary-control .section-heading {
    min-width: 0;
    width: 100%;
  }

  .primary-control .section-heading>div:first-child,
  .secondary-control .section-heading>div:first-child {
    min-width: 0;
    max-width: 100%;
  }

  .primary-control .section-heading h2,
  .secondary-control .section-heading h2 {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }

  /* The arrow pad is a bounded 3-row layout, never a single line. */
  .primary-control .arrow-control {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    justify-items: center;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: calc(100% - 45px);
    max-height: calc(100% - 45px);
    overflow: hidden !important;
    padding: 4px 0 !important;
    gap: 4px;
  }

  .primary-control .arrow-control>.drive.up,
  .primary-control .arrow-control>.drive.down {
    grid-column: 1;
    width: 52px;
    max-width: 52px;
    height: 43px;
    min-height: 0;
    aspect-ratio: auto;
    justify-self: center;
  }

  .primary-control .arrow-middle {
    grid-column: 1;
    width: auto;
    max-width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, 44px) !important;
    gap: 4px;
    justify-content: center;
    min-width: 0;
  }

  .primary-control .arrow-middle .drive {
    width: 44px;
    max-width: 44px;
    height: 43px;
    min-height: 0;
  }

  /* Secondary controls are explicitly bounded. */
  .secondary-control .secondary-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .secondary-control .secondary-grid button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* Light theme: hamburger, side drawer and backdrop must all match. */
  body[data-theme="light"] .hamburger {
    color: #17222c !important;
    background: #e5ebef !important;
    border: 1px solid #c4cfd7 !important;
  }

  body[data-theme="light"] .hamburger:hover:not(:disabled) {
    background: #dce4e9 !important;
    border-color: #aebbc4 !important;
  }

  body[data-theme="light"] .side-menu {
    background: #f4f7f9 !important;
    color: #17222c !important;
    border-right-color: #c7d0d8 !important;
    box-shadow: 10px 0 30px rgba(20, 35, 48, .14);
  }

  body[data-theme="light"] .menu-heading {
    color: #687785 !important;
  }

  body[data-theme="light"] .menu-row {
    color: #17222c !important;
    border-bottom-color: #cbd4db !important;
  }

  body[data-theme="light"] .menu-row strong {
    color: #17222c !important;
  }

  body[data-theme="light"] .side-menu>button {
    color: #17222c !important;
    background: #e5ebef !important;
    border-color: #c4cfd7 !important;
  }

  body[data-theme="light"] .side-menu>button:hover:not(:disabled) {
    background: #dce4e9 !important;
  }

  body[data-theme="light"] .menu-backdrop {
    background: rgba(20, 30, 38, .28) !important;
  }
}

/* Short mobile screens: preserve the same 1.5x speed ratio. */
@media (max-width:850px) and (max-height:600px) {
  .telemetry-speed-row {
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr) !important;
  }

  .primary-control .section-heading h2,
  .secondary-control .section-heading h2 {
    font-size: 15px;
  }

  .primary-control .arrow-control {
    height: calc(100% - 39px);
    max-height: calc(100% - 39px);
  }

  .primary-control .arrow-control>.drive.up,
  .primary-control .arrow-control>.drive.down {
    width: 48px;
    max-width: 48px;
    height: 39px;
  }

  .primary-control .arrow-middle {
    grid-template-columns: repeat(3, 40px) !important;
  }

  .primary-control .arrow-middle .drive {
    width: 40px;
    max-width: 40px;
    height: 39px;
  }
}

/* ============================================================
   Phase 1C — MOBILE HEADER VISIBILITY + HAMBURGER FINISH
   ============================================================ */

@media (max-width:850px) {

  /* Give both control panels a little more inner breathing room. */
  .primary-control,
  .secondary-control {
    padding: 10px !important;
  }

  /* Never allow the control titles to be clipped by the panel layout. */
  .primary-control .section-heading,
  .secondary-control .section-heading {
    position: relative;
    z-index: 5;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 42px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .primary-control .section-heading>div:first-child,
  .secondary-control .section-heading>div:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible !important;
  }

  .primary-control .section-heading h2,
  .secondary-control .section-heading h2 {
    position: relative;
    z-index: 6;
    display: block !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .primary-control .eyebrow,
  .secondary-control .eyebrow {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }

  /* Keep the mode buttons beside the Primary title without covering it. */
  .primary-control .mode-switch {
    flex: 0 0 auto;
    position: relative;
    z-index: 7;
    margin-left: 5px;
  }

  /* Reserve the title row before placing the arrow controls. */
  .primary-control .arrow-control {
    height: calc(100% - 49px) !important;
    max-height: calc(100% - 49px) !important;
    padding-top: 2px !important;
  }

  /* Hamburger: slightly rounded, but still compact and clearly an icon button. */
  .hamburger {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .hamburger span,
  .hamburger svg {
    border-radius: 2px;
  }
}

/* Short mobile screens: preserve title visibility while reducing only controls. */
@media (max-width:850px) and (max-height:600px) {

  .primary-control,
  .secondary-control {
    padding: 8px !important;
  }

  .primary-control .section-heading,
  .secondary-control .section-heading {
    min-height: 38px;
  }

  .primary-control .section-heading h2,
  .secondary-control .section-heading h2 {
    font-size: 16px !important;
  }

  .primary-control .arrow-control {
    height: calc(100% - 44px) !important;
    max-height: calc(100% - 44px) !important;
  }

  .hamburger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
  }
}

/* ============================================================
   Phase 1C — MOMENTARY DRIVE BUTTONS
   Direction = hold to move, release = STOP.
   ============================================================ */

.drive[data-command="FORWARD"],
.drive[data-command="BACKWARD"],
.drive[data-command="LEFT"],
.drive[data-command="RIGHT"] {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  cursor: pointer;
}

.drive[data-command="FORWARD"]:active,
.drive[data-command="BACKWARD"]:active,
.drive[data-command="LEFT"]:active,
.drive[data-command="RIGHT"]:active {
  transform: scale(.97);
}

@media (max-width:850px) {

  /* Use the available Primary Control space for substantially larger
     momentary drive buttons while keeping the complete arrow pad bounded. */
  .primary-control .arrow-control {
    height: calc(100% - 49px) !important;
    max-height: calc(100% - 49px) !important;
    padding: 4px 0 2px !important;
    gap: 6px;
  }

  .primary-control .arrow-control>.drive.up,
  .primary-control .arrow-control>.drive.down {
    width: 68px !important;
    max-width: 68px !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  .primary-control .arrow-middle {
    grid-template-columns: repeat(3, 58px) !important;
    gap: 6px;
  }

  .primary-control .arrow-middle .drive {
    width: 58px !important;
    max-width: 58px !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  .primary-control .drive span {
    font-size: 7px !important;
  }
}

@media (max-width:850px) and (max-height:600px) {
  .primary-control .arrow-control {
    height: calc(100% - 45px) !important;
    max-height: calc(100% - 45px) !important;
    gap: 4px;
  }

  .primary-control .arrow-control>.drive.up,
  .primary-control .arrow-control>.drive.down {
    width: 58px !important;
    max-width: 58px !important;
    height: 45px !important;
    min-height: 45px !important;
  }

  .primary-control .arrow-middle {
    grid-template-columns: repeat(3, 50px) !important;
    gap: 4px;
  }

  .primary-control .arrow-middle .drive {
    width: 50px !important;
    max-width: 50px !important;
    height: 45px !important;
    min-height: 45px !important;
  }
}

/* ============================================================
   Phase 1C — PERFECT ARROW PAD ALIGNMENT
   Use one explicit 3x3 grid so all five direction/stop buttons
   share the exact same center axis and spacing.
   ============================================================ */

@media (max-width:850px) {
  .primary-control .arrow-control {
    display: grid !important;
    grid-template-columns: repeat(3, 58px) !important;
    grid-template-rows: repeat(3, 52px) !important;
    grid-template-areas:
      ". up ."
      "left stop right"
      ". down ." !important;
    width: 100%;
    max-width: 100%;
    height: calc(100% - 49px) !important;
    max-height: calc(100% - 49px) !important;
    min-height: 0;
    padding: 6px 0 !important;
    margin: 0 auto;
    gap: 6px;
    justify-content: center !important;
    align-content: center !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .primary-control .arrow-control>.drive.up {
    grid-area: up !important;
    width: 58px !important;
    max-width: 58px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: stretch !important;
  }

  .primary-control .arrow-control>.arrow-middle {
    display: contents !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="LEFT"] {
    grid-area: left !important;
    width: 58px !important;
    max-width: 58px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="STOP"] {
    grid-area: stop !important;
    width: 58px !important;
    max-width: 58px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="RIGHT"] {
    grid-area: right !important;
    width: 58px !important;
    max-width: 58px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
  }

  .primary-control .arrow-control>.drive.down {
    grid-area: down !important;
    width: 58px !important;
    max-width: 58px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    justify-self: center !important;
    align-self: stretch !important;
  }
}

@media (max-width:850px) and (max-height:600px) {
  .primary-control .arrow-control {
    grid-template-columns: repeat(3, 50px) !important;
    grid-template-rows: repeat(3, 45px) !important;
    gap: 4px;
    height: calc(100% - 45px) !important;
    max-height: calc(100% - 45px) !important;
  }

  .primary-control .arrow-control>.drive.up,
  .primary-control .arrow-control>.drive.down,
  .primary-control .arrow-control .arrow-middle .drive[data-command="LEFT"],
  .primary-control .arrow-control .arrow-middle .drive[data-command="STOP"],
  .primary-control .arrow-control .arrow-middle .drive[data-command="RIGHT"] {
    width: 50px !important;
    max-width: 50px !important;
    height: 45px !important;
    min-height: 45px !important;
  }
}

/* ============================================================
   Phase 1C — MODE VISIBILITY + ARROW PAD FINAL CORRECTION
   ============================================================ */

/* Critical: [hidden] must always win over component display rules.
   This prevents the Arrow controls from appearing in VOICE mode. */
[hidden] {
  display: none !important;
}

@media (max-width:850px) {

  /* Primary panel becomes a bounded vertical layout:
     heading -> mode content. */
  .primary-control {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .primary-control .section-heading {
    flex: 0 0 auto !important;
    min-height: 42px !important;
  }

  /* Arrow mode gets the remaining panel space. */
  .primary-control #arrowControl:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, 58px) !important;
    grid-template-rows: repeat(3, 52px) !important;
    grid-template-areas:
      ". up ."
      "left stop right"
      ". down ." !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    align-content: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .primary-control #arrowControl:not([hidden])>.drive.up,
  .primary-control #arrowControl:not([hidden])>.drive.down,
  .primary-control #arrowControl:not([hidden]) .arrow-middle .drive {
    width: 58px !important;
    max-width: 58px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .primary-control #arrowControl:not([hidden])>.drive.up {
    grid-area: up !important;
  }

  .primary-control #arrowControl:not([hidden])>.arrow-middle {
    display: contents !important;
  }

  .primary-control #arrowControl:not([hidden]) .arrow-middle .drive[data-command="LEFT"] {
    grid-area: left !important;
  }

  .primary-control #arrowControl:not([hidden]) .arrow-middle .drive[data-command="STOP"] {
    grid-area: stop !important;
  }

  .primary-control #arrowControl:not([hidden]) .arrow-middle .drive[data-command="RIGHT"] {
    grid-area: right !important;
  }

  .primary-control #arrowControl:not([hidden])>.drive.down {
    grid-area: down !important;
  }

  /* Voice mode: arrow pad is completely removed; voice content gets
     the same bounded area instead. */
  .primary-control #voiceControl:not([hidden]) {
    display: grid !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width:850px) and (max-height:600px) {
  .primary-control #arrowControl:not([hidden]) {
    grid-template-columns: repeat(3, 50px) !important;
    grid-template-rows: repeat(3, 45px) !important;
    gap: 4px !important;
  }

  .primary-control #arrowControl:not([hidden])>.drive.up,
  .primary-control #arrowControl:not([hidden])>.drive.down,
  .primary-control #arrowControl:not([hidden]) .arrow-middle .drive {
    width: 50px !important;
    max-width: 50px !important;
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
  }
}


/* ============================================================
   PHASE 1C — RESPONSIVE LAYOUT FINAL
   Breakpoints: 480 / 768 / 1024 / 1025+
   Principle: no control may escape its own panel.
   ============================================================ */

/* Global sizing contract */
html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden !important;
}

body {
  height: 100dvh;
  min-height: 100dvh;
}

.dashboard,
.main-grid,
.primary-control,
.secondary-control,
.arrow-control,
.voice-control,
.secondary-grid {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ---------- Desktop / laptop: 1025px+ ---------- */
@media (min-width: 1025px) {
  .dashboard {
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - 68px) !important;
    overflow: hidden !important;
  }

  .main-grid {
    height: calc(100% - 147px) !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .primary-control,
  .secondary-control {
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Exact cross-shaped arrow layout. */
  .primary-control .arrow-control {
    width: 100% !important;
    height: calc(100% - 48px) !important;
    min-height: 0 !important;
    max-height: calc(100% - 48px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(72px, 108px)) !important;
    grid-template-rows: repeat(3, minmax(58px, 72px)) !important;
    grid-template-areas:
      ". up ."
      "left stop right"
      ". down ." !important;
    justify-content: center !important;
    align-content: center !important;
    gap: 8px !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  .primary-control .arrow-control>.drive.up {
    grid-area: up !important;
    width: 100% !important;
    max-width: 108px !important;
    height: 100% !important;
    max-height: 72px !important;
  }

  .primary-control .arrow-control>.arrow-middle {
    display: contents !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="LEFT"] {
    grid-area: left !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="STOP"] {
    grid-area: stop !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="RIGHT"] {
    grid-area: right !important;
  }

  .primary-control .arrow-control>.drive.down {
    grid-area: down !important;
    width: 100% !important;
    max-width: 108px !important;
    height: 100% !important;
    max-height: 72px !important;
  }

  .primary-control .arrow-control .drive {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 72px !important;
  }

  .secondary-control {
    display: flex !important;
    flex-direction: column !important;
  }

  .secondary-control .secondary-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .secondary-control .command-feedback {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ---------- Tablet: 769–1024px ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  .dashboard {
    width: 100% !important;
    height: calc(100dvh - 64px) !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  .telemetry-speed-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(130px, 1.3fr) !important;
    gap: 6px !important;
  }

  .main-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    gap: 7px !important;
    height: calc(100% - 132px) !important;
  }

  .primary-control,
  .secondary-control {
    height: 100% !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  .primary-control .arrow-control {
    width: 100% !important;
    height: calc(100% - 45px) !important;
    min-height: 0 !important;
    max-height: calc(100% - 45px) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(54px, 76px)) !important;
    grid-template-rows: repeat(3, minmax(48px, 62px)) !important;
    grid-template-areas:
      ". up ."
      "left stop right"
      ". down ." !important;
    justify-content: center !important;
    align-content: center !important;
    gap: 6px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }

  .primary-control .arrow-control>.arrow-middle {
    display: contents !important;
  }

  .primary-control .arrow-control>.drive.up {
    grid-area: up !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="LEFT"] {
    grid-area: left !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="STOP"] {
    grid-area: stop !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="RIGHT"] {
    grid-area: right !important;
  }

  .primary-control .arrow-control>.drive.down {
    grid-area: down !important;
  }

  .primary-control .arrow-control .drive {
    width: 100% !important;
    max-width: 76px !important;
    height: 100% !important;
    max-height: 62px !important;
    min-height: 0 !important;
  }

  .secondary-control {
    display: flex !important;
    flex-direction: column !important;
  }

  .secondary-grid {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* ---------- Large phone / small tablet: 481–768px ---------- */
@media (min-width: 481px) and (max-width: 768px) {
  .navbar {
    height: 55px !important;
    min-height: 55px !important;
  }

  .dashboard {
    width: 100% !important;
    height: calc(100dvh - 55px) !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  .telemetry-speed-row {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
    flex: 0 0 70px !important;
    height: 70px !important;
  }

  .main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .primary-control,
  .secondary-control {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 7px !important;
  }

  .primary-control .arrow-control {
    width: 100% !important;
    height: calc(100% - 40px) !important;
    max-height: calc(100% - 40px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(38px, 54px)) !important;
    grid-template-rows: repeat(3, minmax(36px, 48px)) !important;
    grid-template-areas:
      ". up ."
      "left stop right"
      ". down ." !important;
    gap: 4px !important;
    padding: 2px !important;
    justify-content: center !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  .primary-control .arrow-control>.arrow-middle {
    display: contents !important;
  }

  .primary-control .arrow-control>.drive.up {
    grid-area: up !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="LEFT"] {
    grid-area: left !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="STOP"] {
    grid-area: stop !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="RIGHT"] {
    grid-area: right !important;
  }

  .primary-control .arrow-control>.drive.down {
    grid-area: down !important;
  }

  .primary-control .arrow-control .drive {
    width: 100% !important;
    max-width: 54px !important;
    height: 100% !important;
    max-height: 48px !important;
    min-height: 0 !important;
  }

  .secondary-control {
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) auto !important;
  }

  .secondary-grid {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  .secondary-grid button {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ---------- Smartphone: 320–480px ---------- */
@media (max-width: 480px) {
  .navbar {
    height: 52px !important;
    min-height: 52px !important;
  }

  .dashboard {
    width: 100% !important;
    height: calc(100dvh - 52px) !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  /* Six compact cards remain one row. */
  .telemetry-speed-row {
    width: 100% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 3px !important;
    flex: 0 0 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    margin-bottom: 4px !important;
  }

  .telemetry-card,
  .speed-panel {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 62px !important;
    padding: 5px !important;
    overflow: hidden !important;
  }

  .telemetry-name {
    font-size: 6px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .telemetry-reading {
    gap: 3px !important;
  }

  .telemetry-value {
    font-size: 14px !important;
  }

  .telemetry-unit {
    font-size: 8px !important;
  }

  .unit-select,
  .custom-unit {
    height: 17px !important;
    min-height: 17px !important;
    padding: 1px 2px !important;
    font-size: 6px !important;
  }

  .speed-heading span {
    font-size: 6px !important;
  }

  .speed-heading strong {
    font-size: 15px !important;
  }

  .speed-panel input[type="range"] {
    margin: 2px 0 !important;
  }

  .speed-panel button {
    height: 17px !important;
    min-height: 17px !important;
    padding: 1px !important;
    font-size: 6px !important;
  }

  /* Two dominant control panels, side by side. */
  .main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .primary-control,
  .secondary-control {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 6px !important;
  }

  .section-heading {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    overflow: hidden !important;
  }

  .section-heading h2 {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .eyebrow {
    font-size: 6px !important;
  }

  .mode-switch {
    flex-shrink: 0 !important;
  }

  .mode-switch button {
    height: 25px !important;
    min-height: 25px !important;
    padding: 2px 5px !important;
    font-size: 7px !important;
  }

  /* Arrow controls stay in the exact cross layout and cannot overflow. */
  .primary-control .arrow-control {
    width: 100% !important;
    height: calc(100% - 36px) !important;
    max-height: calc(100% - 36px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, clamp(34px, 12vw, 48px))) !important;
    grid-template-rows: repeat(3, minmax(0, clamp(32px, 11vw, 44px))) !important;
    grid-template-areas:
      ". up ."
      "left stop right"
      ". down ." !important;
    gap: 3px !important;
    padding: 2px !important;
    justify-content: center !important;
    align-content: center !important;
    overflow: hidden !important;
  }

  .primary-control .arrow-control>.arrow-middle {
    display: contents !important;
  }

  .primary-control .arrow-control>.drive.up {
    grid-area: up !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="LEFT"] {
    grid-area: left !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="STOP"] {
    grid-area: stop !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="RIGHT"] {
    grid-area: right !important;
  }

  .primary-control .arrow-control>.drive.down {
    grid-area: down !important;
  }

  .primary-control .arrow-control .drive {
    width: 100% !important;
    max-width: 48px !important;
    height: 100% !important;
    max-height: 44px !important;
    min-height: 0 !important;
    padding: 1px !important;
    font-size: 14px !important;
  }

  .primary-control .arrow-control .drive span {
    font-size: 5px !important;
    line-height: 1 !important;
  }

  /* Secondary controls are a bounded internal grid. */
  .secondary-control {
    display: grid !important;
    grid-template-rows: 36px minmax(0, 1fr) auto !important;
  }

  .secondary-grid {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 3px 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 32px 32px 36px !important;
    gap: 4px !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  .secondary-grid button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 1px !important;
    font-size: 6px !important;
  }

  .secondary-grid .emergency {
    width: 100% !important;
    grid-column: 1 / -1 !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 7px !important;
  }

  .command-feedback {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 3px 0 0 !important;
    padding-top: 3px !important;
    min-height: 22px !important;
    max-height: 25px !important;
    overflow: hidden !important;
  }

  .command-feedback span {
    font-size: 5.5px !important;
  }

  .command-feedback strong {
    font-size: 8px !important;
  }
}

/* Extra-small phones: preserve the same structure at 320–359px. */
@media (max-width: 359px) {
  .telemetry-speed-row {
    gap: 2px !important;
    flex-basis: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
  }

  .telemetry-card,
  .speed-panel {
    height: 58px !important;
    padding: 4px !important;
  }

  .telemetry-value {
    font-size: 12px !important;
  }

  .telemetry-unit {
    font-size: 7px !important;
  }

  .unit-select,
  .custom-unit {
    height: 15px !important;
    min-height: 15px !important;
    font-size: 5.5px !important;
  }

  .primary-control,
  .secondary-control {
    padding: 5px !important;
  }

  .section-heading {
    height: 34px !important;
    min-height: 34px !important;
  }

  .section-heading h2 {
    font-size: 13px !important;
  }

  .primary-control .arrow-control {
    height: calc(100% - 34px) !important;
    max-height: calc(100% - 34px) !important;
    grid-template-columns: repeat(3, minmax(0, clamp(30px, 11vw, 40px))) !important;
    grid-template-rows: repeat(3, minmax(0, clamp(29px, 10vw, 38px))) !important;
    gap: 2px !important;
  }

  .primary-control .arrow-control .drive {
    max-width: 40px !important;
    max-height: 38px !important;
    font-size: 12px !important;
  }

  .primary-control .arrow-control .drive span {
    font-size: 4.5px !important;
  }

  .secondary-grid {
    grid-template-rows: 29px 29px 33px !important;
    gap: 3px !important;
  }

  .secondary-grid button {
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
    font-size: 5.5px !important;
  }

  .secondary-grid .emergency {
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;
  }
}

/* Never allow a hidden mode to consume space or paint controls. */
#arrowControl[hidden],
#voiceControl[hidden] {
  display: none !important;
}

/* When Voice mode is active, the Voice panel itself remains bounded. */
#voiceControl:not([hidden]) {
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* ============================================================
   MOBILE CHROME VIEWPORT FIX
   Keep the complete control UI inside the actual visible viewport
   when Chrome's address bar/navigation UI is taking vertical space.
   This is intentionally the final mobile override.
   ============================================================ */
@media (max-width:850px) {

  html,
  body {
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden !important;
  }

  .navbar {
    position: relative;
    height: 50px;
    min-height: 50px;
    flex: 0 0 50px;
  }

  .dashboard {
    width: 100%;
    max-width: none;
    height: calc(100svh - 50px);
    min-height: 0;
    padding: 4px 6px 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Prefer the dynamic viewport when supported, but keep svh as the
     safe fallback so Chrome's visible area is never overestimated. */
  @supports (height:100dvh) {
    .dashboard {
      height: calc(100dvh - 50px);
    }
  }

  .telemetry-speed-row {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0 0 4px;
  }

  .main-grid {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  .primary-control,
  .secondary-control {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  /* The heading gets a fixed small footprint; the arrow pad gets every
     remaining pixel instead of using a fixed/minimum height. */
  .primary-control .section-heading,
  .secondary-control .section-heading {
    flex: 0 0 auto;
  }

  .arrow-control {
    height: auto;
    min-height: 0;
    flex: 1 1 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    align-content: stretch;
    gap: 2px;
    padding: 3px 0;
    overflow: hidden;
  }

  .arrow-control .drive {
    width: clamp(34px, 13vw, 52px);
    height: clamp(30px, 11dvh, 48px);
    min-height: 0;
    padding: 1px;
  }

  .arrow-control .drive.up,
  .arrow-control .drive.down {
    width: clamp(42px, 15vw, 58px);
  }

  .arrow-middle {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    justify-items: center;
    align-items: center;
  }

  .arrow-middle .drive {
    width: clamp(34px, 12vw, 50px);
  }

  .drive span {
    font-size: clamp(5px, 1.5vw, 7px);
    line-height: 1;
  }

  .drive {
    font-size: clamp(13px, 3.8vw, 18px);
  }

  /* Secondary controls scale with the actual panel height. */
  .secondary-grid {
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px;
    margin-top: 5px;
  }

  .secondary-grid button {
    height: clamp(32px, 9dvh, 46px);
    min-height: 0;
    padding: 3px;
    font-size: clamp(7px, 1.8vw, 9px);
  }

  .secondary-grid .emergency {
    height: clamp(34px, 9.5dvh, 48px);
    min-height: 0;
  }

  .command-feedback {
    flex: 0 0 auto;
    margin-top: 5px;
    padding-top: 4px;
    min-height: 0;
  }

  .command-feedback span {
    font-size: 6px;
  }

  .command-feedback strong {
    font-size: 9px;
    line-height: 1.1;
  }
}

/* Very short visible area: shrink only the controls, never clip them. */
@media (max-width:850px) and (max-height:560px) {
  .navbar {
    height: 46px;
    min-height: 46px;
  }

  .dashboard {
    height: calc(100svh - 46px);
    padding: 3px 5px 4px;
  }

  @supports (height:100dvh) {
    .dashboard {
      height: calc(100dvh - 46px);
    }
  }

  .telemetry-speed-row {
    margin-bottom: 3px;
  }

  .telemetry-card,
  .speed-panel {
    height: 58px;
    min-height: 58px;
    padding: 4px;
  }

  .unit-select,
  .custom-unit {
    height: 16px;
    min-height: 16px;
  }

  .arrow-control {
    gap: 1px;
    padding: 1px 0;
  }

  .arrow-control .drive {
    height: clamp(27px, 9dvh, 40px);
  }

  .secondary-grid {
    margin-top: 3px;
    gap: 3px;
  }

  .secondary-grid button {
    height: clamp(28px, 8dvh, 38px);
  }

  .secondary-grid .emergency {
    height: clamp(30px, 8.5dvh, 40px);
  }

  .command-feedback {
    margin-top: 3px;
    padding-top: 3px;
  }
}

/* ============================================================
   ANDROID INSTALLED PWA — LANDSCAPE SCREEN-FIT
   The installed Android PWA has no Chrome URL bar, but Android's
   system/status area still reduces the usable viewport height.
   Keep telemetry + both control panels inside that viewport.
   ============================================================ */
@media (orientation: landscape) and (max-height: 900px) {

  html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .navbar {
    height: 64px !important;
    min-height: 64px !important;
    flex: 0 0 64px !important;
    box-sizing: border-box !important;
  }

  .dashboard {
    width: 100% !important;
    height: calc(100dvh - 64px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 64px) !important;
    box-sizing: border-box !important;
    padding: 8px 10px 10px !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .telemetry-speed-row {
    flex: 0 1 clamp(92px, 18dvh, 124px) !important;
    height: clamp(92px, 18dvh, 124px) !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    gap: 7px !important;
  }

  .telemetry-card,
  .speed-panel {
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
  }

  .main-grid {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: stretch !important;
  }

  .primary-control,
  .secondary-control {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 11px !important;
  }

  .primary-control {
    display: flex !important;
    flex-direction: column !important;
  }

  .primary-control .section-heading,
  .secondary-control .section-heading {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }

  .section-heading h2 {
    margin: 2px 0 0 !important;
    line-height: 1 !important;
  }

  .primary-control .arrow-control {
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 5px 0 0 !important;
    padding: 2px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      ". up ."
      "left stop right"
      ". down ." !important;
    gap: 6px !important;
    justify-content: center !important;
    align-content: stretch !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .primary-control .arrow-control>.arrow-middle {
    display: contents !important;
  }

  .primary-control .arrow-control .drive,
  .primary-control .arrow-control>.drive.up,
  .primary-control .arrow-control>.drive.down {
    width: min(108px, 100%) !important;
    max-width: 108px !important;
    height: min(68px, 100%) !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 2px !important;
    justify-self: center !important;
    align-self: center !important;
    box-sizing: border-box !important;
  }

  .primary-control .arrow-control>.drive.up {
    grid-area: up !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="LEFT"] {
    grid-area: left !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="STOP"] {
    grid-area: stop !important;
  }

  .primary-control .arrow-control .arrow-middle .drive[data-command="RIGHT"] {
    grid-area: right !important;
  }

  .primary-control .arrow-control>.drive.down {
    grid-area: down !important;
  }

  .primary-control .drive {
    font-size: clamp(15px, 2.2vh, 22px) !important;
  }

  .primary-control .drive span {
    font-size: clamp(7px, 1.2vh, 9px) !important;
    line-height: 1 !important;
  }

  .secondary-control {
    display: flex !important;
    flex-direction: column !important;
  }

  .secondary-control .secondary-grid {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin-top: 12px !important;
    gap: 7px !important;
    overflow: hidden !important;
  }

  .secondary-control .secondary-grid button {
    min-width: 0 !important;
    min-height: 0 !important;
    height: clamp(42px, 7.5dvh, 62px) !important;
    max-height: 62px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }

  .secondary-control .secondary-grid .emergency {
    height: clamp(48px, 9dvh, 76px) !important;
    max-height: 76px !important;
  }

  .secondary-control .command-feedback {
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    min-height: 0 !important;
  }
}

/* Extra-tight Android landscape screens. */
@media (orientation: landscape) and (max-height: 650px) {
  .navbar {
    height: 56px !important;
    min-height: 56px !important;
    flex-basis: 56px !important;
  }

  .dashboard {
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    padding: 5px 7px 6px !important;
  }

  .telemetry-speed-row {
    height: clamp(78px, 16dvh, 100px) !important;
    flex-basis: clamp(78px, 16dvh, 100px) !important;
    margin-bottom: 6px !important;
    gap: 5px !important;
  }

  .telemetry-card,
  .speed-panel {
    padding: 6px !important;
  }

  .main-grid {
    gap: 7px !important;
  }

  .primary-control,
  .secondary-control {
    padding: 8px !important;
  }

  .primary-control .arrow-control {
    gap: 4px !important;
    margin-top: 3px !important;
  }

  .secondary-control .secondary-grid {
    margin-top: 7px !important;
    gap: 5px !important;
  }

  .secondary-control .secondary-grid button {
    height: clamp(34px, 7dvh, 48px) !important;
  }

  .secondary-control .secondary-grid .emergency {
    height: clamp(38px, 8dvh, 54px) !important;
  }

  .secondary-control .command-feedback {
    padding-top: 5px !important;
  }
}


/* ================================================================
   FINAL RESPONSIVE LAYOUT + IMAGE LOGO
   Authoritative overrides for phone, tablet/iPad and desktop.
   ================================================================ */
.logo-placeholder {
  display: none !important
}

.brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  height: 100%;
  flex: 0 0 auto
}

.logo-image {
  display: block;
  width: 96px;
  height: 34px;
  object-fit: contain;
  object-position: left center;
  flex: none
}

/* Desktop */
@media (min-width:1025px) {
  .navbar {
    height: 64px;
    padding: 0 20px;
    gap: 20px
  }

  .logo-image {
    width: 112px;
    height: 38px
  }

  .dashboard {
    width: min(1480px, calc(100% - 36px));
    padding: 14px 0 22px
  }

  .telemetry-speed-row {
    gap: 9px
  }

  .main-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 11px
  }

  .panel {
    min-width: 0;
    overflow: hidden
  }
}

/* iPad / tablet: 769–1024px */
@media (min-width:769px) and (max-width:1024px) {
  .navbar {
    height: 60px;
    padding: 0 16px;
    gap: 14px
  }

  .logo-image {
    width: 104px;
    height: 36px
  }

  .dashboard {
    width: calc(100% - 24px);
    padding: 12px 0 18px
  }

  .telemetry-speed-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px
  }

  .speed-panel {
    grid-column: span 3;
    min-height: 100px
  }

  .main-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 9px
  }

  .panel {
    padding: 13px;
    min-width: 0;
    overflow: hidden
  }

  .arrow-control {
    padding: 12px 0 4px;
    gap: 7px
  }

  .arrow-middle {
    grid-template-columns: repeat(3, minmax(58px, 78px));
    gap: 7px
  }

  .drive {
    height: 62px
  }

  .drive.up,
  .drive.down {
    width: 78px
  }

  .secondary-grid {
    gap: 7px;
    margin-top: 18px
  }

  .secondary-grid button {
    min-height: 56px;
    font-size: 9px
  }

  .secondary-grid .emergency {
    min-height: 64px
  }
}

/* Large phone / small tablet: 481–768px */
@media (min-width:481px) and (max-width:768px) {
  .navbar {
    height: 56px;
    padding: 0 12px;
    gap: 10px
  }

  .logo-image {
    width: 92px;
    height: 34px
  }

  .dashboard {
    width: calc(100% - 12px);
    padding: 7px 0 12px
  }

  .telemetry-speed-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px
  }

  .speed-panel {
    grid-column: span 3;
    min-height: 82px
  }

  .main-grid {
    grid-template-columns: 1fr;
    gap: 7px
  }

  .panel {
    padding: 10px;
    min-width: 0;
    overflow: hidden
  }

  .arrow-control {
    padding: 8px 0 2px;
    gap: 6px
  }

  .arrow-middle {
    grid-template-columns: repeat(3, minmax(55px, 72px));
    gap: 6px
  }

  .drive {
    height: 56px
  }

  .drive.up,
  .drive.down {
    width: 72px
  }

  .secondary-grid {
    gap: 6px;
    margin-top: 14px
  }

  .secondary-grid button {
    min-height: 52px;
    font-size: 9px
  }

  .secondary-grid .emergency {
    min-height: 58px;
    font-size: 10px
  }
}

/* Compact phone: 320–480px */
@media (max-width:480px) {
  .navbar {
    height: 54px;
    padding: 0 9px;
    gap: 8px
  }

  .logo-image {
    width: 84px;
    height: 31px
  }

  .dashboard {
    width: calc(100% - 10px);
    padding: 5px 0 9px
  }

  .telemetry-speed-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px
  }

  .telemetry-card {
    min-height: 78px;
    padding: 6px
  }

  .telemetry-name {
    font-size: 7px
  }

  .telemetry-value {
    font-size: 17px
  }

  .telemetry-unit {
    font-size: 9px
  }

  .unit-select,
  .custom-unit {
    font-size: 7px;
    padding: 3px
  }

  .speed-panel {
    grid-column: span 3;
    min-height: 76px;
    padding: 7px
  }

  .speed-heading strong {
    font-size: 17px
  }

  .speed-panel input[type=range] {
    margin: 6px 0
  }

  .speed-panel button {
    min-height: 25px;
    padding: 3px;
    font-size: 7px
  }

  .main-grid {
    grid-template-columns: 1fr;
    gap: 6px
  }

  .panel {
    padding: 8px;
    min-width: 0;
    overflow: hidden
  }

  .section-heading h2 {
    font-size: 16px
  }

  .mode-switch button {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 8px
  }

  .arrow-control {
    padding: 6px 0 1px;
    gap: 5px
  }

  .arrow-middle {
    grid-template-columns: repeat(3, minmax(48px, 64px));
    gap: 5px
  }

  .drive {
    height: 52px;
    font-size: 18px
  }

  .drive span {
    font-size: 7px
  }

  .drive.up,
  .drive.down {
    width: 64px
  }

  .secondary-grid {
    gap: 5px;
    margin-top: 11px
  }

  .secondary-grid button {
    min-height: 47px;
    font-size: 8px
  }

  .secondary-grid .emergency {
    min-height: 50px;
    font-size: 9px
  }
}

/* Android/iOS landscape phones: use the full available dynamic viewport. */
@media (max-width:850px) and (orientation:landscape) {

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden
  }

  .navbar {
    flex: none
  }

  .dashboard {
    height: calc(100dvh - 55px);
    max-height: calc(100dvh - 55px);
    overflow: hidden
  }

  .telemetry-speed-row {
    min-height: 0
  }

  .main-grid {
    min-height: 0;
    overflow: hidden
  }

  .panel {
    min-height: 0;
    overflow: hidden
  }

  .primary-control,
  .secondary-control {
    min-height: 0;
    max-height: 100%;
    overflow: hidden
  }

  .arrow-control {
    min-height: 0;
    flex: 1;
    overflow: hidden
  }

  .secondary-grid {
    min-height: 0;
    overflow: hidden
  }
}

/* Do not let the image logo distort at any viewport. */
.logo-image {
  max-width: 100%;
}

/* ================================================================
   LOGO + TELEMETRY FINAL RESPONSIVE OVERRIDE
   ================================================================ */
.brand {
  flex: 0 0 auto;
  min-width: 150px;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: visible
}

.logo-image {
  display: block;
  object-fit: contain;
  object-position: left center;
  width: auto;
  height: auto;
  min-width: 150px;
  max-width: none;
  flex: none
}

.logo-dark {
  display: none
}

html[data-theme="dark"] .logo-light,
body[data-theme="dark"] .logo-light {
  display: none
}

html[data-theme="dark"] .logo-dark,
body[data-theme="dark"] .logo-dark {
  display: block
}

html[data-theme="light"] .logo-light,
body[data-theme="light"] .logo-light {
  display: block
}

html[data-theme="light"] .logo-dark,
body[data-theme="light"] .logo-dark {
  display: none
}

/* Keep all 5 telemetry cards + the 1.5x speed panel on one row. */
.telemetry-speed-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr) !important;
  gap: 9px !important;
  width: 100%;
  align-items: stretch;
}

.telemetry-card,
.speed-panel {
  min-width: 0 !important;
  width: 100%;
}

.speed-panel {
  grid-column: auto !important;
  min-height: 0 !important;
}

.speed-panel input[type="range"] {
  width: 100%;
  display: block;
  margin: 10px 0 !important;
}

/* Desktop */
@media (min-width:1025px) {
  .logo-image {
    min-width: 200px;
    width: 200px;
    height: auto
  }

  .brand {
    min-width: 200px
  }

  .telemetry-speed-row {
    gap: 9px !important
  }
}

/* iPad / tablet */
@media (min-width:769px) and (max-width:1024px) {
  .logo-image {
    min-width: 170px;
    width: 170px;
    height: auto
  }

  .brand {
    min-width: 170px
  }

  .telemetry-speed-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr) !important;
    gap: 6px !important
  }

  .telemetry-card,
  .speed-panel {
    min-height: 88px !important;
    padding: 7px !important
  }

  .telemetry-name {
    font-size: 7px
  }

  .telemetry-value {
    font-size: 18px
  }

  .telemetry-unit {
    font-size: 9px
  }

  .unit-select,
  .custom-unit {
    font-size: 7px;
    padding: 3px
  }

  .speed-heading strong {
    font-size: 18px
  }

  .speed-heading span {
    font-size: 7px
  }

  .speed-panel input[type="range"] {
    margin: 7px 0 !important
  }

  .speed-panel button {
    padding: 4px;
    font-size: 7px
  }
}

/* Large phones */
@media (min-width:481px) and (max-width:768px) {
  .logo-image {
    min-width: 150px;
    width: 150px;
    height: auto
  }

  .brand {
    min-width: 150px
  }

  .telemetry-speed-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr) !important;
    gap: 4px !important
  }

  .telemetry-card,
  .speed-panel {
    min-height: 72px !important;
    padding: 5px !important
  }

  .telemetry-name {
    font-size: 6px
  }

  .telemetry-value {
    font-size: 15px
  }

  .telemetry-unit {
    font-size: 8px
  }

  .unit-select,
  .custom-unit {
    font-size: 6px;
    padding: 2px
  }

  .speed-heading strong {
    font-size: 15px
  }

  .speed-heading span {
    font-size: 6px
  }

  .speed-panel input[type="range"] {
    margin: 5px 0 !important
  }

  .speed-panel button {
    padding: 3px;
    font-size: 6px
  }
}

/* Compact phones: still one row, so speed stays beside telemetry. */
@media (max-width:480px) {
  .logo-image {
    min-width: 150px;
    width: 150px;
    height: auto
  }

  .brand {
    min-width: 150px
  }

  .telemetry-speed-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.5fr) !important;
    gap: 3px !important
  }

  .telemetry-card,
  .speed-panel {
    min-height: 64px !important;
    padding: 4px !important
  }

  .telemetry-name {
    font-size: 5.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .telemetry-value {
    font-size: 13px
  }

  .telemetry-unit {
    font-size: 7px
  }

  .unit-select,
  .custom-unit {
    font-size: 5.5px;
    padding: 2px;
    min-width: 0
  }

  .speed-heading strong {
    font-size: 14px
  }

  .speed-heading span {
    font-size: 5.5px
  }

  .speed-panel input[type="range"] {
    margin: 4px 0 !important
  }

  .speed-panel button {
    padding: 2px;
    font-size: 5.5px;
    min-height: 20px
  }
}

/* Very short landscape screens: prioritize keeping the row visible. */
@media (max-width:850px) and (orientation:landscape) and (max-height:650px) {
  .telemetry-speed-row {
    height: 72px !important;
    min-height: 72px !important
  }

  .telemetry-card,
  .speed-panel {
    height: 72px !important;
    min-height: 72px !important
  }
}

@media (max-width:850px) {
  .hamburger {
    width: 42px;
    height: 42px;
    padding: 0 !important;
    font-size: 22px !important;
    flex: 0 0 42px
  }

  .mobile-ble {
    min-width: 0;
    max-width: 88px;
    padding: 7px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .mobile-ble strong {
    font-size: 9px;
    overflow: hidden;
    text-overflow: ellipsis
  }
}