.signal-analyzer[hidden] { display: none; }
.signal-analyzer {
  position: fixed;
  z-index: 90;
  top: 76px;
  right: 20px;
  box-sizing: border-box;
  width: min(470px, calc(100vw - 24px));
  max-height: calc(100dvh - 88px);
  overflow: auto;
  border: 1px solid #5c6266;
  border-radius: 6px;
  background: #111416;
  color: #e7eceb;
  box-shadow: 0 18px 48px #000b;
  font: 12px/1.3 var(--ui-font, system-ui, sans-serif);
}
.signal-analyzer :is(button, select) { font: inherit; }
.signal-analyzer :is(button, select):focus-visible { outline: 2px solid #53d8f2; outline-offset: 2px; }
.signal-analyzer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid #343b3d;
  cursor: move;
  touch-action: none;
  user-select: none;
}
.signal-analyzer-header h2 { margin: 0; font: 600 13px/1.2 var(--ui-font, system-ui, sans-serif); }
.signal-analyzer-header-actions { display: flex; align-items: center; gap: 4px; }
.signal-analyzer-header button {
  min-height: 28px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #cbd4d4;
  cursor: pointer;
}
.signal-analyzer-header button:hover, .signal-analyzer-header button[aria-pressed="true"] {
  border-color: #596568;
  background: #263035;
  color: #fff;
}
.signal-analyzer-header .signal-analyzer-close { width: 30px; padding: 0; font-size: 20px; line-height: 1; }
.signal-analyzer-settings {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #343b3d;
  color: #b2bdbf;
}
.signal-analyzer-settings label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.signal-analyzer-settings select, .signal-analyzer-channel select {
  min-height: 27px;
  padding: 2px 6px;
  border: 1px solid #4a5658;
  border-radius: 3px;
  background: #1a2225;
  color: #e7eceb;
}
.signal-analyzer-state { margin-left: auto; color: #9dd66b; font: 600 10px var(--mono, monospace); }
.signal-analyzer.is-frozen .signal-analyzer-state { color: #f4ba57; }
.signal-analyzer-channels { padding: 4px 12px 10px; }
.signal-analyzer-channel { padding: 7px 0 8px; border-bottom: 1px solid #343b3d; }
.signal-analyzer-channel:last-child { border-bottom: 0; padding-bottom: 0; }
.signal-analyzer-channel-top { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.signal-analyzer-marker { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 2px; }
.signal-analyzer-channel select { flex: 1 1 auto; min-width: 0; max-width: 210px; }
.signal-analyzer-value { margin-left: auto; color: #a8b5b7; font: 11px var(--mono, monospace); white-space: nowrap; }
.signal-analyzer-copy {
  flex: 0 0 47px;
  min-height: 24px;
  padding: 2px 4px;
  border: 1px solid #4a5658;
  border-radius: 3px;
  background: #1a2225;
  color: #cbd4d4;
  cursor: pointer;
  font-size: 10px !important;
}
.signal-analyzer-copy:hover { border-color: #759198; background: #263035; color: #fff; }
.signal-analyzer-channel canvas {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 66px;
  border: 1px solid #283033;
  border-radius: 2px;
  background: #090e10;
}
@media (max-width: 600px) {
  .signal-analyzer { top: 64px; right: 12px; max-height: calc(100dvh - 76px); }
  .signal-analyzer-channel canvas { height: 58px; }
  .signal-analyzer-settings { gap: 8px; }
}