:root {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --accent: #2f81f7;
  --text: #e6edf3;
  --muted: #8b949e;
  --ok: #3fb950;
  --err: #f85149;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Reparented controls use this class when they are not active in the
   current orientation. Keep it global so landscape does not leak the
   portrait-only action tab switcher into the lower deck. */
.hidden {
  display: none !important;
}

html,
body {
  height: 100%;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overscroll-behavior: none;
}

/* ---- Top bar ---- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.brand {
  font-weight: 700;
  font-size: 18px;
}
.brand .sub {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
}
.conn {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 20px;
  background: #21262d;
}
.conn.ok {
  color: var(--ok);
}
.conn.err {
  color: var(--err);
}
.conn.off {
  color: var(--muted);
}

/* ---- Stage ---- */
.stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  container-type: inline-size;
  container-name: stage;
}
#preview {
  /* Il video mantiene SEMPRE il 16:9 reale: si adatta allo stage
     (max-w/max-h) senza deformarsi né allargarsi alla box. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: grab;
  touch-action: none;
}
#preview.dragging {
  cursor: grabbing;
}

.overlay-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.6);
  font-size: 16px;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.4s;
}
.overlay-msg.hidden {
  display: none;
}

.crosshair {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}
.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
}
.crosshair::before {
  left: 50%;
  top: -6px;
  width: 1.5px;
  height: 34px;
  transform: translateX(-50%);
}
.crosshair::after {
  top: 50%;
  left: -6px;
  height: 1.5px;
  width: 34px;
  transform: translateY(-50%);
}

.hud {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  color: var(--muted);
  z-index: 4;
  pointer-events: none;
  white-space: pre;
}

/* WYSIWYG panel graphic preview, drawn on the stage while "Modifica
   contenuto" is open. Same structure and proportions (in cqw, relative
   to the .stage container's own width) as the 1920x1080 canvas that
   server/overlay/overlay.html actually renders for the live output, so
   size/font/layout are judged against the real design, not guessed from
   text fields. cqw values are the source px value divided by 1920. */
.panel-graphic-preview {
  position: absolute;
  inset: 0;
  margin: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 100%;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;
}
.panel-graphic-preview.hidden {
  display: none;
}
.pg-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.pg-box {
  position: absolute;
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.2;
  pointer-events: auto;
  cursor: grab;
  outline: 1px dashed transparent;
}
.pg-box:hover,
.pg-box.selected {
  outline-color: rgba(255, 255, 255, 0.5);
}

