.reference-ecg-panel[hidden] { display: none; }
.library-head #referenceEcgOpenBtn { margin-left: auto; white-space: nowrap; }
.reference-ecg-panel {
  position: fixed;
  inset: 0;
  z-index: 320;
  overflow: auto;
  background: rgba(2, 10, 15, 0.94);
  padding: clamp(12px, 2vw, 28px);
}
.reference-ecg-dialog {
  max-width: 1320px;
  margin: auto;
  padding: clamp(16px, 2vw, 28px);
  border: 1px solid #345363;
  border-radius: 16px;
  background: #0c1b24;
  color: #e5f1f3;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.55);
}
.reference-ecg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.reference-ecg-header h2 { margin: 2px 0 14px; }
.reference-ecg-boundary {
  max-width: 95ch;
  padding: 12px 14px;
  border-left: 3px solid #82c9d3;
  background: #122c37;
  line-height: 1.5;
}
.reference-ecg-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0;
}
.reference-ecg-controls label { display: grid; gap: 6px; min-width: min(100%, 260px); font-weight: 600; }
.reference-ecg-controls select {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid #547181;
  border-radius: 7px;
  background: #152c37;
  color: #f4fbfc;
}
.reference-ecg-canvas-wrap { width: 100%; overflow-x: auto; }
#referenceEcgCanvas { display: block; width: 100%; border: 1px solid #355263; border-radius: 8px; }
.reference-ecg-readout, .reference-ecg-method, .reference-ecg-credit { line-height: 1.5; }
.reference-ecg-readout { font-weight: 600; }
.reference-ecg-ranges { margin: 12px 0; }
.reference-ecg-ranges summary { cursor: pointer; font-weight: 700; }
.reference-ecg-ranges table { width: min(100%, 560px); border-collapse: collapse; text-align: right; }
.reference-ecg-ranges caption { text-align: left; margin: 8px 0; color: #bdd1d8; }
.reference-ecg-ranges th, .reference-ecg-ranges td { padding: 5px 9px; border-bottom: 1px solid #345363; }
.reference-ecg-ranges th:first-child { text-align: left; }
.reference-ecg-method, .reference-ecg-credit { color: #bdd1d8; }
.reference-ecg-credit a { color: #9ed8e8; }
.reference-ecg-panel :focus-visible { outline: 3px solid #f7d877; outline-offset: 3px; }
@media (max-width: 620px) {
  .library-head:has(#referenceEcgOpenBtn) { flex-wrap: wrap; }
  .library-head #referenceEcgOpenBtn { margin-left: 0; }
  .reference-ecg-header { flex-direction: column; }
  .reference-ecg-controls label { width: 100%; }
}
