.scenario-console {
  min-width: 0;
}

.scenario-control-group {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.scenario-control-group-title {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scenario-inputs {
  display: grid;
  gap: 0.48rem;
}

.scenario-control {
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 68px;
  padding: 0.62rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(0, 63, 115, 0.04);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.scenario-control:hover {
  border-color: var(--senai-blue, var(--cyan-500));
  transform: translateY(-1px);
}

.scenario-control:has(.scenario-control-input:disabled) {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
}

.scenario-control-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.scenario-control-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.scenario-control-copy strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.2;
}

.scenario-control-copy small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 550;
  line-height: 1.35;
}

.control-kind {
  align-self: start;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.toggle-actuator {
  position: relative;
  width: 46px;
  height: 26px;
  border: 2px solid #8395a5;
  border-radius: 999px;
  background: #dce5eb;
  box-shadow: inset 0 2px 5px rgba(13, 38, 61, 0.16);
  transition: 160ms ease;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform 160ms ease;
}

.toggle-control .scenario-control-input:checked + .toggle-actuator {
  border-color: var(--senai-blue, var(--cyan-500));
  background: var(--senai-blue, var(--cyan-500));
}

.toggle-control .scenario-control-input:checked + .toggle-actuator .toggle-thumb {
  transform: translateX(20px);
}

.scenario-control-input:focus-visible + .toggle-actuator,
.scenario-control-input:focus-visible + .momentary-actuator {
  outline: 3px solid rgba(244, 123, 32, 0.3);
  outline-offset: 3px;
}

.momentary-actuator {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(#8b9dac, #546878);
  box-shadow: 0 4px 0 #324654, 0 6px 11px rgba(0, 0, 0, 0.2);
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.momentary-cap {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff9c4c, var(--senai-orange, #f47b20));
  border: 2px solid #b84f0c;
  box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.35), inset 0 -3px 5px rgba(104, 39, 0, 0.2);
}

.momentary-control .scenario-control-input:checked + .momentary-actuator {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #324654, 0 2px 5px rgba(0, 0, 0, 0.16);
}

.momentary-control .scenario-control-input:checked + .momentary-actuator .momentary-cap {
  background: linear-gradient(145deg, #ffc18f, #ff7b17);
  box-shadow: 0 0 0 5px rgba(244, 123, 32, 0.14), inset 0 2px 3px rgba(255,255,255,.4);
}

.fault-controls {
  padding-top: 0.7rem;
  border-top: 1px dashed #efb183;
}

.fault-controls .scenario-control {
  background: #fff9f4;
  border-color: #f1c49f;
}

.fault-controls .toggle-control .scenario-control-input:checked + .toggle-actuator {
  background: #c84b3b;
  border-color: #a93427;
}

.traffic-pseudo3d {
  min-height: 350px;
  padding: 0.45rem;
  overflow: hidden;
  background: linear-gradient(180deg, #dceef8 0%, #edf6fb 38%, #dfeadb 100%);
}

.traffic-pseudo3d svg {
  width: 100%;
  max-width: 620px;
  max-height: 390px;
  filter: drop-shadow(0 12px 18px rgba(0, 44, 75, 0.14));
}

.pseudo-road {
  stroke: #727f89;
  stroke-width: 2;
}

.road-edge {
  fill: none;
  stroke: #d7dde2;
  stroke-width: 4;
}

.road-center {
  fill: none;
  stroke: #f3cf63;
  stroke-width: 3;
  stroke-dasharray: 13 10;
  opacity: 0.88;
}

.crosswalk path {
  fill: #f7f8f8;
  stroke: #d6dadd;
  stroke-width: 0.8;
}

.signal-shadow,
.car-shadow,
.person-shadow {
  fill: rgba(0, 0, 0, 0.22);
}

.signal-pole {
  fill: #556674;
}

.signal-box {
  fill: #1e2b38;
  stroke: #0c1721;
  stroke-width: 2;
}

.signal-lamp,
.ped-lamp {
  stroke: #0c141c;
  stroke-width: 2;
  opacity: 0.22;
}

.signal-lamp.red,
.ped-lamp.stop {
  fill: #e44f49;
}

.signal-lamp.yellow {
  fill: #f2bd35;
}

.signal-lamp.green,
.ped-lamp.walk {
  fill: #36b675;
}

.signal-lamp.active,
.ped-lamp.active {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.72));
}

.pedestrian-box {
  fill: #243341;
}

.sound-wave {
  fill: none;
  stroke: var(--senai-orange, #f47b20);
  stroke-width: 3;
  stroke-linecap: round;
}

.pseudo-car .car-body {
  fill: #0f6eb2;
  stroke: #063e67;
  stroke-width: 2;
}

.pseudo-car.secondary-car .car-body {
  fill: #e86d2b;
  stroke: #9b3c0d;
}

.pseudo-car .car-roof {
  fill: #d8ebf5;
  stroke: #27475a;
  stroke-width: 1.5;
}

.pseudo-car .car-window {
  fill: #6fa0ba;
  opacity: 0.82;
}

.pseudo-car .car-wheel {
  fill: #161c21;
}

.pseudo-car.stop .car-body {
  filter: drop-shadow(0 0 4px rgba(212, 65, 55, 0.25));
}

.pseudo-car.caution .car-body {
  filter: drop-shadow(0 0 4px rgba(242, 189, 53, 0.38));
}

.person-head {
  fill: #d9a37c;
  stroke: #6f4c36;
  stroke-width: 1;
}

.person-body {
  fill: none;
  stroke: #203c58;
  stroke-width: 4;
  stroke-linecap: round;
}

.pseudo-pedestrian.walking .person-body {
  stroke: #08764a;
}

.scene-status-card rect {
  fill: rgba(7, 36, 63, 0.88);
  stroke: rgba(255,255,255,.3);
  stroke-width: 1;
}

.scene-status-card text {
  fill: #fff;
  font-size: 11px;
  font-weight: 800;
}

.request-badge rect {
  fill: #eaf5ff;
  stroke: #3e8cc4;
}

.request-badge text {
  fill: #0a4e7d;
  font-size: 10px;
}

.maintenance-badge rect {
  fill: #ffd873;
  stroke: #a97900;
}

.maintenance-badge text {
  fill: #513b00;
  font-size: 9px;
  font-weight: 900;
}

.fault-badge rect {
  fill: #b33b2e;
  stroke: #7a1d14;
}

.fault-badge text {
  fill: #fff;
  font-size: 9px;
  font-weight: 850;
}

@media (max-width: 760px) {
  .scenario-control {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .control-kind {
    display: none;
  }

  .traffic-pseudo3d {
    min-height: 300px;
  }
}