body:has(#modeModal[style*="flex"]) {
  overflow: hidden;
}

#modeModal {
  padding: 16px;
  box-sizing: border-box;
}

#modeModal .mode-modal-container {
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #242424;
}

#modeModal .modal-header,
#modeModal .modal-footer {
  flex-shrink: 0;
}

#modeModal .modal-body {
  overflow-y: auto;
  min-height: 0;
}

#modeModal .scale-options,
#modeModal .mode-options {
  gap: 12px;
}

#modeModal .radio-card:has(input:checked) {
  border-color: #0078d4;
  background: #eff6fc;
}

#modeModal .radio-card:focus-within {
  outline: 2px solid #0078d4;
  outline-offset: 2px;
}

#modeModal .radio-card .card-content p,
#modeModal #lblFilterHint {
  font-size: 13px !important;
  line-height: 1.6;
  color: #555 !important;
}

#modeModal .radio-card,
#modeModal .form-control {
  min-width: 0;
}

#modeModal button:disabled,
#modeModal select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#modeModal #customQCount {
  width: 80px !important;
  min-height: 36px;
}

@media (max-width: 600px) {
  #modeModal {
    padding: 8px;
  }

  #modeModal .scale-options,
  #modeModal .mode-options {
    display: grid;
    grid-template-columns: 1fr !important;
  }

  #modeModal .modal-header h3 {
    font-size: 17px;
    line-height: 1.5;
  }

  #modeModal #applyFiltersBtn {
    width: 100%;
  }
}