.harmonic-scene { overflow: hidden; border: 1px solid #29445e; border-radius: 12px; color: #d5e9fb; background: radial-gradient(ellipse at 48% 36%, #142f49, #0a1728 78%); }
.harmonic-scene-controls, .harmonic-scene-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; }
.harmonic-scene-controls .btn { background: #152d43; color: #e2f0ff; border-color: #35536c; }
.harmonic-scene-controls label { padding-left: 6px; font-size: .76rem; color: #c3d9eb; }
.harmonic-scene-controls span { margin-left: auto; font-size: .76rem; color: #b4c9df; }
.harmonic-scene-plot { position: relative; }
.harmonic-scene canvas { display: block; width: 100%; height: clamp(280px, 44vw, 454px); cursor: grab; touch-action: none; }
.harmonic-scene canvas:active { cursor: grabbing; }
.harmonic-scene-hover { position: absolute; pointer-events: none; top: 8px; right: 12px; padding: 4px 8px; border-radius: 5px; background: #102034; color: #f0eaff; font-size: .78rem; }
.harmonic-scene-legend { justify-content: space-between; border-top: 1px solid #29445e; font-size: .75rem; }
.harmonic-scene-legend i { display: inline-block; width: 54px; height: 7px; margin-right: 4px; background: linear-gradient(90deg, #264a6a, #2775a3, #27adb1, #7dd396, #f8da76); }
.harmonic-view { margin-top: 10px; }
.harmonic-view .signal-actions { margin-bottom: 8px; }
.harmonic-view h3 { margin: 0 0 8px; }
.harmonic-view label { display: inline-flex; align-items: center; gap: 6px; }
.harmonic-slice { margin-top: 12px; padding: 10px 12px; border: 1px solid #ced9e6; border-radius: 8px; }
.harmonic-slice-chart { margin-top: 10px; display: grid; grid-template-columns: 50px minmax(0, 1fr); }
.harmonic-slice-chart > span { font-size: .72rem; line-height: 1.1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.harmonic-slice-chart svg { width: 100%; height: 106px; display: block; background: repeating-linear-gradient(to bottom, #f8fbff 0, #f8fbff calc(25% - 1px), #e5edf6 calc(25% - 1px), #e5edf6 25%); cursor: crosshair; }
.harmonic-slice-times { display: flex; justify-content: space-between; margin: 5px 0 0 50px; font-size: .7rem; gap: 6px; }
@media (max-width: 540px) {
  .harmonic-scene-controls span { width: 100%; margin-left: 0; }
  .harmonic-slice-times span:nth-child(2) { display: none; }
}


.signal-workspace { display: grid; gap: 16px; margin: 12px 0 18px; min-width: 0; }
.signal-toolbar, .signal-actions, .signal-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.signal-toolbar, .signal-footer { justify-content: space-between; }
.signal-toolbar h2, .signal-inspection h3 { margin: 0; }
.signal-toolbar p { margin: 4px 0; }
.signal-filters { margin: 12px 0; }
.signal-filters label, .signal-footer label { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; }
.signal-actions button i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.signal-workspace button[aria-pressed=true] { border-color: #528bcc; background: #e8f2ff; color: #143e72; }
.signal-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: stretch; margin-top: 9px; gap: 8px; }
.signal-axis { display: flex; flex-direction: column; gap: 2px; font-size: .76rem; }
.signal-axis small { line-height: 1.15; opacity: .78; }
.signal-lane { position: relative; min-width: 0; border: 1px solid #ced9e6; border-radius: 4px; overflow: hidden; height: 152px; background: #f8fbff; }
.signal-overview .signal-lane { height: 88px; }
.signal-harmonics .signal-lane { height: 148px; background: #f3f6fa; }
.signal-row:not(.signal-harmonics) .signal-lane { overflow: visible; }
.signal-row:not(.signal-harmonics) .signal-plot { overflow: hidden; border-radius: inherit; }
.signal-grid { stroke: #d5e2ef; }
.signal-grid-zero { stroke: #91a6bf; }
.signal-axis-ticks { position: absolute; inset: 0 auto 0 -58px; width: 50px; pointer-events: none; }
.signal-axis-ticks span { position: absolute; right: 0; transform: translateY(-50%); color: #344d68; font-size: .73rem; font-variant-numeric: tabular-nums; }
.signal-row:not(.signal-harmonics) .signal-axis strong, .signal-row:not(.signal-harmonics) .signal-axis small { max-width: 42px; }
.signal-lane > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .8rem; color: #42566e; pointer-events: none; }
.signal-plot { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; user-select: none; }
.signal-event-line { stroke: #527398; stroke-opacity: .32; stroke-dasharray: 2 3; }
.signal-cursor { stroke: #102d4a; stroke-width: 1.5; }
.signal-timeline[data-panning=true] .signal-plot { cursor: grabbing; }
.signal-time { margin: 4px 0 0 100px; display: flex; justify-content: space-between; font-size: .72rem; gap: 8px; }
.signal-time span:last-child { text-align: right; }
.signal-footer { margin-top: 8px; }
.signal-footer input[type=range] { width: 115px; }
.signal-heat-key { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; }
.signal-heat-key i { width: 38px; height: 7px; background: linear-gradient(90deg, #d9e5ef, #477faf, #723d93, #ed9f44); }
.signal-inspection { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; }
.signal-inspection article { min-width: 0; }
.signal-inspection h3 small { font-weight: normal; }
.signal-switch-list { padding: 0; margin: 8px 0 0; max-height: 216px; overflow: auto; list-style: none; }
.signal-switch-list li + li { margin-top: 4px; }
.signal-switch-list button { display: grid; grid-template-columns: 1fr auto auto minmax(55px, 1.1fr); gap: 6px; width: 100%; align-items: center; text-align: left; }
.signal-switch-list button span:last-child { overflow-wrap: anywhere; }
.signal-spectrum-key { display: flex; align-items: center; gap: 12px; font-size: .78rem; }
.signal-spectrum-key span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 4px; background: #75a2c8; }
.signal-spectrum-key span:nth-child(2)::before { background: #a7599d; }
.signal-spectrum { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin-top: 8px; text-align: center; }
.signal-spectrum > div > div { height: 65px; display: flex; align-items: flex-end; justify-content: center; gap: 1px; border-bottom: 1px solid #ced9e6; }
.signal-spectrum i { width: 35%; background: #75a2c8; }
.signal-spectrum i + i { background: #a7599d; }
@media (max-width: 680px) {
  .signal-inspection { grid-template-columns: 1fr; }
  .signal-row { grid-template-columns: 72px minmax(0, 1fr); gap: 5px; }
  .signal-time { margin-left: 77px; }
  .signal-axis-ticks { inset-inline-start: -44px; width: 38px; }
  .signal-axis-ticks span { font-size: .66rem; }
  .signal-row:not(.signal-harmonics) .signal-axis strong { max-width: 27px; }
}

.signal-orders { position: relative; }
.signal-orders small { position: absolute; right: 0; }
.signal-orders small:nth-of-type(1) { top: 0; }
.signal-orders small:nth-of-type(2) { top: 44%; }
.signal-orders small:nth-of-type(3) { bottom: 0; }