/* --- BAM Viewer --- */
  .bam-viewer {
  }

  .bam-track {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 0;
    font-size: 12px;
  }

  .bam-track-num {
    width: 3ch;
    text-align: right;
    color: var(--text-muted);
    flex-shrink: 0;
    font-family: "Cascadia Code", "Consolas", monospace;
  }

  .bam-header {
    display: flex;
    gap: 4px;
    padding: 0 0 2px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border);
  }

  .bam-header-spacer {
    width: 3ch;
    flex-shrink: 0;
  }

  .bam-header-sectors {
    display: flex;
    gap: 1px;
  }

  .bam-header-num {
    width: 18px;
    text-align: center;
    font-size: 9px;
    color: var(--text-muted);
    font-family: "Cascadia Code", "Consolas", monospace;
  }

  .bam-sectors {
    display: flex;
    gap: 1px;
    flex-wrap: nowrap;
  }

  .bam-sector {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .bam-sector.free {
    background: var(--accent);
    opacity: 0.25;
  }

  .bam-sector.used {
    background: var(--accent);
  }

  .bam-sector.dir-free {
    background: var(--color-dir);
    opacity: 0.3;
  }

  .bam-sector.dir-used {
    background: var(--color-dir);
  }

  .bam-sector.error {
    background: var(--accent);
    outline: 2px solid var(--color-error);
    opacity: 1;
  }

  .bam-sector.orphan {
    background: var(--color-warn);
    opacity: 0.6;
  }

  .bam-legend-error {
    background: var(--accent) !important;
    outline: 2px solid var(--color-error);
  }

  .bam-legend-orphan {
    background: var(--color-warn) !important;
    opacity: 0.6;
  }

  .bam-track-num.error {
    color: var(--color-error);
  }

  .bam-compact-bar {
    flex: 1;
    height: 12px;
    background: var(--hover);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
  }
  .bam-compact-fill {
    height: 100%;
    display: block;
    border-radius: 2px;
    transition: width 0.1s;
  }
  .bam-compact-info {
    width: 7ch;
    text-align: right;
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  .bam-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .bam-tab {
    padding: 5px 14px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .bam-tab:hover { color: var(--text); }
  .bam-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  .bam-map-scroll {
    overflow: auto;
    max-height: calc(80vh - 140px);
    min-width: 0;
  }

  /* BAM viewer layout: warnings + tabs stay pinned while only the active
     tab's content scrolls, so the tab bar is always visible. */
  .bam-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .bam-layout > .bam-tabs {
    flex-shrink: 0;
  }
  .bam-tab-scroll {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }
  .modal-body:has(.bam-layout) {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
  }


  .bam-sector:hover {
    outline: 1px solid var(--text);
  }

  .bam-sector.error:hover {
    outline: 2px solid var(--text);
  }

  .bam-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0 4px;
    font-size: 11px;
    color: var(--text-muted);
  }

  .bam-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .bam-legend-box {
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }

  .bam-warnings {
    color: var(--color-error);
    margin: 0 0 8px;
    padding-left: 20px;
    font-size: 12px;
    list-style: none;
  }

  .bam-warnings .fa-circle-question {
    color: var(--color-warn);
  }

  /* --- Disk Map (radial/spiral) --- */
  .disk-map-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
  }

  .disk-map-canvas {
    cursor: crosshair;
  }