/* ---- Controls ---- */
.controls {
  flex-shrink: 0;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.control-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(47, 129, 247, 0.08), rgba(22, 27, 34, 0.9));
}
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.group-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.group-meta {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-row,
.config-row,
.panel-edit-row {
  flex-wrap: wrap;
}
.row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.presets {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.btn {
  background: #21262d;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.btn:hover {
  background: #30363d;
}
.btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn:active {
  transform: scale(0.96);
}

.slider-label {
  font-size: 14px;
  color: var(--muted);
}
.slider-val {
  font-size: 14px;
  min-width: 28px;
  text-align: center;
  font-weight: 700;
}
input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.text-input {
  flex: 1;
  min-width: 0;
  background: #0d1117;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.config-row .text-input,
.panel-edit-row .text-input {
  min-width: 120px;
}
.panel-edit-row .text-input {
  flex: 1 1 140px;
}
.panel-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.panel-box-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel-box-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.panel-box-row.selected {
  border-color: var(--accent);
  background: rgba(47, 129, 247, 0.08);
}
.panel-box-row .pb-text {
  flex: 1 1 140px;
  min-width: 100px;
}
.color-field {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d1117;
}
.color-field input {
  width: 42px;
  height: 30px;
  border: 0;
  padding: 0;
  background: transparent;
}
.panel-live {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.panel-live input {
  accent-color: var(--accent);
}
.file-row.hidden {
  display: none;
}

.zoomrow {
  justify-content: center;
  gap: 14px;
}
.zoom-out,
.zoom-in {
  width: 48px;
  height: 48px;
  font-size: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-display {
  font-size: 15px;
  min-width: 90px;
  text-align: center;
}

/* ---- Gimbal ---- */
.gimbalrow {
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.gimbal-title {
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gimbal-state {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
}
.gimbal-state.ok {
  background: rgba(63, 185, 80, 0.2);
  color: var(--ok);
}
.gimbal-state.off {
  background: rgba(248, 81, 73, 0.2);
  color: var(--err);
}
.gimbal-state.digital {
  background: rgba(227, 173, 69, 0.2);
  color: var(--live);
}
.joystick {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #21262d 60%, #161b22);
  border: 2px solid var(--border);
  touch-action: none;
  flex-shrink: 0;
}
.joystick.disabled {
  opacity: 0.45;
  pointer-events: none;
}
.stick {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(47, 129, 247, 0.5);
  pointer-events: none;
}
.gimbal-angles {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gimbal-angles span {
  color: var(--text);
  font-weight: 700;
}
.gimbal-tel {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  max-width: 180px;
}
.gimbal-settings {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
  color: var(--muted);
  font-size: 11px;
}
.gimbal-link-title {
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gimbal-link-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.gimbal-link-row .btn {
  padding: 6px 8px;
  font-size: 11px;
}
.gimbal-link-row .proto-select {
  width: 150px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gimbal-link-status {
  max-width: 180px;
  min-height: 24px;
  color: var(--muted);
  line-height: 1.25;
}
.gimbal-settings .proto-select {
  width: 110px;
  padding: 6px 8px;
  font-size: 12px;
}
.gimbal-settings .gimbal-link-row .proto-select {
  width: 150px;
}
.gimbal-settings input[type="range"] {
  width: 110px;
}

/* ---- Azioni rilevanti (event marking) ---- */
.eventrow {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}
.event-title {
  font-size: 14px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.event-hint {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
}
.event-btn {
  padding: 8px 12px;
  font-size: 14px;
}
.event-btn:active {
  background: var(--accent);
}
.eventlog-row {
  justify-content: center;
  min-height: 26px;
}
.eventlog {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 100%;
}
.ev-chip {
  background: rgba(47, 129, 247, 0.15);
  border: 1px solid rgba(47, 129, 247, 0.4);
  color: var(--text);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.eventlog.flash .ev-chip:last-child {
  background: var(--accent);
  color: #fff;
}

/* ---- Layout adattivo: landscape (regia) vs portrait ---- */
@media (orientation: landscape) {
  main {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
  }
  .stage {
    flex: 1;
  }
  .controls {
    width: 340px;
    max-width: 40vw;
    border-top: none;
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 12px;
    gap: 12px;
    height: 100%;
  }
  .eventlog-row {
    min-height: auto;
  }
  .joystick {
    width: 100px;
    height: 100px;
  }
}

.stage {
  aspect-ratio: 16 / 9;
  max-height: 100%;
}

@media (orientation: portrait) {
  .stage {
    width: 100%;
  }
  .gimbalrow {
    justify-content: center;
  }
  .eventrow {
    justify-content: center;
  }
}

/* ---- Monitor overlay ---- */
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.monitor-btn {
  padding: 6px 14px;
}
.monitor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.monitor-overlay.hidden {
  display: none;
}
.monitor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.monitor-title {
  font-size: 18px;
  font-weight: 700;
}
.monitor-body {
  display: flex;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.monitor-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.monitor-label {
  font-size: 13px;
  color: var(--muted);
}
#monitorOut {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: 8px;
  object-fit: contain;
}
.monitor-meta {
  font-size: 12px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.dest-status {
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 8px;
}
.dest-status.ok {
  background: rgba(63, 185, 80, 0.15);
  color: var(--ok);
  border: 1px solid rgba(63, 185, 80, 0.4);
}
.dest-status.err {
  background: rgba(248, 81, 73, 0.15);
  color: var(--err);
  border: 1px solid rgba(248, 81, 73, 0.4);
}
.dest-link {
  align-self: flex-start;
  margin-top: 6px;
}

/* ---- Badge connettività ---- */
.badges {
  display: flex;
  gap: 6px;
}
#badgeCamera {
  cursor: pointer;
}
#badgeCamera:hover,
#badgeCamera:focus-visible {
  border-color: var(--focus);
  color: var(--text);
}

.badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #21262d;
  color: var(--muted);
  white-space: nowrap;
}
.badge.ok {
  color: var(--ok);
  border-color: rgba(63, 185, 80, 0.4);
  background: rgba(63, 185, 80, 0.1);
}
.badge.err {
  color: var(--err);
  border-color: rgba(248, 81, 73, 0.4);
  background: rgba(248, 81, 73, 0.1);
}
.badge.unknown {
  color: var(--muted);
  border-color: rgba(139, 148, 158, 0.45);
  background: rgba(139, 148, 158, 0.08);
}
.recon-btn {
  padding: 6px 10px;
  font-size: 15px;
}
.toggle-btn.active {
  background: rgba(255, 179, 122, 0.2);
  border-color: #ffb37a;
  color: #ffb37a;
}

/* ---- Battery warning badge ---- */
#battWarn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #3a1f10;
  color: #ffb37a;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}
#battWarn.hidden {
  display: none;
}
#battWarn button {
  background: #ffb37a;
  color: #1a1006;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

/* ---- Temperature warning badge (stesso pattern di #battWarn) ---- */
#tempWarn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #3a1010;
  color: #ff8a8a;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}
#tempWarn.hidden {
  display: none;
}

/* ---- Hint riposo termico (stesso pattern di #battWarn/#tempWarn) ----
   Consiglio, non azione automatica: il regista applica lo switch nel
   momento morto della partita (timeout/punto/cambio campo). Due varianti
   colore: ambra per "scendi di qualità", ciano per "puoi tornare su". */
#thermalHint {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #3a1f10;
  color: #ffb37a;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}
#thermalHint.hidden {
  display: none;
}
#thermalHint.thermal-hint-restore {
  background: #0f2f38;
  color: #8adfe8;
}
#thermalHint button {
  background: #ffb37a;
  color: #1a1006;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}
#thermalHint.thermal-hint-restore button {
  background: #8adfe8;
  color: #06262c;
}

/* ---- Avviso modalità relay/HTTPS: comandi diretti non disponibili ---- */
#relayWarn {
  display: block;
  background: #4a1414;
  color: #ffb0b0;
  border-bottom: 2px solid #a33;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
#relayWarn.hidden {
  display: none;
}

/* ---- Director surface: operativa prima della decorazione ---- */
:root {
  --bg: #0b0f14;
  --panel: #151b23;
  --panel-raised: #1b232d;
  --line: #2b3642;
  --line-strong: #40505f;
  --text: #f0f3f5;
  --muted: #91a0ad;
  --focus: #4b91ff;
  --live: #e3ad45;
}

body {
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background: var(--bg);
}

.topbar {
  min-height: 58px;
  padding: 9px 16px;
  background: #11171e;
  border-bottom-color: var(--line);
}

.brand {
  letter-spacing: 0.08em;
  font-size: 17px;
}

.brand .sub {
  letter-spacing: 0;
  color: #aeb9c2;
}

.top-actions {
  gap: 8px;
}

.conn {
  min-width: 150px;
  text-align: center;
  border: 1px solid var(--line);
  background: #19212a;
}

.badges {
  gap: 4px;
}

.badge {
  padding: 4px 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

main {
  display: flex;
  flex: 1;
  min-height: 0;
  background: #000;
}

.stage {
  flex: 1 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  border-right: 1px solid var(--line);
}

#preview {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.stage-label {
  position: absolute;
  top: 13px;
  left: 15px;
  right: 15px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  color: rgba(236, 242, 246, 0.7);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.stage-label span:last-child {
  color: rgba(236, 242, 246, 0.45);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.crosshair {
  width: 28px;
  height: 28px;
  border-color: rgba(255, 255, 255, 0.5);
}

.hud {
  bottom: 14px;
  left: 14px;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(236, 242, 246, 0.75);
}

.controls {
  width: 410px;
  max-width: none;
  height: 100%;
  flex: 0 0 410px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  gap: 11px;
  background: var(--panel);
  border-top: 0;
  border-left: 0;
  scrollbar-color: #3c4a57 transparent;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

.rail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 3px 5px;
}

.eyebrow,
.section-index,
.rail-mode {
  color: var(--live);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.rail-head h1 {
  margin-top: 3px;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.rail-mode {
  padding-top: 4px;
  color: var(--muted);
  white-space: nowrap;
}

.control-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.framing-section {
  order: 1;
}

.mark-section {
  order: 2;
}

.gimbal-section {
  order: 3;
}

.panel-section {
  order: 4;
}

.advanced-section {
  order: 5;
}

.ptz-section {
  gap: 9px;
}

.ptz-availability {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ptz-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ptz-chip-digital {
  color: var(--focus);
  border-color: rgba(75, 145, 255, 0.45);
  background: rgba(75, 145, 255, 0.1);
}

.ptz-chip-gimbal.ok {
  color: var(--ok);
  border-color: rgba(63, 185, 80, 0.45);
  background: rgba(63, 185, 80, 0.1);
}

.ptz-grid {
  display: grid;
  gap: 8px;
}

.ptz-lane {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(8, 12, 17, 0.2);
}

.ptz-lane-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.ptz-lane-head strong {
  color: var(--text);
  font-size: 11px;
}

.ptz-gimbal-lane .gimbalrow {
  padding-top: 1px;
}

.ptz-gimbal-lane .subdetails {
  margin-top: 1px;
}

.digital-pad-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.digital-pad {
  position: relative;
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
  border: 2px solid rgba(227, 173, 69, 0.45);
  border-radius: 50%;
  background: radial-gradient(circle, #31333a 0 42%, #272a31 43% 64%, #1c222a 65%);
  touch-action: none;
}

.digital-pad::before,
.digital-pad::after {
  content: "";
  position: absolute;
  background: rgba(227, 173, 69, 0.2);
  pointer-events: none;
}

.digital-pad::before {
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
}

.digital-pad::after {
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1px;
}

.digital-stick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 16px rgba(227, 173, 69, 0.48);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.digital-pad-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 11px;
}

.digital-pad-info strong {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.digital-pad-info b {
  color: var(--text);
  font-weight: 600;
}

.digital-pad-info small {
  margin-top: 3px;
  color: var(--live);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 10px;
  line-height: 1.25;
}

.section-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.section-head .section-index {
  padding-top: 3px;
  min-width: 19px;
}

.section-head h2 {
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.section-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.section-head > .gimbal-state {
  margin-left: auto;
}

.presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.btn {
  min-height: 36px;
  padding: 7px 10px;
  border-color: var(--line-strong);
  border-radius: 6px;
  background: #222c37;
  font-size: 13px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:hover {
  border-color: #6c7e8d;
  background: #2b3845;
}

.btn-primary {
  background: var(--focus);
  border-color: var(--focus);
  color: white;
}

.btn-primary:hover {
  background: #6aa4ff;
  border-color: #6aa4ff;
}

.frame-tools {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
  align-items: center;
}

.zoomrow {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.zoom-out,
.zoom-in {
  width: 42px;
  height: 42px;
  min-height: 42px;
  font-size: 22px;
}

.zoom-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 72px;
  font-size: 16px;
}

.zoom-label,
.slider-label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zoom-display strong,
.slider-label strong {
  color: var(--text);
  font-size: 13px;
}

.slider-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.slider-block input[type="range"] {
  width: 100%;
}

.smooth-block {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.gimbalrow {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
}

.joystick-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.joystick-wrap > span {
  max-width: 64px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.08em;
}

.joystick {
  width: 116px;
  height: 116px;
  border-color: var(--line-strong);
  background: radial-gradient(circle, #2b3947 0 44%, #1e2934 45% 64%, #18212b 65%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.joystick::before,
.joystick::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.joystick::before {
  top: 11px;
  bottom: 11px;
  left: 50%;
  width: 1px;
}

.joystick::after {
  left: 11px;
  right: 11px;
  top: 50%;
  height: 1px;
}

.stick {
  width: 48px;
  height: 48px;
  background: var(--focus);
  box-shadow: 0 0 18px rgba(75, 145, 255, 0.55);
}

.gimbal-readout {
  display: grid;
  gap: 8px;
  min-width: 57px;
  font-family: ui-monospace, monospace;
}

.gimbal-readout div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gimbal-readout span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.gimbal-readout strong {
  font-size: 15px;
}

.gimbal-tel {
  grid-column: 1 / -1;
  max-width: none;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.subdetails,
.advanced-section {
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.subdetails summary,
.advanced-section summary {
  cursor: pointer;
  color: #c4cdd4;
  font-size: 11px;
  font-weight: 700;
  list-style: none;
}

.subdetails summary::-webkit-details-marker,
.advanced-section summary::-webkit-details-marker {
  display: none;
}

.subdetails summary::before,
.advanced-section summary::before {
  content: "+";
  display: inline-block;
  width: 16px;
  color: var(--live);
  font-size: 15px;
}

.subdetails[open] summary::before,
.advanced-section[open] summary::before {
  content: "−";
}

.gimbal-settings,
.advanced-body {
  margin-top: 10px;
}

.setting-inline {
  display: grid;
  grid-template-columns: auto 100px auto 1fr auto;
  align-items: center;
  gap: 6px;
}

.setting-inline label,
.gimbal-settings label {
  color: var(--muted);
  font-size: 11px;
}

.setting-inline input[type="range"] {
  min-width: 0;
}

.eventrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
}

.event-btn {
  min-height: 42px;
  padding: 6px;
  font-size: 12px;
  background: #252f39;
}

.event-btn:active,
.event-btn:focus-visible {
  background: var(--live);
  border-color: var(--live);
  color: #11171e;
}

.eventlog-row {
  min-height: 20px;
  justify-content: flex-start;
}

.eventlog {
  justify-content: flex-start;
}

.panelrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 6px;
}

.panelrow .proto-select {
  width: 100%;
  min-width: 0;
}

.panel-live {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}

.panel-status {
  min-height: 16px;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 10px;
}

.panel-edit-row,
.config-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
}

.panel-edit-row .text-input,
.config-row .text-input {
  min-width: 0;
}

.advanced-section {
  padding: 11px 13px;
}

.advanced-section > summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.advanced-section .section-index {
  margin-right: 4px;
}

.summary-status {
  overflow: hidden;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.advanced-body .row {
  flex-wrap: wrap;
}

.advanced-body .proto-select {
  min-width: 0;
  flex: 1;
}

#battWarn,
#tempWarn,
#thermalHint {
  border-radius: 6px;
  font-size: 11px;
}

@media (orientation: portrait) {
  body {
    overflow: hidden;
  }

  main {
    flex-direction: column;
  }

  .stage {
    flex: 0 0 46vh;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .controls {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    height: auto;
    padding: 12px;
  }
}

@media (max-width: 760px) {
  .topbar {
    padding: 8px 10px;
  }

  .brand .sub,
  .conn {
    display: none;
  }

  .top-actions {
    margin-left: auto;
  }

  .controls {
    padding: 10px;
  }
}

/* A tablet in regia landscape has limited vertical room. Keep the operator
   surface usable without hiding the primary controls behind a scroll. */
@media (orientation: landscape) and (max-height: 820px) {
  .controls {
    padding: 10px;
    gap: 8px;
  }

  .control-section {
    gap: 7px;
    padding: 10px;
  }

  .rail-head {
    padding-bottom: 1px;
  }

  .presets {
    gap: 5px;
  }

  .presets .btn {
    min-height: 32px;
    padding-block: 5px;
  }

  .zoom-out,
  .zoom-in {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .joystick {
    width: 102px;
    height: 102px;
  }

  .stick {
    width: 42px;
    height: 42px;
  }

  .gimbalrow {
    gap: 8px 12px;
  }

  .event-btn {
    min-height: 36px;
  }
}

@media (orientation: portrait) {
  .stage {
    flex-basis: 34dvh;
  }

  .controls {
    gap: 8px;
  }

  .control-section {
    padding: 11px;
    gap: 8px;
  }
}

/* Touch tablets: enlarge only controls used during the live operation. */
@media (pointer: coarse) {
  .topbar {
    padding-top: calc(9px + env(safe-area-inset-top));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }

  .monitor-btn,
  .recon-btn {
    min-height: 42px;
  }

  .presets .btn {
    min-height: 40px;
  }

  .zoom-out,
  .zoom-in {
    width: 46px;
    height: 46px;
    min-height: 46px;
  }

  .event-btn {
    min-height: 46px;
  }

  .proto-select,
  .text-input {
    min-height: 42px;
  }

  input[type="range"] {
    min-height: 28px;
  }

  .joystick {
    width: 124px;
    height: 124px;
  }

  .stick {
    width: 52px;
    height: 52px;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 820px) {
  .controls {
    padding-top: 9px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom));
    gap: 7px;
  }

  .control-section {
    padding: 9px;
    gap: 6px;
  }

  .presets .btn {
    min-height: 36px;
  }

  .zoom-out,
  .zoom-in {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .joystick {
    width: 108px;
    height: 108px;
  }

  .stick {
    width: 46px;
    height: 46px;
  }

  .event-btn {
    min-height: 42px;
  }
}

/* Landscape fly layout: two manual surfaces around one central monitor. */
@media (orientation: landscape) {
  main {
    display: grid;
    grid-template-columns: clamp(210px, 23vw, 290px) minmax(0, 1fr) clamp(330px, 30vw, 390px);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "left stage right"
      "left deck right";
    overflow: hidden;
    touch-action: pan-x;
  }

  .stage {
    grid-area: stage;
    width: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    align-self: start;
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .bottom-deck {
    grid-area: deck;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: #0d131a;
    border-top: 1px solid var(--line);
    touch-action: pan-y;
  }

  .bottom-deck .control-section {
    min-width: 0;
    height: 100%;
    overflow: hidden;
  }

  .side-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
    background: #121820;
    scrollbar-color: #3c4a57 transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .side-panel-left {
    grid-area: left;
  }

  .side-panel-right {
    grid-area: right;
    background: var(--panel);
  }

  .side-head {
    padding: 2px 3px 5px;
  }

  .side-head h1 {
    margin-top: 4px;
    font-size: 17px;
    line-height: 1.1;
  }

  .side-head p {
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
  }

  .side-panel .ptz-lane,
  .side-panel .control-section {
    flex: 0 0 auto;
  }

  .side-panel-left .ptz-lane {
    min-height: 0;
  }

  .side-panel-left .frame-tools {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .side-panel-left .zoomrow {
    justify-content: space-around;
  }

  .side-panel-right .rail-head {
    padding-top: 2px;
  }

  .side-panel-right .ptz-availability {
    padding: 0 3px 1px;
  }
}

/* Compact landscape fallback: on a narrow browser window the three rails
   must still leave real width to the 16:9 monitor. Without this grid the
   intrinsic content width of the side rails can collapse .stage to 1px;
   WHEP keeps receiving frames but the operator sees no picture. */
@media (orientation: landscape) and (max-width: 899px) {
  main {
    display: grid;
    grid-template-columns: minmax(150px, 24vw) minmax(180px, 1fr) minmax(205px, 28vw);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "left stage right"
      "left deck right";
    overflow: hidden;
  }

  .stage {
    grid-area: stage;
    width: auto;
    height: auto;
    min-width: 0;
    aspect-ratio: 16 / 9;
    align-self: start;
  }

  .side-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px 6px;
  }

  .side-panel-left {
    grid-area: left;
  }

  .side-panel-right {
    grid-area: right;
  }

  .bottom-deck {
    grid-area: deck;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 6px;
  }

  .bottom-deck .control-section {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    padding: 8px;
  }
}

@media (orientation: portrait) {
  main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
  }

  .stage {
    order: 1;
    flex: 0 0 32dvh;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .bottom-deck {
    order: 3;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    background: var(--bg);
    touch-action: pan-y;
  }

  .side-panel {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    overflow: visible;
    background: var(--panel);
    touch-action: pan-y;
  }

  .side-panel-left {
    order: 2;
  }

  .side-panel-right {
    order: 4;
    padding-top: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .side-head {
    padding: 0 3px 2px;
  }

  .side-head h1 {
    margin-top: 3px;
    font-size: 18px;
  }

  .side-head p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
  }

  .side-panel .ptz-lane,
  .side-panel .control-section {
    flex: 0 0 auto;
  }

  .side-panel-right .rail-head {
    padding-top: 0;
  }
}

@media (pointer: coarse) and (orientation: portrait) and (min-width: 700px) {
  .side-panel-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: start;
  }

  .side-panel-right .rail-head,
  .side-panel-right .ptz-availability,
  .side-panel-right .panel-section,
  .side-panel-right #battWarn,
  .side-panel-right #tempWarn,
  .side-panel-right #thermalHint,
  .side-panel-right .advanced-section {
    grid-column: 1 / -1;
  }

  .side-panel-right .mark-section {
    grid-column: 1;
    grid-row: 3;
  }

  .side-panel-right .ptz-gimbal-lane {
    grid-column: 2;
    grid-row: 3;
  }
}

/* Tablet portrait: the monitor stays full width on top (it needs the
   width to be readable), and below it the two hand controls sit side by
   side — zoom on the left, PTZ/joystick on the right — so both stay
   reachable without hunting through a single stacked column. */
@media (pointer: coarse) and (orientation: portrait) and (min-width: 700px) {
  main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* The stage row is sized explicitly via calc(), not "auto" + aspect-ratio:
       Chromium's auto-track sizing pass and the aspect-ratio final-layout
       pass disagree when max-height:100% (set globally on .stage, line ~531)
       is in the cascade, so the auto track ends up sized well under the
       item's real rendered height and the row below overlaps it. */
    grid-template-rows: calc(100vw * 9 / 16) auto auto;
    grid-template-areas:
      "stage stage"
      "left right"
      "deck deck";
    align-content: start;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
  }

  .stage {
    grid-area: stage;
    order: initial;
    flex: none;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: 16 / 9;
    align-self: start;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .bottom-deck {
    grid-area: deck;
    order: initial;
  }

  .side-panel {
    order: initial;
    height: auto;
    overflow: visible;
  }

  .side-panel-left {
    grid-area: left;
    border-right: 1px solid var(--line);
  }

  .side-panel-right {
    grid-area: right;
    display: flex;
    flex-direction: column;
  }

  .side-panel-right .rail-head,
  .side-panel-right .ptz-availability,
  .side-panel-right .panel-section,
  .side-panel-right #battWarn,
  .side-panel-right #tempWarn,
  .side-panel-right #thermalHint,
  .side-panel-right .advanced-section,
  .side-panel-right .mark-section,
  .side-panel-right .ptz-gimbal-lane {
    grid-column: auto;
    grid-row: auto;
  }

  /* Both hands operate this row while gripping the tablet's edges: pull
     the zoom fader to the true left edge and the joystick to the true
     right edge (thumb-reach), instead of centering each in its half-width
     column. The vertical slider mirrors the landscape fly-controls recipe
     so fine zoom adjustment feels the same in both orientations. Panel
     headers, captions and the redundant zoom-range legend are dropped
     here: this row is operated by feel during a live shot, not read —
     the actual slider and joystick get the space instead of copy. */
  .side-panel-left .side-head,
  .side-panel-right .rail-head,
  .zoom-lane > .ptz-lane-head,
  .ptz-unified-lane > .ptz-lane-head,
  .zoom-scale {
    display: none;
  }

  .side-panel-left .zoom-lane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    grid-template-areas:
      "faders smooth"
      "presets presets";
    gap: 8px;
    max-width: 320px;
    margin-right: auto;
  }

  .zoom-faders {
    grid-area: faders;
    display: block;
  }

  .zoom-lane > .row.presets {
    grid-area: presets;
  }

  /* Movement smoothness rides next to the zoom fader as a second vertical
     slider, in the same thumb reach, instead of a full-width horizontal
     control stacked below the preset buttons. */
  .zoom-lane > .smooth-block {
    grid-area: smooth;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-top: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(8, 12, 17, 0.24);
  }

  .zoom-lane > .smooth-block .slider-label {
    text-align: center;
    font-size: 9px;
  }

  .zoom-lane > .smooth-block input[type="range"] {
    width: 34px;
    height: 230px;
    min-height: 230px;
    accent-color: var(--focus);
    writing-mode: vertical-lr;
    direction: rtl;
    touch-action: none;
  }

  .zoom-fader {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(8, 12, 17, 0.24);
  }

  .zoom-fader-head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .zoom-fader-head span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  .zoom-fader-head strong {
    color: var(--text);
    font-size: 15px;
  }

  .zoom-fader-combined {
    width: 100%;
  }

  .zoom-fader-track {
    display: flex;
    min-height: 230px;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
  }

  .zoom-fader-track > span {
    color: var(--muted);
    font-family: ui-monospace, monospace;
    font-size: 9px;
  }

  .zoom-fader-track input[type="range"] {
    width: 40px;
    height: 220px;
    min-height: 220px;
    accent-color: var(--focus);
    writing-mode: vertical-lr;
    direction: rtl;
    touch-action: none;
  }

  .zoom-fader-actions {
    display: flex;
    gap: 6px;
  }

  .zoom-fader-actions .btn {
    width: 44px;
    min-height: 44px;
    padding: 3px;
    font-size: 20px;
  }

  .side-panel-right .ptz-unified-lane {
    width: 100%;
  }

  .side-panel-right .gimbalrow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .side-panel-right .joystick-wrap {
    order: 2;
    flex-direction: row-reverse;
  }

  .side-panel-right .gimbal-readout {
    order: 1;
  }

  /* With the headers gone, give the space back to the controls
     themselves instead of leaving it blank. */
  .zoom-fader-track {
    min-height: 280px;
  }

  .zoom-fader-track input[type="range"] {
    height: 270px;
    min-height: 270px;
  }

  .side-panel-right .joystick {
    width: 148px;
    height: 148px;
  }

  .side-panel-right .stick {
    width: 60px;
    height: 60px;
  }

  /* Marca azione and Pannello on-air share one slot under the gimbal box
     instead of stacking — only one is normally needed while shooting. */
  .action-tabs {
    display: flex;
    gap: 6px;
  }

  .action-tabs.hidden {
    display: none;
  }

  .action-tab {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(8, 12, 17, 0.24);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
  }

  .action-tab.active {
    border-color: var(--focus);
    background: rgba(75, 145, 255, 0.14);
    color: var(--text);
  }

  .tab-hidden {
    display: none;
  }
}

@media (pointer: coarse) and (orientation: portrait) {
  .stage {
    flex-basis: 32dvh;
  }

  .controls {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* iPad / large Android tablet portrait: the two live-action surfaces can sit
   side by side, keeping both the marker and the gimbal in reach. */
@media (pointer: coarse) and (orientation: portrait) and (min-width: 700px) {
  .controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: start;
  }

  .rail-head,
  .framing-section,
  .panel-section,
  .advanced-section,
  #battWarn,
  #tempWarn,
  #thermalHint {
    grid-column: 1 / -1;
  }

  .mark-section,
  .gimbal-section {
    min-width: 0;
  }

  .gimbalrow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .joystick-wrap {
    gap: 7px;
  }

  .joystick-wrap > span {
    max-width: 52px;
  }
}

/* On a touch tablet the PTZ card itself uses two lanes. In a narrow desktop
   rail it stays stacked to preserve a comfortable joystick. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 820px),
  (pointer: coarse) and (orientation: portrait) and (min-width: 700px) {
  .ptz-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .ptz-gimbal-lane .joystick-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .ptz-gimbal-lane .joystick-wrap > span {
    max-width: none;
  }

  .ptz-gimbal-lane .gimbalrow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 820px) {
  .ptz-digital-lane .frame-tools {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ptz-digital-lane .zoomrow {
    justify-content: space-around;
  }

  .ptz-gimbal-lane .joystick-wrap > span,
  .ptz-gimbal-lane #gimbalState {
    display: none;
  }

  .ptz-gimbal-lane .gimbal-tel {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Touch landscape: the lower deck is a live command surface, not a status
   card. Give the operator two comfortable action columns and a readable
   two-step on-air control. */
@media (pointer: coarse) and (orientation: landscape) and (min-width: 900px) {
  .bottom-deck {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .bottom-deck .control-section {
    padding: 14px;
  }

  .bottom-deck .eventrow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .bottom-deck .event-btn {
    min-height: 58px;
    font-size: 14px;
  }

  .bottom-deck .panelrow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .bottom-deck .panelrow .proto-select {
    grid-column: 1;
    grid-row: 1;
    min-height: 56px;
  }

  .bottom-deck .panel-live {
    grid-column: 2;
    grid-row: 1;
    min-height: 56px;
    font-size: 12px;
    white-space: nowrap;
  }

  .bottom-deck #panelApply,
  .bottom-deck #panelOff {
    min-height: 56px;
  }

  .bottom-deck #panelApply {
    grid-column: 1;
    grid-row: 2;
  }

  .bottom-deck #panelOff {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Fly controls: the left rail keeps zoom and movement smoothness together;
   the right rail is the pan/tilt hand. */
@media (orientation: landscape) {
  .zoom-lane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    grid-template-areas:
      "head head"
      "faders smooth"
      "presets presets";
    gap: 8px;
  }

  .zoom-lane > .ptz-lane-head {
    grid-area: head;
  }

  .zoom-faders {
    grid-area: faders;
  }

  .zoom-faders {
    display: block;
    min-height: 286px;
  }

  .zoom-fader {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(8, 12, 17, 0.24);
  }

  .zoom-fader-head {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  .zoom-fader-head span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  .zoom-fader-head strong {
    color: var(--text);
    font-size: 15px;
  }

  .zoom-fader-combined {
    width: 100%;
  }

  .zoom-fader-track {
    display: flex;
    min-height: 198px;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
  }

  .zoom-fader-track > span {
    color: var(--muted);
    font-family: ui-monospace, monospace;
    font-size: 9px;
  }

  .zoom-fader-track input[type="range"] {
    width: 34px;
    height: 190px;
    min-height: 190px;
    accent-color: var(--focus);
    writing-mode: vertical-lr;
    direction: rtl;
    touch-action: none;
  }

  .zoom-fader-actions {
    display: flex;
    gap: 6px;
  }

  .zoom-fader-actions .btn {
    width: 40px;
    min-height: 38px;
    padding: 3px;
    font-size: 20px;
  }

  .zoom-lane > .smooth-block {
    grid-area: smooth;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 286px;
    padding: 8px 3px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(8, 12, 17, 0.24);
  }

  .zoom-lane > .smooth-block .slider-label {
    text-align: center;
    font-size: 9px;
    line-height: 1.2;
  }

  .zoom-lane > .smooth-block input[type="range"] {
    width: 34px;
    height: 190px;
    min-height: 190px;
    accent-color: var(--focus);
    writing-mode: vertical-lr;
    direction: rtl;
    touch-action: none;
  }

  .zoom-lane > .row.presets {
    grid-area: presets;
  }

  .zoom-scale {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    color: var(--muted);
    font-family: ui-monospace, monospace;
    font-size: 8px;
    text-align: center;
  }

  .zoom-lane .presets {
    gap: 5px;
  }

  .side-panel-right .ptz-unified-lane {
    padding: 12px;
  }

  .side-panel-right .joystick {
    width: 124px;
    height: 124px;
  }

  .side-panel-right .stick {
    width: 52px;
    height: 52px;
  }

  .side-panel-right .joystick.digital-mode {
    border-color: rgba(227, 173, 69, 0.7);
    background: radial-gradient(circle, #3a3427 0 44%, #2a2924 45% 64%, #1b2024 65%);
  }

  .side-panel-right .joystick.digital-mode .stick {
    background: var(--live);
    box-shadow: 0 0 18px rgba(227, 173, 69, 0.55);
  }
}

/* ---- Multicam bridge locale ---- */
.multicam-btn { border-color: rgba(87, 205, 153, 0.5); color: #8de0ba; }
.multicam-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: stretch;
  justify-content: center; padding: clamp(10px, 2vw, 24px);
  background: rgba(5, 9, 12, 0.94);
}
.multicam-overlay.hidden { display: none; }
.multicam-dialog {
  width: min(1180px, 100%); min-height: 0; display: flex; flex-direction: column;
  padding: clamp(14px, 2vw, 24px); border: 1px solid #2a3a43; border-radius: 14px;
  background: #111a1f; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.multicam-head, .multicam-toolbar, .multicam-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.multicam-head { margin-bottom: 16px; }
.multicam-head h2 { margin-top: 4px; font-size: clamp(20px, 3vw, 30px); letter-spacing: -0.03em; }
.multicam-toolbar {
  justify-content: flex-start; flex-wrap: wrap; padding: 10px 0;
  border-top: 1px solid #26343b; border-bottom: 1px solid #26343b;
}
.multicam-status, .multicam-limit, .multicam-note, .source-meta, .slot-meta { color: var(--muted); font-size: 12px; }
.multicam-status.ok { color: var(--ok); }
.multicam-status.warn { color: #e2b455; }
.multicam-status.err { color: var(--err); }
.multicam-limit { margin-left: auto; font-family: ui-monospace, monospace; }
.multicam-note { max-width: 850px; margin: 12px 0 16px; line-height: 1.45; }
.multicam-content {
  display: grid; grid-template-columns: minmax(270px, 0.82fr) minmax(440px, 1.5fr);
  gap: 18px; min-height: 0; flex: 1;
}
.rtsp-sources-section, .rtsp-slots-section { min-height: 0; display: flex; flex-direction: column; }
.multicam-section-head { margin-bottom: 8px; color: #b7c6cd; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
.rtsp-source-list { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.rtsp-source-card {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 12px;
  border: 1px solid #2a3a43; border-radius: 9px; background: #172229;
}
.rtsp-source-card.selected { border-color: rgba(87, 205, 153, 0.75); background: rgba(87, 205, 153, 0.08); }
.source-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; font-weight: 700; }
.source-meta { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }
.source-timecode { grid-column: 1 / -1; color: #8de0ba; font-family: ui-monospace, monospace; font-size: 11px; }
.source-actions { display: flex; align-items: center; gap: 5px; }
.source-actions .btn { padding: 6px 8px; font-size: 11px; }
.rtsp-slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.rtsp-slot { min-width: 0; position: relative; overflow: hidden; border: 1px solid #2a3a43; border-radius: 9px; background: #080c0f; }
.rtsp-slot video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.rtsp-slot-label { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; color: var(--text); font-size: 11px; font-weight: 700; }
.rtsp-slot-label span:nth-child(2) { color: #8de0ba; font-family: ui-monospace, monospace; }
.rtsp-slot-label .btn { padding: 4px 6px; font-size: 10px; }
.rtsp-slot-empty { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 20px; color: #687981; font-size: 12px; text-align: center; }
.empty-state { padding: 28px 16px; border: 1px dashed #33464f; border-radius: 9px; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
@media (max-width: 820px) {
  .multicam-content { grid-template-columns: 1fr; overflow-y: auto; }
  .rtsp-source-list { max-height: 32vh; }
  .rtsp-slot-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 520px) {
  .rtsp-slot-grid { grid-template-columns: 1fr; }
  .multicam-limit { margin-left: 0; }
}