/* Performance Flyout — live metrics overlay */
#fpf-root {
  position: fixed;
  right: 14px;
  bottom: calc(var(--fsb-h, 44px) + 58px);
  width: min(420px, calc(100vw - 28px));
  max-height: min(520px, calc(100vh - 28px));
  z-index: 96000;
  display: none;
  flex-direction: column;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(63, 185, 80, 0.45);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(88, 166, 255, 0.12);
  font: 11px/1.35 ui-monospace, "JetBrains Mono", monospace;
  color: #e6edf3;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
#fpf-root.open { display: flex; }

.fpf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(90deg, rgba(35, 134, 54, 0.25), rgba(56, 139, 253, 0.12));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: move;
  user-select: none;
}
.fpf-head strong { color: #3fb950; font-size: 12px; }
.fpf-head .fpf-sub { color: #8b949e; flex: 1; }
.fpf-close {
  border: none; background: transparent; color: #8b949e; cursor: pointer; font-size: 16px; padding: 2px 6px;
}
.fpf-close:hover { color: #f85149; }

.fpf-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fpf-pill {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: 4px 6px;
  text-align: center;
}
.fpf-pill b { display: block; font-size: 13px; color: #58a6ff; }
.fpf-pill span { color: #8b949e; font-size: 9px; text-transform: uppercase; }

.fpf-canvas-row { padding: 4px 8px; }
.fpf-canvas-row label {
  display: block; font-size: 9px; color: #8b949e; text-transform: uppercase; margin-bottom: 2px;
}
.fpf-canvas-row canvas {
  width: 100%; height: 56px; display: block;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.fpf-wave canvas { height: 88px; }

.fpf-foot {
  padding: 4px 10px 8px;
  color: #6e7681;
  font-size: 9px;
  text-align: right;
}