.control-room-launch {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.control-room-launch button,
.control-room-exit {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid rgba(98, 225, 204, .62);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(15, 123, 114, .82), rgba(8, 68, 68, .92));
  color: #edfff7;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.control-room-launch button:focus-visible,
.control-room-exit:focus-visible,
.control-room-nav button:focus-visible {
  outline: 2px solid #ffe19b;
  outline-offset: 3px;
}

.control-room-shell[hidden] { display: none; }

.control-room-shell {
  position: fixed;
  z-index: 3000;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  padding: 12px 16px 16px;
  background:
    radial-gradient(ellipse at 8% 0%, rgba(24, 114, 106, .22), transparent 42%),
    #041f22;
  color: #edf4e8;
}

.control-room-topbar {
  display: grid;
  grid-template-columns: minmax(150px, .85fr) minmax(150px, .7fr) minmax(330px, 2fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 13px;
  max-width: none;
  width: 100%;
  border: 1px solid rgba(132, 195, 178, .23);
  border-radius: 13px;
  background: rgba(7, 48, 49, .88);
}

.control-room-brand small,
.control-room-frequency small,
.cr-metric small {
  display: block;
  color: #8ebbb0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.control-room-brand strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}

.control-room-frequency {
  padding-left: 14px;
  border-left: 1px solid rgba(132, 195, 178, .2);
  color: #f4d989;
  font-size: 24px;
  font-weight: 850;
  white-space: nowrap;
}

.control-room-frequency small { margin-bottom: 2px; color: #b8d2c8; }
.cr-top-metrics { display: grid; grid-template-columns: repeat(6, minmax(58px, 1fr)); gap: 9px; }
.cr-metric { min-width: 0; padding: 5px 7px; border-left: 1px solid rgba(132, 195, 178, .17); }
.cr-metric strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #edf4e8;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.control-room-controls { display: flex; align-items: center; gap: 10px; }
.cr-sim-badge {
  padding: 6px 8px;
  align-self: flex-start;
  border: 1px solid rgba(255, 194, 101, .4);
  border-radius: 8px;
  color: #f3d490;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .07em;
  text-align: center;
  white-space: nowrap;
}

.control-room-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.control-room-nav { display: flex; flex-wrap: wrap; gap: 7px; }
.control-room-nav button {
  min-height: 35px;
  padding: 0 14px;
  border: 1px solid rgba(132, 195, 178, .2);
  border-radius: 9px;
  background: rgba(9, 53, 54, .7);
  color: #b9d1c7;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.control-room-nav button[aria-selected="true"] {
  border-color: rgba(94, 223, 204, .7);
  background: rgba(16, 105, 99, .58);
  color: #f0fff6;
}
.control-room-status { color: #9cbeb3; font-size: 9px; text-align: right; }
.control-room-nav-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.control-room-station-picker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #9cbeb3;
  font-size: 9px;
  font-weight: 800;
}
.control-room-station-picker[hidden] { display: none; }
.control-room-station-picker select {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(132, 195, 178, .27);
  border-radius: 8px;
  background: #0b3b3b;
  color: #edf4e8;
  font: inherit;
}
.frequency-response-panel {
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgba(132, 195, 178, .2);
  border-radius: 12px;
  background: rgba(5, 39, 40, .7);
}
.frequency-response-heading,
.frequency-control-title,
.frequency-response-output {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.frequency-response-heading h4 { margin: 0; color: #dff1e8; font-size: 12px; }
#frequencyModelStatus {
  color: #80e0bc;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}
#frequencyModelStatus[data-state="responding"] { color: #f3d27b; }
#frequencyModelStatus[data-state="alert"] { color: #ff8c73; }
.frequency-response-note {
  margin: 7px 0 10px;
  color: #97b9ad;
  font-size: 9px;
  line-height: 1.45;
}
.frequency-live-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
}
.frequency-live-metrics > div {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(132, 195, 178, .13);
  border-radius: 8px;
  background: rgba(10, 62, 60, .5);
}
.frequency-live-metrics span {
  display: block;
  color: #8db8aa;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.frequency-live-metrics strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #f5df9a;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frequency-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 4px;
  border: 1px solid rgba(132, 195, 178, .12);
  border-radius: 8px;
  background: rgba(3, 30, 33, .55);
}
.frequency-chart-grid { stroke: rgba(132, 195, 178, .15); stroke-width: 1; }
.frequency-chart-nominal { stroke: #eed48a; stroke-width: 1.2; stroke-dasharray: 5 5; }
.frequency-chart-trace {
  fill: none;
  stroke: #71dfcf;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.frequency-chart-label { fill: #89ada1; font-size: 9px; font-family: Inter, system-ui, sans-serif; }
.frequency-response-output { margin: 6px 0 11px; color: #9dbdb1; font-size: 8px; }
.frequency-response-output strong { color: #dff1e8; font-size: 9px; }
.frequency-event-controls {
  padding: 9px;
  border: 1px solid rgba(132, 195, 178, .14);
  border-radius: 9px;
  background: rgba(10, 54, 53, .5);
}
.frequency-control-title strong { color: #dff1e8; font-size: 9px; }
.frequency-control-title span { color: #8fdccb; font-size: 8px; }
.frequency-event-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 7px;
}
.frequency-event-buttons button { min-height: 30px; padding: 4px 6px; font-size: 8px; }
.frequency-event-buttons button:last-child { grid-column: 1 / -1; }
.frequency-event-buttons button:disabled { cursor: not-allowed; opacity: .45; }
#frequencyEventStatus { margin: 6px 0 0; color: #91b1a6; font-size: 8px; line-height: 1.4; }
.frequency-support-controls {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px;
  border: 1px solid rgba(132, 195, 178, .14);
  border-radius: 9px;
}
.frequency-support-controls legend { padding: 0 5px; color: #78dccc; font-size: 8px; font-weight: 850; }
.frequency-support-toggle { display: flex; align-items: center; gap: 7px; color: #bfd7cc; font-size: 8px; }
.frequency-support-toggle input { accent-color: #57cdbd; }
.frequency-ambient-toggle { margin: 0 0 9px; padding: 7px; border: 1px solid rgba(132,195,178,.13); border-radius: 8px; background: rgba(10,54,53,.42); font-size: 8px; }
.frequency-support-control { display: grid; gap: 4px; color: #9dbdb1; font-size: 8px; }
.frequency-support-control .sim-control-head { font-size: 8px; }
.frequency-support-control output { color: #78dccc; }
.frequency-support-control input[type="range"] { width: 100%; accent-color: #57cdbd; }
.frequency-support-control select {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(132, 195, 178, .2);
  border-radius: 7px;
  background: #0b3b3b;
  color: #edf4e8;
  font: inherit;
}
#frequencyEventLayer circle { fill: none; stroke: #f3d27b; stroke-width: 2; stroke-dasharray: 3 3; }
.station-unit-panel,
.station-voltage-plan {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(132,195,178,.2);
  border-radius: 12px;
  background: rgba(5,39,40,.72);
}
.station-unit-panel[hidden],
.station-voltage-plan[hidden] { display: none; }
.station-unit-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.station-unit-heading h3 { margin: 0; color: #e5f2e7; font-size: 13px; }
.station-study-chip { padding: 4px 7px; border: 1px solid rgba(243,210,123,.35); border-radius: 20px; color: #f3d27b; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.station-unit-card { display: grid; gap: 9px; margin-top: 10px; padding: 11px; border: 1px solid rgba(132,195,178,.15); border-radius: 9px; background: rgba(10,54,53,.5); }
.station-unit-card + .station-unit-card { margin-top: 8px; }
.station-unit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.station-unit-card-head strong { color: #e5f2e7; font-size: 11px; }
.station-unit-state { color: #8de0c1; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.station-unit-state[data-state="offline"] { color: #ffab91; }
.station-unit-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.station-unit-actions button { min-height: 30px; padding: 5px 9px; font-size: 9px; }
.station-unit-actions button:disabled { opacity: .45; cursor: not-allowed; }
.station-unit-control { display: grid; gap: 4px; color: #a6c3b9; font-size: 9px; }
.station-unit-control > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.station-unit-control output { color: #82dfd0; font-weight: 850; }
.station-unit-control input[type="range"] { width: 100%; accent-color: #57cdbd; }
.station-unit-detail { margin: 0; color: #93b5a9; font-size: 9px; line-height: 1.45; }
.station-unit-status { min-height: 14px; margin: 8px 0 0; color: #82dfd0; font-size: 9px; line-height: 1.4; }
.station-unit-status[data-state="error"] { color: #ffab91; }
.station-unit-disclaimer { margin: 9px 0 0; color: #8eaca0; font-size: 9px; line-height: 1.45; }
.station-voltage-plan { display: grid; gap: 5px; border-color: rgba(243,210,123,.22); }
.station-voltage-plan strong { color: #f3d27b; font-size: 10px; }
.station-voltage-plan span { color: #d9ece3; font-size: 11px; font-weight: 750; }
.station-voltage-plan small { color: #93b5a9; font-size: 9px; line-height: 1.4; }

.control-room-workspace {
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(132, 195, 178, .18);
  border-radius: 14px;
  background: rgba(5, 42, 43, .54);
}
.control-room-workspace > .layout {
  grid-template-columns: minmax(0, 1fr) minmax(285px, 340px);
  gap: 12px;
  height: 100%;
  min-height: 0;
  margin: 0;
}
.control-room-workspace > .layout .network-panel,
.control-room-workspace > .layout .info-panel {
  min-height: 0;
  max-height: calc(100vh - 152px);
  overflow: auto;
}
.control-room-workspace > .layout .map-wrap { min-height: 0; }
.control-room-workspace > .layout #network { height: min(62vh, 650px); min-height: 360px; }
.control-room-workspace > .station-detail { min-height: 100%; margin: 0; border: 0; border-radius: 0; }

.cr-panel { min-height: 100%; padding: 20px; }
.cr-panel[hidden] { display: none; }
.cr-panel-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.cr-panel-heading h2 { margin: 4px 0 5px; font-size: 22px; }
.cr-panel-heading p { max-width: 760px; margin: 0; color: #a8c4b9; font-size: 11px; line-height: 1.55; }
.cr-kicker { color: #78dccc; font-size: 8px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.cr-kpi-grid,
.cr-service-grid,
.cr-ied-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0 18px; }
.cr-kpi,
.cr-service,
.cr-ied-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(132, 195, 178, .17);
  border-radius: 11px;
  background: rgba(9, 58, 57, .54);
}
.cr-kpi span,
.cr-service span,
.cr-ied-card span { display: block; color: #93b8ac; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cr-kpi strong,
.cr-service strong,
.cr-ied-card strong { display: block; margin-top: 7px; color: #edf4e8; font-size: 14px; }
.cr-service p,
.cr-ied-card p { margin: 7px 0 0; color: #a8c4b9; font-size: 9px; line-height: 1.5; }
.cr-led { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #73d9aa; }
.cr-led.is-amber { background: #f0c673; }
.cr-led.is-muted { background: #86a59a; }
.cr-subsection-title { display: flex; justify-content: space-between; gap: 10px; margin: 20px 0 8px; }
.cr-subsection-title h3 { margin: 0; font-size: 13px; }
.cr-subsection-title small { color: #8fb0a5; font-size: 9px; }
.cr-table-wrap { overflow: auto; border: 1px solid rgba(132, 195, 178, .15); border-radius: 10px; }
.cr-table { width: 100%; border-collapse: collapse; color: #d7e8dd; font-size: 9px; white-space: nowrap; }
.cr-table th,
.cr-table td { padding: 9px 11px; border-bottom: 1px solid rgba(132, 195, 178, .1); text-align: left; }
.cr-table th { position: sticky; top: 0; background: #0b3b3b; color: #9dc6b9; font-size: 8px; text-transform: uppercase; }
.cr-table tr:last-child td { border-bottom: 0; }
.cr-status-chip { padding: 4px 7px; border: 1px solid rgba(115, 217, 170, .22); border-radius: 999px; color: #9de3bf; font-size: 8px; font-weight: 750; }
.cr-event-list { display: grid; gap: 8px; max-width: 1000px; margin: 12px 0 0; padding: 0; list-style: none; }
.cr-event-list li {
  display: grid;
  grid-template-columns: 74px 78px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(132, 195, 178, .15);
  border-radius: 9px;
  background: rgba(9, 58, 57, .45);
  color: #c8ddd2;
  font-size: 9px;
}
.cr-event-list time { color: #8baea3; }
.cr-event-type { color: #78dccc; font-weight: 850; letter-spacing: .06em; }
body.control-room-open { overflow: hidden; }

@media (max-width: 1000px) {
  .control-room-shell { padding: 8px; gap: 7px; }
  .control-room-topbar { grid-template-columns: 1fr auto; }
  .control-room-frequency { grid-column: 1 / -1; grid-row: 1; padding-left: 0; border-left: 0; }
  .control-room-brand { grid-column: 1; grid-row: 2; }
  .control-room-controls { grid-column: 2; grid-row: 2; }
  .cr-top-metrics { grid-column: 1 / -1; grid-row: 3; }
  .control-room-workspace > .layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .control-room-workspace > .layout .network-panel,
  .control-room-workspace > .layout .info-panel { max-height: none; }
  .control-room-workspace > .layout #network { height: 58vh; }
  .cr-kpi-grid,
  .cr-service-grid,
  .cr-ied-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .control-room-shell { padding: 6px; }
  .control-room-topbar { padding: 8px; gap: 8px; }
  .control-room-brand strong { font-size: 13px; }
  .control-room-frequency { padding-left: 8px; font-size: 19px; }
  .cr-top-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .cr-metric { padding: 4px; }
  .cr-metric strong { font-size: 11px; }
  .cr-metric small { font-size: 7px; }
  .control-room-controls { align-items: flex-end; flex-direction: column; gap: 4px; }
  .cr-sim-badge { padding: 4px; font-size: 7px; }
  .control-room-exit { min-height: 32px; padding: 0 9px; font-size: 9px; }
  .control-room-subhead { align-items: flex-start; flex-direction: column; }
  .control-room-nav { width: 100%; }
  .control-room-nav button { flex: 1 1 auto; padding: 0 8px; font-size: 9px; }
  .control-room-status { text-align: left; }
  .control-room-nav-meta { align-items: flex-start; flex-direction: column; }
  .frequency-event-buttons { grid-template-columns: 1fr; }
  .frequency-event-buttons button:last-child { grid-column: auto; }
  .control-room-workspace > .layout #network { height: 48vh; min-height: 300px; }
  .cr-panel { padding: 12px; }
  .cr-panel-heading { flex-direction: column; gap: 8px; }
  .cr-panel-heading h2 { font-size: 18px; }
  .cr-kpi-grid,
  .cr-service-grid,
  .cr-ied-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cr-kpi,
  .cr-service,
  .cr-ied-card { padding: 9px; }
  .cr-event-list li { grid-template-columns: 58px 56px minmax(0, 1fr); gap: 6px; font-size: 8px; }
}